In This Section
Text Links
The HTML
Relative and Absolute addresses
Examples
Dressing up text links
Image Links
The HTML
Forgotten Image HTML
Arranging Images
Leaving images in guestbooks: cautions
Rollovers & Image Maps
Pull-down menu (Javascript)

What's on the Menu?

Giving your visitors a clear way to navigate between the pages of your site is important to your traffic. What are your options in installing Road Signs?

Disclaimer

There are lots of places where you can learn the basics of how to make links. This tutorial is a lot more detailed, including: how to make your links accessible to more visitors; how to make text links look fancier; how to make graphic links load faster. I've tried not to make it too intimidating. :-)

Text Link

This is the first and basic link.

The advantages of text links are:
  1. They are simple.
  2. They don't take a lot of file space, so your page loads faster.
  3. They are often the easiest link for disabled or tech-limited visitors to view and use.

The Basic HTML: <A HREF="URL">Click here</A>

What the HTML Means
A "This is an Address command."
HREF= "This is the address referred to."
</A> Closing tag: "The address command is ended."

Optional HTML: <A HREF="URL" TARGET="_blank" TITLE="Where you're going">Click here</A>

What the optional HTML Means
TARGET= "This is where to open the page." The most frequently used options are:
_blank In a separate page
_top Taking all of this page -- breaking out of frames
frame name If you are using frames, you need to include the name of the frame the file is opening in
_self If you are using frames, and the file will be opening in this same frame
TITLE= "Show this text when the mouse runs over the link." Works in Internet Explorer.

Relative and Absolute Links

If you are linking to a page on your own website, you can use a "relative" link: where the file is relative to the page with the link in it.

Example: from this page, the image file for the background border is "images/lace-border.jpg".
Click here to see the image
Code for that: <a href="image/lace-border.jpg" target="_blank">Click here to see the image</a>

If you are linking to a page off of your own website (called an "external link") you must use an "absolute" link, spelling out the full address of the file, including the protocol prefix http://.

This includes the links you place in guestbooks.

Example: My guestbook
Code for that: <a href="http://books.dreambook.com/anitra/" target="_blank">My guestbook</a>

Text Link Examples

Many sites provide navigation through a series of related pages by "Back", "Home", and "Next" links.

Sample
|| Back | Home | Next ||

Code
|| <a href="previous_page.html">Back</a> | <a href="index.html">Home</a> | <a href="next.html">Next</a> ||

The brackets -- | -- are useful aids. Another useful aid is the optional TITLE tag described earlier.

|| <a href="previous_page.html" title="Family photographs">Back</a> | <a href="index.html" title="Photograph album list">Home</a> | <a href="next.html" title="Flower photographs">Back</a> ||

If you are listing many text links, you might put them in a table, or in a "definition list".

Back
My family photographs.

<dl>
<dt>Back</dt> <dd>My family photographs.</dd>

Dressing Up Text Links

There are several ways to make your links look fancier without sacrificing the speed of text links.

Font: You can make text links look special with special fonts. If you want to make sure that all your visitors see the links the same way, however, use fonts that are standard on most PCs. (In graphic links, you can use any font you want.)

Browser NewsRresources: Fonts, includes the most common, and those similar.

Although these fonts are popular, that doesn't mean everyone has them. You might not have them all; I don't have them all. You can specify a string of fonts in your font tag. If your visitor's sytem doesn't have the first, it will try the second, on down the line. The final specification should be for a category: serif, sans-serif, cursive, fantasy, monospace. Your visitor's browser will use whatever they have configured for the default font in that category.

CSS: Most browsers can use Style Sheets. You can make a Style Sheet section in your header and cause your links to change size, font, color, and font weight (light, normal, bold) not only when clicked (alink) or expired (vlink) but also when the cursor is over the link (hover).

The CSS for this page:
<style type="text/css">
<!--
body { font-family: Georgia, Palatino, serif; }
a { font-family: Impact, Charcoal, Geneva, sans-serif; font-weight: normal; }
a:link { color: #0000FF; }
a:alink { color: #FF0000; }
a:vlink { color: #FF0099; }
a:hover { color: #000099; }
H1 {font-family: Charcoal, Verdana, ; }
H2 {font-family: Charcoal, Verdana; }
H3 {font-family: Charcoal, Verdana; }
-->
</style>

Image Links

Image links are the most popular way of coding navigation. They look attractive and may be more interesting and inviting to visitors. With careful design, they can be as accessible as text links and not slow down your page.

The HTML

You've probably seen the bare-bones HTML for an image link already:
<IMG SRC="URL">
What the HTML Means
IMG "This is an Image command."
HREF= "This is the address (source) of the image."

The image command is one of the rare HTML commands that has no closing tag.

Find the Missing HTML!

If you already know what's missing in the above HTML, serve yourself Virtual Chocolate.

Have you ever seen a web page jump around as the images loaded? Have you gotten a cup of coffee and read the paper while waiting for a page to load? Have you seen pages full of little red Xs? All these problems can be avoided by use of the missing HTML in the image tag!

A page will load more smoothly and appear to load faster if you include "width" and "height" attributes in your image tag. This lets the browser know where to place text around the image, even before the image has completely loaded. Guestbook owners that you gift with images will also appreciate you including the width and height! :-)

One fast way to learn the width and height of the image is to open it in a separate page in your browser. The image name, width and height will display in the title bar.

Another important, and often missing, element is the "alt" attribute. This provides alternate text that will display if the image doesn't. There are a number of advantages to using the "alt" tag:
  1. If your image is missing for any reason (including the most frequent one, you mispelled the file name) your visitor will at least see some information indicating what was supposed to be there.
  2. That text also displays for visitors who surf with "images off" (yes, they do!) and while your images are loading for visitors surfing "images on".
  3. On some browsers, that text displays when the mouse travels over the image, providing the visitor more information.
  4. Some visitors use speech software that reads webpages to them; without the "alt" tags, they may never know your pictures are there.
  5. If all that isn't enough -- alt tags will help you with search engines! Make sure that you use your keywords in your alt tags. You do use graphics that are relevant to your page content, don't you? :-)

A more fully defined image link:
<a href="#text" title="Text links" target="_blank"><img src="images/angel-back.gif" width="62" height="116" alt="Back"></a>
Try it: Back
There is also the "alignment" attribute:
align="left" puts the image to the left of any other text or images after it.
align="right" puts the image to the right of any other text or images after it.
align="top" aligns what follows with the top of the image.
align="middle" aligns what follows with the middle of the image.
align="bottom" aligns what follows with the bottom of the image.

Links in a Table

If you are using "Back", "Home", "Next" images, you probably want them arranged nicely next to each other. There are two ways to do this:

You can simply use an alignment tag. "Middle" works well.

Back Home Next

<p align="center">
<a href="#text" title="text links" target="_blank"><img src="images/angel-back.gif" width="62" height="116" align="middle" border="0" alt="Back"></a>
<a href="navigation.html" title="Top of page" target="_blank"><img src="images/angel-home.gif" width="74" height="126" align="middle" border="0" alt="Home"></a>
<a href="#script" title="Form menu"><img src="images/angel-next.gif" width="62" height="116" align="middle" border="0" alt="Next"></a>
</p>

A more popular method is to use a table.

Tables are another case where bare-bones code works, but additional tags work better.

Back Home Next

Recommended table code for the above:

<table summary="Navigation Angels" width="30%" border="0" cellspacing="0" cellpadding="5" align="center">
<tr align="center" valign="middle">
<td>
<a href="#text" title="text links" target="_blank"><img src="images/angel-back.gif" width="62" height="116" align="middle" border="0" alt="Back"></a>
</td>
<td>
<a href="navigation.html" title="Top of page" target="_blank"><img src="images/angel-home.gif" width="74" height="126" align="middle" border="0" alt="Home"></a>
</td>
<td>
<a href="#script" title="Form menu"><img src="images/angel-next.gif" width="62" height="116" align="middle" border="0" alt="Next"></a>
</td>
</tr>
</table>

Be sure to close your tags in a table, or your Netscape visitors won't see the table at all!

Guestbook Cautions

Have you ever left a lovely calling card in someone's guestbook, gone back, and seen an ugly red X or some other substitute? What's up with that?

Two things can cause this. One is that you did not fully define the URL of the image. For images left in guestbooks, you must use the absolute address.

The most common cause is that your image is stored on a free web space server, like Tripod, and almost all free web servers no longer allow "remote linking" -- calling an image, or any other file besides an HTML file, from any location besides your the web site where it is stored.

The only sure way to be able to leave "calling cards" is to store them on paid web space. Even then, check first: some paid servers do not allow remote linking, either.

If you do not have paid web space, see if a friend will let you use some of theirs, just for calling cards. :-)

Rollovers

A popular effect with image links is the "rollover". This is like the "hover" effect created with text links by CSS: the image changes according to the mouse actions. You can have a different image for normal state, mouseover, mouse moving away, mouse down, mouse click, and mouse up, although most people use only 2 or maybe 3 of these.

It takes more than HTML to create the rollover effect. It used to be done only by Javascript, but now you have several options.

Image Maps

You can even create multiple links to one image, mapping each link to a separate area of the image. If you are interested in doing that, here's a Webmonkey tutorial.

Pull-Down Menu

There are two elements to a pull-down menu. This part must go into your header section...

<script language="javascript" type="text/javascript">
<!--
function formHandler(menu){
var URL =
document.menu.site.options[document.menu.site.selectedIndex].value; window.location.href = URL;
}
-->
</script>

... in order for this section in the body of your page to work:

<form name="menu">
<select name="site" size=1>
<option value="">Go to....
<option value="http://seangels.org">Home</option>
<option value="http://http://seangels.org/membersonly/committees.html">Committees</option>
<option value="http://seangels.org/membersonly/changeinfo.htm">Change of Info</option>
<option value="http://seangels.org/membersonly/memberrules.htm">Member Rules</option>
</select>
<input type="button" value="GO" onClick="javascript:formHandler(this)">
</form>

Change, add or delete options as you need. You may also change the form and select names, but if you change them in the body, you must also change them in the javascript in your header.

You can even use an image for a submit button on your form.

Just change the last line to:

<input type="image" src="images/angel-home.gif" width="74" height="126" align="middle" border="0" alt="Angel" onClick="javascript:formHandler(this)">


THE END! for now :-)

Send any comments or questions to Angel Anitra (aka NetMama :-))