(9/28) ADDED AN EXAMPLE OF AN ANCHOR LINK
Step 6 -- Links to other pages.
Hypertext
Finally, the hypertext part of hypertext markup language. Everyone knows about links since that's what one does all the time, move from page to page as we scan through online news or visit YouTube. To put a link into your pages, use the <a> tag like this:
<a href = "http://www.mtholyoke.edu/index.html" title = "Mount Holyoke College main web page">MHC</a>
The opening and closing <a> tags surround the text which will serve as the link. The key attribute in the <a> tag is the hypertext reference
to the URL or Uniform Resource Locator (the web page designation). A complete address like the one above tells you that http, or hypertext
transfer protocol, is being used, as distinct, say, from ftp, or file transfer protocol;
that the server is the www server at mtholyoke.edu; and the file to be retrieved
and displayed is called index.html. If the file we wanted was in a subfolder called StudyAbroad
and the file was called FranceIntro.html we would have written
href =
"http://www.mtholyoke.edu/StudyAbroad/FranceIntro.html"
to completely specify the path to the file.
The filenames index.html and index.htm have special advantages. If you expect users to knows your website location but not the names of your base files, use one of these two names for the file. The user simply writes http://www.mtholyoke.edu/, for example, and the browser grabs the default file index.html or index.htm.
The title in the <a> tag is required in HTML4.0 and XHTML. It is used by browsers for visually impaired users so that a description of the link can be spoken.
You may see the URL referred to as a URI (Universal Resource Identifier) but look at this document to see if you can decide which is preferred.
Relative file specification
Imagine building a huge web site and then moving to a new server. If absolute addresses like those described link the various pages in the file, then every href on the site would need to be changed. Instead of absolute addresses to link pages on the site, use relative addresses. If another page is in the same folder href = "page2.html" would work (assuming your other file is called page2.html). If the file is in a subfolder of the file holding the current page, the subfolder name has to be included as in href = "StudyAbroad/FranceIntro.html". A file can link to another file in a parent folder with something like as in href = "../FranceIntro.html" where the double dots .. are what you use to indicate the parent folder of the current folder. If we were in a subfolder and needed to go up one level, then down into a folder called Leaves, we could write href = "../Leaves/YearOff.html".
The ugly blue underline
Style again! Links were once routinely identifiable as blue underlined text but not so much anymore since a few simple statements can change the appearance of the link, the link as the mouse hovers over it, and the link once it has been visited. These statements in a stylesheet would make the link red, then change to bright red as you hover over it, then to grey once you have visited the site:
a:link{
font-weight: bold;
text-decoration: none;
color:#990000;
}
a:hover {
font-weight: bold;
text-decoration: none;
color:#ff0000;
}
a:visited {
font-weight: bold;
text-decoration: none;
color:#999999
}
Anchors
The <a> in the link tag actually stands for anchor. They are more flexible than described above in that one can create multiple anchor points in a document, not just the top of the page. For example, you can review relative file links by clicking here and being sent back to that section. How is this done? Pretty easy. First, define the anchor point in this document with:
<a id="relative">Relative file specification</a>
where the name relative was given to the anchor. To link to that point from somewhere in the same document, just insert the <a> tag as in:
<a href="#relative">here</a>
but this time with href rather than id. So, id creates the anchor, href uses it. If you are trying to reach this anchor in this document from another document in the same folder, use something like:
<a href="step6.html#relative">here</a>
From somewhere else entirely, the entire URL would be needed.
