HTML images

Html images make web pages attractive.

HTML Images Syntax:-
The <img> tag is empty, i.e. does not have a closing tag.
<img src="url">


Example:1- Alt Attribute use
<img src="url_of_image" alt="man_image">
alt attribute provide alternate text for images.
width and height attributes use for the width and height of the image in pixels.

Example:2- Width and Height attribute use 
<img src="url_of_image" alt="man_image" width="200" height="100">
width and height attributes use for the width and height of the image in pixels.

Example:3- Style Attribute use
Style attribute use for style set of image.
<img src="man1.jpeg" alt="man_image" style="width:50px;height:80px;">

Example:4- Image as link 
<a href="https://www.onlinetutorial.info/2018/12/html-images.html">
  <img src="smiley.jpeg" alt="online tutorial" style="width:60px;height:40px;">
</a>

Example:5- Background image
<p style="background-image:url('avtar.jpg')"></p>
Background image in style we use for set background of any element as required.


Example:5-image maps use.

<img src="manwomen_group.png" alt="Workplace" usemap="#workplacemap">
<map name="workplacemap">
  <area shape="rect" coords="50,50,100,100" alt="Man" href="man.htm">
  <area shape="rect" coords="50,100,150,200" alt="Women" href="women.htm">
</map>

Here you can see usemap attribute of img tag will be the name attribute of map tag for proper mapping. In map we use single image and set co-ordinate area to navigate one by one by creating created link. Here in above example 2 link will be created for man and women . now you have to create 2 page separately for defining
both entity separately in detail view.

Try HTML Image Example in Editor