Image Tag in HTML
You specify an image with the <IMG> image tag in HTML. Displaying the images on a page was explained using the BACKGROUND attribute of the <BODY> tag, which displays the image as the background image. Background images make the page heavy and hence the page takes a considerable amount of time to load. But the <IMG>tag can be used for displaying an image with the desired height and width. Let us look at an example.
<!DOCTYPE html> <html> <head> <title>Image Tag</title> </head> <body> <img src="frog.jpg" WIDTH=180 HEIGHT=130 ALT = "IMAGE IS TURNED OFF" ALIGN = "BOTTOM" BORDER = 2> This text is placed at the middle of the image. </body> </html>
Output:
Let us take a look at the syntax of the <IMG> tag:
<img src = “filename.jpg” width = “value” height = “value” alt = “alternate text” border = “value” align = “value”>
1. src: This attribute specifies the pathname to the source file that contains the image. The value in the above example, “image.gif”, means that the browser will look for the image named image.gif in the same folder (or directory) as the html document itself.
2. width: This is used for specifying the desired width of the image.
3. height: This is used for specifying the desired height of the image.
4. border: An important attribute of the IMG tag is BORDER. This attribute specifies the width of the border of the image. By default it is 0, i.e. there is no border. As shown in output the image “logo.jpg” has been given a border 2 pixel wide. The following code gives a wider border to the above image.
<body> <img src="frog.jpg" WIDTH=180 HEIGHT=130 ALT = "IMAGE IS TURNED OFF" ALIGN = "BOTTOM" BORDER = 10> This text is placed at the middle of the image. </body>
5. alt: Another img attribute that is important is alt. ALT is sort of a substitute for the image that is displayed or used when the user is using a browser that does not display images. Someone may be using a text only browser, he may have image loading turned off for speed or he may be using a voice browser (a browser where the web page is read out). In those cases, that ALT attribute could be very important to your visitor as it could be used (given the proper text) to describe the image that is not on the screen.;
I don’t even know how I ended up here, but I thought
this post was great. I don’t know who you are but certainly you are going to
a famous blogger if you are not already 😉 Cheers!