How can you add an image to a web page using HTML code?

Now we will add some image to the web page now suppose this is a web on page I have written the code now I want to add the image so I will use imj img tag image then you have to give the source is equal to know this is nothing but the path of the image now as I have stored the header.html in the web tech folder and in the same folder if I am having the add image this is the image in the same folder then just add the name of the image if suppose image is somewhere else then you must give a whole path complete path including all the folders and the name of the image so add image dot PNG.

Now after that give alternate this is alternate one what you can say attribute this is nothing but alternate text if suppose I am not specifying anything if I am not specifying anything we will see what happens with this suppose image source is given add image PNG I can save this you can save it and just refresh it now see this image is added correct this image is added now suppose by mistake I have written the wrong name of the image if I save this okay here this image is shown there is no image this is icon it is showing now what is the use of our alternate attribute alt it will whenever if suppose the image is not available it will show the alternate text it will show the message what message image not found okay image not found.


If the image is not available if the image or path is not correct and if you run this then if the image is not found it will display image not form so I will save this and I will refresh it now see an image not found correct image not form so I will remove this and once again I will save it and run it image does not form if suppose there is no image then it will show you image not found but if the image is available in that case it will not display the image not found it will display the image so that is nothing but the use of alternate alt attribute and what is the use of source attribute so you can run this, so this is the image available now this image is so big correct and it is not a fixed or you can say it is not fitting into the uh webpage.

You can adjust the size of the image you can adjust the width as well as you can adjust the height so how you can adjust you can add few more attributes here you can add you can add width attribute width is equal to suppose it is 200 and there is a height is equal to 300 suppose it is 200 and width is 300 so you can restrict the size of the image you can properly align the image by having the width and height now I will show you I will save this I will run it again nowhere you can see the image is properly or as per your requirement as per the size of the web page you can adjust the image now suppose if the image is so small you can have 600 by 500 or you can have the 600 by 400.

Now refresh it once again save it and run it now the image size is increased so the actual image size will be so larger but you can fix the image size you can adjust the image size by using width and height properties, so those are the attributes you can give width and you can give the height to restrict the size of the image now I think you have understood what is the use of source the source will give in the source you have to provide the address of the image in an alternate attribute you have to give the text if the image is not found then the text will be displayed you can resize the image by using width and height attributes, so that is all about the image tag.

Now in this case in the case of the image you will find only the opening tag there is no closing type right in the case of the image there is no closing tag now after creating adding the image next is how to create a list in HTML, so there are two types of list in HTML now first of all what is the list so the list is nothing but it is used for grouping set of related items so list we are preparing a list and that is nothing but a grouping set of related items, so there are two types of list one is an unordered list and another is ordered list now what is the example of unordered list an order means the numbering is not given like first-year second-year third-year fourth year here numbering is not written in front of the list.

This is the unordered list and if you want an ordered list in case of the ordered list there are a numbering one two three four five means it should be first element first value this one second is this one third is this one and you are giving the values one two three four, so this is called as ordered list this is called as the unordered list now for creating an ordered list you have to use two tags one is this is a UL tag this is a closing URL and this is a list ally and this is the element for this is for element and in case of the ordered list instead of UL you have to use ol that is the number ordered list and this is nothing but list element now we will create the unordered list and order list by using the notepad now I will remove this complete program okay now in the body tag i have to write this now, first, I will give the heading h1 is supposed unordered ordered list unordered list now I will close this h1 type.

Leave a Comment