HTML Tutorial 09 – text and graphics

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

2. You add the graphics using the simple tag –

<IMG SRC=”filename.gif”>

This is inserted into the page at the place where you want the graphic to appear. And the graphic file would need to be saved into the same folder as your filename.htm page.

Learning Web Design - Click for details at Amazon
3. But the graphic will simply appear on the page with text before it and after it. You would probably prefer the text to wrap round the graphic, in the same way that the text is doing here – wouldn’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 wrap the text around the graphic.

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=”10″ vspace=”5″>

5. This creates a 10 and 5 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. The items are on separate lines to make them easier to read.

<IMG SRC=”../graphics/hafner.gif”

align=”left” hspace=”7″ vspace=”5″ border=”0″

alt=”The Origins of the Internet”

width=”90″ height=”140″>

© Roy Johnson 2002



  • Study Skills 2.0 (html)Study Skills 2.0

    Study Skills covers every aspect of study skills – reading, writing, research, revision, exams, and even presentations. Learn how to absorb information quickly. Study effectively by using good time management skills. How to digest books and summarise their contents. Suitable for all students in further and higher education. Runs in any Web browser. Latest version […]

    Order Study Skills 2.0 Study Skills 2.0 @ £4.95

Buy from Amazon US     Buy from Amazon UK

You can leave a response, or trackback from your own site.

If you found this article interesting you might want to Tell-A-Friend.

Tell A Friend
  1. (required)
  2. (valid email required)
  3. (required)
  4. (valid email required)

cforms contact form by delicious:days

2 Responses to “HTML Tutorial 09 – text and graphics”

  1. JW Najarian says:

    What if you want text to show over graphic as opposed to left or right?

  2. mantex says:

    In such a case, you would need to use cascading style sheets (CSS) and layers.

Leave a Reply


Powered by eShop v.6