Images · Code with Martin

Add photos and pictures to your website – and learn to keep them neatly organized in a folder.

Show me: the image tag

An image is added with the <img> tag:

<img src="images/school.jpg" alt="Our school building">

Two things worth explaining here:

src (source) says where the image is. Here: in the images folder, the file school.jpg.
alt (alternative) is a text description of the image. It shows up if the image fails to load, and it’s read aloud by screen readers for people who are blind. Always fill it in – it’s both polite and standard practice for pros.

Notice one more thing: <img> has no closing tag. It doesn’t “wrap” anything, it just inserts itself – some tags work like that.

💡

Where do you get images? Your own photos (ask a parent to send them to your computer), your own drawings scanned or photographed – or free images from a site like pixabay.com. Don’t just grab images from Google – most of them belong to someone and can’t be used without permission.

Keep it tidy: a folder for images

In VS Code, inside your my-website folder, create a new folder and name it images (the folder-with-a-plus icon in the top left).
Copy 2–3 images into it. You can even drag and drop them straight into VS Code.
Rename them simply: lowercase letters, no accents, no spaces. Something like school.jpg, field.jpg, trip-mountains.jpg. It’ll save you a lot of headaches.

Your turn 💪

Add at least two images to your page that fit the content (maybe one right under the main heading and one in a chapter).

🏫 School website – solution

<h1>Riverside Elementary School</h1>
<img src="images/school.jpg" alt="Our school building">
<p>Welcome to our school's website.</p>

<h2>Clubs</h2>
<img src="images/gym.jpg" alt="Our gym during a floorball game">
<ul>
  <li>floorball</li>
  <li>ceramics</li>
</ul>

🙋 Personal website – solution

<h1>Hi, I'm Jake</h1>
<img src="images/me.jpg" alt="Me with a soccer ball">

<h2>What I Like</h2>
<img src="images/minecraft-build.jpg" alt="My castle built in Minecraft">
<p>More than anything, soccer and Minecraft.</p>

🌍 Travel journal – solution

<h1>Where We've Been 🌍</h1>

<h2>Last Trip: The Mountains</h2>
<img src="images/mountains.jpg" alt="View from the summit over the forest">
<p>Over the summer we hiked through the mountains.</p>

<h2>Greece 2025</h2>
<img src="images/sea.jpg" alt="A bay with crystal-clear water">

⚽ Club website – solution

<h1>Riverside Eagles FC</h1>
<img src="images/team.jpg" alt="Our team photo after the match">

<h2>Recent Results</h2>
<img src="images/match.jpg" alt="Owen scoring a goal against the Wildcats">

⚠️

Image not showing up? Check: 1) the name in your code exactly matches the file name (even uppercase/lowercase!), 2) the image is really in the images folder, 3) you didn’t forget to save and refresh the page. Find more help in the chapter When Something Isn’t Working.

✅

Check yourself: You can see your images on the page. They might be way too big or oddly stretched – that’s fine, we’ll fix sizing once we get to CSS.

What to take away from this lesson

The <img src="..." alt="..."> tag inserts an image – it has no closing tag.
alt describes the image in words. Always fill it in.
Keep images in an images folder, named simply: lowercase, no spaces or accents.