HTML -zelfstudie

HTML HOME HTML-introductie HTML-editors HTML basis HTML-elementen HTML-kenmerken HTML-koppen HTML-alinea's HTML-stijlen HTML-opmaak HTML-citaten HTML-opmerkingen HTML-kleuren HTML-CSS HTML-links HTML-afbeeldingen HTML-favicon HTML-tabellen HTML-lijsten HTML-blok en inline HTML-klassen HTML-ID HTML-iframes HTML-JavaScript Paden voor HTML-bestanden HTML-kop HTML-indeling HTML-responsief HTML-computercode HTML-semantiek HTML-stijlgids HTML-entiteiten HTML-symbolen HTML-emoji's HTML-tekenset HTML-URL-codering HTML versus XHTML

HTML -formulieren

HTML-formulieren HTML-formulierkenmerken HTML-formulierelementen HTML-invoertypen HTML-invoerkenmerken Kenmerken HTML-invoerformulier

HTML -afbeeldingen

HTML-canvas HTML-SVG

HTML- media

HTML-media HTML-video HTML-audio HTML-plug-ins HTML-YouTube

HTML API's

HTML-geolocatie HTML slepen/neerzetten HTML-webopslag HTML-webwerkers HTML-SSE

HTML- voorbeelden

HTML-voorbeelden HTML-quiz HTML-oefeningen HTML-certificaat HTML-samenvatting HTML-toegankelijkheid

HTML- verwijzingen

HTML-taglijst HTML-kenmerken Algemene HTML-kenmerken Ondersteuning voor HTML-browser HTML-gebeurtenissen HTML-kleuren HTML-canvas HTML-audio/video HTML-documenttypen HTML-tekensets HTML-URL-codering HTML-taalcodes HTTP-berichten HTTP-methoden PX naar EM-omzetter Toetsenbord sneltoetsen

HTML- afbeeldingen


Afbeeldingen kunnen het ontwerp en het uiterlijk van een webpagina verbeteren.


Voorbeeld

<img src="pic_trulli.jpg" alt="Italian Trulli">

Voorbeeld

<img src="img_girl.jpg" alt="Girl in a jacket">

Voorbeeld

<img src="img_chania.jpg" alt="Flowers in Chania">

Syntaxis voor HTML-afbeeldingen

De HTML <img>-tag wordt gebruikt om een ​​afbeelding in een webpagina in te sluiten.

Afbeeldingen worden technisch niet in een webpagina ingevoegd; afbeeldingen zijn gekoppeld aan webpagina's. De <img>tag creëert een bewaarruimte voor de afbeelding waarnaar wordt verwezen.

De <img>tag is leeg, bevat alleen attributen en heeft geen afsluitende tag.

De <img>tag heeft twee vereiste kenmerken:

  • src - Specificeert het pad naar de afbeelding
  • alt - Specificeert een alternatieve tekst voor de afbeelding

Syntaxis

<img src="url" alt="alternatetext">

Het src-kenmerk

Het vereiste srcattribuut specificeert het pad (URL) naar de afbeelding.

Opmerking: wanneer een webpagina wordt geladen, is het op dat moment de browser die de afbeelding van een webserver haalt en in de pagina invoegt. Zorg er daarom voor dat de afbeelding ook daadwerkelijk op dezelfde plek blijft ten opzichte van de webpagina, anders krijgen je bezoekers een gebroken link icoon. Het gebroken link-pictogram en de alttekst worden weergegeven als de browser de afbeelding niet kan vinden.

Voorbeeld

<img src="img_chania.jpg" alt="Flowers in Chania">


Het alt-kenmerk

Het vereiste altattribuut biedt een alternatieve tekst voor een afbeelding, als de gebruiker deze om de een of andere reden niet kan zien (vanwege een trage verbinding, een fout in het src-attribuut of als de gebruiker een schermlezer gebruikt).

De waarde van het altattribuut moet de afbeelding beschrijven:

Voorbeeld

<img src="img_chania.jpg" alt="Flowers in Chania">

Als een browser een afbeelding niet kan vinden, wordt de waarde van het alt kenmerk weergegeven:

Voorbeeld

<img src="wrongname.gif" alt="Flowers in Chania">

Tip: Een schermlezer is een softwareprogramma dat de HTML-code leest en de gebruiker in staat stelt om naar de inhoud te "luisteren". Schermlezers zijn handig voor mensen met een visuele handicap of leerstoornissen.


Afbeeldingsgrootte - Breedte en Hoogte

U kunt het styleattribuut gebruiken om de breedte en hoogte van een afbeelding op te geven.

Voorbeeld

<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">

U kunt ook de attributen widthen gebruiken:height

Voorbeeld

<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">

De widthen heightattributen definiëren altijd de breedte en hoogte van de afbeelding in pixels.

Let op: Geef altijd de breedte en hoogte van een afbeelding op. Als de breedte en hoogte niet zijn opgegeven, kan de webpagina flikkeren terwijl de afbeelding wordt geladen.


Breedte en hoogte, of stijl?

De attributen width, height, en stylezijn allemaal geldig in HTML.

We raden u echter aan het styleattribuut te gebruiken. Het voorkomt dat stylesheets de grootte van afbeeldingen wijzigen:

Voorbeeld

<!DOCTYPE html>
<html>
<head>
<style>
img {
  width: 100%;
}
</style>
</head>
<body>

<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">

<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

</body>
</html>

Afbeeldingen in een andere map

Als je afbeeldingen in een submap staan, moet je de mapnaam in het srcattribuut opnemen:

Voorbeeld

<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

Afbeeldingen op een andere server/website

Sommige websites verwijzen naar een afbeelding op een andere server.

Om naar een afbeelding op een andere server te verwijzen, moet u een absolute (volledige) URL opgeven in het srcattribuut:

Voorbeeld

<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">

Opmerkingen over externe afbeeldingen: Externe afbeeldingen kunnen auteursrechtelijk beschermd zijn. Als u geen toestemming krijgt om het te gebruiken, overtreedt u mogelijk de auteursrechtwetten. Bovendien kunt u externe afbeeldingen niet bedienen; het kan plotseling worden verwijderd of gewijzigd.


Geanimeerde afbeeldingen

HTML staat geanimeerde GIF's toe:

Voorbeeld

<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;">

Afbeelding als een link

Om een ​​afbeelding als link te gebruiken, plaatst u de <img>tag in de <a> tag:

Voorbeeld

<a href="default.asp">
  <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>

Afbeelding zwevend

Gebruik de CSS float-eigenschap om de afbeelding naar rechts of links van een tekst te laten zweven:

Voorbeeld

<p><img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
The image will float to the right of the text.</p>

<p><img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
The image will float to the left of the text.</p>

Tip: lees onze CSS Float-zelfstudie voor meer informatie over CSS Float .


Algemene afbeeldingsindelingen

Dit zijn de meest voorkomende afbeeldingsbestandstypen, die worden ondersteund in alle browsers (Chrome, Edge, Firefox, Safari, Opera):

Abbreviation File Format File Extension
APNG Animated Portable Network Graphics .apng
GIF Graphics Interchange Format .gif
ICO Microsoft Icon .ico, .cur
JPEG Joint Photographic Expert Group image .jpg, .jpeg, .jfif, .pjpeg, .pjp
PNG Portable Network Graphics .png
SVG Scalable Vector Graphics .svg

Hoofdstuk samenvatting

  • Gebruik het HTML <img>-element om een ​​afbeelding te definiëren
  • Gebruik het HTML src-attribuut om de URL van de afbeelding te definiëren
  • Gebruik het HTML alt-kenmerk om een ​​alternatieve tekst voor een afbeelding te definiëren, als deze niet kan worden weergegeven
  • Gebruik de HTML widthen heightattributen of de CSS widthen height eigenschappen om de grootte van de afbeelding te definiëren
  • Gebruik de CSS float-eigenschap om de afbeelding naar links of naar rechts te laten zweven

Opmerking: het laden van grote afbeeldingen kost tijd en kan uw webpagina vertragen. Gebruik afbeeldingen zorgvuldig.


HTML-oefeningen

Test jezelf met oefeningen

Oefening:

Gebruik de HTML-afbeeldingskenmerken om de grootte van de afbeelding in te stellen op 250 pixels breed en 400 pixels hoog.

<img src="schreeuw.png" = "250" ="400">


HTML-afbeeldingstags

Tag Description
<img> Defines an image
<map> Defines an image map
<area> Defines a clickable area inside an image map
<picture> Defines a container for multiple image resources

Bezoek onze HTML Tag Reference voor een volledige lijst van alle beschikbare HTML-tags .