2) src Attribute:
Syntax:
<img src ="logo.png"><img> tag is used to embed an image and the src the attribute specifies the path of the image to be displayed.
Code:
<!DOCTYPE html>
<html>
<head>
<title>src Attribute</title>
</head>
<body>
<h1>src Attribute</h1>
<img src ="https://www.elsebazaar.com/blog/wp-content/uploads/2019/03/cropped-Logo-240x130-1.png">
</body>
</html>
Output:
3) alt Attribute:
alt attribute for the <img> tag specifies for an alternative text for an image. For some reason, if the image failed to load properly due to an internet connection problem or any other reason, then the text will appear for the user. Hence, alt is the most important attribute in the <img> tag.
Syntax:
<img src ="logo.png" alt ="elsebazaar blog's logo">Code:
<!DOCTYPE html>
<html>
<head>
<title>alt Attribute</title>
</head>
<body>
<h1>alt Attribute</h1>
<img src ="https://www.elsebazaar.com/blog/wp-content/uploads/2019/03/cropped-Logo-240x130-1.png" alt ="elsebazaar blog's logo">
</body>
</html>
Output:
4) height and width Attribute:
Syntax:
<img src ="Sunset-Harbour-Bridge-View.jpg" height ="50px" width = "50pxCode:
<!DOCTYPE html>
<html>
<head>
<title>height and width Attribute</title>
</head>
<body>
<h1>height and width Attribute</h1>
<h3>
Original Image<br/>
<img src ="https://www.elsebazaar.com/blog/wp-content/uploads/2022/03/Sunset-Harbour-Bridge-View-300x300-1.jpg">
</h3>
<h3>
Height and width = 50px; <br/>
<img src ="https://www.elsebazaar.com/blog/wp-content/uploads/2022/03/Sunset-Harbour-Bridge-View-300x300-1.jpg" height ="50px" width = "50px">
</h3>
<h3>
Height and width = 100px; <br/>
<img src ="https://www.elsebazaar.com/blog/wp-content/uploads/2022/03/Sunset-Harbour-Bridge-View-300x300-1.jpg" height ="100px" width = "100px">
</h3>
<h3>
Height and width = 200px; <br/>
<img src ="https://www.elsebazaar.com/blog/wp-content/uploads/2022/03/Sunset-Harbour-Bridge-View-300x300-1.jpg" height ="200px" width = "200px">
</h3>
</body>
</html>
Output:
