<IMG SRC="image.gif">where "image.gif" represents the name of the image.
The chain at the top of this lesson:
was put there with this command:
You can change the size of an image using the height and width tags. Keep in mind however that if the original size of the image is quite small and your increase the display size greatly, the image quality will appear quite grainy or blurry.
<img src="smiley.gif" alt="Smiley face" height="42" width="42">
The alt="_____" attribute is used to add a written description of the image. This useful for visually impaired people who have a computer program that can read these tags to help them understand what's on the screen. This is also the text that will be displayed if the image fails to load for whatever reason.
This example has a border value of "2"
<H2 ALIGN="CENTER">ABOUT OUR HALL</H2><HR>
<H4 ALIGN="LEFT"><IMG SRC="whechair.gif" BORDER="0" ALIGN="MIDDLE">We are wheelchair accessible.</H4>
Please call for rates<HR>
Now save this web page. If you have not saved the wheelchair image (whechair.gif) then you need to save it too. Remember that both the image and web page must be in the same folder. Once you have saved the web page and image, then SWITCH back to your browser and load the document to see it in action. This is what you should see:
See example below:
Please call for rates
Here is an example of using an image for the link. Please SWITCH to NOTEPAD or to another text editor, and type in the following HTML document:
<H4 ALIGN="CENTER"><A HREF="index.htm"><IMG SRC="back.gif" WIDTH="40" HEIGHT="40" HSPACE="10" ALIGN="MIDDLE" ALT="home"></A>Click on the button to head home</H4><HR>
After you have typed in the document, save it, and then SWITCH to your browser and load it. This is what you should see:
USING ONLY ONE IMAGE FOR EACH OF YOUR THUMB-NAILS
This is often the preferred method as you are offering the same image twice with the thumb-nail image being displayed with the use of the WIDTH and HEIGHT attributes. This is a much faster and more efficient method of loading images because the larger image that will be displayed has already been loaded into the browser's cache and ready to be displayed at any time. A cache is where a browser keeps a memory of images and pages while they display them.
Here is the command line that uses only one image to load both the thumb-nail and the original full size image.
<A HREF="cross1.gif"><IMG SRC="cross1.gif" BORDER="0" WIDTH="39" HEIGHT="50"></A>
Here is this statement in action. Again you can use the same procedures as before to display the image in full size, save the image, and return BACK to this spot.
This code will give you a single image background
This code will give you a repeating background pattern
Note: The best repeating backgrounds come from images that can be seamlessly tiled - you can find images like that here