HTML Afbeeldingen

HTML <img> element

paprika

  • In HTML worden afbeeldingen gedefinieerd met de <img> tag
  • De <img> tag heeft alleen attributen en geen inhoud.
  • Om een afbeelding in een document te tonen heb je het src attribuut nodig.
    De waarde van het src attribuut is de URL van de afbeelding.
  • Het alt attribuut is eveneens vereist bij het img element.
  • De afbeelding verschijnt waar de <img> tag wordt geplaatst in het document.
    Bijvoorbeeld plaats je de img tag tussen twee paragrafen, dan verschijnt de eerste paragraaf op het scherm, dan de afbeelding en daarna de tweede paragraaf.

naar boven 

Verschil HTML - XHTML

In HTML heeft de <img> tag geen eindtag.

In XHTML moet de tag correct worden gesloten dus
<img attributen /> !

Het alt attribuut

  • Het alt attribuut zorgt er voor dat in plaats van de afbeelding een tekst wordt weergegeven indien de browser geen afbeeldingen kan weergeven bijvoorbeeld bij een tekst-georiënteerde browser.
<img src="berglandschap.jpg" alt="berglandschap">  In HTML
<img src="berglandschap.jpg" alt="berglandschap" />  In XHTML
paprika
(werkt niet in Google Chrome)
  • Het alt attribuut zorgt voor een alternatieve tekst ingeval een afbeelding niet kan worden getoond bijvoorbeeld een slechte verbinding of een fout in de src syntax.

naar boven 

De height en width attributen

De height en width attributen worden gebruikt om de afmetingen van de afbeelding te specificeren.

De waarden zijn in pixels tenzij anders gespecificeert.

<img src="paprika.jpg" alt="paprika" width="405" height="336">  In HTML
<img src="paprika.jpg" alt="paprika" width="405" height="336" />  In XHTML
  •  Het is aan te raden om steeds de width en height waarden op te geven, zo wordt de ruimte die nodig is voor de afbeelding gereserveert tijdens het laden van de pagina!
    Bij gebrek aan deze informatie kent de browser geen afmetingen van de afbeelding.

    Resultaat : de lay-out van de pagina zal wijzigen tijdens het laden van de afbeelding!
  •  Wees zuinig met het plaatsen van afbeeldingen op één pagina, het laden van een afbeelding heeft tijd nodig en kan het tonen van een pagina ernstig vertragen!
  •  Tijdens het laden van een webpagina is het de browser die de afbeelding ophaalt van een webserver.
    Kontroleer of de afbeelding op de juiste plaats staat in relatie met de webpagina, anders krijgen uw bezoekers een gebroken link icoon omdat de browser de afbeelding niet kan vinden!
Element Beschrijving Attributen
<img>  in HTML
<img />  in XHTML
 Definieert de afbeelding alt, src, align, border, height, hspace, vspace, width, ismap, longdesc, usemap
<map>  Definieert de afbeelding-map (een afbeelding-map is een afbeelding met aanklikbare delen) name
<area>  in HTML
<area />  in XHTML
 Definieert een aanklikbare ruimte in een afbeeldingen-map coords, href, nohref, shape, target, alt
naar boven naar boven naar img
naar boven naar het img element