HTML - Links

To add a link you use the <a> tag - the Anchor tag, known as this because you are anchoring the link around text or an image. You also add an attribute called href which is known as Hyperlink Reference, which is the path you are going to take the person to. Note: always remember to close the tag, or your whole page will become a big hyperlink!

There are different types of links you can use on your pages: relative, absolute, mailto

Relative: Links in your own site, they are called relative as the link will change depending on the path to the file, ie is it in the same directory or is it in a folder above or below the file?

So, take a look at the path to the file you wish to link to. Example: If you wish to link to water.htm from the home page - if the water.htm page is in the same folder as index, the path is simple. But if water.htm is in a folder called departments, the path would be departments/water.htm. If water.htm was in a subfolder called designs, in the departments folder, the path would be designs/departments/water.htm.

So you can see the path changes depending on the location of the file you wish to link to. To link to water.htm which is in the departments folder the code would be:

<a href="departments/water.htm"> Water Features </a>

To create a link back to the home page depends on where the file you were linking from is located. You need to add ../ to go up a directory. Example: if water.htm was in the departments folder and index was in the root folder, the path would be ../index.htm. If water.htm was inside the designs folders which was inside the departmentsfolder, the path would be ../../index.htm.

So you can see you add ../ for every level of directory or folder you go back through. To link back to the home page when water.htm is in the departments folder, the code would be:

Absolute: Links to other people's websites. They are called absolute as they need to have the full path in the link. It is important to include the http:// otherwise the link wont work.

Example: to create a link to the BBC site, the path is http://www.bbc.co.uk

So, enter the following code into the HTML
<a href="http://www.bbc.co.uk" >BBC Website </a>

To ensure you don't lose your audience, have the link open in a new window. Add the following target attribute into the code:
<a href="http://www.bbc.co.uk" target="_blank"> BBC Website </a>

Email link: adds a mailto link which can also include a subject

You create a link which opens the users email client, ready for them to send an email directly to an address you specify. You add the mailto attribute to the href tag and include the email address with no spaces:

<a href="mailto:you@isp.com" > Email Us </a>

You can add text that will automatically appear in the subject line:

<a href="mailto:you@isp.com?subject=contact from web"> Email Us </a>