Open het HTML-bestand voor de webpagina waaraan u een afbeelding wilt toevoegen in een teksteditor zoals Kladblok of webontwikkelingssoftware.
Voeg een tag toe aan het bestand. Plaats de tag achter het element waaronder u een afbeelding wilt laten verschijnen wanneer het HTML-bestand in een browser wordt geopend. De tag heeft geen aparte sluittag. Binnen de tag moet u de bron specificeren van de afbeelding die u wilt weergeven door de locatie van de afbeelding op internet te typen met de src attribuut. Als de afbeelding is opgeslagen in dezelfde map als het HTML-bestand, typt u de naam en extensie van de afbeelding. Als de afbeelding ergens anders is opgeslagen, typt u de volledige URL van de afbeelding.
Voeg de. toe alt toeschrijven aan uw tag. In HTML5 is het alt-attribuut vereist. Gebruik dit kenmerk om de afbeelding te beschrijven voor het geval deze niet kan worden geladen. Als een afbeelding niet kan worden geladen, geeft de browser de tekst weer die u invoert na het alt-attribuut. Daarnaast is het alt-attribuut belangrijk voor schermlezersoftware die wordt gebruikt door mensen met een visuele handicap. De software leest de tekst in het alt-attribuut zodat de persoon met een visuele handicap die uw website bekijkt, kan horen wat er op de afbeelding staat, ook al kunnen ze het niet zien.
Specificeer de afmetingen van de afbeelding in pixels met de hoogte en breedte attributen. Als u de afmetingen niet opgeeft, weet de browser niet hoeveel ruimte er moet worden vrijgelaten voor de afbeelding terwijl de pagina wordt geladen. Dit resulteert in een pagina die schokkerig wordt geladen, omdat de tekst eerst wordt geladen, waardoor er een kleine ruimte voor de afbeelding overblijft, en vervolgens uit elkaar springt als de afbeelding wordt geladen en de ruimte vergroot. Met de opgegeven afmetingen laat de browser precies de juiste hoeveelheid ruimte tussen de andere elementen op de pagina om de afbeelding in te vullen wanneer deze klaar is met laden.
Test uw code om er zeker van te zijn dat de afbeelding op de juiste locatie wordt weergegeven door uw HTML-bestand in een browser te openen.
Gebruik CSS om een afbeelding naar de linker- of rechterkant van het scherm te verplaatsen of om er tekst omheen te laten lopen. U kunt bijvoorbeeld style="float: left;" gebruiken of style="float: rechts;" binnen het label.
Als u niet zowel de hoogte als de breedte van een afbeelding weet, is het prima om alleen het attribuut height of width te gebruiken. U kunt ook CSS gebruiken om de hoogte en breedte te specificeren; voor een afbeelding van 100 bij 100 pixels gebruikt u bijvoorbeeld het kenmerk style: style="height: 100px; breedte: 100px."
Maak van de afbeelding een klikbare link door de tag in een 'a href'-tagpaar te plaatsen. Als u bijvoorbeeld een afbeelding naar Facebook wilt laten linken, typt u het volgende.
Gebruik het alt-attribuut niet om de SEO van uw pagina te verbeteren. Zoekmachines weten al lang dat sommige webontwerpers het alt-attribuut proberen te vullen met extra trefwoorden, en daarom negeren ze de tekst in het alt-attribuut.
