When your first web page is up on the World Wide Web, why not apply for our Good Start Award?

Text is, of course, essential on most web pages -- after all, it's often the best method of getting your message across. But if you want to liven up your page then you really need to use images.

Now I don't intend to go into all the details of how to create images for the internet; there are many sites on the World Wide Web where you can get information about this. There are even more sites where you can download free images for use on your pages. What I want to show you here is how to place the images on your page once you've got them.

There is, naturally, an HTML tag for displaying images; it's the <IMG> tag. With this tag, things start to get a little more complicated -- after all, we now have to include a lot more information in the tag. Let's suppose you have a picture file called computer.gif. The basic tag to display this image would be:

<IMG SRC="computer.gif">        

Note that by just quoting the filename we are assuming that the image file is in the same folder/directory as the HTML document -- if it's actually in a sub-folder/directory called images then we would have to specify the "path" to the image by putting something like:

<IMG SRC="images/computer.gif">.

Although just putting the image filename will work, there are a few other things we ought really to specify as well. Firstly, it can save time in downloading the file if we tell the browser the height and width of the image. In this way the browser can reserve a space for the image even before it downloads it. So now, the tag would become:

<IMG SRC="computer.gif" WIDTH=92 HEIGHT=92>

The height and width are quoted in "pixels", a pixel being one dot on the computer screen. Any image editor worth it's salt should tell you the size of the image. It's also possible to put a border around the image. If we leave out the BORDER width then no border will be put around the picture, otherwise the size of the border is again quoted in pixels:

<IMG SRC="computer.gif" WIDTH=92 HEIGHT=92 BORDER=2>        

Finally, what about the user who's switched off the display of images? We can put another bit into the tag to display text if the image isn't loaded. This is also helpful to blind or partially-sighted people who browse your page, because many of them have a device attached to the computer which will read this alternative text and tell them what the picture is about. To include some alternative text we have to add to the tag like this:

<IMG SRC="computer.gif" WIDTH=92 HEIGHT=92 BORDER=2 ALT="A computer">        

We can align images in exactly the same way as we can align text, by using the <CENTER> and <P ALIGN=RIGHT> tags. You can also place several images on the same line by just putting one image tag after another. We can control the placing of text alongside an image by using other additional items in the <IMG> tag. Firstly, we can dictate how the image is to be aligned vertically with any text. In the example below, the image is displayed so that the text is level with the middle of the image:

Here is some text with a picture. <IMG SRC="computer.gif" WIDTH=92 HEIGHT=92 BORDER=2 ALT="A computer" ALIGN=MIDDLE>        

As well as MIDDLE, we can also use TOP and BOTTOM. Slightly different alignment is given with TEXTTOP, ABSMIDDLE, ABSBOTTOM and BASELINE. Try them yourself to see the effect. LEFT and RIGHT can also be used to put the image on the left or right of the text:

<IMG SRC="computer.gif" WIDTH=92 HEIGHT=92 BORDER=0 ALT="A computer" ALIGN=RIGHT> I am putting a lot more text with this so that you can see the effect of the text wrapping around the picture, which has been placed on the right, even though the <IMG> tag comes before the text.
       

Finally, we can specify the amount of space to be left, both horizontally and vertically, between the text and the picture by using VSPACE= and HSPACE=. In our final example I have specified that a gap of 150 pixels is to be left between the text and the picture (much more than you'd normally use):

<IMG SRC="computer.gif" WIDTH=92 HEIGHT=92 BORDER=0 ALT="A computer" ALIGN=RIGHT HSPACE=150> I am putting a lot more text with this so that you can see the effect of the text wrapping around the picture, which has been placed on the right, even though the <IMG> tag comes before the text.
       

It worked alright on my machine, but now I can't see it!

A common complaint by newcomers to HTML is that they have uploaded their images and documents to their service provider, but the images will not show in their documents. In nearly all cases this is due to the filename given in the document not matching the actual name of the image file. As an example, if you have an image file called "myimage.gif" and you refer to it as "MyImage.GIF" in your document, it may appear to work perfectly on your own machine, but when you try to see it on the internet the picture doesn't show. This is because most service providers use an operating system called UNIX. Unlike Windows, UNIX is case-sensitive, in other words a file called "myimage.gif" is a different file to one called "MyImage.GIF" as far as UNIX is concerned. The safest way around this problem is always to use lowercase letters for all image and file names.

Well that's left you with a lot to think about. Do experiment with the various elements of the <IMG> tag and make sure that you really understand them. You can download the picture of the computer if you want. Click the right mouse button on the picture in your browser and then, if you are using Internet Explorer choose Save Picture As..., if you're using Netscape, choose Save Image As....

Once you are confident about using images on your pages, then you can go on to the real meat of HTML which is Linking to Other Pages and Sites.