Link Demo

Links and Thumbnail Images

Hyperlinks can take you to a specific place in the current document that you are viewing or to a completely new file. The following HTML code places a hyperlink in a document that takes you to another part of the same document when it is clicked:

<A HREF="#gotonewplace">This link takes you down this page</A> to a new place.

This link takes you down this page to a new place.


You are now at a new place.

This new place is specified by the following code:

<A NAME="gotonewplace">You are now at a new place</A>.

Note that the # sign is used to specify an internal link in the HREF designation. The # sign is not used as part of the NAME designation.


The following HTML code places a hyperlink in a document:

<A HREF="mica.jpg">Link to a picture of Mica the cat. (26KB)</A>

Link to a picture of Mica the cat. (26KB)

For large images, it is a good practice to include the size of the image file, or to use a thumbnail image as the link:

<A HREF="mica.jpg"><IMG SRC="micasmall.jpg" WIDTH="78" HEIGHT="45" ALT="Picture of Mica the cat."></A>

Picture of Mica the cat.

Note that without specifying attributes otherwise in the IMG tag, the hyperlinked image has by default a colored border (blue if unvisited and purple if visited).


The above hyperlinks assume that the target file is in the same directory as the current document. To refer to files in other locations, the HREF attribute must include the computer name and/or directory path. For example:

<A HREF="graphics/mica.jpg">Mica the cat. (26KB)</A>
Mica the cat. (26KB)
In this case the target file is in a subdirectory called graphics relative to the current file.

<A HREF="../../">Return to the Start Page.</A>
Return to the Start Page.
<A HREF="/chem-ed/CHP/workshops/index.html">Return to the Start Page.</A>
Return to the Start Page.
Both of these examples link to a file two levels up from the current file. The .. means go up one level. The / means start from the root directory of the webserver (not the same as the computer's root directory). Relative links are most useful for navigating between groups of files that will always maintain the same relative directory structure.


Return to the Workshop Index.

  Copyright © 1998-2000 by Brian M. Tissue, all rights reserved.