HTML Code MiniChapter 4: Links and Images

Get FREE SHIPPING and SAVE 25% Off Sitewide at Vistaprint! Limited Time Only!

You may also add images (pictures) to your web page, as long as the image is in the .png, .gif, or .jpg (or .jpeg) file formats. You will not be able to use .bmp format files! The basic tag for in-line images is <img src="location">. It is also recommended to add HEIGHT and WIDTH attributes to the IMG tag, which will allow the image to take proper proportions on a browser that is not currently viewing images. It is also recommended to use the ALT="what picture is" to tell a person what a picture is in case it is still loading or they are not viewing images. (The IMG tag has no closing tag!)

Example of a basic in-line image...

<img src="http://www.davesite.com/graphx/davesmll.gif"
width="200" height="50" alt="Dave's Site">

If your image is in the same folder as your HTML file, just use the image name. If your file is welcome.jpg, you can use <img src="welcome.jpg"> Then add the appropriate height, width, and alt attributes as mentioned above.

Many times you may want to have an image that is linked, so that if someone clicks the image, the person will be taken to another page. This is rather simple- you just need to place the IMG tag within the A HREF tags.

<a href="location_of_link"><img src="location_of_image"></a>

You may also use the ALIGN attributes with images!

Example of a linked image...

<a href="http://www.davesite.com/"><img src="http://www.davesite.com/graphx/davesmll.gif"
align="right"></a>

(Note: Some web browsers place the border automatically, others do not. It's best to set a border to ensure it always shows the way you want.)

If you want to ensure you want the image to be linked without the colored link border, add border="0". Example:

<a href="http://www.davesite.com/"><img src="http://www.davesite.com/graphx/davesmll.gif"
align="right" border="0"></a>