<a href=>

line.gif

Examples of Hypertext and Hypergraphics Links

The purpose of this section is to give a few examples of hypertext and hypergraphics links. Firstly, the syntax of the tag <a> is contained in a document named a.htm, and is contained in the same directory as the currently viewed document. Therefore, linking to the document a.htm is very easy. The code:

<a href=a.htm>This is a link to the document a.htm.</a>
After taking the link, hit the browser back button to return.

produces:

This is a link to the document a.htm. After taking the link, hit the browser back button to return.

Linking to a document that resides on the same machine, but in a different directory, is also quite straight forward. For example, whilst the URL of this document is http://www.iplusplus.com/htmlr/ahref.htm, the URL of the contents of the HTML Guide is http://www.iplusplus.com/htmlg/htmlg.htm. This implies that the document htmlg.htm is across one directory (i.e. ../htmlg). The code shown below forms a relative hypertext link to that document.

<a href=../htmlg/htmlg.htm>This is a link to the HTML Guide.</a>
After taking the link, hit the browser back button to return.

The active form of the above code is shown below.

This is a link to the HTML Guide. After taking the link, hit the browser back button to return.

To use a graphic as a link is no more or less difficult that to use a textual phrase for such. The location of the book icon (relative to the containing directory for this document is ../gif/BookC.gif. Therefore, it is easy to jazz up the previous example slightly - one merely includes a reference to the book icon between the tag <a> and </a>, as shown below.

<a href=../htmlg/htmlg.htm><img src=../gif/BookC.gif> This is a link to the HTML Guide.</a>
After taking the link, hit the browser back button to return.

This is a link to the HTML Guide. After taking the link, hit the browser back button to return.

Note that both the book and the text are active. Finally, it is no more effort to link to any URL, anywhere in the world (which is amazing really). To provide a link to the Yahoo search engine (for all you yahooligans out there) the following code suffices.

<a href=http://www.yahoo.com>This is a link to the Yahoo search engine!</a>
After taking the link, hit the browser back button to return.

The active form of this link is shown below (you need to be logged on for this link to work).

This is a link to the Yahoo search engine! After taking the link, hit the browser back button to return.