HTML/Basiscursus/Afbeeldingen en objecten

Dit hoofdstuk gaat over het gebruik van afbeeldingen en objecten.

Afbeeldingen

 Zie ook het img element voor meer informatie.

Om een afbeelding te tonen op een webpagina is er niet veel nodig. Je hebt gewoon het element img en zijne attributen src en alt nodig en een URL naar een afbeelding. Het alt attribuut is bedoeld als tekst die screenreaders kunnen weergeven voor personen met slecht zicht. Verder dient het ook als alternatieve tekst die wordt getoond wanneer de afbeelding niet kan worden geladen.

HTML-code: Afbeeldingen

<img src="afbeelding.jpg" alt="Alternatieve tekst voor de afbeelding.">

Bij het attribuut src gelden dezelfde regels als bij het attribuut href van het a element(zie ). Je kunt via de attributen height en width respectievelijk de hoogte en de breedte van een afbeelding bepalen. Dit kan op twee manieren: m.b.v. een waarde in pixels of een waarde in percenten. Als je pixels gebruikt geef je precies aan hoe breed en hoe hoog de afbeelding mag zijn. De browser weet dan ook hoeveel ruimte er moet worden vrijgehouden en zal later, bij het effectief tonen van de afbeelding, de pagina niet moeten herschikken. Wanneer je een procentuele waarde geeft, bepaalt hij de grootte op basis van de werkelijke grootte van de afbeelding x jouw percent. Wanneer een afbeelding 200 pixels breed was en je een waarde van "50%" geeft zal hij half zo breed zijn, geef je 200% zal hij dubbel zo breed zijn.

HTML-code: Afbeeldingen

<img src="afbeelding.jpg" height="100px" width="100px" alt="Alternatieve tekst voor de afbeelding.">
<img src="afbeelding.jpg" height="50%" width="200%" alt="Alternatieve tekst voor de afbeelding.">

Afbeelding als link gebruiken

Om een afbeelding als link te gebruiken moet je het simpel weg in een a element verwerken.

HTML-code: Afbeeldingen

<a href="eenpagina.html"><img src="afbeelding.jpg" alt="Alternatieve tekst voor de afbeelding."></a>

Het gebruiken van maps

 Zie ook het map element voor meer informatie.

XHTML

Let er op dat je bij XHTML de tag moet afsluiten.

HTML-code: Afbeeldingen

<img src="afbeelding.jpg" alt="Alternatieve tekst voor de afbeelding." />

De tag afsluiten doe je door achteraan een schuine streep toe te voegen("/").