One of the great potentials of the Web is linking information together in unique ways. You can use words or images as hyperlinks. Text shows that it's linked by being underlined and usually of a different color. An image will have a colored border around it, unless you specify border=0 in the img tag. Either way, the mouse pointer changes when it passes over a link.

The basic link tag is <A> (for Anchor). This is a container tag, and whatever you put between the opening and closing tags is the link. It can contain other style tags, and takes the following attributes.

HREF
Stands for HyperREFerence, and is where you specify where you want the link to take the viewer. The value is case sensitive, and can be either an absolute reference to the whole URL, or a relative reference to a file or image in the same directory/folder as the webpage it's on.
NAME
Used to make jump points within a page.



<A href="../index.html"> A text link </a> A text link
<a href="../index.html"> <img src="hyper.gif" height=144 width=144 alt="An Image Link"> </a> An Image Link


If you are using an image as a link, it is especially important to include the ALT attribute to the IMG tag, since if your viewer is using a text-only browser they will have no other way to know that the image is a link or what it leads to. Also, when using an image for a link you should put the A tag and IMG tag all on the same line in the source code, because there's a small bug in Netscape that will include a simgle underlined space after the image if the two tags are on different lines.

A word about absolute and relative An Example of Directory Structure pathnames. An absolute pathname gives the complete URL, "http://www.domain.com/folder/file.html". A relative pathname gives the file address in relation to the file the reference is in. If you have a folder named "Pages", containing the files "index.html" and "one.html" you can link from "index.html" to "one.html" just by refering to "one.html". If the folder contains a sub-folder named "Graphics", the relative path would be "Graphics/image1.jpg". If the Pages folder is itself a sub-folder, say of a folder named "Mysite", and Mysite contains another folder named "Pictures", and you want to link from a file in Pages to an image in Pictures, the path is "../Pictures/image2.jpg". The two dots tell the computer to go up one level in the file structure, then down into the Pictures folder and look there for image2.jpg. When pointing to an anchor in the same page, the HREF should start with #, not include the file extension, and must exactly match the case of the NAME it refers to (ie: HREF="#aname").

So in this image, the relative pathnames you would use in a hyperlink from the "index.html" file would be:

Confused yet?




previous next contents