WEB DESIGN TUTORIAL | HTML-5 | HTML PICTURE ELEMENT |HOW TO CREATE PICTURE ELEMENT


in our channel all the weekdays we used learn some webdesign courses. so first we are learning about HTML program language. in last class we discussed about how to give an image as background in HTML? after giving it as background what are the things we should do ? these where the topics we discussed in the last class. if anyone missed the video. link is in the description and i button don’t forget to watch it. and also if you not yet subscribed our channel don’t forget to subscribe it. and to get the instant notification press on the bell icon . so let as see the topic we going to learn in these class. in these class 14 we going to learn about HTML picture element. so regarding this HTML PICTURE ELEMENT. it gives picture to the HTML. first let as see it theoretically. so HTML PICTURE ELEMENT ! you might ask , what is the purpose of it ? to give images with different size according to the different size of the screen. so in HTML they introduced this picture element. why should they ? if we specify some image, to show some more flexibility, they add this . where does it used? size of the screen will not be same . some screen size will be large, and some screen may be smaller . FOR EXAMPLE you are opening an website in an mobile, if the image given by them is larger than your screen size , image will not be displayed , even it displayed it will not be an proper image for you. to avoid this picture element is invented you might ask , how does it works? as i already we can give lots of sources. so give lots of elements within the source when it arrives to website. if you are opening an website in the mobile first browser will check the elements in the picture after checking , according to your screen size the image will be displayed, how its displayed? it displays based on the given style attribute now let as see how to use this picture element. so bandwidth , if the screen size is larger than the image size you can use it and also , your browser some browsers not able to support some image formats here we can use these PICTURE ELEMENT , so far we learned it theoretically now let as check those practically. let as open the program we have typed in the last class set an image with three different size i’m taking these three image let it be car , food , girl. i’m opening this program for picture element you should add the tag , picture open tag picture close tag now we used the open tag, other than this which image has a larger in its size that image should be given at first. so why should we giving in these manner? all the browsers , at first it would starts scanning from larger images so giving the larger image first is a good option. in source media, what should we give? we should give the minimum , that at what width that image should display. so as width let as give as 650 pixel when the screen size will be 650 pixel it will be displayed next is src set , that is we going to give image source so image img food .jpg similarly we can give for the second image and change the pixel as 450 here type as car we just gave two sources next we should give default size third image we should not give in these way we should use img src , why should we use this img src as we are giving it as default we should use img src girl i’m giving it as girl.jpg so mention its style to know this is default , for the browser width equal to auto this is the way to set the default image let as see the output now you can see , the screen size is if the pixel is 450 car image is displayed , if we compress it more if it moves to 650 , the food image is displayed when i compress it more girl image will be appeared , let i show it to you now the girl image is appeared this how the picture image should be used i hope you understand this topic may be few people can’t able to understand it easily if you workout it for two or three times you can understand it if you have any doubts comment below we will meet you with an another interesting video

One Comment

Add a Comment

Your email address will not be published. Required fields are marked *