Inserting Graphics
Adding graphics to your pages will add interest to your text and of course you will probably want to put up photographs of friends and family on your home pages.

There are a few steps to go through before you can display images on the page.

  • Find a suitable picture
  • Scan it and edit it so that it looks the way you want it to look
  • Adjust the size of the image so that it will fit on your page
  • Note the size of your image, in pixels
  • Save it as a .jpg (Pronounced jaypeg) or a .gif image.
  • Move the image to the same folder as your HTML files/pages
  • Add the <img> tag to your HTML script
A simple example:

Webpage sketch1Here is the image of the sketch again. Note that the image is set to the left of the page and this text is forced to wrap round it. The code to produce this effect is:

<img src="websketch1320285.gif" alt="Webpage sketch1" align="left" border="2">

The name of the image is websketch1320285.gif; the alt="Webpage sketch1" causes the words Webpage sketch1 to appear when the mouse pointer is placed over the image; align="left" forces the image to the left of the page (you can use "right" or "center" also), and border="2" makes a 2-pixel black border round the image.

Have a look at the source code of this page to see this at work. (Right click on the page, View Source)

Back to Top

1