Adding Images

Unlike word processing documents, images are not included in your HTML files. In other words, if you create a file in Word and insert a graphic into it, and then save it as report.doc, that is the only file you have to worry about. The next time you open report.doc, even if it's on another computer or off of a floppy disk, that graphic will still be there. HTML is not like this.

On the Web, HTML files and graphics files remain separate. If you have a Web page called report.htm containing a graphic name graph.gif and you want to copy this page to a disk to look at it somewhere else, you need to copy both report.htm and graph.gif to the disk. If you don't copy the graphic, there will be a broken graphic icon on your page when you look at it.

Here is the HTML used to include a graphic:
<IMG SRC="URL of Graphic File" ALT="Alternate Text Replacement" WIDTH="Width in Pixels" HEIGHT="Height in Pixels">

IMG is an empty element, so there is no </IMG> tag. The URL can be either absolute or relative. You can review URLs if necessary.

IMG stands for Image. SRC means source, so this tells the browser where to look for the file. ALT is where you add Alternate Text, for readers using text-only browsers or with graphics turned off. We'll cover ALT text more in the next section. By defining an image's WIDTH and HEIGHT, you help the browser render the page faster because you let it know how much room to allow for the graphic, even if it hasn't loaded yet. WIDTH and HEIGHT are optional, but are helpful for bigger graphics and graphics in Tables.

Here's an example of the <IMG> tag:
<IMG SRC="balloon.jpg" ALT="Ballooning in South Dakota, 1996" WIDTH="200" HEIGHT="184">
Here is how it is rendered:

Next: The ALT Attribute