Using Images

Image Layout

Most web browsers can display images that are saved in either GIF or JPEG format. Each image takes time to process and slows down the initial display of the document, so generally you should not include too many or overly large images, especially if your audience is made up of schools and other groups that don't have high-speed Internet access.

To include an image in a web document, you need to use an image tag, <IMG SRC=imageaddress>, where imageaddress is the address and name of a given image file. If the image file is a GIF file, then make sure your imageaddress ends with .gif (for example, I might have a GIF picture of me called andypicture.gif). Similarly, JPEG-formatted images must end with .jpg.

Let's start off with an image called home.gif:

To show this image, I used the image tag <IMG SRC="home.gif">.

Pretty simple stuff. But let's say I wanted include this image with some text, let's say, the following:

Not too long ago, I found a small picture that said 'home room.' I really liked it a lot so I brought it home, put it on my computer, and took care of it. Everything was just fine until the Mama Home Room picture showed up one day and sued me for copyright infringement. The end.

It's a sad story, and to make it even sadder, I'd like to show a picture of that little home room graphic I took home with me. Let's stick the <IMG SRC="home.gif"> tag directly before the text:

<IMG SRC="home.gif">Not too long ago, I found a small picture that said 'home room.' I really liked it a lot so I brought it home, put it on my computer, and took care of it. Everything was just fine until the Mama Home Room picture showed up one day and sued me for copyright infringement. The end.

When I look at the code through a browser, I see this:

Not too long ago, I found a small picture that said 'home room.' I really liked it a lot so I brought it home, put it on my computer, and took care of it. Everything was just fine until the Mama Home Room picture showed up one day and sued me for copyright infringement. The end.

The image of the button appears to the left of the text, but it doesn't look too great, since the text doesn't wrap around the image. To accomplish this, I'd introduce a new command to the image tag called an alignment tag. For example, <IMG ALIGN=LEFT SRC="home.gif"> allows us to align the graphic to the left of the text, simply by inserting ALIGN=LEFT into the middle of the image command. With this, we get a wrapped-around image like this:

Not too long ago, I found a small picture that said 'home room.' I really liked it a lot so I brought it home, put it on my computer, and took care of it. Everything was just fine until the Mama Home Room picture showed up one day and sued me for copyright infringement. The end.

Similarly, if I change the ALIGN tag to ALIGN=RIGHT, it moves the graphic to the right of the text:

Not too long ago, I found a small picture that said 'home room.' I really liked it a lot so I brought it home, put it on my computer, and took care of it. Everything was just fine until the Mama Home Room picture showed up one day and sued me for copyright infringement. The end.

Alternate Text for Browsers That Can't Display Images

Some World Wide Web browsers, including Lynx, cannot display images. The alternative text tag, ALT, allows you to specify text to be displayed whenever an image can't appear. For example:

<IMG SRC="home.gif" ALT="Home Room">

If I'm using Netscape or a similar graphical web browser, the image tag will display the image as usual:

But, if I'm using Lynx or have my image loading function shut off, I'll see the words Home Room appear on my screen instead, so I'll at least know what the image is.

Using Images as Hypertext Links

Advanced web developers love to activate images as hypertext links. It's very easy to do - simply start off with a hypertext link tag, and then use the image tag as your link instead of text. Check this out:

Creating this simply required the following HTML:

<A HREF="resource.cntnts.html"><IMG SRC="home.gif" ALT="Home Room"></A>

I started off with my hypertext link to a web page called "resource.cntnts.html" using a regular hypertext tag, <A HREF="resource.cntnts.html"></A>, and then inserted <IMG SRC="home.gif" ALT="Home Room"> in the middle of it, right in the place I might otherwise insert some text.

One last trick: As you can see above, turning a graphic into a hypertext link puts a highlighted border around the image. If you don't want that border to appear for one reason or another, yet still want to have a hyperlinked image, you can use what's known as a border tag, or BORDER=X. When using this tag, you change the letter X to the size of the border you want around the image. So, if you don't want any kind of border, you'd have insert BORDER=0 into your larger image tag, like so:

It's still an active hyperlink, but the border is no longer there. Try it out if you don't believe me.

And of course, the converse of this would be to give the image a large border, such as BORDER=20. The results of that would look like

And unless you're trying to put a frame around a scanned picture of Starry Night, I'm not sure why you'd want to do this. To each his own, though...

Interactive Quiz

Think you're ready to become a hotshot multimedia producer? Find out by testing your HTML image using abilities with the next interactive HTML quiz.

When you're done with it, move on to the final section or review the current lesson again.