Wanneer je een webpagina met afbeeldingen bekijkt, dan lijkt het net of de afbeeldingen in de pagina zelf zitten. Dat is niet zo. In het HTML-bestand zit een code die aangeeft dat er een afbeelding in de pagina moet komen. De browser ziet deze code, haalt de bedoelde afbeelding op en plaatst deze vervolgens in de pagina.
1 antwoord
Het volgende voorbeeld maakt dat duidelijk. Stel dat je een afbeelding hebt van een bij, die je wilt plaatsen in een internetpagina over bijen. De afbeelding is een apart bestandje met de naam 'bij.gif' op de webserver.
Er is ook een HTML-bestand over de bij, dat ziet er als volgt uit:
<html>
<head>
<title>De Bij</title>
</head>
<body>
Een Bij is een insect. Bijen kenmerken zich doordat ze samenwerken en heel sociaal zijn. Ze vormen kolonies. Bijen zijn de belangrijkste bevruchters van planten en struiken ter wereld.</body>
</html>
De afbeelding kan worden toegevoegd aan de pagina door de code <img> te gebruiken. De letters img staan voor image, het Engelse woord voor afbeelding of plaatje. De <img> code heeft nog wat extra informatie nodig, bijvoorbeeld de naam van het bestand van de afbeelding, in dit geval 'bij.gif'. De letters gif geven aan dat het gaat om een plaatje dat is bewaard in een zogenaamd GIF-bestand. GIF is de afkorting voor Graphics Interchange Format.
De meest eenvoudige vorm van de <img> code bestaat uit de toevoeging van de bestandsnaam. In het bovenstaande voorbeeld moet dan de volgende regel worden toegevoegd: <img src="bij.gif">
Het hele HTML-bestand ziet er dan als volgt uit:
<html>
<head>
<title>De Bij</title>
</head>
<body>
<img src="bij.gif">Een Bij is een insect. Bijen kenmerken zich doordat ze samenwerken en heel sociaal zijn. Ze vormen kolonies. Bijen zijn de belangrijkste bevruchters van planten en struiken ter wereld.
</body>
</html>
Wanneer een webbrowser de internetpagina ontvangt en daarbij de <img> code tegenkomt, dan gaat de browser op zoek naar het bestandje dat is aangegeven tussen de aanhalingstekens bij de toevoeging src. Src staat voor Source, het Engelse woord voor bron. De toevoeging src wordt dus gebruikt om aan te geven wat de 'bron' is van het bestand met de afbeelding. Door de internetpagina op te vragen vraagt je webbrowser automatisch ook het bestand bij.gif op. Dan wordt de internetpagina inclusief de afbeelding getoond in de browser.
Opmerking 1:
je ziet dat de <img> code geen eindcode heeft. Dit is geen fout. Er bestaan HTML-codes die bestaan uit een begin- en een eindcode (zoals <title>...</title>) maar er zijn ook HTML-codes die bestaan uit alleen de code zelf (zoals <img>).
Opmerking 2:
de bij in het voorbeeld beweegt. Dat heeft niets met HTML te maken. De maker van dit plaatje heeft een GIF-afbeelding gemaakt met daarin een zogenaamde animatie. De afbeelding bestaat namelijk eigenlijk uit 8 aparte beeldjes die na elkaar verschijnen en daardoor samen een bewegend beeld vormen.
Om vragen te kunnen stellen of beantwoorden moet je ingelogd zijn. Je kan een account aanmaken of een van de onderstaande diensten hiervoor gebruiken.
