HTML Afbeeldingen

Met HTML kun je afbeeldingen weergeven in een document.

Voorbeeld

Afbeelding invoegen
Dit voorbeeld toont hoe je een afbeelding kunt weergeven op een webpagina.
Afbeeldingen invoegen van verschillende locaties
Dit voorbeeld toont hoe je afbeeldingen van andere mappen of servers kunt weergeven op een webpagina.

(Meer voorbeelden kun je vinden aan de onderkant van deze pagina)

Afbeeldingstaggene (<img>) en bron-eigenschap (Src)

In HTML worden afbeeldingen gedefinieerd door de <img>-tag.

<img> is een lege tag, wat betekent dat het alleen eigenschappen bevat en geen afsluitende tag heeft.

Om een afbeelding op de pagina te tonen, moet je de bron-eigenschap (src) gebruiken. src betekent "bron". De waarde van de bron-eigenschap is het URL-adres van de afbeelding.

De syntaxis voor het definiëren van een afbeelding is:

<img src="url" />

URL verwijst naar de locatie waar de afbeelding opgeslagen is. Als de afbeelding met de naam "boat.gif" zich bevindt in de images-map van www.codew3c.com, dan is de URL http://www.codew3c.com/images/boat.gif.

De browser toont de afbeelding op de plaats waar de afbeeldingstaggene in het document staat. Als je de afbeeldingstaggene tussen twee paragrafen plaatst, toont de browser eerst de eerste paragraaf, dan de afbeelding en tenslotte de tweede paragraaf.

Vervang de tekst-eigenschap (Alt)

De alt-attribute wordt gebruikt om een reeks vooraf gedefinieerde vervangende tekst voor een afbeelding te definiëren. De waarde van het vervangende tekstattribute is door de gebruiker gedefinieerd.

<img src="boot.gif" alt="Grote Boot">

Als de browser de afbeelding niet kan laden, vertelt de vervangende tekstattribute de lezers wat ze zijn misgelopen. In dit geval zal de browser deze substitutietekst weergeven in plaats van de afbeelding. Het is een goede gewoonte om alle afbeeldingen op de pagina een vervangende tekstattribute toe te voegen, zodat de informatie beter wordt weergegeven en het zeer nuttig is voor gebruikers van puur tekstbrowsers.

Basis aandachtspunten - nuttige tips:

Als een HTML-bestand tien afbeeldingen bevat, moet er om de pagina correct weer te geven, 11 bestanden worden geladen. Het laden van afbeeldingen kost tijd, dus ons advies is: gebruik afbeeldingen met mate.

Meer voorbeelden

Achtergrondafbeelding
Dit voorbeeld toont hoe een achtergrondafbeelding aan een HTML-pagina wordt toegevoegd.
Plaatsing van afbeeldingen
Dit voorbeeld toont hoe een afbeelding in tekst wordt geplaatst.
Ge浮动 afbeelding
Dit voorbeeld demonstreert hoe een afbeelding wordt ge浮动 naar de linkerkant of rechterkant van een paragraaf.
Aanpassen van de afbeeldingsgrootte
Dit voorbeeld demonstreert hoe de grootte van een afbeelding wordt aangepast.
Weergeef vervangende tekst voor afbeeldingen
Dit voorbeeld demonstreert hoe vervangende tekst wordt weergegeven voor een afbeelding. Als de browser de afbeelding niet kan laden, vertelt de vervangende tekstattribute de lezers wat ze zijn misgelopen. Het is een goede gewoonte om alle afbeeldingen op de pagina een vervangende tekstattribute toe te voegen, zodat de informatie beter wordt weergegeven en het zeer nuttig is voor gebruikers van puur tekstbrowsers.
Maak een afbeeldingskoppeling
Dit voorbeeld demonstreert hoe een afbeelding als een koppeling wordt gebruikt.
Maak een afbeeldingskaart
Dit voorbeeld toont hoe een afbeeldingskaart wordt gemaakt met klikbare gebieden. Elke gebied is een hyperlink.
Afbeelding omzetten naar afbeeldingskaart
Dit voorbeeld toont hoe een gewone afbeelding wordt ingesteld als een afbeeldingskaart.

Afbeeldingstags

Tag Beschrijving
<img> Definieer een afbeelding.
<map> Definieer een afbeeldingskaart.
<area> Definieer de klikbare gebieden in een afbeeldingskaart.