Images on the Web page
We always need to show some images on a web page because the text is not sufficient for telling everything. So we use pictorial things to telling what we want to say.
In this article, we learning together how to put the image on a web page. Also how to adjust that image width and height.
Img tag is used to put images on the web page. Img tag having some attributes ( src, height,width,alt).
Src Attribute
Src attribute refers to the source of an image. In this attribute of the IMG tag, we pass the source of the image. In other words, we tell the browser on this location/source you found an image and put that image on this web page.
Syntax:-
<IMG src='source/link of image'/>
Alt Attribute
Alt refers to alternative image/text. Alt attribute is a special type of attribute of the IMG tag. it's used when some issues occur to load the image on the client's browser then the browser loads alternative image/text instead of that image.
Syntax:
<IMG src='source/link of img' alt='alternative image/text' />
Height & Width attributes
The height & Width attributes of the IMG tag helps to set the height and width of the image on a web page. Most of the time images are bigger in size we wanna decrease the image size or we also able to increase the view size of the image on the web page.
Syntax:
<IMG src='source of img' height='10px' width='10px'/>
For example:-
<!Doctype Html>
<HTML>
<HEAD>
</HEAD>
<BODY>
<IMG src='data:image/png;base64,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' width='100px' height='100px' alt='google image'/>
</BODY>
</HTML>
Ot |
| Output of above example |
We learned together how to put the image on web pages. I hope you guys like this information and we learn together more stuff.
Never stop learning ...
We you have any doubt let me know :)