HTML - The Basics

Images

There are several image formats which can be found on webpages. The two most common are the GIF and JPEG formats. Both these file formats are compact in size and easy to load. This page will not tell you how to create images, but it will discuss how images are displayed in your web pages.

The basic image tag IMG is a single tag. The filename of the picture is placed within the double quotes. For the picture to display properly, you must include the SRC=" " part of the tag

<IMG SRC="boy.gif">
<IMG SRC="girl.gif">

It is useful to annotate the picture, as sometimes, browsers are set not to download pictures.

<IMG SRC="boy.gif" ALT="bowing boy">
<IMG SRC="girl.gif" ALT="bowing girl">
bowing boybowing girl
Even though it may not appear after the picture has downloaded, in some browsers, if you hover your cursor over the picture, the comment you placed appears. Please note that you must keep your comments short and succinct.

The picture can be changed, for example the size

<IMG SRC="dragon.gif" HEIGHT="100" WIDTH="150"> 
<IMG SRC="dragon.gif">

The second gif is unchanged, and its squares are proportioned.


Text around pictures

Texts can be aligned to the top, middle and bottom of the images.

<IMG SRC="boy.gif">This is a boy
<IMG SRC="girl.gif">This is a girl.
<HR>
<IMG SRC="boy.gif" ALIGN="top">
This is a boy
<IMG SRC="girl.gif">This is a girl.
<HR>
<IMG SRC="boy.gif" ALIGN="middle">
This is a boy
<IMG SRC="girl.gif">This is a girl.
<HR>
<IMG SRC="boy.gif" ALIGN="bottom">
This is a boy
<IMG SRC="girl.gif">This is a girl.
This is a boy. This is a girl.
This is a boy. This is a girl.
This is a boy. This is a girl.
This is a boy. This is a girl.

Notice the relative postion of the girl.gif picture after the text.


Previous : Index : Next