HTML eerste stappen – Les 6 – Afbeeldingen

10/10/2025, by Ivan

Afbeeldingen zijn een belangrijk onderdeel van elke website — zonder afbeeldingen ziet een site er saai en kleurloos uit. Afbeeldingen worden gebruikt voor de vormgeving van een site, voor fotogalerijen en natuurlijk ook gewoon als illustraties.

Afbeeldingen worden ingevoegd met de tag IMG (merk op dat we niet “image” schrijven, maar gewoon img). De <img />-tag is een enkelvoudige tag, dat wil zeggen dat deze geen sluitende tag heeft.

Het belangrijkste attribuut van de IMG-tag is src. Het werkt op dezelfde manier als href bij een link. In het attribuut src moeten we het pad naar het afbeeldingsbestand opgeven. Dat pad kan, net als bij links, relatief of absoluut zijn.

Dit is de code van ons bestand index.html:

<html>
  <head>
    <title>Mijn eerste HTML-document</title>
  </head>
  <body>  
    <h1>Mijn eerste HTML-document</h1>
    <p>
      <a href="files/file.html">Link naar het tweede document</a>
    </p>
  </body>
</html>

Laten we nu een map images aanmaken naast dit bestand. In die map plaatsen we een afbeelding, bijvoorbeeld met de naam image.jpg. Nu voegen we de <img>-tag toe aan onze index.html:

<html>
  <head>
    <title>Mijn eerste HTML-document</title>
  </head>
  <body>  
    <h1>Mijn eerste HTML-document</h1>
    <p>
      <img />
    </p>
    <p>
      <a href="files/file.html">Link naar het tweede document</a>
    </p>
  </body>
</html>

We hebben de tag ingevoegd, nu moeten we het pad naar de afbeelding toevoegen. We gebruiken een relatief pad dat begint met ./:

./

Voeg daarna de mapnaam toe waarin de afbeelding zich bevindt:

./images/

En ten slotte de bestandsnaam:

./images/image.jpg

Nu plaatsen we dit pad in het attribuut src van de afbeelding:

<html>
  <head>
    <title>Mijn eerste HTML-document</title>
  </head>
  <body>  
    <h1>Mijn eerste HTML-document</h1>
    <p>
      <img src="./images/image.jpg" />
    </p>
    <p>
      <a href="files/file.html">Link naar het tweede document</a>
    </p>
  </body>
</html>

Op dit moment wordt de afbeelding weergegeven in haar originele grootte. We kunnen echter de grootte aanpassen met behulp van de attributen width (breedte) en height (hoogte). Je kunt alleen de breedte, alleen de hoogte, of beide tegelijk instellen. Bijvoorbeeld:

<html>
  <head>
    <title>Mijn eerste HTML-document</title>
  </head>
  <body>  
    <h1>Mijn eerste HTML-document</h1>
    <p>
      <img src="./images/image.jpg" width="200" />
    </p>
    <p>
      <a href="files/file.html">Link naar het tweede document</a>
    </p>
  </body>
</html>

Of alleen de hoogte:

<html>
  <head>
    <title>Mijn eerste HTML-document</title>
  </head>
  <body>  
    <h1>Mijn eerste HTML-document</h1>
    <p>
      <img src="./images/image.jpg" height="400" />
    </p>
    <p>
      <a href="files/file.html">Link naar het tweede document</a>
    </p>
  </body>
</html>

Als je zowel de hoogte als de breedte instelt, zorg er dan voor dat ze in verhouding staan tot de oorspronkelijke afmetingen van de afbeelding. Anders zal de afbeelding op de website vervormd worden weergegeven.

<html>
  <head>
    <title>Mijn eerste HTML-document</title>
  </head>
  <body>  
    <h1>Mijn eerste HTML-document</h1>
    <p>
      <img src="./images/image.jpg" height="400" width="100" />
    </p>
    <p>
      <a href="files/file.html">Link naar het tweede document</a>
    </p>
  </body>
</html>

Extra Block Types (EBT) - Nieuwe Layout Builder ervaring❗

❗Extra Paragraph Types (EPT) - Nieuwe Paragraphs ervaring

HTML eerste stappen – Les 6 – Afbeeldingen