0Pricing
HTML for Kids · Lesson

Images: Adding Pictures to Your Page

Insert and format images on your web page.

Images: Adding Pictures to Your Page is a free HTML for Kids lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the HTML for Kids learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

1

Images: Adding Pictures to Your Page

Welcome to the next lesson! Today, we’ll learn how to add images to your web pages. Pictures make your pages more engaging and fun!

Images: Adding Pictures to Your Page — illustration 1

2

What Are Images in HTML?

Images are added to web pages using the <img> tag. This is a self-closing tag, meaning it doesn’t need a closing tag like </img>.

Let’s learn how to use it!

3

Adding an Image

To add an image, use the src attribute to specify the image file’s location.

Example:

In this example:

  • src: Specifies the image file.
  • alt: Provides alternative text if the image can’t be displayed.
<img src="https://www.w3.org/html/logo/img/html5-display.png" 
alt="A beautiful view" />

4

Alternative Text (alt Attribute)

The alt attribute describes the image. It’s important for accessibility and helps search engines understand your image.

Example:

If the image doesn’t load, the text "A beautiful sunset over the ocean" will appear instead.

<img src="https://www.w3.org/html/logo/img/html5-display.png" alt="A beautiful sunset over the ocean" />

5

Adding Image Dimensions

You can control the size of your image using the width and height attributes.

Example:

This example sets the image to 300 pixels wide and 200 pixels tall.

<img src="https://www.w3.org/html/logo/img/html5-display.png" alt="A red flower" width="300" height="200" />

6

Linking Images

You can turn an image into a clickable link by placing it inside an <a> tag.

Example:

When the image is clicked, it will take the user to https://example.com.

<a href="https://example.com">
  <img src="https://www.w3.org/html/logo/img/html5-display.png" alt="Example Logo" />
</a>

7

Using Online Images

You can use images hosted online by specifying their URL in the src attribute.

Example:

<img src="https://www.w3.org/html/logo/img/html5-display.png" alt="Online Image" />

8

Try It Yourself

Let’s create a simple web page with images. Here’s an example:

<!DOCTYPE html>
<html>
  <head>
    <title>My Image Page</title>
  </head>
  <body>
    <h1>Welcome to My Gallery</h1>
    <img src="cat.jpg" alt="A cute cat" width="400" />
    <p>This is my adorable cat!</p>
    <img src="https://www.w3.org/html/logo/img/html5-display.png" alt="A playful dog" />
    <p>This is a friendly dog from the internet!</p>
  </body>
</html>

10

Great Job!

Congratulations! You’ve learned how to add images to your web pages, set their dimensions, and even link them to other pages. Images make your web pages more interesting and visually appealing. In the next lesson, we’ll learn about creating tables to organize data. Get ready to make your pages even more functional!

Images: Adding Pictures to Your Page — illustration 9

9

Frequently asked questions

Is the “Images: Adding Pictures to Your Page” lesson free?

Yes — the full text of “Images: Adding Pictures to Your Page” is free to read here on the web, and the HTML for Kids course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the HTML for Kids course, upgrade to CoddyKit PRO.

What will I learn in “Images: Adding Pictures to Your Page”?

Insert and format images on your web page. You practise HTML for Kids with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start HTML for Kids?

No prior experience is required. HTML for Kids on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Images: Adding Pictures to Your Page” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this HTML for Kids lesson?

Yes. Every HTML for Kids lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. Headings and Paragraphs
  2. Lists: Ordered and Unordered
  3. Links: Connecting the Web
  4. Images: Adding Pictures to Your Page
← Back to HTML for Kids