You are here:About>Computing & Technology>Web Design / HTML> HTML and XHTML> Beginning HTML Tutorials> Adding Content to a Notepad Created Web Page
About.comWeb Design / HTML

Adding Content to a Notepad Created Web Page

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

Writing the Navigation Section

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.

Previous | Next >>
Writing the Navigation Section
Writing the Navigation Section
Jennifer Kyrnin
  1. Writing the Navigation Section
  2. Saving the Navigation to a Template File
  3. Adding a Section Header
  4. Adding an Image and Paragraph to the Main Section
  5. But My Page Doesn't Look Right!

Previous | Next >>

 All Topics | Email Article | Print this Page | |
Advertising Info | News & Events | Work at About | SiteMap | Reprints | HelpOur Story | Be a Guide
User Agreement | Ethics Policy | Patent Info. | Privacy Policy©2008 About, Inc., A part of The New York Times Company. All rights reserved.