HTML – Images
Images are used to make the design and the appearance beautiful of a web page. In this article, you will learn how to use images in your web pages, HTML image size, how to add an image in HTML from a folder, HTML center image, how to align an image in HTML, how to insert an image in HTML using notepad.
HTML Images Syntax
You can insert or embed an image on your web page by using the tag. the Syntax is here.
<img src="url" alt="alternatetext">
The <img> tag is called an empty tag, and it does not have a closing tag.
<img> tag has two (2) required attributes:
- src – Defines the path to the image
- alt – Defines an alternate text for the image (When an image is missing then, the alternate text will be shown on the place of Image.)
<!DOCTYPE html>
<html>
<head>
<title> HTML - Image </title>
</head>
<body>
<p> How to Insert an Image to a web page </p>
<img src = "/html/images/img.png" alt = "PrepareExams" />
</body>
</html>How to Set Image Width/Height
To specify the width and height of an image, you can the style attribute.
<!DOCTYPE html>
<html>
<head>
<title> Image Width and Height HTML </title>
</head>
<body>
<p> How to Set image width and height </p>
<img src = "/html/images/img.png" alt = "PrepareExams" width = "300" height = "300"/>
</body>
</html>How to Set Image Border
You can also set an image’s border. you will write border=”value” in <img> tag. Border’s value will define thickness around the picture.
Example
<!DOCTYPE html>
<html>
<head>
<title> Image Border </title>
</head>
<body>
<p>How to Set image Border</p>
<img src = "/html/images/img.png" alt = "PrepareExams" border = "5"/>
</body>
</html>How to Set Image Alignment
the image will align at the left side of the page by default. however, we can adjust the image’s alignment in the center or right using align attribute.
Example
<!DOCTYPE html>
<html>
<head>
<title> Image Alignment - PrepareExams </title>
</head>
<body>
<p> How to Set image Alignment </p>
<img src = "/html/images/pic.png" alt = "PrepareExams" border = "5" align = "center"/>
</body>
</html>HTML – Images in Another Folder
If your images are stored in a sub-folder, you have to include the folder name in the src attribute:
Example
<!DOCTYPE html>
<html>
<body>
<h2> Images in Another Folder - HTML </h2>
<p> When your image is stored in a sub-folder. so, You must include
the folder name in the src attribute: </p>
<img src="/images/pic.gif" alt="PrepareExams" style="width:150px;height:150px;">
<!-- Our image in a Sub folder named images. we have included the folder
name in the src attribute -- >
</body>
</html>