Advanced Features

It is good coding practice to include the size of any images (given as its dimensions in pixels) along with their location.

By specifying an image's size you allow the browser to leave space for it and load the text around it. The text can then be read while these images load preventing viewers from leaving. Images will continue loading but the text can already be read. If you don't specify image sizes nothing will be visible on the page until everything has downloaded.

The full coding for the wolf image looks like this:

<img src="images/wolf.gif" width="111" height="68" alt="Winter Wolf">.

You will notice The coding for the image also includes the alt="Winter Wolf" command. When a mouse pointer moves over the image this title is displayed. It also lets no-image browsers show a description of missing content and for sight impaired surfers it will be read out.

Valid XHTML 1.0 Transitional

Images

A Web page will always benefit from a well placed image here and there. A sea of text (like the page you're looking at!) is not very compelling to the casual viewer. Of course too many images and not enough information can be just as bad.

Regardless of the nature of the page the system for entering an image is the same.

Before proceeding find an image and place it in the images folder you created in step 3.

  1. Select a suitable location within the body of your .html file and open a new <p> tag. Following the tag enter:

    <p>I like to look at and smell trees but I also like talking about them. If you are like-minded contact me <a href="mailto:bob@trees.com"> bob@trees.com</a> and we can exchange some arboreal correspondence.</p>
    <p><img src="images/enter the name of one of your images here" /></p>

  2. I have an image called wolf.gif in my images sub-folder. If I wished to display this image the coding would look like this:

    <p>I went on holiday this winter and I took this picture of a Timber Wolf walking across a frozen lake.</p>
    <p><img src="images/wolf.gif" /></p>

    The browser would display it like this:

    I went on holiday this winter and I took this picture of a Timber Wolf walking across a frozen lake.

    Winter Wolf

Next step: Lists →