HTML page to work with picture tag

We have following example to understand about picture tag.
<html> <!--called root tag-->
<head> <!--it is used for meta tags-->
<title><!-- it is used for title of page-->
HTMl with picture tag
<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.
  <!-- 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;">
<!--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-->
note: please store the picture in same folder as that html is.
To understand clearly, read the comment section.

No comments:

Post a Comment