Afbeeldingen invoegen met de tag <img />

Hierna zie je de html code, welke in de Brontekst van dit blogbericht aangebracht werd, voor het weergeven van dit vlindertje    

<img src="http://i26.tinypic.com/b7nifs.jpg" alt="vlinder" />

img is de afkorting van image en betekent in het nederlands afbeelding

Wanneer in de bron van een webpagina of blogbericht de tag <img /> voorkomt, dan weet de browser dat op deze plaats een afbeelding dient te worden weergegeven en gaat op zoek naar de afbeelding binnen deze tag

src is de afkorting van source en betekent in het nederlands bron

Door in de tag <img /> het attribuut src="..." op te nemen en tussen de aanhalingstekens op de plaats waar de puntjes staan het pad naar de afbeelding (enkel voor websites) of de URL van de afbeelding (bij blogs) aan te brengen, weet de browser precies waar de afbeelding te vinden is en wordt deze op de blog of webpagina weergegeven

Het 2de attribuut dat in de tag <img /> dient opgenomen te worden, is het attribuut alt="..."

alt is de afkorting van alternatieve tekst

Op de plaats waar tussen de aanhalingstekens de puntjes staan bij alt="..." wordt een beschrijving van de afbeelding ingevuld, als alternatief voor het geval de afbeelding tijdelijk niet beschikbaar mocht zijn. Deze alternatieve tekst vervangt tegelijk ook het beeld in speciale browsers voor slechtzienden.
De tekst is ook zichtbaar wanneer de muisaanwijzer boven de afbeelding wordt gehouden.

Om bij voorbeeld het plaatje van kitty in en blogbericht weer te geven, wordt de hiernavolgende code in de bron (brontekst) van het blogbericht aangebracht

<img src="url_of_pad_naar_afbeelding" alt="beschrijving"/>

In de code wordt tussen de aanhalingstekens bij src=" " de tekst url_of_pad_naar_afbeelding vervangen door de URL van het plaatje
Het woord beschrijving bij alt=" "  wordt vervangen door de tekst button van kitty
Hierna een voorbeeld

Dit gifplaatje werd in een blogbericht geüpload naar seniorennet, via "Bladeren" bij "Overige bijlagen van harde schijf" om zo een URL voor het plaatje te bekomen. De HTML code voor het weergeven ziet er zo uit: <img src="http://blogimages.seniorennet.be/broncode/attach/11698.gif" alt="button van kitty" />
Dit gifplaatje werd geüpload naar www.tinypic.com om zo een URL voor het gif-bestandje te bekomen. De HTML code voor het weergeven ziet er zo uit. <img src="http://i46.tinypic.com/2rentw9.gif" alt="clown" />

De URL van een afbeelding (ook internetadres genoemd) bekomt men door het plaatjesbestand te uploaden naar een free file hosting provider of naar zelf gehuurde of gratisch ter beschikking gestelde webruimte.
Meer uitleg over het aanmaken van een URL (=internetadres) is te vinden op de blog http://blog.seniorennet.be/blogtips in het blogbericht met titel:
Mogelijkheden voor het uploaden en aanmaken van een URL voor een plaatjesbestand
http://blog.seniorennet.be/blogtips/archief.php?ID=258421

Mogelijk gemaakte fouten bij het niet weergeven van een afbeelding zijn:
Wanneer de afbeelding niet zichtbaar is of een leeg kader met kruisje te zien is, waar de afbeelding zou moeten staan, dan is dit meestal te wijten aan:
- een typfout in de code
- een foutieve URL van het plaatje
- een haakje of aanhalingsteken of spatie teveel of te weinig of op de verkeerde plaats in de code