Mi-Soft.nl



avatar Een foto toevoegen aan de website. 29-09-2013
Hallo allemaal!
In deze tutorial gaan we een foto op onze testsite zetten.



We zetten de foto direct onder de regel met "4 + 4 = 8." , hier typen we dus eerst een break achter (<br />)
Daaronder zetten we de image tag en die ziet er als volgt uit:
<img src = "" alt = "" width = "" height = "" />
	

De /> aan het eind is eigenlijk een sluittag (en we hoeven dus geen </img> te hebben). Tags die dit doen (bijv. de img en br tags) noemen we ommitags.

De attributen van de img tag

src

Tussen de "" van het src attribuut moet u het pad van de image opgeven.
Dit pad kan relatief of absoluut zijn. Een voorbeeld van een absolute link is:
http://mi-soft.nl/favicon.ico
Dat kan dus handig zijn als u de foto's op een andere service upload.

Een voorbeeld van een relatieve link is:
images/foto.png
De browser zal dan in de map waar het huidige document staat zoeken naar het pad "images/foto.png". Oftewel in de map images naar foto.png

alt

Het alt attribuut is een van de belangrijkste en meest onderschatte attributen die er bestaat.
Het alt attribuut zorgt namelijk voor een aantal dingen:
  1. Als de image niet geladen kan worden komt deze tekst
  2. Screenreaders lezen deze tekst voor i.p.v de foto
Vooral #2 is erg belangrijk, want er zijn natuurlijk ook slechtziende mensen die uw website bezoeken.
Het is dan wel zo fijn dat de foto wat beschreven wordt.
In het geval van het mi-soft logo kan dit dan heel kort door bijv:
Een foto van het mi-soft logo.

width & height

De width en de height tags zijn erg belangrijk.
Als de foto namelijk nog niet geladen is (door bijv. een langzame connectie) dan zal de browser wel alvast een plekje reserveren waar de foto later getekend kan worden.
Dit zorgt er dan voor dat de tekst op zijn plek blijft staan als de foto laad.

De uiteindelijke code

De uiteindelijke img tag ziet er dan als volgt uit:
<img src ="images/foto.png" alt= "Een foto van het mi-soft logo." width = "300" height = "145" />
	

downloadimageKlik hier om de project bestanden te downloaden.

Gerelateerde artikelen

Over de auteur:
Rick's headshot
Rick van Lieshout
Rick van Lieshout is de eigenaar en administrator van Mi-Soft.nl
Ook is hij een manusje van alles en kan daarom in veel categorieen een steentje bijdragen.
U kunt meer over Rick te weten komen op zijn portfolio.
Rick@Mi-Soft.nl | Portfolio | Facebook | Twitter | Google+ | Youtube | Flickr | LinkedIn