Adding an Image

This is done using the <img.......... tag. src="picture.gif" specifies the source file for this image. The alt="text" attribute (alternative) is not required, but should be used for several rasons:

• This text will dsiplay while the picure is loading.
• Some people surf with images swiched off in their browsers (for speed) this text tells them what the image is.
• Some people may not want to wait for images to load before moving on.
• Some people use text only browsers (very few nowerdays).
• The visually impared can't see your page they rely on text to speach software to hear the page. Their software will speak this text.

Note - there is no closing tag for an image. It would be illogical to have one. But new standards on the web mean it should have one. The work around to be future proof and work at the present is the special ending of this tag a space followed by a /. If you are not concerned about the future simply enter the tag without the end:

<IMG src="picture.gif" alt="TEXT YOU WANT WHILE THE PICTURE IS LOADING">

This does not align the image on the page, rather it aligns the image with the surrounding text - to the left of text, to the right of text, top aligned with the text, bottom aligned with text or the middle aligned with text. Try some of these to see the effect - you will need text both before and after the image to see the effects.

This is used to control the width of the border. The number of pixels is specified by the value. Zero means no border and is the most common, as by default there will be no border. You may want to use zero if the image is used as a link otherwise the border will be blue (the default colour of links)

Sets the width of the image, your graphics editor will provide this or use my computer or windows explorer and right click the image and select properties.

As above except sets the height.

Note

You do not need to specify the size. If you do not, the web browser will start to assemble the page on the users screen and only when it has downloaded the image will it know how much space it needs. At this point, the other elements in the page will jump apart to make space for the image. This is not elegant. Had you specified a size the browser would have left a space into which it could neatly drop the image.

You can specify a size smaller or larger than the actual image size, in which case the browser will shrink or enlarge the image to the size specified. This is not good practice.

• If the image is larger than you specify you are wasting bandwidth and time to download the image. It would be better to resize the image itself.
• If the image is smaller than you specify enlarging it will reduce the resolution and it will not look so good.