What is HTML Image?
So far, we have seen how to add, format and align texts in a web page. But web page is not complete with mere texts. It gets important to add relevant images not only to make our page attractive, also to make our visitors understand things easily. Because we know that images keeps things simple rather than texts. Ok, can we create images using HTML? No, since HTML is not a graphic tool. But we can show an existing image in our page using
<img src=”source/destination of the image file” />
Where to use HTML Image?
- Images can be used anywhere within the body. Images can be seen in the browser where the <img> tag is actually placed. For eg: if you place an <img> tag before a paragraph, the image would be displayed before the paragraph. If you want the paragraph to be displayed first, then you have to change the <img> tag next to the paragraph tag.
- Images can also be used as background. But there is no HTML tag to display it as background. Instead you can do it with the help of an attribute “background” to any of the block level element.
E.g.: <body background=”stripes .gif”> - Though there are no restrictions for the usage of images, it should be used cautiously because loading of images takes more time. A Web page which uses more number of images may take more time to load which would make visitors to leave the site before they load.
How to use HTML Image?
Attributes besides Id, Class used along with the <img> tag are:
- src: The source attribute is very important one to set the location of the image file. The browser would not display any image if you leave this blank or don’t include this attribute. You can give either local path(../smiley.gif) or global path (http://www.styledesign.com/images/smiley.gif”).
- alt: The alt attribute is “alternate text” for an image. It can be any text which describes the image well. The browsers display the alt texts before the images get loaded and this makes the users to understand the nature of the content even if they are not loaded. It is not an error if you don’t include alt attribute or leave it blank. But it’s a good practice to improve the quality of our web page.
- align: The align attribute is used to position the image as required. Values used for this attribute are: left, middle, right – used to left, center and right alignment of the image respectively
top, bottom – similarly used for vertical alignment of the image. Alignment of image with relative to the text besides can also be done using texttop, absmiddle, absbottom, baseline which keeps the text top of the image, middle of the image, bottom of the image respectively. - Width and Height: These attributes are used to specify the width and height of the image to be displayed.
Example:
<html>
<head>
<title>Example for HTML image</title>
</head>
<body background=”body-stripes.jpg”>
<p><img alt=”example image” src=”example.gif”> This is an example for image before text</p>
<p>This is an example for <img width=”80” height=”80” alt=”example image” src=”example.gif”< image within the text</p>
<p>This is an example for image after the text <img width=”40” height=”40” alt=”example image” src=”example.gif”></p>
<p>This is an example for where the text <img align=”bottom” width=”40” height=”40” alt=”example image” src=”example.gif”>lies at the bottom of image. Bottom alignment is default alignment.</p>
<p> This is an example for where the text <img align=”middle” width=”40” height=”40” alt=”example image” src=”example.gif”>lies at the middle of image.</p>
<p>This is an example for where the text <img align=”top” width=”40” height=”40” alt=”example image” src=”example.gif”>lies at the top of image. </p>
</body>
</html>
Next we can discuss about how to make the image clickable. We can also see about image mapping.
