HTML Image tag: Displaying pictures in web pages

<img src=map.jpg alt='text here'>

HTML provides <img> tag to place image in a web page. img stands for image. This tag does not have any closing tag.

Attributes of <img> tag are :

Src:

Src stands for Source. Specifies the name of the image file to be used. We can add URL to src by using <BASE>.

Height:

Used to specify the height of the image.

Width:

Used to specify the width of the image.

alt:

This is used to display some text when the visitors mouse over the image. i.e., it acts as a tool tip for the image. Alt tags are important for search engines as robots can't read images, to tell about the image we can add alt tag or alternate text to tell about the image. This also helps in accessibility issues of the website

HSpace:

Used to specify the amount of space to the left and right of the image.

VSpace:

Used to specify the amount of space to the top and bottom of the image.

Border:

We can specify the border around the image. Border = 2 will add two pixcel border to the image.

Example Code:

<img width=400 height=50 border=0 hspace=0 src="image.gif">

Align

We can add align attribute to the image tag, we can specify left, right, top, button etc. Here is one example.

<img width=400 height=50 border=0 hspace=0 src="image.gif" align=right>

Note:

If the path of the image file is not mentioned it will search for the image in the current directory.

Hot Linking of images

It is not only we can display images from the working ( present ) server we can display images from other websites also. However it is not a good practice and we should take necessary permission from the owner to display images from other sites. This is to respect others privacy and copyrights. This is known as Hot linking. Each call to images from other sites will add to bandwidth consumption of other site. Here is an example of how it works.

<img  src="https://www.othersite.com/images/image.gif" align=right>

In your working directory create one file test1.htm with your standard page structure. In the same directory keep one image of your self of gif or jpg format.
Add the code inside test1.htm to display your photo.
Then write few sentences about you and your photo should be placed at right of your text.
Reduce the photo size ( by html code ) to 100 x 100 thumbnail size.

HTML Image display