HTML Tutorial 6

Hyperlinks

  

<a> Anchor Tag

Hyperlinks are links in one document which connect directly to another document. On a web page, these are created by using an anchor tag. This is a container tag and is written as two main parts - the address of the document the link connects to and the anchor text or image the user clicks on:
<a
href="linkaddress.htm">anchor text</a>.

The address
The address can be relative eg
<a
href="linkaddress.htm">anchor text</a>
or absolute with a full URL eg
<a href="http://www.gifsunlimited.com">anchor text</a>

The anchor
The anchor is the part of the tag the user sees and clicks on. It is the content held between the address part of the tag and the closing part.
<a href="http://www.gifsunlimited.com">anchor text</a>

The anchor could be text, as above, or it could be an image
<a href="http://www.gifsunlimited.com"><img src="images/button2.gif" border="0" width="50" height="50"></a>
The image could be an icon such as a bullet point or arrow, or it could be any other image. By specifying border="0" you avoid a blue line appearing around the image highlighting it as a link.

email links
In an email link, the anchor tag is similar to those shown above, but with a different address.
<a href="mailto:someone@theaddress.com">Send someone a message</a>

Links to other document types
Links in a web page can be used to connect to documents other than web pages, for example word processing files or spreadsheets.Note that this will only work if the user has software on their computer capably of opening a document in that format. It is a good idea to save the documents in a common format where possible, such as '.rtf' for word processed documents. That way the document is available to the maximum number of users. The anchor tag is similar to those shown above, but with a different address.
<a href="http://www.theaddress.com/mystory.rtf">Read my story</a>
<a href="http://www.theaddress.com/taxcalc.xls">Check your tax</a>

Internal links
It is sometimes useful in long web pages to have links connecting different parts of the same page. In this situation, a link in one anchor tag specifies as the address another named anchor tag. The two tags could be:
<a name=top>Top of the page</a>
<!-- page content -->
<a href="#top">Go to top</a>

Alternatively, you can add an 'ID' parameter to most elements enabling the user to jump directly to that element, eg:
<p id=toppara>
<!-- page content -->
<a href="toppara">Go to top</a>

Targetted links
If you do not want the user to leave your page when linking to another site, you can specify that the new site is opened in a new blank window. This can be done by using the 'target' parameter::
<a href= "http://www.theaddress.com" target="_blank">New site, new window</a>

This targetted link format is very important when using 'frames' (see later).

© & Design by systemalchemy.com