Relative Links


The anchor tag <a> is used to form hypertext links. A hypertext link can be made to any publicly accessible document on the world wide web. This section documents how simple links can be made to files present on the same server, whilst the next section discusses how to link to documents on other servers.

Simple Links to a Document in the Same Directory

Just as all the samples that you have created so far reside in the directory htmlsamp, most of the documents relating to this book reside in a single directory (named htmlg). When two documents lie in the same directory, the syntax used to form a hypertext link from one to the other is very simple. To set up a link to the next page (lnkfull.htm), the following syntax may be used:

<a href=lnkfull.htm>Full URL Links</a>

where, "Full URL Links" is the title of the document linkfull.htm. The following link implements the above code: Full URL Links. Take the link now and use the back button to return.

Given that all the samples reside in the directory htmlsamp, it is not difficult to produce a document that sits in htmlsamp and allows for easy access to each sample. The following exercise does just this. You may wish to review the section on lists prior to proceeding with the exercise (definition lists in particular).

Exercise 6

Write a HTML document that satisfies the following criteria.

Take this link to see the solution of the exercise. You should view the source of the solution and compare it to that which you provided.

Relative Links

By now you may be wondering how you would create a link to a HTML document residing in a different directory. Basically, it is no more or less difficult than that which you have already achieved in the previous exercise. Although all the documents for the HTML guide reside in the directory htmlg, the documents associated with the HTML reference reside in a different directory (the directory htmlr). The directories htmlg and htmlr are siblings (i.e. they have the same parent directory). The code required to link from this document to the contents panel of the HTML reference is as follows.

<a href=../htmlr/main.htm>HTML Reference</a>

Try it now ==> HTML Reference and use the browser's back button to return. The '..' in the specification means the parent of the current directory. That is, relative to the current directory, the location of the directory containing the main page of the HTML Reference is up one then down one directory (../htmlr). When you set up your Virtual Web Server and code your pages, they should make relative references to other documents on the server. That way, you can move the entire collection of subdirectories to a different server and all the links will remain working. If you like, you could make another directory on you hard drive and place a HTML document there and reference it from the panel created in the previous exercise - but that's up to you.

The next section next.gif discusses full URL links, and after completing that section you will be master of the universe (well, of the web anyway).