ANCHOR

The "anchor" tag is the "hyper" in "hypertext". It is the key to being able to create an instant link to another page.

There are a large number of parameters that can be used with the anchor tag. Here are some of the most common:

1. Basic "relative" link:

<a href="name.html">Click Here!</a>

This is an example of a "relative" link. The "a" is the actual anchor tag. The "href" parameter allows the link to jump to any other html file in your home directory.

2. more advanced "relative" link:

<a href="dir-name/name.html">Click Here!</a>

Much like the previous example; this relative link has a directory name at the start. Note that spaces are not allowed in either file or directory names!

Once you are in a sub-directory and wish to link back to your www directory, you will need to tell the browser to go back to the parent directory. To do this, use the following relative link:

<a href="../name.html">Click Here!</a>

If you are linking back to your index.html, you could do it with the following link:

<a href="../">Click Here!</a>

You could also accomplish the same thing with an absolute link:

<a href="http://www.acrss.org/~username">Click Here!</a>

3. This is an example of an "absolute" link.

<a href="http://www.cnn.com">Click Here!</a>

Absolute links always begin with "http://"

4. The example in # 1 above, can be rewritten as an absolute link:

<a href="http://www.acrss.org/~username/name.html">Click Here!</a>

Example 1 rewritten as an absolute link

5. Links to someone else's home directory:

<a href="http://www.acrss.org/~username">Go to "username's" page!</a>

This is an example of an "absolute" link that links to some usernames page on our system.

6. A relative linked version of 5 above:

<a href="/~username">Go to "username's" page!</a>

This is an example of a "relative" link that does the same thing as the absolute link above. Besides taking less time to type, it has no other advantage.

7. A thumbnail image that links to a larger image:

<a href="name.png"><img src="name.jpg"></a>

This is an example of displaying an image (img tag) that links to another image. Typically this is used to have a thumbnail displayed that links to a full sized image. In this case the thumbnail is a .jpg type image and the full size is a png. It does not matter that the 2 are different since one simply links to the other. Of course, they could be of the same type as well!




Return to main HTML page