Bilder · Koda med Martin

Lägg till foton och bilder på din webbplats – och lär dig hålla dem snyggt organiserade i en mapp.

Jag visar: bildtaggen

En bild läggs till med taggen <img>:

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

Två saker som är värda att förklara här:

src (source) säger var bilden finns. Här: i mappen images, filen school.jpg.
alt (alternative) är en textbeskrivning av bilden. Den visas om bilden inte laddas, och den läses upp av skärmläsare för personer som är blinda. Fyll alltid i den – det är både artigt och standard för proffs.

Märk en sak till: <img> har ingen avslutande tagg. Den “slår inte runt” något, den bara sätter in sig själv – vissa taggar funkar så.

💡

Var får du bilder? Dina egna foton (be en förälder skicka dem till din dator), dina egna teckningar skannade eller fotograferade – eller gratis bilder från en sida som pixabay.com. Ta inte bara bilder från Google – de flesta tillhör någon och får inte användas utan tillstånd.

Håll ordning: en mapp för bilder

I VS Code, inuti din mapp my-website, skapa en ny mapp och döp den till images (ikonen med mapp och plus uppe till vänster).
Kopiera 2–3 bilder till den. Du kan till och med dra och släppa dem direkt in i VS Code.
Döp om dem enkelt: små bokstäver, inga accenter, inga mellanslag. Något som school.jpg, field.jpg, trip-mountains.jpg. Det sparar dig mycket huvudvärk.

Nu är det din tur 💪

Lägg till minst två bilder på din sida som passar innehållet (kanske en direkt under huvudrubriken och en i ett kapitel).

🏫 Skolwebbplats – lösning

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

🙋 Personlig webbplats – lösning

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

🌍 Resejournal – lösning

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

⚽ Klubbwebbplats – lösning

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

⚠️

Syns inte bilden? Kolla: 1) namnet i din kod matchar exakt filnamnet (även stora/små bokstäver!), 2) bilden verkligen ligger i mappen images, 3) du inte glömde spara och uppdatera sidan. Mer hjälp finns i kapitlet När något inte funkar.

✅

Kolla själv: Du ser dina bilder på sidan. De kanske är alldeles för stora eller konstigt utdragna – det är okej, vi fixar storleken när vi kommer till CSS.

Det här tar du med dig från lektionen

Taggen <img src="..." alt="..."> sätter in en bild – den har ingen avslutande tagg.
alt beskriver bilden med ord. Fyll alltid i den.
Håll bilder i en mapp images, med enkla namn: små bokstäver, inga mellanslag eller accenter.