Rediff Homepages

Line
Your Homepage
Line

Step 6 : Using Inline Images

A picture is worth a thousand words. And besides a webpage would look pretty dry and boring with only text in it. Lets see how you can put images into your document.


Using the <IMG> tag.

We start with the <IMG> (image) tag.

<BODY>
<IMG>
</BODY>

Now we specify the source and the size.

<BODY>
<IMG SRC="/pix/homepages/hmpglogo.gif" WIDTH=147 HEIGHT=61>
</BODY>

In the above example we have specified the image file "logo.gif" and is displayed in the document with the dimensions 147 X 61.

The height and width of an image is measured in Pixels. Pixels in layman's term are tiny dots that constitute an image. The entire page may consist of 600 X 800 pixels but that varies from computer to computer. But that should give you an idea on the proportion of your image.

Note : When you specify the SRC (source) of the image you will have to give the complete path to the image file eg. SRC="/images/logo.gif". But if the image file is in the same directory as that of the HTML document then only the name will suffice as it is in the above example.

Top


Using the ALT option for browsers that do not support images.

We also have to consider users whose browsers do not support images or the images option is disabled. In such cases we specify and alternate text title to the image.

<BODY>
<IMG SRC="/pix/homepages/hmpglogo.gif" 
WIDTH=100 HEIGHT=60 ALT="Homepages Logo"> ;
</BODY>

Place your mouse over the image to see the alternate text.

Homepages Logo

Top


Using images as links.

You can also make specify an image as a link. In the previous lesson we saw how to create links using the <A></A> tags. This is one of the tags which dont have a closing slash tag.

Here we simply put the entire <IMG> tag within the <A></A> tags.

<BODY>
<A HREF="http://members.rediff.com/">
<IMG SRC="/pix/homepages/hmpglogo.gif" 
WIDTH=100 HEIGHT=60 ALT="Homepages Logo">
</A>
</BODY>

Homepage Logo

Notice the blue border around the image. It marks the image as a link. You can remove this border by specifying BORDER=0 within the <IMG> tag.

<BODY>
<A HREF="http://members.rediff.com/">
<IMG SRC="/pix/homepages/hmpglogo.gif" 
WIDTH=100 HEIGHT=60 ALT="Homepages Logo" BORDER=0>
</A>
</BODY>

Homepage Logo

Top


Changing the Background of an HTML document.

In a related topic lets see how to change the background color of an HTML document. This is done by specifying the background color in the <BODY> tag of the HTML document.

<BODY BGCOLOR="BLUE">
</BODY>

Or you can specfy and image to be the background of the document.

<BODY BACKGROUND="bg.jpg">
</BODY>

While specifying colors and backgrounds always take care that the colors do not clash or are not too bright. There should be a harmony in the colors you use in your page. Here's some more on using colors in your HTML page.

Top

Case Study : Ram Chandran's Homepage
No homepage would be complete without a photo or two of the person. Take a look at Ram's snaps.
To view the code of the example file use the view source option of your browser.

< Creating Links | Index | Creating Lists >
Line

   Broadband | Chat | Contest | Movies | E-cards | Weather | Travel | | Romance | Astrology | Shopping
Money | Instant Messenger
| Auctions | Auto | Education | Jobs | TechJobs | Women | Technology

rediff.com
Disclaimer
© 2000 rediff.com India Limited. All Rights Reserved.