HTML uses different elements and tags to build up a complete web page. Using Images and styling techniques, we can create interactive web pages. In HTML, Image tags are used to insert images into a web page. An Image tag consists of two attributes. These two attributes are Source and Alter. When we talk about inserting an Image tag, images are not inserted into a webpage technically. It just creates a link in the web page for the image which is saved in the same directory. Image tags provide a place holder for these linked images. Here, we will teach you how to add an image in html using the Image Tag.
Step # 1 – Adding Images to a HTML Page
In this tutorial, we will guide you on how to add an image in html page. First of all open up the source code of your HTML page in a Text editor in order to edit it. Now insert the following code:
img src = “Graph.jpg” width = “450” height = “347”
In this code, “Img” shows the Image Tag, “Src” shows the source of the. Setting up the width and height of the image helps you properly align the image on the web page so that it will not move around when loading in different browsers with different screen resolutions. Now enter the following code:
Alt = “Picture of a Graph”” title = “Current Year’s Production”
In this code, the “Alt” shows the text which will appear in the place of the Image while it is loading and the “Title” shows the title of the image when you move the cursor over it.
Step # 2 – Save your changes and View the Image
Once you have inserted the Image tag, save your changes and refresh the browser to load the image.
Step # 3 – Change the name of the Image File
Now in the next step, try to change the name of the “Image” by changing the code to add an image in html. Do so by going to the source code and inserting one or two additional characters in it.
Once you have changed its name, save the page and open it again into a web browser.
Step # 4 – View the Page
As we tempered with the code to add an image in HTML and changed the name of the image file, HTML will not be able to locate the image with the specified name. In this case, HTML will display the “Alt” text which shows that either the image is missing or its name is incorrect.
Home