Adding images to our web pages
Well, many times, you may have seen images on many websites and wondered how do they do it? Well, it’s not rocket science, but just a simple tag behind adding some image to your web page. The tag that you can use to add some images is the IMG tag.
You need to have some attributes for the img tag here. One attribute is the src, through which, we are passing the URL(location) of the image, and if in case the image is not visible to the user for some reason, then there is another attribute called alt, to which, you give some alternate text as value about the image(so that user knows what kind of image is here since the image is not visible)
Remember that if the image is not visible, then only the text that you wrote in the alt attribute is shown to the user, with some symbol, which indicates that it was supposed to be an image here.
Have a look at the below example, so as to get an idea, about how can we add the image to our web page –
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Image</title>
</head>
<body>
<h1>This is a squirrel</h1>
<img src=”squirrel.jpg” alt=”An Image of a squirrel!” width=”500px” height=”300px”>
</body>
</html>
In the above example, you can see that we have some additional things, which are called attributes. It is some additional information that is provided in the starting tag, so as to make the things behave accordingly.
So, an attribute is some additional information that is given for that particular element. Like through the src attribute, we are giving the URL of the image, and the alternate text is given through the alt attribute. There are some additional attributes as well, such as the height and width, that we are specifying. So, if we try to open the file in the browser, we get something like this –
As you can see, adding some images to the web page is not so hard. Whenever we need to have images on our web pages, we can do the above things. (remember that the height and width attributes are not necessary)
