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 www.w3.org you need to write:
This is a link to <a href=“http://www.w3.org/”>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.