HTML - text & graphics

1. Once you have managed to produce a web page full of text, the next thing you usually want is to add graphics.

2. You add the graphics using the simple tag -

<IMG SRC="filename.gif">

3. But browsers will show these one after the other, like the rungs of a step ladder. You probably want the text to wrap round the graphic, in the same way that the text is doing here - don't you? This makes for a neater and more interesting page.

Incidentally, your graphic can also be a link. If you click the book cover here, you will be taken to Amazon, where you can order the book. Here's how to do it.

4. Add the following INSIDE the tag

ALIGN=left [or right]

hspace=x [where x=number of pixels]

vspace=x [where x=number of pixels]

So the tag should look like this:

<IMG SRC="filename.gif"align=left hspace=5 vspace=8>

5. This creates a 5 and 8 pixel gap around the side and the bottom of the graphic - to stop your text bumping into the picture.

6. Experiment with the x=number to see the effect.

7. If you want to add another refinement, you can add a border.

BORDER=x [where x=number of pixels]

8. And you should set x=0 for no border.

9. You can also add a title:

ALT="Picture courtesy of Media-Pics plc"

10. This will show up on screen when you move your cursor over the graphic. It is NOT a caption to the picture.

11. And you might wish to add the size of your graphic file.

WIDTH=x [where x=number of pixels]

HEIGHT=x [where x=number of pixels]

12. You find these dimensions by opening the graphic file in your graphics editor and looking at the size or dimensions.

13. Adding the dimensions will help your page download faster - because the browser knows how big a space to leave for the picture before it starts loading.

14. So - here's an example of all these features in one tag:

<IMG SRC="../graphics/hafner.gif"
align=left hspace=7 vspace=5 border=0
alt="The Origins of the Internet"
width="90" height="140">