Les 5
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
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 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.
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">
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!
Homepage-Maken Tip
De makkelijkste manier om je eigen website te maken?
Dat is via een website bouwer als Weebly. Hiermee kun je eenvoudig via je browser door middel van drag-en-drop een website bouwen. Je kunt volledig gratis beginnen met 500MB webruimte voor je site. Zo nodig kun je een betaald pakket nemen met eigen domeinnaam, "onbeperkte" opslag (fair use policy) en e-commerce mogelijkheden.
Weebly is daarom een prima optie als je snel een website in elkaar wilt zetten. Kennis van HTML of het installeren van een eigen content management systeem is niet nodig bij Weebly.
