Images - Adam's HTML Planet - Tutorials and Tips on how to create websites using HTML

	Sign In Sign-Up

Using Images
list of tutorials		next tutorial

Images are what bring the web to life and make it not only informative, but entertaining too. Graphics can be used just to make the webpage more appealing to the eye, to compliment the text and to serve as navigation.

You should think carefully, though, before adding images here, there and everywhere because they do take much longer to download than text and having an excess of pointless graphical content may drive your visitors elsewhere.

Right-Click these images and save them to the same folder as your html files.
Open the file you've been working on [links1.htm]
Make the changes indicated below
Save the file [images.htm]
Preview the results in your browser

Let's have a look at these tags in a bit more detail.

<IMG SRC="FROG1.JPG" BORDER="0" WIDTH="100" HEIGHT="100" ALT="frog" ALIGN="MIDDLE">

The bit that actually puts a picture on the page is <IMG SRC="filename">. The rest of the tag attributes in our example are

BORDER="0" WIDTH="100" HEIGHT="100": These specify whether the graphic has a border around it and specify the dimensions of the graphic [in pixels]. This is because if the size is given the browser knows how much space to leave for the graphic and can go ahead and load the rest of the page. This is going to save time especially for a large graphic.
Alt="name of graphic": This gives an alternative for anyone who has the graphics option turned off and also gives a 'tool-tip' when the cursor is hovered over the graphic. This is particularly useful when the graphic is used as a link.
ALIGN="MIDDLE": This governs the alignment of the graphic in relation to the text and how the text flows around it.

Go up to the top of the page to choose where you go next