Images are mostly used to spice up a page, or to illustrate a point. But there are other ways
to use images. An image can be used to put a background on your page. Notice the spiral notebook
background on this page. The background is nothing more than a small image tiled down the page.
It looks like this:
|
|
|
However, by using the background option and allowing the image to tile, you get the illusion of one big image. This particular image has been set to a width of 1024 pixels to accomodate most monitors. If you were to use a smaller image you would get a backgound that looks like this:
So you are wondering how to do this. Simple, remember back to the <BODY> tag? Well inside that tag you may specify options just like the < IMG > tag. The background for this page looks like this:
An image can be used to indicate a link to another page. Look at the top of this page. The left arrow lets you go back to the previous page, the right arrow lets you go to the next page, and the house takes you back to the HTML education home page. How does this work? You already have learned the two parts needed to put this together. You have learned about the IMG tag and the HREF tag. Instead of using text to say what your link is, you place the IMG tag in there. Here is what the processing code looks like for those images:
<A HREF="grap003.htm"> <IMG SRC="../images/back.jpg" height="30" width="30" border="1"></A>The border attribute places the blue or magenta border around the image. This allows the user to see what links they have already been to. If you want that border there you can specify a border size greater than 0, then you will just see the border around the image. Then the above links would look like this:
<A HREF="../webclass.htm"> <IMG SRC="../images/home.jpg" height="30" width="30" border="1"></A>
<A HREF="grap005.htm"> <IMG SRC="../images/forward.gif" height="30" width="30" border="1"></A>