KCL • CCH • Minor programme • AV1000 • Electronic communications and publishing
Hypertextual links are navigational devices: they allow you as author to direct your reader to particular places, which means to declare that there are specific places to which to go as well as to take him or her there. Links are a primary means of indicating the structure of your document, hence they comprise a preliminary kind of communication: before your reader begins to read or look at what you have to say, he or she can already get an idea of what to expect. Your reader's attention is a precious thing, easily lost to a more compelling attraction through mistakes in the design of your document. Reassuring him or her that your document in fact has a structure and demonstrating what that structure is can be an effective way of keeping it. One complaint of online readers is being “lost in hyperspace”. Links can be used like road-signs, even (as you will see) like a map.
On any given page there are three kinds of structural links possible:
It can be valuable (depending on the nature and purpose of the site) to visually distinguish these three kinds of link so that a reader can tell them apart at a glance. There are no established conventions for doing this, so you are entirely free to make your own. The more important matter is that within your site you are consistent in how you indicate these kinds. Note that a list of links, which will likely be to other sites, already marks them off; note as well that a TOC at the top of each page does the same for internal links. If then you distinguish links within your site graphically, e.g. by enclosing them within square brackets or using a different colour, you may have done enough.
Annotating links also helps. As a matter of policy never give a list of links without some annotation explaining what the reader can expect. This annotation can usually be derived from the page itself.
Though the blue-and-underlined appearance of HTML links is the
default it's not a requirement; you can use the link, alink, and vlink
attributes on the a or body elements to change the colors, and
saying style="text-decoration: none" will remove
the underlining. (Some web browsers also give you the option of
turning off underlining globally for all links.) So it's possible
to distinguish links, and different types of links, in many more ways
than basic HTML does. Working against the potential for making a
richer user interface is the problem that readers may not want to take
the time to learn its conventions.
So far you have dealt with links (hypertextual anchor tags) to the whole page, i.e. to the top of the named page. These look like this:
<a href="http://www.kcl.ac.uk/humanities/cch/">...</a>
or like this:
<a href="resources.html"></a>
In both cases what follows the href= refers to another page as a whole; when the link is activated, the referenced page is displayed at its beginning. Reference may, however, also be made to a location internal to a page. This may be a location internal to the current page or to a specific place in another page other than its beginning.
Two HTML elements are required for a link from one part of a page to another part of the same page:
name anchor, which assigns a “name” or label to a specific location in the page, e.g.
<a name="here"></a>
The text or image marked by this element—which can be an “empty element”, needing only to occur before the place to be marked—becomes identified with the location.
hypertextual anchor, which refers to this name, e.g.
<a href="#here">...</a>
Perhaps the most useful implementation of the internal reference is in the hypertextual table of contents you will find at the top of many pages, such as this one. You may go up to the top of this page now, then click on item I.B.1 to return to the beginning of this section. Note that the name “top” is arbitrary: it's best to choose one that is a meaningful name for the place in question, but the brower's machinery would work the same if you'd said “end” everywhere instead.
Use the view-source feature to see the HTML code for the table of contents. Note the name anchor at the beginning of the HTML. The manual indenting, by the way, is merely to make the HTML code easier to read—and is a highly recommended practice.
The external reference to a specific location within another page is accomplished by adding the modifier for internal reference to the address of the page, thus:
<a href="http://www.cch.kcl.ac.uk/legacy/teaching/av1000/architecture.html#U-London-environment">
The bolded part of the above URL refers to the name anchor within the London architecture page. Try this link by clicking here, then use the Back button on your browser to return to this page.
As noted above, directing your reader's attention to a page external to your site—or even to another page within it—runs the risk of distracting him or her permanently. The Back button of the browser allows the reader to return to your site at the point of reference, but this mechanism implies no need to return. It is as if you as a lecturer were to vanish when showing a slide, and your reappearance were under the control of your audience—not always what you might wish! When you want your page to remain and the referenced page also to appear, the mechanism of additional browser windows comes in handy.
On both PCs and Macs a browser, such as Firefox or Internet Explorer, may display more than one window, so that you can have two or more separate Web pages on screen simultaneously. Within a hypertextual anchor you can cause the referenced page to be displayed in a new window, rather than replacing the page in which the anchor occurs, by adding the target attribute, thus:
<a href="http://www.kcl.ac.uk/schools/humanities/cch/research/index.html" target="new">
The name “new”, specified above, names the browser window; if you reference it in another such tag, the contents of that window will be replaced. If you always want a new window to be created by this link, use “_blank” for the target name.
Try the device by clicking here. Note that you can dismiss this new window without exiting the browser or closing down the originating window. You can tell it is a new window by the fact that the Back button is grayed out, i.e. is inoperable.
The only problem with such this approach to navigation is that your reader can become confused, not understanding that the new window is in fact new and that the originating window is still there. (The new window is likely to appear immediately on top of the previous one.) In addition, if you do not dismiss the new, named window but go back to the originating page and click on another link which specifies this named window, it will be updated but the referring window will remain on top, thus hiding that fact that the named window has changed. You may need to warn your reader!
A popular way of presenting more than one page simultaneously, but within a single browser window, is the “frames” technique. Frames are often used to display a table of contents simultaneously with the parts of a document or with the documents to which the table refers. Two examples:
The frames technique has considerable potential but can also lead to screen-clutter and navigation difficulties; its use on the web seems to be decreasing. A good account of the difficulties is Jakob Nielsen's Alertbox column on the subject, “Why Frames Suck (Most of the Time)”. Some of Nielsen's points have ceased to matter, or to matter in the same way: for example, all standard web browsers now handle frames, but there is the new problem of web use on phones and other devices with small screens, where there isn't the space for the display the frame approach assumes, whether or not the software can handle it. Search engines have become more important on the Web since Nielsen wrote, and the navigational problems also affect whether search engines can really index a site well; see Does Google index sites with frames? for Google's statement of their policy on such sites. Methods based on CSS now make it easier to do what frames do in a way that doesn't cause the same problems.
A display using frames is produced by a frame document. This document consists of a frameset, i.e. a set of tags that specifies the ordinary HTML documents to be included, assigns each a frame-space and names the space. Examples will clarify this abstract description; for a very simple first example see this page with frames.
Two frames.
A site (no longer online) for the Institut für Indologie und Tamilistik illustrates a two-frame document. The document whose URL you visited to see this site looked like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="en-gb" />
<title>Institut für Indologie und Tamilistik</title>
<head>
<frameset cols="20%,80%">
<frame src="./iits0.html" name="links" scrolling="auto">
</frame>
<frame src="./iits1.html" name="rechts" scrolling="auto">
</frame>
<noframes>
<body>
<p>Sorry! Your browser cannot display frames.</p>
</body>
</noframes>
</frameset>
</html>
As you can see, this consists of four parts. The first and last part almost comprise the beginning and end of an HTML document, between which would ordinarily occur the contents of the page. Instead what we have are first, in blue, the frameset; then, in green, text that the browser will display if it is incapable of handling frames. (At one time only the latest versions of browsers could handle frameset tags; now almost all browsers in use can.) Note where the body element goes—within <noframes>.
The framset consists of the following:
Two frame elements within this frameset. Each frame element has these attributes:
Three frames.
Willard McCarty's former page for the Analytical Onomasticon had basically the first, second and fourth parts as above; its frameset, however, is quite different, because this site had two horizontal frames, the lower one divided into two columns:
<frameset rows="85%,*">
<frame src="banner.htm" name="top" scrolling="no"></frame>
<frameset cols="35%,65%">
<frame src="../stdmsg/csindex.htm" name="index"></frame>
<frame src="../stdmsg/text.htm" name="text"></frame>
</frameset>
</frameset>
Here we have two framesets. The first (in blue) does the two rows: the first, which comprises the frame containing the banner table of contents; and the second, which contains the frame for the index and the frame for the text. The first row, then, is filled by the first frame element, which as above specifies the file to be placed in it, the name of the frame and the scrolling option—which it disallows. For the second row we find instead of another frame element a new frameset, which subdivides the row into two columns, with a frame element given for each.
For additional help with frames, see the following:
revised October 2007