----------------------------------------------------------------------------------------
<html> <!--called root tag-->
<head> <!--it is used for meta tags-->
<title><!-- it is used for title of page-->
HTMl with picture tag
</title>
</head>
<body><!--it is a container-->
<!--tag to display different picture-->
<!--that fits best to the browser-->
<!--the picture is chosen by the browser depending upon
the device or view.
-->
<picture>
<!-- we are using two pictures-->
<!--which one to chose, it is decided by browser-->
<!--depending upon device or view-->
<source srcset="coffee.jpg">
<source srcset="glass.jpg">
<!--we use <img src...>at the end because
if none of the src matched or
if the browser does not support <picture> tag.
then browser uses picture with this im src.
-->
<img src="picture.jpg" alt="Beatles" style="width:auto;">
</picture>
<!--img src is used to insert image-->
<!-- it has attributes width,height and alt-->
<!-- 'alt' is used if the picture could not be loaded/displayed-->
<!--we must make sure that the path(of image) is correct-->
<!--it repeats the picture-->
<!-- to avoid it we use css.We will learn in css unit-->
</body>
</html>
--------------------------------------------------------------------------------
note: please store the picture in same folder as that html is.
To understand clearly, read the comment section.
