HTML Tutorial


Lesson 4
Types of Links

To link to another page we would use a hyperlink tag such as,
<a href="http://quake.wr.usgs.gov/recenteqs/">earthquakes</a>,
which would give us earthquakes.
a href= tells the browser to link to a file.
http://quake.wr.usgs.gov/recenteqs/ tells the browser where on the web to find the file.
earthquakes will show up as the link on the page.
</a> closes the hyperlink command.

To add an image we need to use a tag that links to a graphic file:
<img src="./gfx/quakebutton.gif" width=40 height=40 border=0 alt="quakes"> would give us:
quakes
This breaks out as:
img src= tells the browser to load an image file.
./gfx/ tells the browser which directory the file is in -- in this case a subdirectory named gfx.
quakebutton.gif tells the browser which file to load.
width=40 height=40 tells the browser the size of the image in pixels and allows the rest of the page to load without waiting for the image.
border=0 tells the browser not to display a border around the image.
alt="quakes" sets an alternative description to display if the image does not load; this is also helpful for vision impaired visitors to the site.
The img src= tag does not have a closing tag.

You can use a graphic as a link by including it between the <a href=...> and the </a>. So,
<a href="http://quake.wr.usgs.gov/recenteqs/"><img src="./gfx/quakebutton.gif" width=40 height=40 border=1 alt="quakes"></a> would give us:
quakes

We would also use a hyperlink to load a music file.
<a href="http://www.acousticmusic.net/artists/rickshea/ra/GeorgiaPines.ram">Play sample</a>.,
would give us:
Play sample.
a href= tells the browser to link to a file.
http://www.acousticmusic.net/artists/rickshea/ra/ tells the browser the file's location on the net.
GeorgiaPines.ram tells the browser the name of the file; in this case, a Real Audio file.

Thanks to Rick Shea for use of the sample.

To have a link so people can send an email, you would use:
<a href=mailto:geo@mccalip.com>geo@mccalip.com</a>
geo@mccalip.com
This is fairly self explanatory.

LESSON 3 | HOME PAGE | LESSON 5

© Geo. McCalip 2001