HTML | Images

Omdat een website met alleen maar tekst erg saai is, wordt het tijd om wat beeldmateriaal toe te voegen aan de content. Dit doe je door het <img> element te gebruiken!

De img tag

Om een foto in te voegen gebruik je de <img> tag, dit ziet er in HTML code als volgt uit:

<img src="https://images.unsplash.com/photo-1504619988368-2911f094bac5?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=16b49cb3c2bb7b14c7c7c6ff5565abbd&auto=format&fit=crop&w=1950&q=80" width="200" height="133" alt="take more photos"/>

Bovenstaande code ziet er op een website als volgt uit:


Let op: Omdat er geen content (tekst die door de browser weergegeven wordt) in de img tag staat heeft deze tag geen aparte openings- en sluitingstag.

Src attribuut

Het source attribuut (src) vertelt de browser waar hij de foto kan vinden. Dit kan een link van een webpagina zijn zoals in bovenstaand voorbeeld, maar ook een bestand in een map. 

Stel dat we bovenstaande foto hadden opgeslagen als takemorephotos.jpg in de map Afbeeldingen" dan zou de HTML code er als volgt uitzien:

<img src="afbeeldingen/takemorephotos.jpg" width="200" height="133" alt="take more photos"/>

Formaat

Het formaat van de afbeelding geef je aan door de attributen width en height te gebruiken. Als value vul je het aantal pixels in, maar enkel in getallen zonder px aan het einde te vermelden.

Alt attribuut

Het alt attribuut staat voor alternative description, de alternatieve beschrijving dus. Het is verstandig om dit alt attribuut altijd te vermelden, voor het geval de bezoeker de afbeelding niet kan zien maar ook zodat een zoekmachine de afbeeldingen kan scannen.