Het invoegen van een plaatje gaat in HTML met de <img>-tag. De <img>-tag heeft een aantal attributen. Die bespreken we hieronder.
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="img/smiley.png">
Je kunt ook de grootte van het plaatje opgeven. Zo kun je het plaatje vergroten, of juist verkleinen. Hier een voorbeeldje:
<img src="img/smiley.png" width="300" height="120">
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. Het werkt als volgt:
<img src="een-plaatje-dat-niet-bestaat" alt="De ALT-tekst">
Met het align-attribuut regel je waar de tekst naast het plaatje komt:
Tekst naast het plaatje
Je hebt 3 mogelijkheden: top, middle of bottom. Als je het align-attribuut niet gebruikt, zal automatisch bottom gekozen worden.
Zoals je ziet, staat deze tekst op de bovenste regel van het plaatje. De volgende regel zal gewoon onder het plaatje doorgaan.
Hier is de tekst op de middelste regel van het plaatje uitgelijnd. Net zoals bij de waarde "top", zal ook hier de volgende regel gewoon onder het plaatje doorgaan.
Bij de waarde "bottom" (dat is de standaardwaarde, dus als je het align-attribuut niet gebruikt) zal de tekst op de onderste regel van het plaatje worden uitgelijnd. De volgende regels gaan gewoon door onder het plaatje.
<img src="img/smiley.png" align="middle">Hier is de tekst op de <i>middelste</i> regel van het plaatje uitgelijnd. Net zoals bij de waarde "top", zal ook hier de volgende regel gewoon onder het plaatje doorgaan.
Hier is de tekst op de middelste regel van het plaatje uitgelijnd. Net zoals bij de waarde "top", zal ook hier de volgende regel gewoon onder het plaatje doorgaan.
Je kunt ook een plaatje als achtergrondplaatje (achtergrondafbeelding) gebruiken.
Je moet daarbij wel oppassen dat je site dan niet te druk wordt.
Voorbeeld:
<html>
<head>
<title>Titel van de website</title>
</head>
<body background="achtergrondafbeelding.jpg">
Inhoud en tekst van de website.
</body>
</html>
Je kunt nu ook plaatjes invoegen. In de volgende les leer je hoe je hyperlinks (of 'links', teksten waar je op kunt doorklikken) kunt maken.
⇒ Ga verder met Les 6: Hyperlinks
← Ga terug naar Les 4: Lettertypes
↵ Terug naar de HTML-cursus
Simon de Vries
info@simondevries.com