HTML 2

Plaatjes

Het invoegen van een plaatje gaat in HTML met de <img>-tag. De <img>-tag heeft een aantal attributen. Die bespreken we hieronder.

Het src-attribuut

Om een afbeelding in te voegen, moet het plaatje eerst ergens op internet staan. Dit kan op jouw website zijn (als je hem hebt geüpload), of op een andere website. Met het src (src is een afkorting van source, en dat is Engels voor bron)-attribuut geef je aan waar het plaatje staat. Voorbeeld:

<img src="smiley.png">
Geeft als resultaat:

Het width- en height-attribuut

Je kunt ook de grootte van het plaatje opgeven. Zo kun je het plaatje vergroten, of juist verkleinen. Hier een voorbeeldje:

<img src="smiley.png" width="200" height="200">
Geeft als resultaat:

Dus met het width-attribuut geef je de breedte van een plaatje aan, en met het height-attribuut geef je de hoogte van het plaatje aan.

Het alt-attribuut

Als een plaatje niet bestaat / niet gevonden kan worden, of de browser van de gebruiker geen plaatjes kan weergeven of als dat uitgeschakeld is, zal het plaatje niet zichtbaar zijn. Als er belangrijke informatie / tekst op het plaatje staat, kan dat een probleem zijn. Daar is het alt-attribuut voor uitgevonden: daarmee kun je een tekst opgeven die zichtbaar zal zijn wanneer het plaatje om wat voor reden dan ook niet kan worden weergegeven.

De center tag

Een plaatje of een tekst in het midden van de pagina zetten doe je doormiddel van de center tag.

<center><img src="img/smiley.png" width="200" height="200"></center>

Mapjes (directories)

Als je plaatjes niet in hetzelfde mapje staat als je html-bestand kan je plaatje niet gevonden worden. Je krijgt dan een foutmelding.

Je kunt dit op twee manieren oplossen:

1. al je bestanden in hetzelfde mapje zetten

Als je grote website hebt is dat niet bevorderlijk voor het overzicht.

2. de verwijzing naar het mapje opnemen in de code

Stel je hebt een mapje plaatjes gemaakt. De verwijzing wordt dan:

<img src = "plaatjes/smiley.png">

opdracht:

Maak met behulp van kladblok deze website. Doe dat door de plaatjes op te slaan in een apart directory "images"

De plaatjes staan hier:

smurf

beest

aladdin

beul

2. Maak de website nog een keer door middel van het "hotlinken" van de plaatjes.

3. Zet de plaatjes in het midden van de pagina

 

 

 

 

©jw webdesign