Two Hoots Banner



HTML Hypertext Tips

A Hypertext Link basically links text and/or an image to another document or part of a document/image on the same page, same website or completely different web site.

The HTML tag for a hypertext link is <A> and marks the beginning and end of a hyperlink text. All web browsers recognise links by showing the link with a different colour, the default is blue and with formatting the link with an underline. Both of these formats can be amended. There are a number of attributes associated with this tag and here are some examples:

<A HREF="index.html">Browser Text</A>

In this example the link is to a page called 'index.html'. The text 'Browser Text' is what the user will see in their browser. The user will click on the text to load the index.html page.

If the target page is located in a different directory then you will need use a relative link to link to the page. A relative link is where the location of a page is specified relative to the page it is linked from. It's best shown with an example. If the above page 'index.html' is located in the root directory of our site and a page titled 'imglist.html' is located in the images directory then to link to the page the relative link would be:

<A HREF="images/imglist.html">Click here to see our images</A>

To link to pages on other sites use the following:

<A HREF="http://www.twohootssoftware.co.uk">Goto my website</A>

Links can also be used to link to locations within the same page. This page uses them allowing you to select the required tip and the top of the page and jumping to the correct location on the page. The NAME attribute of the <A> tag is used to identify the text you want to jump to. So for example the tag for this section is:

<A name="Anchors">Hypertext Links.</A>

To jump to this tag the # sign precedes the name of the selection:

<A href="#Anchors">Hypertext Links.</A>

You can also combine relative linking and jumping to positions within pages to jump from one page to a named location on another page:

<A HREF="http://www.twohootssoftware.co.uk/#contactme">Contact Me</A>