HTML en CSS leren: Afbeeldingen

Afbeeldingen

"Een website over ijs zonder ijsjes erop?" Marieke schudt het hoofd en legt een stapel tekeningen op de toonbank: een hoorntje, een beker en een wafel.

Het img-element

Een afbeelding zet je op de pagina met <img>. Net als <br> is het een leeg element: geen inhoud, geen sluittag.

Welke afbeelding het is, zegt het attribuut src, van "source" (bron): de naam van het bestand, relatief zoals bij een link.

Het attribuut alt beschrijft wat erop staat. Wie de pagina laat voorlezen, hoort die tekst. En laadt de afbeelding niet, dan staat de tekst op die plek.

index.html

1<main>2  <h1>Onze bekers</h1>3  <img src="beker.svg" alt="Een beker met drie bollen ijs">4</main>

ijssalon.example

Een lege alt voor versiering

Niet elke afbeelding vertelt iets. Staat de naam er al naast, of is het alleen versiering, dan geef je een lege alt: alt="". Een voorleesprogramma slaat de afbeelding dan over.

Laat alt nooit gewoon weg. Dan weet een voorleesprogramma niet of de afbeelding belangrijk is, en leest het soms de bestandsnaam voor: "hoorntje punt s v g".

index.html

1<main>2  <h1>Kies je ijsje</h1>3  <p><img src="hoorntje.svg" alt=""> Hoorntje</p>4  <p><img src="beker.svg" alt=""> Beker</p>5</main>

ijssalon.example

Probeer het zelf

Zet tussen de kop en de alinea de afbeelding wafel.svg, met als beschrijving Een wafel met poedersuiker.

1<main>2  <h1>Wafels</h1>3  <p>Vers gebakken, elke middag.</p>4</main>

1body {2  margin: 0;3  font-family: system-ui, sans-serif;4  background: #fff8f0;5  color: #3b2a1a;6}7header {8  padding: 24px 16px;9  background: #ffd6e0;10}11.logo {12  display: inline-block;13  margin: 8px 0 0;14  padding: 6px 18px;15  border-radius: 999px;16  background: #ffffff;17  font-size: 28px;18}19.slogan {20  margin: 8px 0 0;21}22main {23  padding: 8px 16px 24px;24}

ijssalon.example

Klaar voor meer?

De volledige les heeft 6 oefeningen, van makkelijk naar uitdagend, met hints, punten en een reeks die je kan opbouwen.

Begin aan de les

Het img-element

Een afbeelding zet je op de pagina met <img>. Net als <br> is het een leeg element: geen inhoud, geen sluittag.

Welke afbeelding het is, zegt het attribuut src, van "source" (bron): de naam van het bestand, relatief zoals bij een link.

Het attribuut alt beschrijft wat erop staat. Wie de pagina laat voorlezen, hoort die tekst. En laadt de afbeelding niet, dan staat de tekst op die plek.

index.html

1<main>2  <h1>Onze bekers</h1>3  <img src="beker.svg" alt="Een beker met drie bollen ijs">4</main>

ijssalon.example

Een lege alt voor versiering

Niet elke afbeelding vertelt iets. Staat de naam er al naast, of is het alleen versiering, dan geef je een lege alt: alt="". Een voorleesprogramma slaat de afbeelding dan over.

Laat alt nooit gewoon weg. Dan weet een voorleesprogramma niet of de afbeelding belangrijk is, en leest het soms de bestandsnaam voor: "hoorntje punt s v g".

index.html

1<main>2  <h1>Kies je ijsje</h1>3  <p><img src="hoorntje.svg" alt=""> Hoorntje</p>4  <p><img src="beker.svg" alt=""> Beker</p>5</main>

ijssalon.example

Probeer het zelf

Zet tussen de kop en de alinea de afbeelding wafel.svg, met als beschrijving Een wafel met poedersuiker.

1<main>2  <h1>Wafels</h1>3  <p>Vers gebakken, elke middag.</p>4</main>

1body {2  margin: 0;3  font-family: system-ui, sans-serif;4  background: #fff8f0;5  color: #3b2a1a;6}7header {8  padding: 24px 16px;9  background: #ffd6e0;10}11.logo {12  display: inline-block;13  margin: 8px 0 0;14  padding: 6px 18px;15  border-radius: 999px;16  background: #ffffff;17  font-size: 28px;18}19.slogan {20  margin: 8px 0 0;21}22main {23  padding: 8px 16px 24px;24}

ijssalon.example