Hyperlinks

The whole point of hypertext documents, and what makes web pages so different from text documents, is the ability to create links between documents. These "hyperlinks" enable users to follow their own "path of interest" through a linked series of documents. A well designed web site will take this into account, and will offer the user various routes around the information contained in the web site. Hyperlinks can be used to jump to the start of an entirely different document, or to jump to a specific location within a document.

Linking to other documents

Again, open a new file in your text editor, and type (or copy and paste) the code from FILE6.HTML in Appendix A.

Save this file as "file6.html", and open this file in your browser. A graphical browser will show something like this:

Figure 6: Using hyperlinks

(Appendix A, file6.html)

Typically, text which is a hyperlink will be shown in a different colour to the rest of the text, and is usually underlined. Most graphical browsers will change the shape of the cursor when it is positioned over a hyperlink.

A speech browser might handle the sentence containing the hyperlink like this:

Link: This link [pause] will take you to an illustration of how lists can be used in HTML.

Looking at the file we just created, you can see that the text "This link" is enclosed within two HTML tags. Immediately before the text is:

And immediately after the text is:

"A" is the "anchor" element. "HREF" is an attribute which gives the web address to which the anchor text is linked - in this case the file "file3.html". The text between the opening and closing "A" tags is the "anchor". If you click on, or otherwise select, the anchor text, you will "jump" to the start of the document referred to by the "HREF" attribute.

The contents of the HREF attribute can take various forms, depending on where the link should go. In this case, it points to a file in the same directory as the file containing the link, so nothing more than the file name is required. If I wanted a link to point to a file in a sub-directory of the current directory, I would use "directoryname/filename.html" in the HREF attribute. If, in order to find the file I want the link to point to, the browser will have to move "up" to the parent directory and then down into a different sub-directory, the contents of the HREF attribute would look something like "../directoryname/filename.html", where "../" means "go up one directory level". If I was working with many levels of nested directories, I might need to use several of these at the start of the file address, eg "../../../directoryname/filename.html" (which would mean "go up three directory levels then look for the file 'filename.html' in the directory called 'directoryname'"). And finally, if I want the link to point to a file in a completely different website, the contents of the HREF attribute would be like what I type in when I want to go to a new page in my browser, eg "http://www.website.com/directoryname/filename.html".

Linking to a location within a document

It is also possible to link to a specific location within a document. This is useful if you create a long document. Instead of the user having to scroll or read through a large portion of the document to reach a specific section, you can include a menu of hyperlinks at the start of the document, each of which will take the user to the specified section of the document. Alternatively, you might have the menu of hyperlinks in one document, each one pointing to a specific section in another document.

OK, time to see how this works. Open a new document in your text editor, and type (or copy and paste) the code from FILE7.HTML in Appendix A.

Save this file as "file7.html".

Opening another new file in your text editor, type (or copy and paste) the code from FILE8.HTML in Appendix A.

Save this file as "file8.html". Open the file "file7.html" in your browser. In graphical browsers, it should look something like this:

Figure 7: Internal and external hyperlinks

(Appendix A, file7.html)

If you select the hyperlink "Go to section A", you should see this:

Figure 8: Jumping to another location in the same document

(Appendix A, file8.html)

If however, you select the link that says "Go to section C", you should see:

Figure 9: Jumping to a specific location in a different document

As you will see if you look at the code in file7.html and file8.html, the positions to which we have linked are marked using a different form of the ANCHOR element, this time using the NAME attribute.

The value of the NAME attribute is a "bookmark", to which we can refer in the HREF attribute of a link.

• Use <a href="#bookmarkname"> to jump to a bookmark in the same document, or
• Use <a href="filename.html#bookmarkname"> to jump to a bookmark in another document.

A couple of notes on links and bookmarks

1. If you use the "view source code" option in your browser when viewing web pages, you can take a look at the HTML code used to create the page. This is a useful way to learn new ways of doing things. However it's worth remembering that not everyone writes 100% correct code! For example, you will sometimes see bookmarks which don't contain anything, like this:

   <a name="bookmarkname"></a>

   This will work in some browsers, but not in others - the ANCHOR element was designed to enclose some anchor text or graphics. It's best to ensure that the ANCHOR element actually does enclose something, even if it's just one word - that should ensure that it will always work.

2. Avoid the use of hyperlinks that consist of just, for example, "click here" or, as in the example we used above, "this link". For one thing, users with non-graphical browsers may not have anything to click with! In addition, some browsers can present the user with a list of all the links contained in a page (very useful for blind users), but links which simply say "click here" or "this link" don't provide a lot of information about the nature or destination of the link when taken out of context in this way.

   Using the example in figure 6 above, instead of making "this link" the hyperlink, it would be more helpful if it was coded like this:

   See an illustration of <a href="filename.html">how lists can be used in HTML</a>.

   Now, if the link is read out of context, it will consist of "how lists can be used in HTML", which makes a lot more sense than "this link", and tells the user what the link leads to.

Visual Presentation