Beginners guide to HTML

Lesson 5 - Simple Images

There are two types of images that are understood by all web browsers:-

GIF Best for Line drawn pictures and simple graphics
JPEG Best for pictures and photographs

Both are inserted into web pages in the same way. You need images in one of these formats to use them.

Simple Images

Insert <img src="xxxxx.gif"> or <img src="yyyyy.jpeg"> as appropriate. The xxxxx / yyyyy are the file names, the .gif / .jpeg denote the image types. The file names can be links to other directories in the same way as for links. SRC stands for source - ie where the image comes from. Always use lowercase .jpeg / .gif extension names. Inserted this way the images will be on the left of the page with text to the right just continuing on.

Returning to the left margin

After a picture with a small amount of text on the right, you may wish to force a break and continue at the left margin. To do this, at the end of the text do <br clear=all>

More Control

You may wish to put the picture on the right on in the center of the page, you should put the size of the picture (to allow the browser to layout the page before it fetches the picture), you should put a text alternative for a picture (to allow use of the page by audio or text only browsers). To do these you add a lot more to the <img> markup:

<IMG SRC="House.gif" ALT="The House" WIDTH=XXX HEIGHT=YYY ALIGN=RIGHT BORDER=B HSPACE=AAA VSPACE=BBB>

SRC="House.gif" Source of the Image.
ALT="The House" A textual description of the image if possible. If the web page makes sense without the image you can say ALT="" which means that it has a text name, but is blank.

WIDTH=XXX
HEIGHT=YYY These tell the browser what size to produce the picture. Normally these are the same as the image size, but they can be larger or smaller to grow or shrink the image. The XXX and YYY are numbers of pixels.

ALIGN=RIGHT Aligns the picture to the right of the page likewise ALIGN=CENTER, aligns it in the center of the page.

BORDER=B If the picture is a link, this tells the browser the width of the border to place round the image. The only really useful value is BORDER=0 which stops it putting a border around a picture.

HSPACE=AAA
VSPACE=BBB These tell the browser how much space to allow at the sides and top / bottom around a picture. Not usually required. The AAA and BBB are numbers.

(Someday there will be a lesson 9 on more advanced image processing)

Next Lesson | Back to the index | Previous Lesson | Exercises

Home | Advice | Hosting

Updated 17th of October 2002

GIF	Best for Line drawn pictures and simple graphics
JPEG	Best for pictures and photographs

SRC="House.gif"	Source of the Image.
ALT="The House"	A textual description of the image if possible. If the web page makes sense without the image you can say ALT="" which means that it has a text name, but is blank.
WIDTH=XXX HEIGHT=YYY	These tell the browser what size to produce the picture. Normally these are the same as the image size, but they can be larger or smaller to grow or shrink the image. The XXX and YYY are numbers of pixels.
ALIGN=RIGHT	Aligns the picture to the right of the page likewise ALIGN=CENTER, aligns it in the center of the page.
BORDER=B	If the picture is a link, this tells the browser the width of the border to place round the image. The only really useful value is BORDER=0 which stops it putting a border around a picture.
HSPACE=AAA VSPACE=BBB	These tell the browser how much space to allow at the sides and top / bottom around a picture. Not usually required. The AAA and BBB are numbers.