Skip Navigation.

NWE Help: Web: Authoring: HTML: Images

NWE Home :: Help :: Web :: Authoring :: HTML

SRC attribute

To add an image, use an <IMG> tag. (Remember that the <IMG> tag requires a SRC attribute.) Here are several examples for various image locations:

Image location Tag
Same directory as document <IMG SRC="filename.jpeg">
Different directory in your files <IMG SRC="/~rbarthes/1102/pix/ahab.gif">
Another NWE student's directory <IMG SRC="/~jlacan/cinnamon.jpeg">
A different computer on the 'Net <IMG SRC="http://www.clas.ufl.edu/~dna/imbragiue.gif">

  • Notice that after the = sign, there is a pair of quotes. A common mistake for beginners and professionals alike is to leave out a closing quote, a mistake which will cause an error.

  • To use an image as the BACKGROUND for your web page, add the attribute 'background' with the location of the image (see the table above) to your <BODY> tag. For example, <BODY BACKGROUND="myimage.gif">

HEIGHT and WIDTH attributes

Specifying height and width will make the image load after the document loads (which is easier on modem users). This can also be used to make the image smaller or larger. To find height and width easily, open the image in a Navigator window and look at the titlebar -- the data will be there for you. Alternately, you can launch XV image viewer and get info on the image. Here's a fuller image tag:

    <IMG SRC="image.gif" HEIGHT="100" WIDTH="200">

ALT attribute
No image here

You should also include some alternate text with your image using the "alt" attribute. This is important for two reasons. First, your reader may not be using a browser that can support images (like lynx), in which case the alternate text will be the only evidence of that image the reader will see. Second, your reader may, for whatever reason, not be able to see your image, in which case the alternative text could be a valuable option. (See our example to the right)

    <IMG SRC="image.gif" HEIGHT="100" WIDTH="200" ALT="alternate text">

ALIGN attribute

aligned right! There are also ways to align images and wrap text around them. (For example, as with our image to the right.) Experiment with tags like these:

    <IMG SRC="image.gif" HEIGHT="100" WIDTH="200" ALT="alternate text" ALIGN="RIGHT">

Other attributes

Finally, including some other atttributes in your image tag is a good idea. Here is a fully resolved image tag and an explanation of what each new attribute does:

<IMG SRC="filename.gif" HEIGHT="100" WIDTH="200" ALT="alternate text"
  BORDER="0" ALIGN=LEFT VSPACE="5" HSPACE="5" MAP="#mapname">
Attribute Purpose
BORDER Renders border around image
ALIGN Specifies method of alignment for image
VSPACE Sets amount of space above and below image (in pixels)
HSPACE Sets amount of space to left and right of image (in pixels)
NAME Assigns image a name
MAP Connects image to a client-side imagemap

Not sure which image to use? Try looking for an image on the web.

 

Back: Styling Text
Next: Linking