HTML/Basiscursus/Afbeeldingen en objecten

HTML

Inhoudsopgave
  1. De basis
  2. Tekst structureren
  3. Links
  4. Opmaak
  5. Afbeeldingen en objecten
  6. Tabellen
  7. Scripts
  8. Citeren
  9. Frames
  10. Formulieren
  11. Commentaar

Dit hoofdstuk gaat over het gebruik van afbeeldingen en objecten.

Afbeeldingen

bewerken
  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.">
bewerken

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

bewerken
  Zie ook het map element voor meer informatie.

Het aanmaken van maps

bewerken

Het toepassen van maps

bewerken

Overige attributen

bewerken

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("/").

Objecten

bewerken
Informatie afkomstig van https://nl.wikibooks.org Wikibooks NL.
Wikibooks NL is onderdeel van de wikimediafoundation.