HTML Images
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.
Table of Contents
- HTML IMG Tag
- The SRC attribute of the IMG Tag
- The alt Attribute
- The border Attribute
- The hspace Attribute
- The vspace Attribute
- Height and Width
HTML IMG Tag
For inserting pictures into our web page, we can use the <img> tag. The <img> tag is an empty tag which mean 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">The SRC attribute of the IMG Tag
This attribute helps specify the image’s source, which means this, instruct 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 particular 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:
The 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 or 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="shriganesh.jpg" alt ="Lalbaugcha Raja">The border Attribute
The default value of the border is assigned as “0px” 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="moon.jpg" height="30px" width="30px" border="6">The 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 in situations where you want to maintain some gapping between your image and text.
Height and Width
In case you need a specific size of the image for fitting it into your web page, you can use the height and width attribute of the IMG tag. Here’s an example:
<img src="moon.jpg" height="40px" width="80px">
<br/>
<img src= "moon.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.