3.1: Afbeeldingen 1

Computerafbeeldingen bestaan in verschillende formaten. Niet alleen fysiek (in millimeters of zo), maar ook wat betreft de wijze waarop de afbeelding in een bestand wordt opgeslagen. Er bestaan in dit opzicht tientallen verschillende bestandsformaten, maar voor het web gebruiken we PNG, JPG (spreek uit 'jépeg') of GIF.
Een JPG-bestand is over het algemeen kleiner dan een GIF-bestand, en dus sneller te laden. Daar staat tegenover dat GIF-bestanden meer mogelijkheden bieden. Denk aan bewegende afbeeldingen (bewegende gif's) en afbeeldingen met een transparante achtergrond. Tegenwoordig worden op websites voornamelijk PNG-bestanden gebruikt. Ze ondersteunen o.a. transparantie en het gebruik van lagen en zijn bovendien goed van kwaliteit in relatie tot hun bestandsomvang.

In het volgende voorbeeld gaan we er van uit dat de afbeelding in dezelfde map staat als de html-pagina waarin hij gebruikt wordt. Het is uiteraard ook mogelijk om een afbeelding uit een andere map te gebruiken zoals je geleerd hebt in het hoofdstuk over interne links en de daarbij behorende relatieve verwijzingen.

<img>
Afbeeldingen worden niet echt opgenomen in de html-pagina (zoals dat wel het geval is als je een afbeelding in het programma Word opneemt). We nemen alleen een RELATIEVE verwijzing op. Hiervoor gebruiken we het element <img> met daaraan toegevoegd de optie src="naam van het plaatje", dus bijvoorbeeld:

<img src="plaatje.png"> waarbij we voor 'plaatje.png' de naam van onze afbeelding invullen (naam van het plaatje.jpg of naam van het plaatje.gif mag natuurlijk ook; dat is afhankelijk van het type afbeelding).

Als we een afbeelding in onze webpagina opnemen zoals hierboven omschreven, komt de afbeelding in de lopende tekst of, na een <br> of <p>, tegen de linker kantlijn te staan met ten hoogste één regeltje tekst er rechts naast. De positie van die tekstregel kunnen we beïnvloeden met de toevoeging style="vertical-align:. Achter het :-teken schrijven we "top" als we de tekstregel gelijk met de bovenkant van de afbeelding willen hebben, "bottom" om de tekst gelijk met de onderkant van de afbeelding weer te geven, en met "middle" komt de tekst in het midden naast de afbeelding te staan.

Hieronder vind je van elk van de genoemde uitlijningen een voorbeeld:

Figuur 1: boven uitgelijnd De rest van de tekst gaat verder onder de afbeelding.

Figuur 2: midden uitgelijnd De rest van de tekst gaat verder onder de afbeelding.

Figuur 3: beneden uitgelijnd De rest van de tekst gaat verder onder de afbeelding.

Met style="vertical-align: top", "middle" of "bottom" kunnen we dus één regel tekst naast een afbeelding plaatsen. De volgende tekstregel komt onder de afbeelding. Voor titels of foto-bijschriften is dat natuurlijk prima, maar voor complete alinea's geen gezicht.

Browsers ondersteunen dan ook de volgende opties:

Met style="float: left" opgenomen binnen het <img>-element komt de afbeelding links op de pagina, en de tekst, ook over meerdere regels, komt er rechts naast te staan. Met style="float: right" binnen het <img>-element, komt de afbeelding aan de rechterzijde met een doorlopende tekst aan de linkerkant ernaast.

Hieronder zie je weer enkele voorbeelden:

Figuur 1: links uitgelijnd De rest van de tekst staat netjes rechts naast de afbeelding. Het juiste effect zie je echter pas als er meerdere zinnen zijn. Pas dan wordt duidelijk wat de float:right en float:left precies voor een uitwerking hebben. Hopelijk maakt deze afbeelding meer duidelijk over de uitlijningsprincipes!

Figuur 2: rechts uitgelijnd De tekst staat links naast de afbeelding. Het juiste effect zie je echter pas als er meerdere zinnen zijn. Pas dan wordt duidelijk wat de float:right en float:left precies voor een uitwerking hebben. Hopelijk maakt deze afbeelding meer duidelijk over de uitlijningsprincipes!

Als je nu een nieuwe alinea wilt beginnen, zul je merken dat het element <br> of <p> niet voldoende is. Welliswaar spring je wel naar een nieuwe regel, maar als er voldoende ruimte naast je afbeelding is, begint je volgende alinea naast de afbeelding. Wanneer je beslist wilt dat de nieuwe alinea onder de afbeelding begint, gebruik dan de optie style="clear:all" in het <br> element.
Dus <br style="clear:all"> zorgt er voor dat alle volgende tekst onder de afbeelding komt te staan. Hieronder zie je hiervan een voorbeeld:

Figuur 3: <br style="clear:all">

Het juiste effect van het style="clear:all" principe zie je echter pas als er meerdere zinnen zijn.

Na het toepassen van de genoemde code zal de rest van de tekst van de betreffende alinea onder de afbeelding verder gaan. Hopelijk maakt deze afbeelding meer duidelijk over de principes van het uitlijnen!

Link op een afbeelding

In het hoofdstuk over interne links heb je kunnen lezen hoe je vanuit jouw pagina een verbinding kunt maken naar een andere pagina. Daartoe plaatsten we tussen de elementen <a href="...."> en </a> een tekst die de bezoeker kan aanklikken om vervolgens naar een andere pagina te gaan. In plaats van zo'n tekst als link kun je ook een afbeelding gebruiken.

Je kunt dan op de afbeelding klikken om naar een andere pagina te gaan.

De syntax (schrijfwijze) wordt dan:

<a href="pagina.html"> <img src="naam van het plaatje"> </a>

Hieronder zie je een voorbeeld van een interne link op een afbeelding. Wanneer je op de afbeelding klikt dan word je teruggeleid naar de index-pagina.

Er is nog veel meer mogelijk met afbeeldingen. Meer hierover in Afbeeldingen 2