HTML & CSS Basics

H2 - Afbeeldingen

00 - Dezelfde site krijgt eigen beelden

Werk verder met www/index.html uit H1. Je verzamelt beelden voor drie projecten en één achtergrond. We bouwen voort op dezelfde projectafbeelding; externe afbeeldingspaden zijn alleen een tijdelijke proef.

01 - Type afbeeldingen
  • Dit zijn oudere webformaten die je tegenwoordig liever niet meer als eerste keuze gebruikt:
  • JPG - RGB - compressie
  • GIF - 256 kleuren - animatie
  • PNG - RGB - transparantie
  • Tegenwoordig gebruik je op websites bij voorkeur:
  • WEBP - lossy en lossless compressie - transparantie - animatie
  • AVIF - lossy en lossless compressie - transparantie - animatie - ook geschikt voor HDR en bredere kleurweergave
  • Deze moderne formaten leveren vaak kleinere bestanden op, waardoor je website sneller laadt.
  • WEBP heeft brede browserondersteuning en is vaak een veilige moderne keuze.
  • AVIF kan nog kleinere bestanden geven dan WEBP, maar is wat zwaarder om te maken en te bewerken.
  • Gebruik liever geen spaties in bestandsnamen en mapnamen. Dat is ongewenst en niet aan te raden.

Actie — Bouw verder

  1. Gebruik de map www en de index.html uit H1; begin geen nieuw project.
  2. Kies drie afbeeldingen voor je eigen projecten en één rustige achtergrondafbeelding. Een eigen foto of screenshot is geschikt. Bewaar voorlopig alles naast index.html.
  3. Gebruik bij voorkeur WEBP of AVIF. In de acties gebruiken we de namen project-01.webp, project-02.webp, project-03.webp en achtergrond.webp. Gebruik je een ander formaat, pas dan ook de extensies in je verwijzingen aan.
  4. Deze afbeeldingen blijven beschikbaar voor de portfolio-inhoud en de pagina-achtergrond. Je hoeft de achtergrond nu nog niet toe te passen.
02 - img element en attributen
  • Met het <img>-element plaats je een afbeelding op je pagina.
  • Het <img>-element heeft geen sluit-tag.
  • Bij HTML-elementen kun je een attribuut noemen.
  • Attributen worden alleen in de open tag geplaatst.
  • Meerdere attributen in een tag zijn met spaties van elkaar gescheiden.
  • Het src-attribuut bij <img> verwacht een bestandsnaam en het pad naar de file.
<img src="project-01.webp">

Actie — Bouw verder

  1. Zet onder de projectbeschrijving bij Uitgelicht werk een img met src="project-01.webp".
  2. Open dezelfde index.html in de browser en controleer de afbeelding. De andere projectafbeeldingen bewaar je voor de portfoliopagina in H3.
  3. De afbeelding blijft op Home staan. In het volgende item maken we de tag verder af.
03 - Het alt-attribuut en title-attribuut
  • Een attribuut dat verplicht is: het alt-attribuut.
  • In het alt-attribuut geef je mee wat je op de afbeelding ziet.
  • Hiermee wordt de website beter geschikt voor bijvoorbeeld slechtziende gebruikers.
  • Als je geen alt-attribuut gebruikt, krijg je fouten op je pagina en dat is ook ongunstig voor de vindbaarheid in zoekmachines.
  • Het title-attribuut is niet verplicht, maar toont een label als je met de muis over de afbeelding gaat.
<img src="project-01.webp" alt="Startpagina van mijn eerste website" title="Mijn eerste website">

Actie — Bouw verder

  1. Voeg aan dezelfde afbeelding een alt toe die kort vertelt wat jouw projectafbeelding laat zien.
  2. Alleen oefenen: voeg een title toe en bekijk de muisaanwijzertekst. Verwijder title daarna als die niets toevoegt aan de bestaande tekst.
  3. Behoud in elk geval src en een passende alt; maak geen tweede afbeelding om attributen te oefenen.
04 - Height en width attributen
  • De attributen width en height zijn niet verplicht, maar kunnen wel handig zijn.
  • Ze helpen de browser om alvast ruimte voor de afbeelding te reserveren, waardoor de pagina rustiger laadt.
  • Je geeft de waarde van deze attributen op als een getal in pixels.
  • Alleen width opgeven mag ook, maar dan kiest de browser meestal automatisch een passende hoogte op basis van de afbeelding.
  • Als de hoogte niet bij de breedte past, kan de afbeelding vervormd raken.
<img src="project-01.webp" alt="Startpagina van mijn eerste website" width="400" height="300">

Actie — Bouw verder

  1. Geef dezelfde afbeelding een width, bijvoorbeeld 400. Voeg alleen een height toe als die de juiste verhouding behoudt.
  2. Controleer dat het projectbeeld niet wordt uitgerekt. Behoud src en alt.
  3. De afmetingen helpen nu bij het bekijken. In H6 maken we afbeeldingen ook flexibel voor kleinere vensters.
05 - Navigeren door mappen
  • Afbeeldingen staan vaak in een aparte map, bijvoorbeeld img of images.
  • Je moet dan in je HTML aangeven in welke map de afbeelding staat.
  • Als je HTML-bestand en je afbeelding niet in dezelfde map staan, moet je door mappen navigeren.
  • Begin de route naar de afbeelding, dus het pad, altijd vanaf de plek waar je HTML-bestand met de <img>-tag staat.
  • Als er naast je HTML-bestand een map staat die img heet, en daarin zitten je afbeeldingen, dan voeg je eerst de mapnaam toe en daarna de bestandsnaam in het src-attribuut.
  • Voor elke map die je dieper gaat, voeg je gewoon de mapnaam toe aan het pad.
  • Met ../ ga je één map omhoog.
  • Op deze manier maak je een relatief pad, en dat heeft meestal de voorkeur bij het plaatsen van afbeeldingen op een website.
<img src="img/project-01.webp" alt="Startpagina van mijn eerste website">

Actie — Bouw verder

  1. Maak binnen www een map img en verplaats alle vier de afbeeldingen uit item 1 naar die map.
  2. Wijzig bij de bestaande afbeelding alleen src naar img/project-01.webp. Behoud alt en eventuele afmetingen.
  3. Ververs Home en controleer dat dezelfde afbeelding weer werkt. Je HTML-bestand blijft in www staan.
06 - Absolute paden en relatieve paden
  • Een relatief pad begint vanuit de map van het huidige HTML-bestand.
  • Een absoluut pad verwijst vanaf de hoofdmap van de website of vanaf een volledig internetadres.
  • Relatieve paden gebruik je vaak binnen je eigen project.
  • Absolute paden gebruik je bijvoorbeeld bij een afbeelding die al online staat.
<img src="img/project-01.webp" alt="Relatief pad">

<img src="https://example.com/img/project.jpg" alt="Absoluut pad">
  • Bij HTML-nieuwsbrieven kun je in de praktijk alleen absolute paden gebruiken, omdat je geen losse afbeeldingen met de e-mail kunt meesturen zoals bij een gewone website.
  • De afbeeldingen die in de nieuwsbrief staan, moeten daarom eerst online gepubliceerd zijn voordat de nieuwsbrief wordt verstuurd.

Actie — Alleen oefenen

  1. Je bestaande projectafbeelding gebruikt al een relatief pad. Behoud die.
  2. Voeg tijdelijk daarnaast een afbeelding met een volledig internetadres toe. Gebruik een werkende directe afbeeldingslink; kopieer niet letterlijk het example.com-adres uit de uitleg.
  3. Controleer beide afbeeldingen. Verwijder daarna de tijdelijke externe afbeelding: voor ons eindproduct gebruiken we de eigen bestanden in www/img.
  4. Controleer na het verwijderen dat je projectafbeelding met het relatieve pad nog werkt.
Quiz

Vraag 1. Welke eigenschap beschrijft wat er op een afbeelding staat?




Goed. Met alt beschrijf je de afbeelding.
Niet goed. De juiste eigenschap is alt.

Vraag 2. Welk bestandstype gebruik je vaak voor foto's?




Goed. Voor foto's wordt vaak .jpg gebruikt.
Niet goed. Voor foto's gebruik je meestal .jpg of .jpeg.

Vraag 3. Wat betekent ../ in een pad?




Goed. Met ../ ga je één map omhoog.
Niet goed. ../ betekent dat je één map omhoog gaat.