Class 10 HTML Worksheet: The img (Image) Tag

Class 10 HTML Worksheet: The <img> (Image) Tag

Part A: Fill in the Blanks

The <img> tag is used to display __________ on a webpage.
The src attribute of the <img> tag specifies the __________ of the image file.
The __________ attribute is used to describe the image, providing alternative text if the image fails to load.
The width and height attributes of the <img> tag are used to specify the __________ of the image.
The <img> tag is a __________ element, meaning it doesn't require a closing tag.

Part B: True or False

The <img> tag requires a closing </img> tag. (True / False)
The src attribute is mandatory for the <img> tag to function properly. (True / False)
The alt attribute is used to provide a textual description of an image. (True / False)
You can change the size of an image using the width and height attributes. (True / False)
The <img> tag can only be used inside the <body> section of an HTML document. (True / False)

Part C: Short Answer Questions

What is the purpose of the <img> tag in HTML?
Write the HTML code to display an image named flower.jpg with a width of 300 pixels and a height of 200 pixels.
Explain the significance of the alt attribute in the <img> tag.
How can you link an image to another webpage using the <img> tag? Write an example.
What happens if the image file specified in the src attribute is not found? How does the browser handle this situation?

Part D: Practical Exercises

Create an HTML document that displays three images:
- A photo named mountain.jpg with a width of 400 pixels and a height of 300 pixels.
- A second photo named lake.jpg with a width of 200 pixels and no height specified.
- A third image named forest.jpg with alternative text "Beautiful Forest" in case the image fails to load.
Write the HTML code to display an image named logo.png that links to the website "https://www.example.com" when clicked.
Create an HTML page that includes an image of your choice and resizes it using both the width and height attributes. Use the alt attribute to provide a meaningful description of the image.

Part E: Code Correction

Examine the following HTML code and correct the mistakes related to the <img> tag. Rewrite the correct code.

<!DOCTYPE html>
<html>
<head>
  <title>Image Example</title>
</head>
<body>
  <img src="mypicture.jpg" width="300px" height="200px">
  <img src="flower.jpg" alt=Beautiful Flower">
</body>
</html>