RichInStyle.com HTML 4 guide - Images

Contents

Introduction

One of the most important things on the web is images. Without them, the web would be a different place.

This means that is important to use them correctly. Important issues include:

1. accessibility
2. the type of image to use

The IMG element

The IMG element is used to specify the location of an image. For example: <IMG src="ball.gif" alt="A ball">. Thus the image has two parts:

1. Its location, specified using the src attribute; e.g., <IMG src="http://www.foo.com/ball.gif">
2. Its alternative description, useful for:
   1. People who surf with images turned off
   2. Blind people for audio rendering
   3. Browsers that don't support images

Here's some example code:

<IMG src="holiday.gif" alt="Pictures from my holiday">

In addition to these attributes, the following may be used:

1. height; if omitted, the image's intrinsic height is used - useful for stretching images. E.g., <IMG src="green.gif" alt="A picture of the countryside" height="100">. Heights are specified in pixels.
2. width; if omitted, the image's intrinsic width is used - useful for stretching images. E.g., <IMG src="green.gif" alt="A picture of the countryside" width="100">. Widths are specified in pixels.

Thus the following piece of code would give a 100 by 100 image:

<IMG height=100 width=100 src="holiday.gif" alt="Pictures from my holiday">

Image types

An important concern on the the web is which file format to use. There are basically three types: gif, jpeg and png. Of these png suffers problems in that it is not supported by a lot of browsers. Gif and jpeg are both well-supported; however, jpeg is to be preferred for photographs because it results in smaller files for these.

All other formats (such as bmp) should be avoided.

More advanced concepts

There are more advanced concepts regarding images. However, you will need to consult the section on objects if you wish to learn more about these.

The next section of this HTML tutorial deals with more advanced concepts.

Copyright © RichInStyle.com 2000; all rights reserved. See copyright document for terms of use. Please visit Bukit Lawang flood appeal.