HTML Images – Solved Practice Questions

By /

Introduction

HTML images make webpages more attractive and informative. The <img> tag is used to display images on a webpage. In this chapter, you’ll practice adding images, resizing them, using alternative text, and creating image-based webpages through simple solved questions.

Question 1

Problem Statement

Create a webpage that displays an image named nature.jpg.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Display Image</title>
</head>
<body>

    <img src="nature.jpg" alt="Nature">

</body>
</html>

Output

[Nature Image]

Step-by-Step Explanation

  • <img> is used to display an image.
  • src specifies the image file.
  • alt displays alternative text if the image cannot be loaded.

Question 2

Problem Statement

Create a webpage that displays an image with a width of 300 pixels.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Image Width</title>
</head>
<body>

    <img src="car.jpg" alt="Sports Car" width="300">

</body>
</html>

Output

[Sports Car Image]

Step-by-Step Explanation

  • width sets the width of the image.
  • The width is measured in pixels.
  • The browser automatically adjusts the display.

Question 3

Problem Statement

Create a webpage that displays an image with a height of 200 pixels.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Image Height</title>
</head>
<body>

    <img src="flower.jpg" alt="Flower" height="200">

</body>
</html>

Output

[Flower Image]

Step-by-Step Explanation

  • height sets the height of the image.
  • The value is written in pixels.
  • Only the image height is controlled.

Question 4

Problem Statement

Create a webpage that displays an image with both width and height.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Image Size</title>
</head>
<body>

    <img src="laptop.jpg"
         alt="Laptop"
         width="350"
         height="220">

</body>
</html>

Output

[Laptop Image]

Step-by-Step Explanation

  • width sets the image width.
  • height sets the image height.
  • Both attributes can be used together.

Question 5

Problem Statement

Create a webpage that displays an image with the alternative text “Beautiful Sunset”.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Alternative Text</title>
</head>
<body>

    <img src="sunset.jpg" alt="Beautiful Sunset">

</body>
</html>

Output

[Beautiful Sunset]

(If the image is unavailable, the browser displays Beautiful Sunset.)

Step-by-Step Explanation

  • alt provides alternative text.
  • It improves accessibility.
  • It is also helpful for SEO.

Question 6

Problem Statement

Create a webpage that displays three images one below another.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Multiple Images</title>
</head>
<body>

    <img src="mountain.jpg" alt="Mountain" width="250">

    <br><br>

    <img src="river.jpg" alt="River" width="250">

    <br><br>

    <img src="forest.jpg" alt="Forest" width="250">

</body>
</html>

Output

[Mountain Image]

[River Image]

[Forest Image]

Step-by-Step Explanation

  • Multiple <img> tags display multiple images.
  • <br> moves each image to a new line.
  • Each image has its own src and alt attributes.

Question 7

Problem Statement

Create a webpage that displays a company logo at the top of the page.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Company Logo</title>
</head>
<body>

    <img src="logo.png" alt="Company Logo" width="180">

    <h1>ABC Technologies</h1>

</body>
</html>

Output

[Company Logo]

ABC Technologies

Step-by-Step Explanation

  • The logo is displayed using the <img> tag.
  • width controls the logo size.
  • The heading appears below the logo.

Question 8

Problem Statement

Create a webpage where clicking an image opens the Google homepage.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Clickable Image</title>
</head>
<body>

    <a href="https://www.google.com">

        <img src="google-logo.png"
             alt="Google Logo"
             width="180">

    </a>

</body>
</html>

Output

[Google Logo Image]

(Clicking the image opens the Google homepage.)

Step-by-Step Explanation

  • The <img> tag is placed inside the <a> tag.
  • The image becomes a clickable hyperlink.
  • This technique is commonly used for logos and banners.

Question 9

Problem Statement

Create a photo gallery that displays four images in sequence.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Photo Gallery</title>
</head>
<body>

    <img src="photo1.jpg" alt="Photo 1" width="180">

    <img src="photo2.jpg" alt="Photo 2" width="180">

    <img src="photo3.jpg" alt="Photo 3" width="180">

    <img src="photo4.jpg" alt="Photo 4" width="180">

</body>
</html>

Output

[Photo 1] [Photo 2] [Photo 3] [Photo 4]

Step-by-Step Explanation

  • Four <img> tags display four images.
  • Each image has its own source file.
  • All images appear in one row if enough space is available.

Question 10

Problem Statement

Create a travel webpage that displays a banner image, a destination image, and a hotel image.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Travel Website</title>
</head>
<body>

    <img src="banner.jpg" alt="Travel Banner" width="700">

    <h1>Explore Manali</h1>

    <img src="manali.jpg" alt="Manali" width="300">

    <br><br>

    <img src="hotel.jpg" alt="Hotel" width="300">

</body>
</html>

Output

[Travel Banner]

Explore Manali

[Manali Image]

[Hotel Image]

Step-by-Step Explanation

  • The first image acts as the page banner.
  • The destination image is displayed below the heading.
  • The hotel image is displayed after a line break.
  • Multiple images can be combined to build a complete webpage.

Key Takeaways

  • <img> is used to display images.
  • src specifies the image file location.
  • alt provides alternative text if the image cannot be displayed.
  • width and height control image size.
  • Multiple images can be displayed on the same webpage.
  • Images can also be used as clickable links.

Frequently Asked Questions (FAQs)

1. Which HTML tag is used to display an image?

The <img> tag is used to display an image.

2. What is the purpose of the src attribute?

The src attribute specifies the location of the image file.

3. Why is the alt attribute important?

It displays alternative text if the image cannot load and improves accessibility.

4. How do I change the width of an image?

Use the width attribute.

5. How do I change the height of an image?

Use the height attribute.

6. Can I display multiple images on one webpage?

Yes. Simply use multiple <img> tags.

7. Can an image be used as a hyperlink?

Yes. Place the <img> tag inside an <a> tag.

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Related Posts

Scroll to Top