Making the Connection-Linking with HTML

Links are connections between a section of one document and other information like: other parts of your document, another file, images, movies, sound, and other things. A Link allows you to click on a group of words or pictures, and go to something different. On the WWW a Link is shown by underlined and/or blue text. Hyperlinks you have viewed are shown in red. (Actually the colors can be different depending on how the WWW browser is set-up, but blue and red are the most common colors used for UN and viewed hyperlinks.

A Link is created by the HTML tag <A HREF="File_URL">. Between this tag and the end tag </A> is the Anchor for the Link. This Anchor will be the part of the document that can be clicked on to read the URL specified. The Anchor can be anything that shows up in the document part of the screen; images, or text.

This is an example of a text to text Link:
The File_URL will be a text file, and the Link will be to a document ending with a .html.

<html>
<head>
<title>Link Example 1</title>
</head>
<body>
This part of the text will be before the Link.
<A HREF="test.html"> This text will Link to a document called test.html</A>.
This text will be after the closing of the Link.
</body>
</html>

A Formatted Text to Text Link

For the File_URL here, I have used test.html. This will work because the two files are in the same directory. When you see this it is called a Relative Link. If the file is not in a related directory you would have to use the full URL (or an Absolute link) like http:/www.ncsa.uiuc.edu/General/Training/HTMLIntro/test.html. A Relative Link is useful if you are going to be moving the group of files from one server to another, or to other places on your own server. An Absolute Link will work no matter where you move the file containing it, but will not work if the linked-to file is moved.
Moving on, we find that you can also Link from an image to text.
Here is an example:

<html>
<head>
<title>Link Example 2</title>
</head>
<body>
This part of the text is before the image and Link.
<A HREF="text.html"><IMG ALT=Icon SRC=photo.sm.gif> </A>
This text will be after the closing of the Link.
</body>
</html>

A Formatted Image to Text Link

Here instead of using text as the anchor for the Link we have used the image tag.
Next, we will look at how to Link to things other than text...
You can Link to many different things using NCSA Mosaic. In order to make the Link work the items must end with proper file extensions.
This is the list of basic extensions and what file types they signify.
Now we are going to show a quick example of linking to an image.
Example:

<html>
<head>
<title>Link Example 3</title>
</head>
<body>
This part of the text is before the image and Link.
<A HREF="photo.lg.gif"><IMG ALT=Icon SRC=photo.gif> </A>
This text will be after the closing of the Link.
</body>
</html>

A Formatted Image to Image Link

If you don't want the image to have the blue box around it you may set the bordeer within the image to 0, or you may make it larger than the one pixel default. The tag would then look like this:
<IMG SRC=photo.gif BORDER=0>

As you can see links are not difficult and they add a lot to your documents. You can also make links to other places within a document, or to specific parts of documents. Anchor Links, and how to use them.
Now that you have learned a bit about what goes into HTML, the next section covers how to write HTML that is useful and easily understood.

The National Center for Supercomputing Applications
University of Illinois at Urbana-Champaign

[email protected]

Making the Connection-Linking with HTML

Last modified: June 19, 1997