Home / HTML / How to include images in web pages part 1
Let’s start this section with an image of the beautiful Aishwarya Rai.
Including images is very simple. You employ the <IMG> tag. The required attribute of this tag is SRC, which takes the value of the image file’s URL.
<IMG SRC="ash.jpg">
The SRC attribute determines the source of the image file and takes a URL as value. I have used a relative URL which shows that ash.jpg is located in the same directory as this file.
Three kinds of images files .gif, .jpg and .png are used on the Internet. A general rule of thumb is to use .jpgs for photographs and .gifs for images containing large blocks of single colors.
The <IMG> tag has many attributes
The WIDTH and HEIGHT attributes take pixel dimensions of the image as values. You can find the width and the height of the image in pixels using a graphics program such as Paint Shop Pro or Adobe PhotoShop.
Your image will display correctly even if you skip using these attributes. However, you should ALWAYS include them as this helps the browser window to allocate space for your image.
Let us examine the image below. Its width and height values in pixels are 150 and 100, respectively.
<IMG SRC="hat.gif" width="150" height="100">
Now see what happens if we specify 200 as width and 50 as height.
<IMG SRC="hat.gif" width="200" height="50">
The image is distorted! It means that the width and height attributes force the image to be displayed in that space regardless of what the actual dimensions are.
Use this attribute to put a border around the image. The attribute takes a number as value. This number determines the thickness of the border in pixels.
<IMG SRC="hat.gif" width="150" height="100" border="2">
<IMG SRC="hat.gif" width="150" height="100" border="8">
According to the World Wide Web Consortium, the ALT atribute is now required. You can put some advisory text with the use of this attribute. This text is displayed when the mouse pointer is placed on the image. You should get into the good habit of including ALT tags. Why? Read on…
Visitors using text-based browsers or who have turned off images in their browsers will not be able to see the image. However, they would be able to read the image description through the ALT attribute. Also, the ALT attribute value will be read by speech browsers, employed by visually impaired visitors. So be a good developer and insert the ALT attribute always.
Place your mouse pointer above the image to display text
<IMG SRC="hat.gif" width="150" height="100" border="1" alt="A green colored hat">
How do I view a deleted web page?
Is there a way to view a deleted web page - one that is no longer available? Yes there is and the solution is quite simple. [more...]
DEC.com is the fifth oldest domain name. It was registered by Digital Equipment Corporation, which was also the first computer vendor to launch a public web site (on 1th October 1993). At one time it hosted a software repository at gatekeeper.dec.com which was very popular during the pre-WWW days. [more...]
We use cookies to give you the best possible website experience. By using WebDevelopersNotes.com, you agree to our Privacy Policy