Introduction To HTML

A word of caution

Images can be significantly larger files than web pages themselves and will slow down the rendering of your pages if too many large images are included on one page. When using or creating images you should make sure of the following.

The image is saved in an appropriate place.
The image is no larger than it need be.
There is no unnecessary white space around the image.
The imaged is saved as a .jpg, .png or .gif file. (file formats which offer some image compression)

All of the above can be achieved in open source software like the GIMP.

Image Tags

<img src=" " alt=" " align=" " border=" " height=" " width=" ">

The Src Attribute

This is always needed. It tells the browser the location of the image to load.

The Alt Attribute

Here, Alt means Alternative and is the text that should be displayed if the image fails to load. This is always worth entering.

The Align Attribute

Add left or right to get the image to float around text and other elements.

The Border Attribute

Make the border equal to a number greater than 0 and there will be a border around the image.

The Height & Width Attributes

By specifying the height and width of the image you intend to load, you allow the browser to display a placeholder the image, the same size as the intended image. If the dimensions you speicify do not match those of the actual picture, it will be resized to fit but may be distorted.