HTML Image Tag Reference

Free computer Tutorials

Stay at Home and Learn

Web Design Tutorials

Computer Tutorials List

Image Tag Reference

Insert a Background Image

If you want to use a background image instead of a colour, the code goes into the BODY tag:

<BODY BACKGROUND = ImageName.FileType>

Normal Images

The code to insert a normal image is this:

<IMG SRC = "ImageName.FileType">

A common mistake is this:

<IMGSRC = "planet.jpg">

And this is another common mistake:

<IMG SCR = "planet.gif">

Referencing

When telling the browser where your image is, use Relative referencing rather the Absolute referencing:

Relative <BODY BACKGROUND = planet.jpg>

Absolute <BODY BACKGROUND = C:\Images\planet.jpg>

But bear this in mind: These two are different image files:

planet.jpg
Planet.jpg

The first is lowercase "p" and the second a capital "P". If you get it wrong, the image won't appear. File names are case sensitive.

Image Types

The two most popular File Types used on web pages are JPEG and GIF images:

<BODY BACKGROUND = ImageName.jpg>

<BODY BACKGROUND = ImageName.gif>

Image Attribute List

There are a number of ways to extend the Image tag. Here's a fuller list:

ALT

The alternative text to use if the image doesn't display:

<img src = planet.jpg ALT = "Planet Image">

ALIGN

Used for text wrap. The two basic options are Align = Left and Align = Right.

<img src = planet.jpg ALIGN = Left>

<img src = planet.jpg ALIGN = Right>

HEIGHT

Specify a new Height for your image

<img src = planet.jpg Height = 600>

WIDTH

Specify a new Width for your image

<img src = planet.jpg Width = 600>

BORDER

Adds a border around your image when used with links. To switch the border off, set it to zero

<img src = planet.jpg BORDER = 5>

HSPACE

Adds a bit of space above and below an image when used with the ALIGN tag

<img src = planet.jpg Align = Left HSPACE = 20>

VSPACE

Adds a bit of space to the sides an image when used with the ALIGN tag

<img src = planet.jpg Align = Right VSPACE = 20>

USEMAP

Specifies an image map to use with an image (covered later)

One last thing before we leave the subject of Images. You'll remember that using the Align tag is for text wrapping, and that it was stated there are a number of ways to align an image if you don't want text wrapping around your picture. Here's one solution using your HTML editor.

Take out any align tags in the image
Highlight the image you want aligning
From the menu bar, click on Format
From the drop down menu, click on Align Right
The result will be this:

<Div Align = "Right">
<IMG SRC = "planet.jpg">
</Div>

Now, your image will align to the right, but you can put text above and below the image, without the text wrapping to the left or right.

In the next section, we'll move on and look at how text can be formatted on a web page.

<-- Back One Page Move on to Text Formatting-->

<--Back to the Web Design Contents Page

View all our Home Study Computer Courses