HTML InleidingHTML cursus
Les 3: Afbeeldingen
Afbeeldingen kunnen niet alleen een webpagina mooier maken, maar kunnen het ook een luchtigere en minder saaie uitstraling geven. Het gebruik van afbeeldingen op een website is dan ook sterk aangeraden. Maar pas op dat je er niet teveel gebruikt, dit kan er namelijk voor zorgen dat de pagina te overladen en te druk lijkt. Het tweede nadeel wanneer er teveel afbeeldingen worden gebruikt, is dat de pagina veel trager laadt. Daarnaast zal de dataverkeer limiet ook sneller bereikt worden.
Om een afbeelding in te voegen, maken we gebruik van de img tag. Deze tag heeft het src attribuut om aan te duiden waar de afbeelding zich bevindt. Dit attribuut verwacht dus een pad naar een afbeelding. Hieronder volgt een voorbeeld dat de afbeelding grappig_mannetje.gif dat zich in de map afbeeldingen bevindt, zal afbeelden.
Natuurlijk heeft deze tag geen eindtag.
Afmetingen bepalen
We kunnen de breedte en de hoogte van een afbeelding bepalen, met respectievelijk het width en het height attribuut. We kunnen de afmetingen van een afbeelding op twee verschillende manieren bepalen. Bij de eerste manier verwachten deze attributen een natuurlijk getal, uitgedrukt in pixels.
In bovenstaand voorbeeldje is de afbeelding 200 pixels breed en 100 pixels hoog. Stel dat we enkel de breedte van de afbeelding hadden gedefinieerd, dan verandert de hoogte automatisch mee zodanig dat de breedte-hoogte verhouding van de originele afbeelding wordt gerespecteerd (en vice versa).
Bij de tweede manier geven we als waarde een procentuele uitdrukking.
Bovenstaande code zorgt er voor dat de afbeelding een breedte heeft die de helft is van de beschikbare breedte. Deze laatste methode wordt slechts in zeldzame gevallen gebruikt.
Wanneer de height en width attributen niet worden gebruikt, worden natuurlijk de originele afmetingen van de afbeelding gebruikt.
Afbeeldingen uitlijnen
Om afbeeldingen uit te lijnen, gebruiken we het align attribuut. We zeggen wel dat we de afbeelding uitlijnen, maar in feite heeft het geen effect op de afbeelding zelf, maar enkel op de tekst die erbij staat. Dit wordt duidelijker bij de code voorbeeldjes. Het align attribuut heeft 3 mogelijke waarden:
-
bottom<img src="zon.jpg" align="bottom"> Hier staat eventueel wat uitleg over de foto.
Hier staat eventueel wat uitleg over de foto.De tekst die bij de afbeeling hoort, staat naast de afbeelding, onderaan. Dit is de verzuimoptie, en kan bijgevolg weggelaten worden.
-
middle<img src="zon.jpg" align="middle"> Hier staat eventueel wat uitleg over de foto. Hier staat eventueel wat uitleg over de foto.
De tekst staat naast de afbeelding, in het midden.
-
top<img src="zon.jpg" align="top"> Hier staat eventueel wat uitleg over de foto. Hier staat eventueel wat uitleg over de foto.
De tekst staat naast de afbeelding, bovenaan. Deze waren de waarden voor de afbeelding verticaal uit te lijnen. De twee volgende waarden lijnen de afbeelding horizontaal uit.
-
left<img src="zon.jpg" align="left"> Hier staat eventueel wat uitleg over de foto.
De afbeelding wordt op de eerste beschikbare ruimte aan de linkerkant geplaatst en de overige inhoud wordt langs de rechterzijde van de afbeelding uitgelijnd.
-
right<img src="zon.jpg" align="right"> Hier staat eventueel wat uitleg over de foto.
De afbeelding wordt op de eerste beschikbare ruimte aan de rechterkant geplaatst en de overige inhoud wordt links daarvan geplaatst.
Andere attributen
De img tag heeft nog een interessant attribuut, namelijk het alt attribuut. Dit attribuut zorgt er voor dat in plaats van de afbeelding een tekst geplaatst wordt indien de afbeelding niet geladen kan worden doordat bv. het automatisch laden van afbeeldingen in een browser is uitgezet.
Het is aangeraden om dit attribuut altijd te gebruiken bij de img tag.
De img tag heeft nog een gelijkaardig attribuut, namelijk het title attribuut. Deze zorgt ervoor dat er een tooltip tekstje tevoorschijn komt wanneer je de cursor eventjes op de afbeelding laat rusten. Probeer maar eens hieronder.
In het volgende lesje zal je leren hoe je tabellen maakt.
Top