The principal power of HTML comes from it's ability to link to other documents (or part of) using text or image Hyperlinks.
The basic format to code a link is similiar in all the below, only certain attributes are changed.
To create a link of any kind, the HTML <A HREF> ("anchor") tag is used.
Text Links
The most basic link that can be created is a text link. It takes a form as follows:
<A HREF="http://www.teach-yourself-html.com">Click here!</A>
There is really only two variables in the above code.
Firstly, you specify the URL you wish to link to in between the quotes.
Then create an approriate label, in this case it's "Click here!".
As with all links, be sure to close the anchor tag with a </A>.
Image Links
Image links allow you to use a picture to become the clickable or "hot" area of a link.
It is quite similiar to the text link above, however you simply replace the "label" with an image tag:
<A HREF="http://www.teach-yourself-html.com">
<IMG SRC="IMAGES\PICTURE1.GIF">
</A>
The image tag is coded exactly as normal (specifying width, height and alt is recommended), however in a link one more attribute is introduced.
A border of 1 pixel will surround the image in a link. Using BORDER="0" within the image tag removes this.
Email Links
Email links are actually basic text or image links with one simple alteration.
The "mailto" attribute is introduced to allow an email address to be specified:
<A HREF="mailto:info@teach-yourself-html.com">Email me!</A>
Section Links
Linking into part of a page is extremely useful when the web document is quite long.
To avoid scrolling to find the required section, a simple anchor tag can be used.
There are two parts to this function:
- Create an anchor name at the relevant point in the document.
- Create a hyperlink elsewhere to point to the anchor name.
Creating an anchor name is extremely easy:
<A NAME="#top">Back to Top</A>
This particular example is very popular (used on this site too!). Note the "#" symbol within the quotes.
This indicates to the browser that it is a link to a point within a document.
Also be sure to use unique names for each anchor on the document.
To complete the link, simply create a text or image link as above with the address set as your anchor name, prefixed with the # symbol.
