📄

Images

Beginner

50 XP

15 min

Lesson Content

Images

Images add visuals to pages. Think of them as photos you paste into a document. Use the <img> tag with the src attribute.

Basic Image

<img src="/images/picture.jpg" alt="A picture" />

The alt text helps people who cannot see the image and improves accessibility.

<figure>
  <img src="https://via.placeholder.com/150" alt="Placeholder image" />
  <figcaption>A sample image</figcaption>
</figure>

Example Code

Insert an image using a placeholder URL and add helpful alt text.

<!DOCTYPE html>
<html>
  <head>
    <title>Image Practice</title>
  </head>
  <body>
    <!-- Add an img tag that uses https://via.placeholder.com/150 -->
  </body>
</html>

Expected Output:

An image is displayed

Study Tips

•Read the theory content thoroughly before practicing
•Review the example code to understand key concepts
•Proceed to the Practice tab when you're ready to code