Part 11: Linking
An extremely useful function of HTML is its ability to have links to other documents --whether they be your own or someone else's. The tag used throughout links is <A> for anchor, but you will also need to use parameters.
We will begin with the simple case of linking to making links between documents in your home-page. For this, we will use relative pathnames (rather than absolute, which will be discussed shortly). With a relative link, you do not need to insert the entire URL for the document you are linking to--you only need to insert the document name with the relative pathname from the current document. See the example for the basic outline:
<A HREF="linked-doc.html">Linked Text</A>
Put the name of the document which is to be linked to in place of "linked-doc.html" and insert text which shall be the linked text instead of "Linked Text". If the document which you wish to link to is in a sub-folder of that of the current document, the basic format of the link is still the same, but you must include the relative pathname:
<A HREF="subfolder-name/linked-doc.html">Linked Text</A>
Also, if the document you wished to link to was in the folder above the one which holds the current document, use the following:
<A HREF="../linked-doc.html">Linked Text</A>
If possible, you generally want to use relative links. There is less to type, but the main reason for using relative links is that if you decide to move an entire directory, you do not need to change most of the links, but if you use absolute links, you will need to change most, if not all, of the links so that they work.
So what are absolute links? An absolute link is one where you use the entire URL to specify the link to a document. It looks like the following:
<A HREF="http://www-ssg.sr.unh.edu">Experimental Space Plasma Group</A>
This would be a link to our research group's web page. You will need to use an absolute link anytime you are linking to a site outside of your own. You may also link to other documents that are not located on a World Wide Web server, which the "http" attachment does, to link to the following types of servers, substitute the given attachment for "http" in the given example:
Part 11C: Using a Picture as a Link
Links do not have to be from text, a picture can be a link as well. We do this by replacing the text link with coding to display a picture. See the example:
<A HREF="http://www-ssg.sr.unh.edu"> <IMG SRC="topespg.jpg" ALT="Experimental Space Plasma Group" HEIGHT=29 WIDTH=400></A>
When displayed, the Experimtal Space Plasma Group image will now act as a link, transporting the user to the groups web-site when she clicks on it:
This image has another tag, setting the border to zero. Most professionals now leave off the borders, as they can detract from the pages` appearance; here is what that image would look like with the default border:
As you can see, it does not look quite as integrated with the page design that way. If you prefer the look of a border, however, you can also set the width of the border in pixels with the following tag:
<IMG SRC="image.gif" border="#">
Part 11D: Links Within a Document (Anchoring)
Another useful function of links is to link to specific section within one of your documents. To do this, we use anchors. First, we will go over how to place an anchor in a document (the place where you want links to link to). Choose the text (or image) where you want the user to be linked to, then add the anchor, as in this example:
<A NAME="TEAM">Research Team</A>
In this example, the anchor name is "TEAM" and the text to be linked to (within the document) is Research Team. Now we must add a link somewhere else in this document (research-desc.html) to go to this anchor. For, example, we may have a table of contents so that the user may navigate through the page easier than scrolling to find what she wants. We add a link to an anchor in the following way:
Learn about those involved with the project in our <A HREF="#TEAM">Research Team section</A>.
You may also want to link to a specific place in a document from a different document. This is done in the same way as linking to a different document, but we must add the # and anchor name.
Learn about those involved with the project in our <A HREF="research-desc.html #TEAM">Research Team section</A>.
In general, it is not good to have very long documents that users will have to scroll through. Therefore, you would probably want to break the document up into separate, smaller documents, as has been done with this document. This makes printing more difficult though, since the user now has to print out many more short documents. Using anchors can alleviate the problem of the user needing to scroll through large portions of text to find what she needs, but the document is allowed to stay together for ease of printing.
Part 11E: Including Your e-mail Address
One may also place her e-mail address on her page as a link so that a user may easily send e-mail. This is done in the following manner:
<A HREF="mailto:youraddress@host">your name</A>
Replace the field "youraddress@host" with your e-mail address" and "your name" with your name. The following an example with an actual address:
<A HREF="jan.heirtzler@unh.edu">Jan Heirtzler</A>
which will display as:
Jan Heirtzler
On to Part 12: Tables