4. Plaatsen van afbeeldingen

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.

4.1 De img-tag

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 op het bureaublad. U kunt hier een afbeelding downloaden die geschikt is voor de website. Hij is transparant en licht van gewicht qua kilobytes (wanneer u precies wilt weten hoe u een afbeelding kunt optimaliseren voor uw website dan kunt u zich inschrijven voor de Adobe Photoshop training waar alle belangrijke zaken omtrent web optimalisatie behandeld worden).

Plaats de afbeelding die u hierboven gedownload heeft in een subfolder in de website-map op het bureaublad. 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 pic.

Vervolgens zijn we klaar om de code voor de afbeelding te plaatsen. Wanneer u de cursor op een nieuwe regel onder de sluit-tag van de paragraaf zet kunt u deze code typen; <img src="pic/bloem.png" alt="Een schematische afbeelding van een bloem." >. 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.