This page features examples and code of navigation bars. It also uses tables, which are going to be covered in a future tutorial. For now, you can just copy and paste the code for an instant navigation bar.

You will, however, have to change a few things to make the bars work for you. In the code below:
Change the first <a href> tag to where you want the BACK button to link to.
Change the second <a href> tag to where you want the HOME button to link to.
Change the third <a href> tag to where you want the FORWARD button to link to.

The first one is for pages with light (ideally white) backgrounds.

And here's the code:

<!-- CUT HERE -->

<CENTER><TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0 > 
<TR>  <TD><A HREF="http://www.otal.umd.edu/~loginID"> 
<IMG SRC="http://www.otal.umd.edu/~vg/msf98/nav_bar/bow_back.gif"
ALT="Back" BORDER=0 HEIGHT=28 WIDTH=96></A></TD> 
<TD><A HREF="http://www.otal.umd.edu/~loginID">  <IMG
SRC="http://www.otal.umd.edu/~vg/msf98/nav_bar/bow_home.gif" ALT="Home"
BORDER=0 HEIGHT=28 WIDTH=81></A></TD>  <TD><A
HREF="http://www.otal.umd.edu/~loginID">  <IMG
SRC="http://www.otal.umd.edu/~vg/msf98/nav_bar/bow_forward.gif"
ALT="Forward" BORDER=0 HEIGHT=28 WIDTH=133></A></TD> 
</TR>  </TABLE>  </CENTER> 

<!-- END -->

This next block of code uses graphics that look better on pages with dark (ideally black) backgrounds.

And here's the code for it:

 

<!-- CUT HERE -->

<CENTER><TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0 >
<TR>
<TD><A HREF="http://www.otal.umd.edu/~loginID">
<IMG SRC="http://www.otal.umd.edu/~vg/msf98/nav_bar/wob_back.gif" ALT="Back" BORDER=0 HEIGHT=28 WIDTH=96></A></TD>
<TD><A HREF="http://www.otal.umd.edu/~loginID">
<IMG SRC="http://www.otal.umd.edu/~vg/msf98/nav_bar/wob_home.gif" ALT="Home" BORDER=0 HEIGHT=28 WIDTH=81></A></TD>
<TD><A HREF="http://www.otal.umd.edu/~loginID">
<IMG SRC="http://www.otal.umd.edu/~vg/msf98/nav_bar/wob_forward.gif" ALT="Forward" BORDER=0 HEIGHT=28 WIDTH=133></A></TD>
</TR>
</TABLE>
</CENTER>

<!-- END -->