Using Image in Web Page

Images can be placed in a web page by using <IMG> tag. It is an empty tag (only start tag, no end tag).

It is written as:

<IMG SRC="image_URL">
  • SRC - Source of the image file
  • image_URL - represents the image file with its location

The SRC attribute is mandatory for the <IMG> tag. Other attributes used with <IMG> are:

  • ALIGN
  • HEIGHT, WIDTH
  • ALT
  • BORDER

ALIGN: It 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.

HEIGHT and WIDTH: Height and Width of an image can be controlled by using the HEIGHT and WIDTH attributes.

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.

BORDER

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

Example:

<IMG SRC="example.png" BORDER="5" ALT="Example Image" ALIGN="left">