Search this book | Previous | Table of contents | Next

Creating hypertext links

This section describes how to put hypertext links into your HTML documents.

The real utility of HTML is not its ability to format text. Rather, its real strength lies in its ability to transport a user from one section of text to another (or to a completely new document) by clicking on (or selecting) highlighted words or graphics.

The hypertext features of HTML are implemented with tags called "links." There are three types of this tags: links to other documents, links to specific parts of the same document, or links to specific parts of other documents.

Links to other documents

To create a link to another document, you must associate text (or graphics) with a URL. This is done with the anchor tag. In this case, the anchor tag takes the following form:
<A HREF="URL">text</A>
The "A" denotes an "anchor" and the "HREF" denotes a hypertext reference. Note the URL is enclosed in quote marks. While many browsers do not require the quote marks, future browsers may not be so lenient and it is in your best interest to include them.

Put into practice, the HTML code used to link you to the author's home page could look like this:

In your spare time, consider visiting <A HREF="http://www.lib.ncsu.edu/staff/morgan/">Eric's home page</A>.
This example gets rendered like this:
In your spare time, consider visiting Eric's home page.
Then, by clicking on (or selecting if you are using a non-graphical WWW browser) "Eric's home page" the document at http://www.lib.ncsu.edu/staff/morgan/ is presented to you.

One of the nicest things about the World Wide Web is that you can "link" all sorts of Internet resources to your documents. To do this all you have to do is include URLs in your anchors denoting these other resources. Thus, you can link gopher servers, FTP sites, WWW servers, as well as other Internet resources all within your documents. This is what makes the World Wide Web a "web" in the first place. For example:

In your spare time, consider visiting the <A HREF="gopher://gopher.lib.ncsu.edu/">gopher server</A>, the <A HREF="http://www.lib.ncsu.edu/">WWW server</A>, and <A HREF="ftp://ftp.lib.ncsu.edu/">FTP server</A> of the NCSU Libraries.
When creating hypertext links, there is at least one stylistic thing to remember. Avoid the "click here" syndrome. HTML was designed to be read as well as printed. Your documents should be able to stand on their own and make just as much sense in their hypertext form as their printed form. Creating HTML with "click here" is considered bad form.

Relative URLs

Including the complete URL of every link in your documents can be tedious. More importantly, including the complete URL of every link in your documents makes them difficult to move from folder to folder, or even server to server. This is why the concept of "relative links" was invented.

Relative links are partial URLs. They include just enough information necessary for the reader's WWW browser to make the connection to the linked document. This usually means you do not have to include the scheme and host name in the URL and sometimes the path and file names as well. (Of course if you eliminated all of these items, then you wouldn't have a URL at all.) The URL information not included in the anchor is assumed by the client application.

Suppose there was an HTML document on a WWW server. The server's address is library.ncsu.edu. Furthermore, this particular document was named instructions.html and was saved in the folder (relative to the WWW server application) scripts:searching. The complete URL for this particular document would be:

http://library.ncsu.edu/scripts/searching/instructions.html
Put into an HTML document as an anchor, this URL may look like this:
Searching <A HREF="http://library.ncsu.edu/scripts/searching/instructions.html">instructions</A> are available online.
Now assume this HTML code were in a document saved on the computer library.ncsu.edu. If so, then the HTML document could have been written using a relative link:
Searching <A HREF="/scripts/searching/instructions.html">instructions</A> are available online.
This works because the WWW browser "remembers" the scheme and hostname of the document presently being displayed, and when a link is accessed not containing the scheme or hostname (a relative link), then the scheme and hostname of the present document are assumed.

Let's extend the assumption. Assume the HTML document being written was saved in the "scripts" folder. If so, then the URL of the anchor could have been:

./searching/instructions.html
In this case the period (.) in the URL denotes the present folder. Put another way, the period represents the folder containing the currently displayed document.

If the presently displayed document resides a folder scripts:email, then the instructions document could be referenced with the following relative URL:

../scripts/instructions.html
In this case the double periods (..) tell the WWW browser to go back one folder level and then down into the scripts directory for the document instructions.html. The use of the double period (unlike the single period) can be used a number of times in the same URL. Thus, you can tell the WWW browser to move back a number of folder levels from the present folder and then back down to a specified file. For example,
../../../scripts/instructions.html
Finally, if the document you want to link to is in the same directory as the presently displayed document, then specifying that link in your anchor simply requires the file's name. For example, suppose you were reading a document residing in the scripts folder, then the simplest URL would be just the file name. The HTML markup could look like this:
Searching <A HREF="instructions.html">instructions</A> are available online.
The real advantage of relative URLs, besides the increased readability of your native markup, is the transportability of your HTML documents. If you include full and complete URLs in all your HTML, then moving those same documents to a computer with a different hostname will require you to change all our URLs to the new hostname. Similarly, if your always include the full path name (folder structure) in your URLs, then when (and if) you have to move your documents to a different folder, you will have to edit your HTML documents again. All of this can be avoided if you use relative links as much as possible.

Links to specific parts of the same document

You can also create hypertext links to other parts of the same document being displayed. This is done with "named" anchors. Long, single page documents usually have some sort of table of contents at the beginning. These tables of contents are done using named anchors.

To used named anchors, you must first mark up an item in your document to link to. This is done with a variant of the anchor HTML code and may look like this:

<A NAME="3">Section 3</A>
Here the NAME defines the name of the anchor. It can be any text you like, but the first word of the text must be unique within the document and it is case-sensitive. The text to be linked to is surrounded by the <A>...</A> tags.

The next step is to insert hypertext references into your HTML document directing the reader to the named anchors. URLs containing number signs (#) are used for this purpose. For example, a table of contents could be written like this:

<H1>Table of contents</H1>
<A HREF="#1">Section 1</A><BR>
<A HREF="#2">Section 2</A><BR>
<A HREF="#3">Section 3</A><BR>
.
.
.
<A NAME="1">Section 1</A><BR>
<A NAME="2">Section 2</A><BR>
<A NAME="3">Section 3</A><BR>
Consequently, when the reader selects "Section 1", the WWW browser will interpret the anchor as a named reference (#1) and move to the location in the document marked with the number 1 by the NAME anchor.

Links to specific parts of a different document

Combining the hypertext reference and the named anchor, you can even create links to specific parts of other documents. Creating the named anchor is done just as before. Surround the text to link to with the anchor tag using the NAME attribute.

Creating the hypertext link to the named anchor then requires you to specify the file to link to as well as the NAME to link to. Consequently, a URL of this sort may look like any of the following:

Obviously, relative links can play an essential role in the use of named anchors to specific parts of other documents.

Search this book | Previous | Table of contents | Next

This page was first published on September 26, 1995. Feel free to send comments.