[HTML][JavaScript][Computer Stuff][Freeing the Mind]

Ken Ward's HTML Tutorial ...

Putting Images in the document!

We can insert images into a document using tags. The image on the left is inserted by using the following code;

The <img src="Back.jpg" part tells the browser which image to load, in this case the image Back.jpg.

The alt= part gives the image an alternative presentation as text. That is, when you move your cursor over the image, it gives a message - 'This is back image'. This is useful for people with certain disabilities and enables search engines to read what the image is about. Putting in alternative text is therefore important. To meet future standards, the image tag must have an alt= attribute.

Note: to meet future standards, the image tag MUST have an "alt" attribute. Even if it is: alt="", that is nothing. But this is a waste of this valuable property, so try to give images a meaningful alt value, to help text-only and talking browsers.

If you do not enter an ALT message some editors put in a default. At one time if you had searched Alta Vista for "b231.gif (23175) bytes" (the default inserted by Front Page) my page would have come up straight away! So remember to put in a meaningful message because search engines as well as people use the ALT message!

The border="0" removes the line around the image when it is used as a hyperlink. Although this border tells the human browser it is a hyperlink, some people think it's ugly and use border="0"!

The image on the right has the code; <img src="button.gif" alt="Back image" align="right">

This puts the image on the right (whereas in the first case, because there wasn't an align in the tag, it defaulted to the left.)

In both cases the text wraps around the image, as the image tag isn't a block!

To keep the image on its own without any text wrap (as with the image above and this line of text) use the following tag:

<br clear="all" /> This stops the text from wrapping around the image, as in the previous cases. Remember the " />" to meet new standards, and to work with old browsers too!

Let's look at some values for alignment!

[back to: jumping to a particular place in a document]
[home][contents]
[on to: alignment]

I am always pleased to hear from you.
Send your comments to