From Jennifer Kyrnin,
Your Guide to Web Design / HTML.
FREE Newsletter. Sign Up Now!

The navigation division will be on every page of your Web site, so it's a good idea to make sure that you have all the separate files you might need, such as the image I have of Shasta and McKinley, already in your images folder. Then you can reference those files with the relative path "images/filename.gif".

Copy the following HTML into the <div id="nav"> </div> element:

<img src="images/header_shasta_mckinley.jpg" width="225" height="400" alt="Shasta and McKinley" />

This will place a narrow image at the top of the navigation section. More about the img element. To add in your navigation links, add in:

<ul>
<li><a href="index.html">Home</a></li>
<li><a href="shed.html">Painting a Shed</a></li>
<li><a href="house.html">Our House</a></li>
<li><a href="pets.html">McKinley and Other Pets</a></li>
</ul>

Note that I'm using an unordered list to define the different elements. This allows me to style the list however I want. More about the unordered list element. Finally, don't forget to add in a copyright notice:

<p class="footer">
© 2005 <a href="http://www.kyrnin.com/">Kyrnin Design</a> </p>

This paragraph is stored in a <p> </p> element. This is the element you will use most often to define the different paragraphs of your text. This paragraph I gave a special style of "footer" so that I could make it look different from the surrounding text. More about the paragraph element.

Note that I used the code © to display the copyright symbol. More about special characters.