Afbeeldingen

In webpagina’s kunnen afbeeldingen worden opgenomen. Een afbeelding is in de broncode van een HTML-document niets anders dan een verwijzing naar waar een afbeelding te vinden is. Dat is te zien in de onderstaande regel waarin verwezen wordt naar de afbeelding “Enigma.jpg” in de map afb:

<img src="afb/Enigma.jpg" alt="afbeelding van de Enigmamachine">

Aan het element img worden twee attributen toegekend. Het attribuut src (source) verwijst naar de plek waar de afbeelding te vinden is. Het attribuut alt (alternative) toont een alternatieve tekst die verschijnt wanneer de afbeelding om wat voor reden dan ook niet kan worden weergegeven. Het alt attribuut wordt niet door elke browser uitgevoerd.
In Google Chrome zien we geen tekst als de afbeelding niet geladen kan worden.
In Internet Explorer weer wel.

Bekijk de afbeelding.


Als een afbeelding niet geladen wordt, kunnen daar diverse verklaringen voor zijn. Mogelijk klopt de verwijzing naar het bestand niet. Daar is bijvoorbeeld sprake van als het bestand “Enigma.jpg” niet in de map afb staat, maar op dezelfde plek als het HTML-document.

Een andere reden kan zijn dat het in de code vermelde bestandsformaat niet overeenkomt met het werkelijke bestandsformaat. Wij gebruiken een afbeelding van het formaat jpg. Als de afbeelding van de Enigma-machine het formaat png of gif zou hebben, zouden we na het laden van de pagina de afbeelding niet te zien krijgen.

In HTML5 zijn 2 nieuwe elementen toegevoegd waarmee een afbeelding in een document kan worden gemarkeerd en van een bijschrift worden voorzien. Deze elementen worden figure en figcaption genoemd. Als we de afbeelding van de Enigmamachine van een bijschrift zouden willen voorzien, gebruiken we daar de tag <figcaption> voor.

<figure>
     <img src="afb/Enigma.jpg" alt="afbeelding van de Enigmamachine">
     <figcaption>De Enigma</figcaption>
</figure>

Het is aan te bevelen om de afbeeldingen die voor een website worden gebruikt,
op te slaan in een aparte map. Deze map zou dan afb kunnen worden genoemd.
Voor opmaakbestanden zou de map css gebruikt kunnen worden. JavaScript-bestanden worden vaak opgeslagen in de map js.

Het is niet gebruikelijk om de HTML-bestanden in een submap op te slaan.
Deze bestanden staan gewoon in de hoofdmap. Door bepaalde typen bestanden op te slaan in aparte mappen behoud je overzicht en zijn bestanden sneller terug te vinden.