HTML Image


<img> tag is used to display image son the web page in the html.Starting tag is required and ending tag is not there in this case.

Attributes
Src This attribute is required which define the path of the image.
AlignSets the alignment of the image left ,right.
Altalternatetive text if image does not appear in browser.
Border Sets the image have border or not.
Height We can specify height lesser then the image is actually is.
Width Specify the width lesser then actually is
Hspace Defines the space in pixel on left and right sides of image.
VspaceDefines the space in pixel on top and bottom of the image

Aligning text and images

Align="top"Align the text from the top of the image.
Align="bottom"Align the text from the bottom of the image.
Align="middle"Align the text from the middle of the image.
Align="left"Align the text from the left of the image.
Align="right"Align the text from the right of the image.

Example

<html> 
      <head>  
         <title>  
          Welcome to HTML Tutroial 
         </title>  
      </head>  
      <body>
 <img src="img/cb.png" alt="fl" height="50" width="50" align="top" />
                This is top aligned.
                
 <img src="img/cb.png" alt="fl" height="50" width="50" align="middle" />
                This is middle aligned.
                
 <img src="img/cb.png" alt="fl" height="50" width="50" align="bottom" />
                This is bottom aligned.
                
 <img src="img/cb.png" alt="fl" height="50" width="250" align="left" />
                This is left aligned.
                
 <img src="img/cb.png" alt="fl" height="50" width="50" align="right" />
                This is right aligned.
        </body>  
     </html>
   fl
                This is top aligned.
                
 fl
                This is middle aligned.
                
 fl
                This is bottom aligned.
                
 fl
                This is left aligned.
                
 
                This is right aligned.
                

The alt Attribute

The alt attribute specifies an alternate text for the image, if it cannot be displayed.

The value of the alt attribute should describe the image in words:

<img src="www.fb.com/fastlearning.in" alt="Offical Page" />

Using an Image as a Link

It is common to use images as links:

  <a href="www.fastlearning.in">
  <img src="img/cb.png" alt="fl" height="50" width="50" align="right" />
  </a >
Output
fl

Image Maps

For an image, you can create an image map, with clickable areas:

 <img src="img/cb.png" alt="fl" usemap="#map" height="50" width="50" />
 <map name="map">
   <area shape="circle" coords="100,100,82,126" alt="fl" href="www.fastlearning.in">
   <area shape="rect" coords="124,108,300,400s" alt="Ac" href="www.acadnote.com">
 </map>
Output
flhtmlhtml 

Share this article on