Images

Images can be added to your document with the <img> tag. The format for this tag is:

<img src="filename" alt="text" {align="top|middle|bottom|left|right" border="pixels" usemap="#map_name"}>

The only formats allowed in an Image tag are GIF, PNG and JPEG (JPG). To view other formats, the user's browser must launch a separate application to view the image and the image will not appear as an integral part of the Web Page. Converters are available that can change the format of an image. Examples of using images are:

Writing ComputerThis is an example of TOP alignment.

Writing ComputerThis is an example of MIDDLE alignment. In all current browsers, this picture will appear to the left of the TOP alignment example and in others it will appear below it. Also notice how only one line of text appears next to the picture while the rest of the text appears below it.

Writing ComputerThis is an example of BOTTOM alignment.

Writing ComputerThis is an example of LEFT alignment with a 5 pixel border.

Writing ComputerThis is an example of RIGHT alignment. (Note that it overlaps the left aligned image.)

'How doth the little crocodile
Improve his shining tail,
And pour the waters of the Nile
On every golden scale!

'How cheerfully he seems to grin,
How neatly spread his claws,
And welcome little fishes in
With gently smiling jaws!'
(from Alice in Wonderland by Lewis Carroll)


Images can be used anywhere text is used. They can be included in Lists and Tables and can also be used as Hyperlinks.

Graphics make your Web page more attractive, but increase the time needed to load your page. If you reuse the same graphic in a Web page, it only has to be loaded once, saving time. Use graphics sparingly and use small graphics wherever possible. If you have a large graphic image, create a scaled "thumbnail" image and include the thumbnail on your main page as a Hyperlink to a separate page containing the larger image. This gives the viewer a choice.

Adding Captions to Images

<figure>
<img src="
filename" alt="text">
<figcaption>
caption text</figcaption>
</figure>

The caption text is placed below the image. NOTE: positioning may fail if align is used in the image tag.

Writing Computer
Bobble headed computer


Next Lesson Next Page

HTML Home