Making links


We use the <a>...</a> tagset (think of a link anchor) to make hypertext links, like so...
<a href="http://www.goshen.edu/academics"
 title="lists all programs of study at Goshen College">Academics
 at Goshen College</a>
href -- the URL of the page you want to jump to.

title -- extra information about the location linked to that shows up as a "tool-tip" in many web browsers.

The text 'Academics at Goshen College' between <a> and </a> is called the link label or link text and is worth putting some thought into:

You can put an image in between <a href="somewhere">...</a> tags, and then you click on the image (instead of text).

Links (and URLs) don't have to be to web pages

You can link to any file that you place on a webserver: A MS-Word file, a spreadsheet, a .jpg image, a .pdf document, an .mp3 file, etc, etc, etc.

Typically you might want to indicate when you're linking to a non-web page if it's possible that folks might not have the plugin to view it, or any page that might require a while to load like this May 2007-08 course schedule (pdf).

Linking to a particular location in a page

Here's how it works within a page called "animals.html":
<p>See below for more information
   <a href="#rats">about rats</a></p>
.
.
.
<h3 id="rats">All about rats</h3>
 
<p>These much maligned rodents....</p>

Another page could link to <a href="animals.html#rats">rat information</a>.

Relative & absolute links

rblinks.jpg
With the files located for 'jillgc' as sketched out in class, you can get from one file to the other by:

[A link in papers.html]:
<a href="sub/rollerblades.html">See my rollerblade paper</a>
<a href="http:://www.goshen.edu/~jillgc/sub/rollerblades.html">See my rollerplade paper</a>

[A link in rollerblades.html]
<a href="../papers.html">All my papers</a>
<a href="http://www.goshen.edu/~jillgc/papers.html">All my papers</a>

As seen above the text in the url: "../" will go up a folder in the directory. If the designer wants to go up several directories, They can type it consecutively until the file name or folder name is necessary to point to the specific folder.

For example, if there is a file in the folder ..sub1(file.html), and you are linking from a page in ..sub1/sub2/sub3/ you can type:
<a href="../../file.html">link</a>

In each case the first link shows how to make the relative link, and the second uses an absolute address.

Troubleshooting -- how to avoid ever having to do it