Image in HTML

Image in HTML

Images can be placed in a web page by using <IMG/> tag. There are many image formats available today, but the most widely used among them are gif and jpeg. The gif format is considered superior to the jpeg format for its clarity and ability to maintain the originality of an image without lowering its quality. Using tools such as GIF constructor or Adobe Photoshop images can be created.It is an empty tag (only start tag, no end tag) and is written as:

<IMG SRC = “image_URL”/>

SRC – Source of the image file

image_URL – represents the image file with its location.

Example:

<IMG SRC= “images/infomax_logo.GIF”/>

Here, image_URL = “images/infomax_logo.GIF”, it means image is available in the images folder.

Example:

<IMG SRC http://planningcommission.nic.in/images/planimg.jpg />

Here image _URL is = “http://planningcommission.nic.in/images/planimg.jpg”.

The image planimg.jpg, is taken from the imagesdirectory of Planning Commission Web Server ‘Planningcommission.nic.in’.

If the location of the image and web page are in the same place in the same directory/path then it is simply written <IMG SRC= “infomax_logo.GIF” />

This SRC attribute is mandatory for the <IMG/> tag.

Other attributes used with <IMG/> are:

ALIGN: used to set the alignment of the text adjacent to the image. It takes the following values:

ALIGN = LEFT - Displays image on left side and the subsequent text flows around the right hand side of that image

ALIGN = RIGHT - Displays the image on the right side and the subsequent text flows around the left hand side of that image

ALIGN = TOP - Aligns the text with the top of the image

ALIGN = MIDDLE - Aligns the text with the middle of the image

ALIGN=BOTTOM - Aligns the text with the bottom of the image

By default, the text is aligned with the bottom of the image

Example:

<IMG SRC="infomax_logo.png" align="RIGHT"/>

HEIGHT and WIDTH : Height and Width of an image can be controlled by using the HEIGHT and WIDTH attributes in the <IMG/> tag as follows:

Example:

<IMG SRC=“infomax_logo.GIF” HEIGHT= “320” WIDTH= “240” />

HSPACE and VSPACE : White space around an image can be provided by using HSPACE (Horizontal Space) and VSPACE (Vertical Space) attributes of the <IMG/> tag. These attributes provide the space in pixels.

Example:

<IMG SRC= “INETlogo.GIF” VSPACE= “30” HSPACE= “25” />

ALT (Alternative Text) :  This attribute is used to give alternative text that can be displayed in place of the image. This is required when the user needs to stop display of images while retrieving a document in order to make the retrieval faster, or when the browser does not support graphics. It is also used a tool tips – displaying description of the image when the mouse is over the image.

Example:

<IMG SRC= “infomax_logo.GIF” ALT = "infomax_logo" />

BORDER : Border around the image can be controlled by using BORDER attribute of <IMG> tag. By default image displays with a thin border. To change the thickness or turn the border off, the value in pixels should set to BORDER attribute.

Example:

<IMG SRC= “INETlogo.GIF” BORDER=“3”>