Links

Links let you click on an image, or some text, and have a new page appear. The new page may be one you have written or not. It can be on your personal computer, or on any computer connected to yours through an intranet. It can be on your web hosting server, if you have one, or it can be any page on the world wide web.

Contrary to what you might expect, links are not made with the <link> tag, but with the anchor tag, <a> .

An anchor tag requires at minimum, two bits of information:

Linking to the Web


Thus, the code:
<a href="http://www.graviton.demon.co.uk/butterflies.htm">
  Click here 
</a> to see some beautiful photos of butterflies.  

produces the result:

Click here to see some beautiful photos of butterflies.

The reference "http://www.graviton.demon.co.uk/butterflies.htm" is a web address. Web addresses should always begin with http://
When working from your personal computer, you can probably omit this prefix. However, in general, it is needed to direct the browser to the web.

Linking to Other Files You have Written

This is very simple.

The browser will look for the file in the same directory it found the web page. You can also use relative addresses as was done for the butterfly image, and music file in the examples below.

Images as Clickable Links

Images can be used as clickable links instead of text. Just place an image between the anchor tags. Clicking on the image takes one to the site named.

<a href="http://www.graviton.demon.co.uk/butterflies.htm" > 
  <img src="../img/butter5.gif"> 
</a>   

butterfly

Controlling the Window in which Links Open

You may have noticed a problem with the examples above. The butterflies loaded into this frame. We could not see their web address. This is highly inconvenient, and inconsiderate. This problem is easily overcome by setting the target attribute of the anchor <a> tag.

Due to a problem with IE, the underscore character at the beginning of each of these target names may or may not be shown.

If the website has frames, as this one does, the target can also be set to any frame. See Frames.

Here is our web link targeted to the full browser window.

<a href="http://www.graviton.demon.co.uk/butterflies.htm" 
    target="_top"> 
  <img src="../img/butter5.gif"> 
</a>   

butterfly

Opening other Types of Files

Html files are not the only kind of files that can be opened with the anchor tag. Audio and video files and programs may be opened, provided your computer has the software to run them. The browser simply checks the mime type of the file, and sends it to the default program for opening that type of file.
Server Side Programs

PHP programs can be opened. See Learning PHP

Audio Files

Sound files can be opened simply by setting the href equal to the name and address of the sound file. The sound file is sent by the browser to be played on the users sound system. Here is a simple example. For more detail, see Playing Audio Files

<a target="_blank" href="../mus/jesujoy.mid">
   Johann Sebastian Bach, Jesu Joy
</a>

Johann Sebastian Bach, Jesu Joy

Video Files

Video files can be opened in the same manner.

<a href="maryjane1903-65080-cabfi0.mov">
Mary Jane's Mishap
</a>

Mary Jane's Mishap

'Mary Jane's Mishap' is a silent movie filmed by G. A. Smith in 1903 with Laura Bayley as Mary Jane. It is made available by the British Film Institute.

Videos can be improved by preloading the video in order to avoid waiting for it to download, and by using the <embed> tag instead.

Flash Animations

The Elements Song Animation Tom Lehrer, Mike Stanfill

Valid HTML 4.01 Transitional