Afbeeldingen · Code met Martin

Voeg foto's en plaatjes toe aan je website – en leer ze netjes in een map te bewaren.

Ik laat je zien: de afbeeldingstag

Een afbeelding voeg je toe met de <img>-tag:

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

Twee dingen die het uitleggen waard zijn:

src (source) zegt waar de afbeelding staat. Hier: in de map images, het bestand school.jpg.
alt (alternative) is een tekstbeschrijving van de afbeelding. Die verschijnt als de afbeelding niet laadt, en wordt voorgelezen door schermlezers voor mensen die blind zijn. Vul het altijd in – het is beleefd én standaard bij professionals.

Let nog op één ding: <img> heeft geen sluittag. Hij “wikkelt” niets in, hij plaatst zichzelf gewoon – sommige tags werken zo.

💡

Waar haal je afbeeldingen? Je eigen foto’s (vraag een ouder ze naar je computer te sturen), je eigen tekeningen gescand of gefotografeerd – of gratis afbeeldingen van een site als pixabay.com. Pak niet zomaar afbeeldingen van Google – de meeste horen iemand toe en mag je niet zonder toestemming gebruiken.

Houd het netjes: een map voor afbeeldingen

Maak in VS Code, in je my-website-map, een nieuwe map en noem hem images (het map-met-plusteken-icoon linksboven).
Kopieer er 2–3 afbeeldingen naartoe. Je kunt ze zelfs rechtstreeks in VS Code slepen.
Hernoem ze simpel: kleine letters, geen accenten, geen spaties. Iets als school.jpg, field.jpg, trip-mountains.jpg. Dat bespaart je veel hoofdpijn.

Nu jij 💪

Voeg minstens twee afbeeldingen toe aan je pagina die bij de inhoud passen (misschien één direct onder de hoofdkop en één in een hoofdstuk).

🏫 Schoolwebsite – oplossing

<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>

🙋 Persoonlijke website – oplossing

<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>

🌍 Reisdagboek – oplossing

<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">

⚽ Clubwebsite – oplossing

<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">

⚠️

Afbeelding niet zichtbaar? Controleer: 1) de naam in je code komt exact overeen met de bestandsnaam (ook hoofdletters/kleine letters!), 2) de afbeelding staat echt in de map images, 3) je bent niet vergeten op te slaan en de pagina te verversen. Meer hulp vind je in het hoofdstuk Als iets niet werkt.

✅

Controleer jezelf: Je ziet je afbeeldingen op de pagina. Ze zijn misschien veel te groot of vreemd uitgerekt – dat is oké, de grootte fixen we zodra we bij CSS zijn.

Wat neem je mee uit deze les

De tag <img src="..." alt="..."> voegt een afbeelding in – hij heeft geen sluittag.
alt beschrijft de afbeelding in woorden. Vul het altijd in.
Bewaar afbeeldingen in een map images, simpel benoemd: kleine letters, geen spaties of accenten.