De meeste afbeeldingen die voor internet gebruikt worden, zijn in .gif .jpg (.jpeg) of .bmp formaat.
Hoewel plaatjes je pagina kunnen verfraaien, moet je toch goed nadenken voor je ze opneemt, want als je er te veel gebruikt, wordt de laadtijd van je pagina veel te lang. En als er één ding is dat je moet voorkomen, is het wel dat je bezoekers je site verlaten, omdat de pagina's te langzaam laden.
<IMG> tag en het attribuut "src"
Afbeeldingen neem je op met de <IMG> tag. Het heeft geen eindtag.
Je moet altijd het attribuut src (=source) erbij gebruiken, dit attribuut vertelt de browser waar de afbeelding staat. De waarde van src is daarom altijd een adres. Het schrijven van een adres hebben we al behandeld in les 4.
De attributen "height" en "width"
Er zijn nog twee attributen die je eigenlijk altijd moet toevoegen, namelijk height en width. Deze attributen vertellen de browser welke afmetingen de afbeelding heeft. De browser laat deze ruimte open (ruimte in pixels) en gaat verder met het laden van de rest van de pagina.
De afmetingen van je afbeeldingen moet je kunnen zien met je grafische software, zoals Photoshop.
Nu een voorbeeld van een "IMG" tag met de bijbehorende attributen:
<IMG src="hello3d.gif" height="64" width="154">
Resultaat:
Je ziet nu hierboven de afbeelding "hello3d.gif" op het scherm verschijnen.
Afbeeldingen Uitlijnen
Als je tekst bij een bepaalde afbeelding wilt plaatsen, moet je het align attribuut gebruiken. Align kan hier als waarde top, bottom of middle hebben (bottom is de standaard, dus als je niets invult).
Nu zie je voorbeelden van het uitlijnen van een afbeelding:
Standaard is de onderkant van een afbeelding uitgelijnd met de tekst, zoals je hier ziet.
Hieronder zie je voorbeelden van align met waarden: top.
Dit is weer hetzelfde plaatje, maar nu zie je dat de tekst aan de bovenkant van de afbeelding begint. Je ziet dat alleen de eerste regel bovenaan begint. De rest van de tekst komt weer onder de afbeelding. Dit is dus de waarde top.
De complete tag met waarde "top" wordt dus:
<IMG src="hello3d.gif" height="64" width="154" align="top">
Hier weer dezelfde afbeelding, maar nu zie je dat de tekst ter hoogte van het midden van de afbeelding begint. Je ziet dat alleen de eerste regel in het midden begint. De rest van de tekst komt weer onder de afbeelding.
De tag met waarde "middle":
<IMG src="hello3d.gif" height="64" width="154" align="middle">
Een Afbeelding Als Achtergrond Gebruiken
Dit is al kort behandeld in de eerste les. Je kunt een afbeelding als achtergrond voor je pagina gebruiken. Je moet dan het attribuut background in de <BODY> plaatsen.
Zo dus:
<BODY background="afbeelding.gif">
In het volgende artiekel volgt deel 6:
Lijsten maken.
Deze cursus HTML valt onder copyright van mijnhomepage.nl. Dit artikel mag niet worden overgenomen zonder uitdrukkelijke toestemming van de webmaster van mijnhomepage.nl.
Robert Heessels |
2002-11-08 |
Programmeren en techniek
