Adding links to other pages

What makes the Web so effective is the ability to define links from one page to another, and to follow links at the click of a button. A single click can take you right across the world!

Links are defined with the <a> tag. Lets define a link to the page defined in the file “peter.html” in the same folder/directory as the HTML file you are editing:

This a link to <a href=“peter.html”>Peter’s page</a>.

The text between the <a> and the </a> is used as the caption for the link. It is common for the caption to be in blue underlined text.

If the file you are linking to is in a parent folder/directory, you need to put “…/” in front of it, for instance:

<a href="…/mary.html">Mary’s page</a>

If the file you are linking to is in a subdirectory, you need to put the name of the subdirectory followed by a “/” in front of it, for instance:

<a href=“friends/sue.html”>Sue’s page</a>

The use of relative paths allows you to link to a file by walking up and down the tree of directories as needed, for instance:

<a href="…/college/friends/john.html">John’s page</a>

Which first looks in the parent directory for another directory called “college”, and then at a subdirectory of that named “friends” for a file called “john.html”.

To link to a page on another Web site you need to give the full Web address (commonly called a URL), for instance to link to you need to write:

This is a link to <a href=“”>W3C</a>.

You can turn an image into a hypertext link, for example, the following allows you to click on the company logo to get to the home page:

<a href="/"><img src=“logo.gif” alt=“home page”></a>

This uses “/” to refer to the root of the directory tree, i.e. the home page.