Inserting Image on The Webpage
Last time we have seen, The Anchor Tag in HTML. Now we are going to learn about Inserting an Image in the Webpage. So let's get started...
Inserting Image on The Webpage
Images and graphics can be embedded into pages. It improves the appearance of the web pages by enhancing their GUI interface.
Images can't be really inserted on the webpage, HTML Language only links the images to the webpage and display them. In HTML, images are specified by the Image <img> tag.
This HTML Markup element indicates a media object to be included in an HTML document. Usually, the object is nothing but an image.
Syntax :
<img src="Source URL of the Image" alt="alternative_text">Attributes of <img> Tag
| Attributes | Description |
|---|---|
| src | It contains a Path pointing to the Image |
| alt | It defines an alternate word for the Image |
| width | It is used to set the Image Width |
| height | It is used to set the Image Height |
| hspace | It is used to put the Horizontal margin to the Image |
| vspace | It is used to put the Vertical margin to the Image |
| border | It is used to specify Border thickness in pixels |
| align | By default align is left, but can be modified to any side like right and center |
Inserting a Simple Image on the Webpage
Example :
<!DOCTYPE html>
<html>
<head>
<title> Inserting Images in HTML </title>
</head>
<body>
<h2> Inserting a simple Image on the Webpage</h2>
<img src="https://bit.ly/3IhGZFG" alt="Audy Car" width="250" height="130">
</body>
</html>
Applying the "align" attribute
Example :
<!DOCTYPE html>
<html>
<head>
<title> Images with The Alignment </title>
</head>
<body>
<h2 align="center">Image with "Center" Allignment:-</h2>
<p align="center">
<img src="https://bit.ly/3IhGZFG" alt="Center_Audy">
</p>
<hr>
<h2 align="left">Image with "Left" Allignment:-</h2>
<p align="left">
<img src="https://bit.ly/3IhGZFG" alt="Left_Audy">
</p>
<hr>
<h2 align="right">Image with "Right" Allignment:-</h2>
<p align="right">
<img src="https://bit.ly/3IhGZFG" alt="Right_Audy">
</p>
</body>
</html>Applying the "border", "hspace", and "vspace" Attribute
Example :
<!DOCTYPE html>
<html>
<head>
<title> Applying the "border", "hspace", and "vspace" </title>
</head>
<body>
<h2>Image with Border</h2>
<img src="https://bit.ly/3IhGZFG" alt="AUDY-3" border="5">
<hr>
<h2>Image with "Hspace":-</h2>
<img src="https://bit.ly/3IhGZFG" alt="AUDY-4" hspace="50">
<hr>
<h2>Image with "Vspace":-</h2>
<img src="https://bit.ly/3IhGZFG" alt="AUDY-5" vspace="50">
</body>
</html>So, now it's time to end the session. See you guys Next Time, stay tuned for further updates on HTML Programming Languages...!!!
Our website will definitely help you to improve your Programming Skills and Knowledge.
Thanks for Visiting...!!!
0 Comments
Please do not add Any Spam link in Comments !