Adding pictures and sounds

So far, we've only dealt with adding text to your pages. You can, of course, jazz things up a bit with pictures, photographs, video clips and sound.

You use the <img> tag to add pictures, for example a photograph, to your page. Normally, you would use a gif, or jpg file but you can also use a bmp or png file.

To add a picture enter the filename and the path to the file inside the <img>. For example:

<img src="earth.gif">

The src attribute specifies the name of the picture file (earth.gif). You might want to create all your pictures in one directory; its easier to organise and share them if you do. This name can include directories for a full URL (like a link can).

You can also enter alternative text for people who won't be able to see your picture. This might be people who turn off graphics make pages load quicker or people who use a browser that can't display graphics. The text appears in place of the graphic or it appears when you move the mouse over the graphic. For example:

<img src="earth.gif" alt="Picture of the Earth">

The alt attribute gives a short description of the picture. A text-only browser, for example, displays the text "Picture of the Earth" in place of the picture.

For each picture, you can also specify the size of the picture (the width and height), the alignment of the picture and decides how text wraps round your pictures.

Be careful with picture; the more you have the longer it takes to load the page. Some guidelines suggest no more than 50K of graphics on a page. I've see figures that suggest a page with 80K of graphics can take 24 seconds to load on a 28.8 kbps modem and nearly 50 seconds on a 14.4kbps modem.

If you want more information about the types of pictures you can use, see Gifs, jpegs and animated gifs?

You can use an image map to allow users to access other pages by clicking on parts of the picture, make a picture a link, add video clips to your page, embed sounds and even apply simple animation to text.