The <img> Tag:
The <img> tag is used to insert an image. It contains only attributes, and does not have a closing tag.
The image's URL (address) can be defined using the src attribute.
For the offline image first you have to save the image in the project folder.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<img src="tree2.jpg">
</body>
</html>
If the image is from online we have to copy the image address and paste it in src attribute.
Alt attribute:
In case the image cannot be displayed, the alt attribute specifies an alternate text that describes the image in words. The alt attribute is required.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<img src="tree2.jp" alt="Tree Image">
</body>
</html>
Image Resizing:
To define the image size, use the width and height attributes.
The value can be specified in pixels or as a percentage.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<img src="tree2.jpg" alt="Tree Image" height="100px" height="100px">
<img src="tree2.jpg" alt="Tree Image" height="50%" height="50p%">
</body>
</html>
Image Border:
By default, an image has no borders. Use the border attribute within the image tag to create a border around the image.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<img src="tree2.jpg" alt="Tree Image" border="6px">
</body>
</html>
Practice in this HTML code editor
//Practice your code here
How to align the Image in the center
ReplyDeletePlace the image tag in the center tag, otherwise we have to use CSS.
DeleteFollow us for more like this...