include "_i/1.h" ?>
Making links
include "_i/2.h" ?>
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:
- Link text will often catch the eye of people scanning your page.
- Search engines use this text as an indication of what the page linked to is all about. (This technique has been used successfully to create 'Google bombs').
- Avoid 'click here': Make your pages more scannable by thinking of something that describes the page content to use as your link label
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
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
- GC's webserver is case-sensitive, so create file- and folder- names all in lower-case.
- Don't use spaces in file- and folder- names. Otherwise you've got to make links that look like "....../my%20file.html"
include "_i/3.h" ?>