Pictures make a page more interesting. They can easily be added! All graphics must either have the file extension ".gif" or ".jpg" (or ".jpeg"). The tag we use is <IMG SRC="picture">. There is no ending tag. Here are several examples:

<IMG SRC="pic.gif">
<IMG SRC="graphic.gif">
<IMG SRC="me.jpg">

Aligning Graphics

All graphics are defaulted to be aligned on the left (graphic will be placed on the left hand side of the screen). To change the alignment we can use the attribute ALIGN="..." inside of the graphic tag:

<IMG SRC="graphic.gif" ALIGN="right">
<IMG SRC="me.jpg" ALIGN="left">

Here is an example using the different alignments:

To center an image on the screen we need to use the tags <DIV ALIGN="CENTER"> and </DIV>:

Aligning Images with Text

It would be nice if we can format text around images. We can also use the ALIGN attribute to align text with an image. In this case we use ALIGN="top", ALIGN="middle" or ALIGN="bottom" inside the tag <IMG>:

<IMG SRC="smiley.gif" ALIGN="top">Write text here!

Write text here!

<IMG SRC="smiley.gif" ALIGN="middle">Write text here!

Write text here!

<IMG SRC="smiley.gif" ALIGN="bottom">Write text here!

Write text here!

Using Graphics as Links

We can also use an image to link to another page. In place of where the text goes for the link, we use the graphic tag. Here is what it will look like:

<A HREF="link.html"><IMG SRC="smiley.gif"></A>

And here is the result (clicking on the image will go to the links page):

Notice the box around the image. When using a graphic as a link, the browser will put a box around it to show that it is a link (just like text is underlined to show that it is a link). We can get rid of the box by adding the attribute BORDER="0" to the image tag:

<A HREF="link.html"><IMG SRC="smiley.gif" BORDER="0"></A>

And here is what it will look like now:

This page has been accessed

times since June 24, 2001

Last Updated March 21, 2001