Interactive HTML Tutorial

Lesson 4 - Images

This lesson introduces how images and other graphical elements are incorporated into an HTML document, along with some basic image attributes.

Images - An Introduction

The <IMG> tag is used to incorporate graphics (typically icons or pictures) into an HTML document. Any image can be added to a web page, provided it is in GIF or JPEG file format. Also bear in mind that the larger an image's file size is, the longer it will take to download in a viewer's browser. "Image Source" and "Image Size" are the minimum attributes required for displaying an image.

Image Source:

The image source tag <SRC=> tells the browser where the image is physically stored so that it can retrieve and display it. It is important to remember that file names are case sensitive and must be typed correctly.

Another important point to remember is that if an image is not stored in the same directory as the HTML documents, then the directory name must be included with the file name. Programmers commonly store images in a separate directory - often aptly titled "images". Thus an image source might appear written in HTML code as SRC="images/picture.gif". If an image is incorrectly named, missing or is listed in the wrong directory, a "broken graphic" icon will be displayed.

Image Size:

Although not absolutely required, it is good practise to include HEIGHT and WIDTH information within the <IMG> tag. This speeds up the downloading process by allowing faster-loading text to load around areas where images will eventually appear. HEIGHT and WIDTH values are measured in pixels. Do not try to make the image smaller or larger by adjusting these attributes as you risk distorting the image by doing so.

HTML Code   Browser Display
<IMG SRC="woman.gif" WIDTH=32 HEIGHT=32>  

Image Attributes

Image Alignment:

Use the LEFT, RIGHT or CENTER attributes within the <IMG> tag to align images relative to the browser window. See below for examples of how these attributes are used:

HTML Code   Browser Display
<IMG SRC="woman.gif" WIDTH=32 HEIGHT=32 ALIGN=LEFT>  
<CENTER><IMG SRC="woman.gif" WIDTH=32 HEIGHT=32></CENTER>  
<IMG SRC="woman.gif" WIDTH=32 HEIGHT=32 ALIGN=RIGHT>  

Image Alignment with Text:

By default the bottom of an image is aligned with any text that follows, as shown below:

HTML Code   Browser Display

<IMG SRC="hand.gif" WIDTH=108 HEIGHT=79>This hand is very big!
  This hand is very big!

Vertical placement of text beside images can be altered from the bottom default setting by using the attributes ALIGN=TOP or ALIGN=CENTER, as shown below:

HTML Code   Browser Display

<IMG SRC="hand.gif" WIDTH=108 HEIGHT=79 ALIGN=TOP>This hand is big!
  This hand is big!

<IMG SRC="hand.gif" WIDTH=108 HEIGHT=79 ALIGN=CENTER>This hand is big!
  This hand is big!

Yet another option is to force text to appear under an image rather than beside it. For this effect, use the <BR CLEAR=ALL> tag to place a line break after an image, which will cause the text that follows to begin on the next line.

HTML Code   Browser Display

<IMG SRC="hand.gif" WIDTH=108 HEIGHT=79 ALIGN=TOP><BR CLEAR=ALL>This hand is big!
This hand is big!

Alternate Text

A good rule of thumb is to include alternate text that describes the image within an <IMG> tag.
This is done for a number of reasons -

  1. While the browser is still loading the viewer can still see the title or caption.

  2. If the picture does not load, the viewer can still see the title or caption.

  3. Users who choose to turn off image display in their browsers (a possible setting under the "preferences" menu), can still see the picture contents.
To do this the "ALT" attribute is used. See below for an example of this attribute in use:

HTML Code   Browser Display

<IMG SRC="hand.gif" WIDTH=108 HEIGHT=79 ALT="Big Hand">
  Big Hand

Try it out!

In the box below, type the following HTML code, then click the "View" button. The HTML document you have written will be displayed in your browser. You may wish to change some of the tags and/or attributes to experiment with some of the different items discussed in this lesson.

NOTE: If you would like to put one of the graphics from these lessons into your code, include the entire address. EG.

Try typing this:







(To return to this page after viewing click "Back" on your browser.)

 Lesson 3      Lesson 5 

Index | Lesson 1 | Lesson 2 | Lesson 3 | Lesson 4 | Lesson 5 | Lesson 6 | Lesson 7 | Lesson 8
HTML Reference Guide

Copyright Alternet Web Design