A web page can appear better with images. So in this chapter, you will learn how to display images on a web page and customize it.
HTML IMG Tag
We can use the <img> tag to insert pictures into our web page. The <img> tag is an empty tag, meaning it has no ending tag (i.e., no </img>) associated with it. The syntax of using <img> tag is:
<img src="path or URL" alt="alternate text or image replacement text.">SRC attribute of the IMG Tag
This attribute helps specify the image's source, which instructs your web browser from which location it must fetch the particular picture (in other words, specify the path). SRC attribute takes path or URL as its value in quotes.
The source's image may exist locally on your computer (need a path to specify) or may reside somewhere in the webserver (need URL to specify). For images in your local PC, whether you have to set the entire path or bring that particular image's copy in a specific folder in which your .html file (in which you want to add image) is also residing.
For image path residing over the internet in some other webpage, you have to use URLs like this:
<img src="http://example.com/wallpaper.jpg" alt="Wallpaper">Output:
alt Attribute
This attribute of Image Tag or <img> tag allows you to define an alternative text in case your browser becomes unsuccessful in loading the image. There may be situations when your browser might not be able to display that particular image either because of a slow connection server error or any other reason. Moreover, search engines take up those alternate texts given to images and help find articles or content related to that text.
<img src="ganesh.jpg" alt="Lalbaugcha Raja">border Attribute
The default value of the border is assigned as "0px (Zero pixel)" to every image. For displaying the borders all around the image, you have to implement the border attribute of the <img> tag. Here's an example of how it needs to be applied:
<img src="guitar.jpg" height="30px" width="30px" border="6">hspace Attribute
Hspace attribute is used for providing horizontal spacing all-around your image. It takes value in the form: 20 or 20%.
The vspace Attribute
Vspace attribute is used for providing vertical spacing all-around your image. It also takes value in the form: 20 or 20%.
Both attributes are used when you want to maintain some gapping between your image and text.
Height and Width
If you need a specific size of the image to fit it into your web page, you can use the height and width attribute of the IMG tag. Here's an example:
<img src="guitar.jpg" height="40px" width="80px">
<br>
<img src= "guitar.jpg" title="Forest" height="25%" width="30%">You can use both px (pixels) and % (percent) as a relative unit for specifying the size (here, height and width) of the image.
