HOME > Images

WEB DESIGN: BASICS

IMAGES

A picture is worth a thousand words. Enhancing your site with images is an easy task but requires some thought and planning. It's not enough to put a picture on the page. You need to take the following into consideration:

where to place it
how to align it
it's file size vs. it's visual size
number of images on a page
thumbnails

To add an image to a page you use the <IMG> tag (no close tag). It's more commonly used attributes are:

SRC - where the image is located
BORDER - whether to put a border around it or not
ALT - Alternate text description of image
ALIGN - Alignment of image (left/right/top/bottom/middle/texttop)
HEIGHT - height of image
WIDTH - width of image
VSPACE - vertical space above/below image
HSPACE - horizontal space left/right of image

EXAMPLE 1

<HTML>

<HEAD>

<TITLE>The Eiffel Tower</TITLE>

</HEAD>

[ <A HREF="index.html">HOME</A> ] [ <A HREF="http://www.paris.com">PARIS</A> ] [ NOTRE DAME ] [ THE EIFFEL TOWER ]

<H1 ALIGN=CENTER>The Eiffel Tower</H1>

The Eiffel Tower is located on the Left Bank (that is, the southern bank) of the Seine river, at the northwestern extreme of the Parc du Champ de Mars, a park in front of the École Militaire that used to be a military parade ground (whence the name), in the southwestern portion of the city. The four pillars supporting the tower are aligned to the points of the compass, and the base covers almost exactly the area of two (American) football fields placed side by side lengthwise.

The nearest Métro stations are Bir-Hakeim to the southwest, and Trocadéro to the northwest. The former is at the same level as the tower and somewhat closer, but less scenic; the latter is on the side of the <BIG>Parvis (Plaza) du Trocadéro <STRIKE>opposite the tower</STRIKE></BIG>, so if you get off at that station, you can take a very scenic walk through the Trocadéro and down across the Seine to the tower, with many good photograph opportunities. One of my pictures of the tower was taken from this location.

<BLOCKQUOTE>The area of the tower is in the chic seventh arrondissement of Paris, also the home of the National Assembly, the Prime Minister’s palace, and the Hôtel des Invalides. This district is roughly at the eight-o’clock position on a map of Paris, and somewhat more centered than the adjacent Fifteenth. </BLOCKQUOTE>

About Us | <A HREF="mailto:info@frenchboard.com">Contact Us</A> | Help | Site Map

<HR>

French Tourist Board  1234 Champs Elysee, Paris, France  01-456-123-1234

Last Updated: 05/01/02

</CENTER>

</BODY>

</HTML>

Aligning an image left or right will wrap the text around the image. Here is an example of left align.

EXAMPLE 2

<HTML>

<HEAD>

<TITLE>The Eiffel Tower</TITLE>

</HEAD>

[ <A HREF="index.html">HOME</A> ] [ <A HREF="http://www.paris.com">PARIS</A> ] [ NOTRE DAME ] [ THE EIFFEL TOWER ]

<H1 ALIGN=CENTER>The Eiffel Tower</H1>

About Us | <A HREF="mailto:info@frenchboard.com">Contact Us</A> | Help | Site Map

<HR>

French Tourist Board  1234 Champs Elysee, Paris, France  01-456-123-1234

Last Updated: 05/01/02

</CENTER>

</BODY>

</HTML>

When you left/right align the text will abut the image. Use the HSPACE attribute to put some space between the text and image.

EXAMPLE 3

<HTML>

<HEAD>

<TITLE>The Eiffel Tower</TITLE>

</HEAD>

[ <A HREF="index.html">HOME</A> ] [ <A HREF="http://www.paris.com">PARIS</A> ] [ NOTRE DAME ] [ THE EIFFEL TOWER ]

<H1 ALIGN=CENTER>The Eiffel Tower</H1>

About Us | <A HREF="mailto:info@frenchboard.com">Contact Us</A> | Help | Site Map

<HR>

French Tourist Board  1234 Champs Elysee, Paris, France  01-456-123-1234

Last Updated: 05/01/02

</CENTER>

</BODY>

</HTML>

When you have multiple images to put on a page, it is best to use "thumbnail" versions of the images (smaller visually and physically). The more images you have the longer it takes for your page to load. So for each photo you have, make another version of it that is smaller and provide links to the larger versions. It's not enough to change the width and height to make an image smaller; it will only appear smaller, in reality it is still the same size.

EXAMPLE 4

<HTML>

<HEAD>

<TITLE>The Eiffel Tower</TITLE>

</HEAD>

[ <A HREF="index.html">HOME</A> ] [ <A HREF="http://www.paris.com">PARIS</A> ] [ NOTRE DAME ] [ THE EIFFEL TOWER ]

<H1 ALIGN=CENTER>The Eiffel Tower</H1>

Click on each image to view the larger version.

About Us | <A HREF="mailto:info@frenchboard.com">Contact Us</A> | Help | Site Map

<HR>

French Tourist Board  1234 Champs Elysee, Paris, France  01-456-123-1234

Last Updated: 05/01/02

</CENTER>

</BODY>

</HTML>

To put an image in the background of a page, the image is declared in the <BODY></BODY> tag. The original image is usually a small image (physically and visually). It's best to keep the file size under 4 or 5K (ideally 1 or 2K). The browser takes the image and repeats it over the entire screen. Here's the actual image used for Example 5.

background tile

EXAMPLE 5

<HTML>

<HEAD>

<TITLE>The Eiffel Tower</TITLE>

</HEAD>

[ <A HREF="index.html">HOME</A> ] [ <A HREF="http://www.paris.com">PARIS</A> ] [ NOTRE DAME ] [ THE EIFFEL TOWER ]

<H1 ALIGN=CENTER>The Eiffel Tower</H1>

About Us | <A HREF="mailto:info@frenchboard.com">Contact Us</A> | Help | Site Map

<HR>

French Tourist Board  1234 Champs Elysee, Paris, France  01-456-123-1234

Last Updated: 05/01/02

</CENTER>

</BODY>

</HTML>

WEB DESIGN: Basics • Last Modified: 5/1/02