In the first link tutorial we discussed text links. In this tutorial we will be looking at some
ways to make image links. Turn any pic into a link just just by adding a little extra code.
Here is a basic image link:
<a href="http://funtimehosting.com"><img src="http://funtimehosting.com/ad.gif"></a>
The part that says <img src="http://funtimehosting.com/ad.gif"> is the label. This is the visible image that is displayed
on the web page. In this case the picture is located on the funtimehosting.com website. You can use whatever image you want for the label in an image link,
and call it from any website. Be careful though. Most people don't like you linking to images on their website. It uses up
bandwidth on their server.
The part between the quotation marks, "http://funtimehosting.com" is the page that will be called
and displayed when you click on the image.
Here is how the image link code above appears on this web page. It's an animated banner image advertising my Funtime Hosting Website.
If you click on it, it will take you to http://funtimehosting.com .
They call the website addressess in the above link absolute url's, because they give the entire url path. In this case
it's another website.
Now suppose there is an image in this same folder of my website that this web page you're reading
is located, and I want to display this image on this web page. In this case I will use the same
image I used above, but I will call it from this folder in this website, since I uploaded it here
as well. I need only to use the file name, "ad.gif". This is called a relative url or file:
<a href="http://funtimehosting.com"><img src="ad.gif"></a>
You can also call a relative url in the location part of the link. Suppose I want to display a page that is located in
this same folder this web page you are reading is located. Here's how the code might look:
<a href="funtime.html"><img src="ad.gif"></a>
Here's how the image link might look. If you click on it, it will take you to a page on this website I made for an example.
Well, this concludes this tutorial. Study it awhile and hopefully you will get it.
If you are using one of the following free web page makers, you
can copy and paste the code above in the paragraph or code spaces.