Home HTML and CSS Tutorials The Basics of HTML

The Basics of HTML

Author: Selena Sol More by this author

Added: Oct 10, 2005 Rating:

Level: All levels Software: Dreamweaver

Clickable Images

Another cool trick you can do with images is to make them clickable. That is, you can put an anchor tag around them so that when the user moves their mouse over the image, they will be able to click on the image in order to go to some other page.
The process is exactly the same as for making text-based links except that you place the image where the text was.
In the following example, we make the icon clickable so that when the user clicks on it, they will be transported to the table of contents page for this tutorial. Remember that you can click on your browser's back button to return to this page.

<HTML>
<HEAD>
<TITLE>Click Here</TITLE>
</HEAD>
<BODY>
<A HREF = "toc.html">
<IMG SRC = "http://www.eff.org/asterix_icon.gif">
</A>
</BODY>
</HTML>

Below we have added the above code to this page and made the clickable image for you to try out.

Notice that the image above is surrounded by a blue box. This blue box is like the underlining of link text. It lets the user know that the image is clickable.
However, in many cases, you will not want the blue box around your image. If this is the case, you need only set the BORDER attribute of the IMG tag to "0". For example, we can turn the border in the above image off by using the following code:

In this case, our clickable image would appear as below:

Image Placement and Alignment

There are several attributes that affect how images are set within the page. These include: ALIGN, HSPACE and VSPACE, and HEIGHT and WIDTH.
The ALIGN attribute specifies where text will be placed relative to an image and how it will wrap around an image. You can specify an alignment of TOP, BOTTOM, CENTER, LEFT or RIGHT. The attribute is applied generically as follows:

Let's take a look at an example since this is the easiest way to really understand image alignment coding. Consider the following HTML code:

<HTML>
<HEAD>
<TITLE>Image Alignment</TITLE>
</HEAD>

<BODY>
<B>No alignment</B><BR>
<IMG SRC = "afraid_icon.gif">
Here is some text for the non aligned image

<P>

<B>left alignment</B><BR>

<IMG SRC = "afraid_icon.gif" ALIGN = "LEFT">
Here is some text for the left aligned image

<BR CLEAR = "ALL">

<P>

<B>right alignment</B><BR>
<IMG SRC = "afraid_icon.gif" ALIGN = "RIGHT">
Here is some text for the right aligned image


<BR CLEAR = "ALL">

<P>

<B>center alignment</B><BR>
<IMG SRC = "afraid_icon.gif" ALIGN = "CENTER">
Here is some text for the center aligned image

<BR CLEAR = "ALL">

<P>

<B>top alignment</B><BR>
<IMG SRC = "afraid_icon.gif" ALIGN = "TOP">
Here is some text for the top aligned image

<BR CLEAR = "ALL">

<P>

<B>bottom alignment</B><BR>
<IMG SRC = "afraid_icon.gif" ALIGN = "BOTTOM">
Here is some text for the bottom aligned image
</BODY>
</HTML>

Notice the use of the <BR CLEAR = "ALL"> tag. By using this tag, you let the web browser know that your alignment instructions have terminated. This allows you to return to normal alignment.
The following image shows how a web browser would interpret the code above:

Image Size

Image size is controlled by the WIDTH and HEIGHT attributes.
It is a good idea for you to always include these values because when they are defined, the web browser will know how much space to leave for the image and can continue to display the rest of the page while the image loads. Otherwise, text does not appear until after the images have loaded, and it is no fun waiting for graphics on a 28.8 modem!
The height and width need not be the actual height and width of the images either. The web browser will scale images to fit in the space you define with the HEIGHT and WIDTH attributes.
The attributes are applied as usual. The following example shows an image sized to its true size and the same image scaled: