The <img> tag is used to add images to a web page. It has two attributes: src and alt. In this tutorial you will insert image into your web page.
Image takes two attributes: src and alt. src specifies the source of the image. If the image does not load, then altenative text needs to be displayed. This alternative text is stored in alt attribute.
<!DOCTYPE html> <html> <head> <meta charset = "UTF-8"/> <meta name = "viewport" content="width=device-width,initial-scale=1.0"/> <meta http-equiv="X-UA-Compatible" content="ie=edge"/> <title>Images</title> </head> <body> <img src ="logo.png" alt="Image 1"/> </body> </html>
The output of the above program is shown below.
If the image does not get displayed, then the text gets displayed as shown below.
You can get lot of non-copyright images from pexels. You can get free stock photos and videos. So, in the src, you can enter the url for the image and get the image.
<img src="url_Of_image" alt="image from internet" />
Now, if the images are big in size, you can always adjust the size using height and width attribute. There is another way and it is using CSS, which we will use later.
<img src ="logo.png" alt="Image 1" width="260px"/>
The height will automatically get adjusted, if you adjust width. If you wan’t to specifically adust height you can give height attribute.
<img src ="logo.png" alt="Image 1" width="260px" height="250px"/>
It is better to place all the images in a folder. When your project gets big, you should have CSS, JS, Images, Fonts and Config files in different folders, as shown below