Images

The <img> tag is used to insert images into an HTML document. Let us spruce up our HTML document by adding a couple of pictures to it. First, download the White Flower and Blue Flower images. Next, add the highlighted image tags to the body of your html document in the following way.

<img src=Images/blueflower.png align=right width=205 height=155 border=0  alt="blueflower" />
<p align=justify>Hello! Welcome to your friendly neighborhood florist on the
Web. Take a look at our catalogue. You can choose from a variety of
bouquets and gifts. We have flowers to match every budget! Our flowers are
delivered fresh to your home and are payable COD.</p>

<img src=Images/whiteflower.png align=left  width=204 height=152 border=0  alt="flowers" />
<p align=justify>If you are a new customer, take a minute to enter your
details and register with us so we know where to deliver your flowers. You
can change your contact details if you are a repeat customer. I Hope you
have a great shopping experience with us. Do keep coming back! Also, please
take a moment to give us your valuable suggestions and comments.</p>
</body>

Save your file and try to view it on IE. Even if you saved the image files in the same directory as your HTML document, the images will not appear! You will just see the captions 'blueflower' and 'flowers' in the space meant for the images. First, let us look at the Image tag more closely. As you can see, it is an 'empty' tag - it has no closing tag. All its attributes are specified within a single opening tag. The most important attributes are as follows:

Src- src stands for source and should contain the name of the actual picture file.

Align - This may be right, left, or center and specifies horizontal alignment

Width, Height - These parameters specify the image's height and width in pixels.

Border - This attribute indicates whether or not a border should be drawn around the image. Zero indicates no border; a number indicates the width of the border in pixels.

Alt - Stands for alternative text. This caption is shown instead of the image if an error occurs.

If you look at the src attribute in our HTML file, it contains 'images\blueflower.png'. This is called a relative path; it indicates the way to get the folder on the computer where the images are located relative to the folder where the current HTML document is located. To take care of the error, all we need to do is add a new sub folder called 'Images' to the folder that contains the florist.html document and copy both images into the sub folder. Alternatively, we may change the relative path to reflect the location of the image files. Once this is done, your html will look like this.

As you can see, the text flows around the image. This is because the image is anchored first and paragraphs afterwards. The effect of placing an image tag in a certain spot range from subtle to glaring. Try moving an image tag from its current location before the paragraph start tag to just after the paragraph start tag and see if this move makes any difference to the way your document looks. Also, at this point, let us move flowerback.gif (the background image) to the image sub folder and change its path in the body tag stylesheet definition