1. Home
  2. Computing & Technology
  3. Web Design / HTML

Adding Content to a Notepad Created Web Page

By , About.com Guide

1 of 5

Writing the Navigation Section

Writing the Navigation Section

Writing the Navigation Section

Jennifer Kyrnin

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.

Explore Web Design / HTML
About.com Special Features

Holiday Central

What to eat, where to go, fun things to do and how to save money on the perfect gifts. More >

Family Tech Center

Stay connected and entertained with reviews on tips on the latest HDTVs, cellphones and more. More >

  1. Home
  2. Computing & Technology
  3. Web Design / HTML
  4. HTML and XHTML
  5. Beginning HTML Tutorials
  6. Adding Content to a Notepad Created Web Page>

©2009 About.com, a part of The New York Times Company.

All rights reserved.