Building your Site
The Basics
When preparing to code your website, it is essential that you first understand the difference between HTML (hypertext markup language) and CSS (cascading style sheets). HTML can be understood as the framework or base for your site: information regarding its structure is contained in the HTML. CSS, on the other hand, is used for design elements to style the website. It is best practice to prepare the two in separate files and then link your CSS file to the HTML file (this will be covered below).HTML
Preparing textTo code with HTML, you will need to prepare your text in a text editing program, such as Notepad++ for Windows or TextWrangler for Mac. The text below is the initial text that should be used in setting up an HTML file:
Tags
Tags are used to tell the text in your HTML file what its purpose is or how it should be formatted. For example, the
tag specifies that the text connected to it will be the title of the webpage and will appear in the web browser. Tags are always enclosed in angle brackets (<>) and must always be closed using a forward slash, with the text fitting between the tag and closing tag.
Example: If you want the title of your webpage to be "A cool webpage," use the
tag to indicate this as follows:
Below for quick reference is a list of the most commonly used tags; see the Resources section at the end of this page for a more extensive list of tags.
Transferring your HTML file to your server
Once you have prepared and saved your HTML file, you will need to transfer it to your server using a file transfer program, such as WinSCP for Windows or FileZilla for Mac. Transferring the file with your code to the server is what enables your designs to appear online. You will need to know the Host Name and Port Number for your server, as well as your login information. Once you are logged in, drag your HTML file over to the server. Be sure that your file is in the public folder (or one of its subfolders). If you file is not placed in this public folder, your coding will not be visible online.
CSS
You can prepare your CSS file in the same text editor you use for your HTML file, but be sure to save it as a CSS file instead of HTML. CSS commands are enclosed in braces ({}) and all commands for one item should be placed in the same pair of braces and separated by a semicolon. For example, the styling for your level 5 header (h5) might read:
Below for quick reference is a list of essential CSS properties; see the Resources section for more detailed information about properties.
Linking your CSS file to your HTML file
As we covered earlier, it is best to keep separate files for HTML structure and CSS design work. Once you have completed both files, link to the CSS file within your HTML file by placing the code below in the head section of your HTML file:
Note: As with your HTML file, you'll need to drag the CSS file over to the server using your file transfer program, and the CSS file will also need to be in the public folder.