Bilder · Kode med Martin

Legg til bilder og bilder til din nettside – og lær at holde dem pænt organiseret i en mappe.

Jeg viser deg: billedtagget

Et bilde legger til med <img>-tagget:

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

To ting, der er værd at forklare her:

src (source) forteller hvor bildet er. Her: i mappen images, filen school.jpg.
alt (alternative) er en tekstbeskrivelse af bildet. Den vises, hvis bildet ikke kan indleses, og den leses højt af skjermlesere for blinde mennesker. Fyll ut den altid – det er både høfligt og standard praksis for profesjonelle.

Legg merke til én ting mere: <img> har intet lukketag. Det “indpakker” ikke noe, det indsetter sig selv – noen tags fungerer sådan.

💡

Hvor får du bilder fra? Dine egne bilder (bed en forelder om at sende dem til din datamaskin), dine egne tegninger scannet eller bildegraferet – eller gratis bilder fra et site som pixabay.com. Ikke ta bare bilder fra Google – de fleste tilhører nogen og kan ikke brukes uden tillatelse.

Hold det pænt: en mappe til bilder

I VS Code, inde i din my-website-mappe, lag en ny mappe og kall den images (mappen-med-et-plus-ikonet øverst til venstre).
Kopier 2–3 bilder ind i den. Du kan endda trække og slippe dem direkte ind i VS Code.
Omdøb dem enkelt: små bokstaver, ingen accenter, ingen mellomrum. Noe som school.jpg, field.jpg, trip-mountains.jpg. Det sparer deg for mange hovedpiner.

Nå er det din tur 💪

Legg til mindst to bilder til siden din, der passer til indholdet (måske ét lige under hovedoverskriften og ét i et kapittel).

🏫 Skolenettside – 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 nettside – 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>

🌍 Reisejournal – 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">

⚽ Klubnettside – 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">

⚠️

Vises bildet ikke? Sjekk: 1) navnet i koden din matcher filnavnet nøyaktigt (også store/små bokstaver!), 2) bildet virkelig er i mappen images, 3) du ikke glemte at lagre og oppdatere siden. Finn mer hjælp i kapitlet Når noe ikke fungerer.

✅

Sjekk deg selv: Du kan se dine bilder på siden. De er måske alt for store eller merkelig strakte – det er fint, vi retter størrelsen, når vi kommer til CSS.

Dette tar du med deg fra leksjonen

<img src="..." alt="...">-tagget indsetter et bilde – det har intet lukketag.
alt beskriver bildet med ord. Fyll ut den altid.
Hold bilder i en images-mappe, navngivet enkelt: små bokstaver, ingen mellomrum eller accenter.