It is in dealing with links that we really get to grips with the "hypertext" in "HyperText Markup Language". "Hypertext" describes the concept of being able to select a link or "hotspot" in a piece of text or an image in order to jump to another document (or another part of the same document). Without this ability, the World Wide Web simply wouldn't exist.

The crucial element in the use of links is the anchor element, which takes the opening tag <A> and its closing partner, </A>. This is an interesting little tag, because it fulfils two distinct but related functions, depending on which attributes are used with it.

We'll look first at the href (short for "Hypertext Reference") attribute, which is used to specify the location of a "web resource": in other words, the file (which might be a document or an image) to which we want viewers to jump when they select the link. Using href we turn our <A> tag into a source anchor, pointing to a destination file.

Let's consider an example:

If this snippet of code were included in an HTML file, when viewed in a browser the text enclosed by the <A> and </A> tags (in our example, "like this") would be rendered as link text, and will be highlighted, underlined or coloured in whatever way the viewer's browser displays link text.

When a viewer clicks anywhere on the link text, they will be taken to the destination file specified in the href attribute ("anotherfile.html" in the example above). In this case, the file "anotherfile.html" is in the same directory (or folder) on the same computer as the file containing the source anchor tag, and so there's no need to include any more path information (we'll talk more about this later).

Let's create a real example. Open a new file in your editor, and enter the following code:

Save your file with the filename "file9.html". When you open it in your browser, it should look like this.

You'll have seen that the words "link to another file", which were enclosed by the <A> and </A> tags, are presented in the way that your browser usually shows links. The href attribute pointed to a file named "linktest.html", so we'd better create that now to complete our test. Open a new file in your editor, and enter the following code:

Save your file with the filename "linktest.html", and save it in the same directory (or folder) on your computer as the file "file9.html". When you open it in your browser, it should look like this.

Now that you have both of these files, you can load "file9.html" into your browser, and select the link which will take you to the file "linktest.html" You can try it out here to see how it should work.

You've now linked two pages successfully! And that's really about all there is to the magic of hypertext. But as usual, there are some further tricks and refinements to learn...

In our example above, the link in our source file ("file9.html") pointed to another "local" file -- that's to say, another file on the same computer. Of course, the great joy of the Web is that we can link to files on other computers all over the world, but for the moment we'll concentrate on linking to local files.

In our example, the destination file "linktest.html" is not only a local file, but it is in the same directory as the file that calls it. Because of that, there is no need to include any other path information in the href attribute. This is the simplest example of a relative pathname. When the browser looks for the destination file, it looks in the same directory as the current file, because it isn't being told to look anywhere else.

If the destination file is in a different directory, we can specify in the href attribute where to find it, relative to the location of the current file. How do we do this? By inserting Unix-style path information! (By the way, it doesn't matter whether your files are located on a Unix system, a Windows system, or whatever -- the same Unix pathname model is used.)

You might not be familiar with this pathname stuff (especially Unix), but it's not difficult. We'll take it apart here. There are two key things you need to know:

1. Unix directories are separated in a pathname by forward slash characters (/).

2. Two dots (..) are used to refer to the directory above the current one.

Let's look at a few examples of relative pathnames to see how it all works.

These relative pathnames tell your browser where to find the destination file, relative to the location of the current file (the one containing the link). But you can also describe the location of the destination file using "absolute pathnames". An absolute pathname starts at the topmost level of your directory structure and works down through all the layers of directories to your desired file -- to the "absolute" location on your system.

Unlike relative pathnames, absolute pathnames always start with a slash character (/), followed by all directories from the topmost down to your destination file. Consider this example:

In this case, the destination file index.html is located in the directory /web/mysite/mainfiles.

A little diversion on the matter of web servers... the root of the directory where your web pages are stored is not necessarily the top level directory on the server. This depends on all sorts of things -- whether the server is yours, whether you share it with others, or whether it's a "virtual server". You might need to consult your system administrator to be sure. For example, my web site is hosted on a virtual server, and the URL is
 
http://www.campanile.org/
 
(Note that in URLs, the final "/" character is often left off -- it's assumed to be there by the server when it gets a request from a web browser). So that's the root of my file system on that server. If I refer to a file by the absolute pathname /index.html, the full URL for that file would be
 
http://www.campanile.org/index.html
 
Similarly, if I referred to a file by the absolute pathname
 
/images/photo.jpg
 
the full URL would be
 
http://www.campanile.org/images/photo.jpg

The full URL of this page is
 
http://www.campanile.org/tutorials/html/lesson9.html
 
so to refer to it by an absolute URL, I would use
 
/tutorials/html/lesson9.html

So that's the general way of things. Get the picture? You might want to read that over a few times, if you haven't dealt with these kind of pathname issues before.

So which kind of pathnames should you use -- absolute or relative? Without hesitation, I say: RELATIVE! First of all, I find it easier, not least because it usually involves less typing (and that's always a good reason for doing something in a particular way). But there is a more important reason...

Let's say you've built a large web site, and used absolute pathnames in all of your links. Then, for some reason, you have to move your site to a different server, with a different directory structure (or your friendly system administrator decides he's going to reorganise the directory structure of your current server). Then you may find that your links don't work (they're "broken", as we say in the trade!) because they contain the names of directories that don't exist. Then you have a lot of work ahead of you, fixing all of the link code in all of the files.

On the other hand, relative pathnames are "portable". If you had used relative pathnames for all of your links, and the same set of circumstances arose, you would have no such problem -- because your own directory structure below the root level would be preserved, and all of your links refer to files by their relative location within this structure. It doesn't matter what's going on "up above". So everything would work, and you'd have nothing more to do after moving the files.

So my advice is: use relative pathnames!

(If all of this is just too complicated, you could simply put all of your web site files in the same directory. Then you'd never have to include any pathname information in your links -- just the filename. The main reason web programmers put files in different directories is to improve organisation; for example, by putting all the HTML files in one directory, and the image files in another. Sometimes it's necessary to put files in separate directories, particularly for privacy or security reasons. Different directories can have "public" or "private" access.)

That's enough about local files. Now we'll look at linking to files on other computers on the web.

Remote files are files on another computer (that is, not the one where your own web site files are located). Linking to other web sites or individual files on other web sites is quite straightforward. All you need to know is the URL of the web site or file you want to link to, and enter it into the href attribute of the <A> tag.

For example, if you want to link to a web site that has the URL http://www.awebsite.com/, you might do it like this in your HTML code:

Now take a look at how this would appear in your browser.

Selecting or clicking on the link text will take the viewer to the web site with the URL http://www.awebsite.com/ (though I don't believe any such site exists -- at least, not at the time I'm writing this tutorial!).

If you wanted to put in a link on your own web site to my web site (please do!), you could do something like this in your HTML code:

Now check out how this would appear in your browser.

These examples have involved pointing to the home page or main page of a site. This is recognisable from the fact that the URLs end in directories, rather than files, e.g. http://www.campanile.org/tutorials/html/ -- html/ is a directory, not a file. We know this because it ended with a "/" character, and didn't have a ".htm" or ".html" filename extension. When a web server receives a request from a browser to access a URL that ends in a directory, it looks for a certain file in that directory (usually it's named index.html or index.htm, though it can be something else like default.htm -- it depends on the server) and then sends that file to the browser. So when building your own web site, your home page should be named index.html or whatever your web server requires -- your system administrator or internet service provider will tell you what's needed. Then when telling people your URL, you only need to give them (in my case, for example) http://www.campanile.org/ rather than http://www.campanile.org/index.html.

In fact, in speech or written materials, you can leave out the "http://" bit -- it's assumed to be there in every case. That's why you often hear and see URLs given as, for example, www.microsoft.com rather than http://www.microsoft.com. It's a good idea always to include the "http://" in your HTML code, however. "HTTP" means HyperText Transfer Protocol, and it is the protocol (or set of rules) that is used to send files back and forth around the world wide web.

Just to take the idea of "assumed" characters further, note that in the paragraph above I gave the example of Microsoft's URL as www.microsoft.com. You see that I didn't finish it with a "/" character, to indicate it is a directory. This is another short-cut, because most web servers would recognise a URL like this as referring to a directory rather than an individual file, since it didn't end with a ".htm" or ".html" filename extension. Again, it's a good idea to include the final "/" in your HTML code, however.

You aren't limited to referring to the home pages of other web sites. If you want to direct your viewers to a specific page within another web site, you can do that too -- just so long as you have the full URL. For example, if you wanted to point people to a page on a web site that has the URL www.ourtown.org/townhall.html, then all you have to do is enter this full URL in the href tag. You might do this in your HTML code as follows:

Take a look at how this would appear in your browser.

An assumption that we've made so far is that you actually know the URL of the site or page you want to link to. If you don't, that's no problem. Just use your browser to go to the site or the page by whatever means you found it in the past (perhaps you followed a link from someone else's web site). Browsers usually display the URL of the page they are looking at in a box somewhere along the top or the bottom of the browser window. (Sometimes this box may be hidden, as browsers like Netscape for instance allow you to hide or minimise toolbars so that more screen space can be given over to displaying the web page. Check out the menus for an option like "Show Location" or "Show Toolbars".) Then all you have to do is copy the URL from this box, and paste it into the href attribute in the page you're working on in your editor. Or, you can write it down for later reference. When you're writing down URLs, make sure that you copy them accurately, taking note of upper and lower case letters. This is because the vast majority of web sites are hosted on Unix servers, and Unix is case-sensitive. In other words, a file named myfile.html is a different file from a file named MyFile.html -- so take care!

You might remember way back near the beginning of this lesson, I said that the <A> tag has two functions. So far, we've looked at one of these -- the ability to create links to other files, either on your own web site or on someone else's. Now we're going to look at the second function -- allowing us to link to a specific place within a file.

To do this, we have to introduce another attribute for the <A> tag, the name attribute.

First of all, we have to create the "anchor", the point in the page to which we want to create a link. Open a new file in your editor, and type in the following code (use Copy and Paste to repeat the rhubarb paragraph!):

Save your file with the name "file9a.html". Notice the position of the <A> and </A> tags and the name attribute. What we've done is created a kind of "bookmark" in the file, attached to the word "Here". We've given the bookmark, or (more correctly) anchor, a name -- using the name attribute. We've called it "here", for no better reason than we attached it to the word "Here". We'll use the anchor name in a link to refer to this position in the document.

Before we go any further, take a look at how this file should appear in your browser. You'll see that there is no indication in the page of the presence of the anchor -- the page looks perfectly normal.

Open "file9a.html" in your editor again, and add the line I've shown below in red:

Save your file after making the change. Notice how in order to create a link, we've used the href attribute in an <A> tag, just as before. But this time, instead of entering the destination file name, we've put in the name of the destination anchor, preceded by a hash character, "#".

Now take a look at how the modified file should appear if you open it in your browser. Select or click on the link text to see what happens.

You should find that this causes the target paragraph ("Here is the paragraph to which we want to jump") to leap to the top of the screen.

So all we have to do to jump from one place to another in a document is to include an <A> tag with a name attribute in the file at the point to which we want to jump, and use that name preceded by a "#" in the href attribute of the <A> tag for our chosen link text.

OK, so that covers jumping from one point to another within the same file. But what if we want to link from one file to a specific point in another file? Well, we can do that too, in quite a similar way. We need to have a <A name="something"> construction at the chosen point in the destination file, just as before. In our source file, we create a link to the destination file just as we learned earlier about linking to other file, but we add the name of the anchor tag, something like this:

Let's test the idea. Open a new file in your editor, and type in the following:

Save your file as "file9b.html" (save it in the same directory as file9a.html). Take a look at how it should appear when opened in your browser, and try selecting the link to see what happens.

You should find on selecting the link that "file9a.html" opens in the browser window, with the anchor point ("Here is the paragraph to which we want to jump") at the top of the screen.

A couple of things you need to know about anchors and the name attribute:

1. The value of the name attribute is not case-sensitive. In other words, "here" is the same as "Here" is the same as "HERE".

2. Within any one document, each named anchor must be named uniquely; for example, you can't have two anchors in the same file called "here" (Or variations like "HERE" and "here" -- remember point 1 above!) This is probably self-evident.

3. It doesn't much matter what you put between the <A name="something"> and </A> tags -- whether it's a word, a few words, or a sentence: just so long as it's at the place within the file that you want to link to.

In fact, picking up on the last point, the HTML specifications allow you to have "empty anchors", like this:

But some browsers have difficulty finding empty anchors. It's generally possible to get over this by inserting something invisible like a non-breaking space, using the appropriate character entity (as we discussed back in Lesson 7):

This permits us to put named anchors anywhere in the file, without being associated with specific text. For example, at the foot of this page you will find a Top link that takes you to the top of the page. I've placed a named anchor (called "top") near the top of the file, but it's an empty anchor. Between the opening and closing tags, I've placed a comment (something we'll discuss later in Lesson 10). The comment doesn't print on screen, but it seems to get around the empty anchor problem experienced with some browsers.

For our final topic in this lesson, we'll look at using images with links. If you've browsed around the web for more than five minutes, you'll have realised that not all links are based on text. How often do you find yourself clicking on an image (whether it's a button, or something rather more pictorial) to jump to another document? Well, here's where we find out how to do it.

Actually, it's dead simple -- and we've already covered the material. Using an image for a link is exactly like using text for a link. All that's needed is to place the <IMG> tag for the image you want to use between the <A> and </A> tags.

For example, suppose we wanted to link to our file "file9a.html" in the same directory as the current file, and we wanted to click on an image "sunset.jpg" (also located in the same directory) to take us there. Have a look at the code below:

Note how all we have done is to place the required <IMG> tag between the link tags. Now take a look at the result. Notice how the image has a border around it, possibly blue. Just as link text has some means of making it stand out (like colour and underlining), link images have a border around them -- but we'll come back to that in a moment. Try clicking on the image; as expected, you will jump to "file9a.html".

Easy, eh? Unfortunately, the border around the image is a little ugly (no, it's BIG ugly). But we can get rid of it, by placing a border attribute in the <IMG> tag (remember the border attribute from the last lesson?) and giving the attribute a value of zero, like this:

Now check out the difference.

And that's all there is to it!

(Remember as we said in the last lesson that the border attribute is deprecated, and the HTML specifications now recommend that CSS is used to achieve these effects. However this attribute is still valuable as long as browsers that don't support CSS are in common use.)

We create links to other web pages by placing the link text between the <A> and </A> tags, and referring to the destination page using the href attribute in the opening <A> tag, like this:

We can use either absolute or relative path references in the href attribute when linking to local files, but it is generally better to use relative paths as they are more "portable".

When linking to remote files, we must stipulate the full URL of the destination page in the href attribute.

We can link to specific points within a page, by first of all creating a named anchor at the desired point within the page using the name attribute in the <A> tag, and using this name preceded by the "#" character in the href attribute for the link, thus:

If the destination point is in a different page from the link, the href attribute must contain the filename (including the path -- relative or absolute) for the destination page, followed by the anchor name, thus:

We can also use images for links rather than text, simply by placing the <IMG> tag for the relevant image file between the <A> and </A> tags, for example: