Designing Webpages: Navigation

HOME
INTRODUCTION
LAYOUT
FORMAT
LINKS
LISTS
TABLES
BACKGROUNDS
IMAGES
NAVIGATION

NAVIGATION

... WITHIN A PAGE

If you have a long Webpage, it is helpful to be able to jump from the top to a section of the page, or from the middle to the top of the page. Use named anchors by copying and pasting the first portion of HTML code below to your Webpage (right after the <body> tag), and the second portion of HTML code to the end of your Webpage (just before the </body> tag). Please note the different syntax between the named anchor and the target; the link has a # while the target does not.

Exercise:

<a name="top"></a> Go to <a href="#bottom">the bottom</a> ... <a name="bottom"></a> Return to <a href="#top">the top</a>.

... BETWEEN PAGES

For a Website with multiple pages, the user should have a menu of links to those pages, preferably at the top or on the side of every page. This navigation menu or bar may have text of a particular color or be in a table with cells of a particular color. Consider the examples below:

Exercise:

<center> <font size="2" color="red"> Home | <a href="about.htm">About Us</a> | <a href="products.htm">Our Products</a> | <a href="contact.htm">Contact Us</a> </font> </center> <hr width="500" /> <center> <table bgcolor="blue" border="1" cellpadding="5" cellspacing="0"> <tr> <td><a href="first.htm"> <font color="#fefefe" size="+1" style="text-decoration: none"> Beginning</font></a> </td> <td bgcolor="#c0c0c0"><font color="#000000" size="+2"> This page</font></td> <td><a href="last.htm"> <font color="#fefefe" size="+1" style="text-decoration: none"> End</font></a></td> </tr> </table> </center>

This page was last updated 19 March 2004.