Images
In this article we are going to learn about images in html, how to add images on the html page.
We learnt about html in general, learning the structure of hypertext markup language, links in html, inputs in html, buttons in html, forms in html, html elements, tables in html, marquee in html, horizontal line in html, textarea in html, tradio buttons in html and checkbox in html so, now we will be focusing on images.
Images
Images are used in html or websites to set profiles of users and can also be used to show the picture of something using <img> tag with src, alt and title attributes.
img
It is an image tag used to add the the image or photo to be displayed on the html and can be any photo or picture.
src
It is an image tag attribute used to set the directory and the name with extension of the image or photo to be displayed on the html page.
alt
It is an image tag attribute used to set the description of the image or photo to be displayed on the html page if the image might not be loaded correctly or is unavailable in the directory specified.
title
It is an image tag attribute used to set the name or title of the image or photo to be displayed on the html and can be seen when user hovers over the image.
Let us add the image in html page with alt attribute applied and you can use any image you like, copy and paste below code.
<!DOCTYPE html>
<body>
<img src="images/icon.png" alt="scienceinlesotho icon">
</body>
</html>
So, we should have the following results and if the image is not loaded the alt attribute will display scienceinlesotho icon.
Let us add the image in html page with title attribute applied, copy and paste below code.
<!DOCTYPE html>
<body>
<img src="images/icon.png" title="scienceinlesotho icon">
</body>
</html>
So, we should have the following results and if you hover over the image you will see the image title scienceinlesotho icon.