How to add images to your web page

To add images to your web page, the first thing you need to know is that the image is going to be somewhere on the Internet too. It cannot be just in your computer. You will need to decide whether you are going to store the image file yourself in your own hosting service or if you will upload it to a file sharing website before going on.

The advantage of self-hosting your images is that you will always know they will be there until you erase them. The advantage of hosting your images somewhere else is that you save the bit rate for your pictures; however, if the owner of the other website removes the pictures from his or her site, your web page will not show any image in your <img> instruction.

Once you have a URL for the image, you will use the...

<img src="" alt="" width="" height="" title="" usemap="#">

...tag to include in the web page. src="" stands for source, and indicates the URL of the graphic you are going to use. alt="" stands for alternate text, and it will be what people with visual handicaps will listen as a description of your image. The width="" and height="" will indicate the browser the desired final size in pixels the image will have on the page; while title="" will indicate the text the browser will show when a user places the mouse over the image.

From all those six attributes, you may consider src="" and alt="" mandatory.

It is also possible to make the whole image or just some regions in it 'clickable', links. You will use the <a> tag to make a whole image a link; while the <map> tag for only some regions. Some examples will help you understand this better.


Let's start with the simplest of the examples. This is what I do to include the logo on my website on this web page:

<img id="logo" src="pics/heptagrama.png" alt="Heptagrama">

If I wanted to specify its size, I would use height="" and width="". If not, just let the computer calculate the size automatically.

<img id="logo" src="pics/heptagrama.png" alt="Heptagrama" height="315" width="118">

To make the logo a link you just need to include an anchor tag to indicate it.

<a href="home.htm"><img id="logo" src="pics/heptagrama.png" alt="Heptagrama"></a>

If, in addition, you want the user to see a message if he or she placed the mouse over the picture, use title="".

<img id="logo" src="pics/heptagrama.png" alt="Heptagrama" height="315" width="118" title="This logo is by me. Do not copy it.">

I use these instructions because my logo is self-hosted. I have a folder on my server called 'pics' and the logo is there, that's why I use a relative src="" instruction. If you wanted to grab a picture from somewhere else, you would need to include the full URL instead.

Taking an image from another website is called hot-linking. Just keep in mind that hot-linking is not something everybody likes; some people understand it s a way to steal the other person's hosting bandwidth. That said, if you are going to hot-link to an image file, make sure to do it from a site which doesn't mind being hot-linked.

And also, don't forget that if you are using XHTML, you will need to close the <img /> tag.

<img id="logo" src="pics/heptagrama.png" alt="Heptagrama" />


As mentioned above, there is a way to turn an image into a sort of menu. You will use a <map> tag to indicate this. It is a two-step procedure.

First, you need to indicate the image to use your mapping instructions...

<img id="logo" src="pics/heptagrama.png" alt="Heptagrama" usemap="#logo">

...then you will create the map itself, and indicate the regions with <area>.

The <area> tag has four parts:

<area shape="" coords="" alt="" href="">

Shape has three options: rectangle (rect), circle (circle) and polygon (poly). This will indicate the shape of your map.

Coords will indicate the coordinates of each region, and its use depend on what you indicated in shape="":

If you are using a rectangle, you will indicate two points: the top left corner position with two figures, and the bottom right corner position with other two figures. For my logo, if I wished to create a region which will cover the name of this site, I would use:

<area shape="rect" coords="115,45,290,70" alt="text-region" href="javascript:;">

If you are using a circle, you will use three points. The first two indicate the position of the centre of the circle; the third one, the radius of the region. For my logo, to create a region for the star I would use:

<area shape="circle" coords="61,61,40" alt="circular-region" href="javascript:;">

If you are using a polygon, you will use coordinate pairs to indicate the points of the shape. Try to make your polygons closed. Close a polygon by placing the last point in the same place as the first one.

<area shape="poly" coords="1,1,100,100,10,120,130,130,1,1" alt="polygon-region" href="javascript:;">

Notice there aren't spaces between the figures of any region.

The alt="" attribute, just like any other image, is for you to give information to visually handicapped people. Lastly, the href="" attribute is for you to indicate the destination for those who click on the mapped link.

Learn + Computers and the Internet + Web development