Een foto zegt meer dan duizend woorden en een website zonder afbeeldingen is maar saai. Daarom is het een goed idee om weer een stukje content toe te voegen, dit keer een illustratie.
Om een afbeelding te plaatsen gebruiken we de img-tag (img staat voor image). Maar voor dat we deze in de code plaatsen is het een goed idee om eerst een afbeelding toe te voegen aan de website-map.
Plaats de afbeelding die je hieronder kunt downloaden in een subfolder in de website-map. Geef deze sub-folder zelf een logische naam en houdt er rekening mee dat bestands- en map-namen hoofdlettergevoelig zijn. In mijn voorbeeld noem ik de map images.
Je kunt hier een afbeelding downloaden die geschikt is voor de website. Hij is transparant en niet te groot. Afbeeldingen kun je vergroten en verkleinen met behulp van een fotobewerkings programma. Een voorbeeld hiervan is GIMP. GIMP is gratis en open source. Het is hier te downloaden: https://www.gimp.org/
Vervolgens zijn we klaar om de code voor de afbeelding te plaatsen. Wanneer je de cursor op een nieuwe regel onder de sluit-tag van de paragraaf zet kunt je deze code typen; <img src="images/haas.png" alt="Een afbeelding van een haas." >. De code ziet eruit als op onderstaande afbeelding. Bekijk het resultaat in uw browser.
Tip: plaats ook altijd het alt-attribuut (alt staat voor alternatief). Deze wordt weergegeven wanneer de foto niet gevonden kan worden en hij wordt voorgelezen door zogenaamde screen readers die worden gebruikt door gehandicapten. Wederom hecht onder andere Google er waarde aan.