Animatiegifjes.stophier.nl alles voor de webmaster !!
Afbeeldingen Toevoegen
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 attribuutsrc
(=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 en
center.
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.
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.
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">
Einde Les Vijf
In deze les kwam het werken met afbeeldingen in HTML aan
de orde. De belangrijkste dingen zijn hier wel behandeld:
het plaatsen van de afbeeldingen, het uitlijnen en het
gebruiken van een afbeelding als achtergrond.
Tijd voor de volgende les!
