These pages contain information and examples that will help you understand and use hypertext markup language (html) with some basic tools, such as Notepad and WS_FTP (a file transfer protocol program) to create html pages and transfer them to your server space.

Site and File Structure

As you begin thinking about your own site, you'll want to consider the structure of the site as well as the structure of the directory where you store your files.

Sample site structure
Sample file structure

A few things to keep in mind:

Use lower case letters and numbers to name your files
DO NOT use any symbols or spaces in the file names (underscores and hyphens are acceptable)
Make sure all file names contain extensions and that the extensions indicate the type of file and that all extensions are correct
Keep your images together in one file—I always label mine "images." Particularly if you're using Macromedia Dreamweaver, you'll want to do the same.
Maintain the same site structure locally and remotely so that your relative links work accurately

Basic Tags

First lets look at a basic HTML page and the tags used to create it.

Try creating a basic page by copying the HTML code and pasting it into a Notepad document.

Select and copy the text beginning with <html> and ending with </html>.
Open Notepad (or any other plain text editing program—don't try this in a word processing program, such as Word.).
Paste the text into the new file.
Save the file as basic.html
Open a browser. Browse to the saved file and open it in the browser.

Create a second page and call it index.html. You'll link these together later.

Tips if you're already familiar with HTML

As development standards move from basic HTML to transitional XHTML, here are a few specifics to keep in mind. In XHTML:

Most tags are used in pairs. For example, to create a level one heading (the largest heading), place the tag <h1> in front of the words in your heading and the tag </h1> at the end of the words:
- <h1>Heading</h1>
Where tags are not used in pairs (for example, where a tag is used to insert an image), you use a space followed by a backslash to signal the end of the particular content:
- <img src= "blueflax.jpg" height="50" height="100" border="0" />
Where attributes include values, always put quotation marks around the values.
Use lower case for all the elements, attributes, and values.