HTML IMAGE Tag Complete Tutorial

 

HTML IMAGE

HTML <img> tag is used to insert images on webpage ,image actually used to make website pages more attracting and beautiful and increase the user interest and also used to show graphical look of your web pages.

Syntax:

<img src=” ” />

What is src?

SRC actually defines the source where we gives a path of image file with extension

For example <img src=”C://Greenland.jpg” />

HTML image tag not having closing tag.

Others Attribute Of IMG Tag

align:    top bottom middle left right     

src:         URL        Specifies the URL of an image

srcset:  URL        Specifies the URL of the image to use in different situations

usemap:              #mapname         Specifies an image as a client-side image-map

vspace:                Specifies the whitespace on top and bottom of an image

width:  pixels

Specifies the alignment of an image according to surrounding elements

alt:         text        Specifies an alternate text for an image

border: pixels    Not supported in HTML5.

Specifies the width of the border around an image

crossorigin:        anonymous

use-credentials:               Allow images from third-party sites that allow cross-origin access to be used with canvas

height:            pixels   Specifies the height of an image

hspace: pixels    Not supported in HTML5.

Specifies the whitespace on left and right side of an image

Ismap:  ismap    Specifies an image as a server-side image-map

Longdesc:            URL        Specifies a URL to a detailed description of an image

Sizes:                   Specifies image sizes for different page layouts

Examples:

<img src="img_nat.png"

            width="120" height="80" alt="Natural" align="right"/>

                                  

<img src="myimage.jpg"  alt="My Image" width="100px"  height="50px">

Linked Images

You can link your image to another web page by nesting it inside the <a> tag.

<a href=http://mindsmania.blogspot.com/  target="_blank"><img src="/pix/places/phi-phi-200x150.jpg" style="max-width:100%;" alt="image file "></a>

Image Maps

You can use the <img> tag along with the <area> and <map> tags to create an image map.Image maps enables one image to link to multiple pages. You can specify different shapes for the "hotspot" area too.

<img src ="/pix/examples/australia-nz-map.gif"

width="200" height="142"

alt="Map of Australia and New Zealand"

usemap ="#aus-nz">

<map name="aus-nz">

  <area shape ="poly" coords ="3,47,45,12,105,7,140,60,120,125,12,90"

  href ="http://www.travel-explorer.com/category/places/australia/" target="_blank"

  alt="Australia">

  <area shape ="poly" coords ="180,85,200,98,167,142,157,138"

  href ="http://www.travel-explorer.com/category/places/new-zealand/" target="_blank"

  alt="New Zealand">

</map>

Attributes can be added to an HTML element to provide more information about how the element should appear or behave.