Using pictures

The tag you need to use is the IMG tag, specifying the picture's filename as SRC=""

<IMG SRC="mypic.gif" WIDTH=20 HEIGHT=30 BORDER=0>

The width and height attributes specify how large the picture is. If the picture is not exactly the right size, it will be stretched to fit the size specified. If the size is not specified, the browser will use the actual size of the picture, but the page will take longer to load.

The border of the picture specifies whether a box should be drawn around it. For most pictures, you will want to set BORDER=0

Alignment

- you can specify how the picture lines up with the text

Top  , Middle  , Bottom  of text.

Using single-pixel pictures

An interesting feature of HTML is that if the picture specified is too small for the area allocated to it, your browser stretches or shrinks the picture to fit.

If you use this feature with pictures one pixel wide by one pixel high, you can stretch them to fill squares in your document.

 

Company Letterhead

You can even use these stretched pictures to divide paragraphs of text

The format used was:

<IMG SRC="single_pixel_turquoise.gif" WIDTH="100%" HEIGHT=1>

Using bullets

The bullets refered to are only pictures, and you can't shoot them

Bulleted lists draw attention to key points in a page of text

Bullets are simply small pictures in-line with the text. They must have a height and with specified, or they will slow down the loading of the page.

The ALT attribute

ALT can be used to specify a test alternative to the picture. If the browser is text only, or if the picture cannot be found, this text will be displayed instead

In netscape, this text is also displayed when you leave the mouse over a picture. Place the mouse over the picture above, and leave it for a couple of seconds to see the text.

The preview file

You can specify a preview file, or another file which will be displayed while the user is waiting for the picture to load. This should be a much smaller picture, of the same shape, that just shows the main colours and shapes of the main picture.

You can generate preview, or thumbnail pictures in many graphics packages, by re-sizing or re-sampling the picture to about 30 pixels wide, and saving it as a new filename.

Thumbnail pictures

Often, you will want to show your users a whole gallery of small pictures, where they can click on one of them to see the full picture.

You will need to create a smaller version of the picture, as described above. About 50 pixels wide is a typical size.

Put the small picture on your page, and include a link to the main picture. Make sure the BORDER attribute is set to 0.

<A HREF="picture.gif">

<IMG SRC="picture_small.gif" width=50 height=40 border=0

ALT="Click here to see full picture">

</A>

Next section: designing forms

(Valid HTML 4.01)