HTML beelde
Prente kan die ontwerp en die voorkoms van 'n webblad verbeter.
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">
HTML-beelde sintaksis
Die HTML <img>-merker word gebruik om 'n prent in 'n webblad in te sluit.
Prente word nie tegnies in 'n webblad ingevoeg nie; beelde word aan webblaaie gekoppel. Die <img>merker skep 'n houspasie vir die verwysde prent.
Die <img>merker is leeg, dit bevat slegs eienskappe en het nie 'n sluitingsmerker nie.
Die <img>merker het twee vereiste eienskappe:
- src - Spesifiseer die pad na die prent
- alt - Spesifiseer 'n alternatiewe teks vir die prent
Sintaksis
<img src="url" alt="alternatetext">
Die src-kenmerk
Die vereiste srckenmerk spesifiseer die pad (URL) na die prent.
Let wel: Wanneer 'n webblad laai, is dit die blaaier, op daardie oomblik, wat die prent van 'n webbediener af kry en dit in die bladsy invoeg. Maak dus seker dat die prent eintlik op dieselfde plek bly in verhouding tot die webblad, anders sal jou besoekers 'n gebroke skakelikoon kry. Die gebroke skakelikoon en die altteks word gewys as die blaaier nie die prent kan vind nie.
Voorbeeld
<img src="img_chania.jpg" alt="Flowers
in Chania">
Die alt-kenmerk
Die vereiste altkenmerk verskaf 'n alternatiewe teks vir 'n prent, as die gebruiker dit om een of ander rede nie kan sien nie (as gevolg van stadige verbinding, 'n fout in die src-kenmerk, of as die gebruiker 'n skermleser gebruik).
Die waarde van die altkenmerk moet die beeld beskryf:
Voorbeeld
<img src="img_chania.jpg" alt="Flowers
in Chania">
As 'n blaaier nie 'n prent kan vind nie, sal dit die waarde van die alt
kenmerk vertoon:
Voorbeeld
<img src="wrongname.gif" alt="Flowers
in Chania">
Wenk: 'n Skermleser is 'n sagtewareprogram wat die HTML-kode lees, en die gebruiker toelaat om na die inhoud te "luister". Skermlesers is nuttig vir mense wat siggestremde of leergestremde is.
Beeldgrootte - Breedte en Hoogte
Jy kan die stylekenmerk gebruik om die breedte en hoogte van 'n prent te spesifiseer.
Voorbeeld
<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">
Alternatiewelik kan jy die widthen heightkenmerke gebruik:
Voorbeeld
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
Die widthen heightkenmerke definieer altyd die breedte en hoogte van die prent in pixels.
Let wel: spesifiseer altyd die breedte en hoogte van 'n prent. As breedte en hoogte nie gespesifiseer word nie, kan die webblad flikker terwyl die prent laai.
Breedte en Hoogte, of Styl?
Die width, height, en stylekenmerke is almal geldig in HTML.
Ons stel egter voor om die stylekenmerk te gebruik. Dit verhoed dat stylblaaie die grootte van prente verander:
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>
Prente in 'n ander gids
As jy jou beelde in 'n subgids het, moet jy die vouernaam by die srckenmerk insluit:
Voorbeeld
<img src="/images/html5.gif"
alt="HTML5 Icon" style="width:128px;height:128px;">
Beelde op 'n ander bediener/webwerf
Sommige webwerwe wys na 'n prent op 'n ander bediener.
Om na 'n prent op 'n ander bediener te wys, moet jy 'n absolute (volledige) URL in die srckenmerk spesifiseer:
Voorbeeld
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">
Notas oor eksterne beelde: Eksterne beelde kan onder kopiereg wees. As jy nie toestemming kry om dit te gebruik nie, kan jy kopieregwette oortree. Daarbenewens kan jy nie eksterne beelde beheer nie; dit kan skielik verwyder of verander word.
Geanimeerde beelde
HTML laat geanimeerde GIF's toe:
Voorbeeld
<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;">
Beeld as 'n skakel
Om 'n prent as 'n skakel te gebruik, plaas die <img>merker binne die <a>
merker:
Voorbeeld
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial"
style="width:42px;height:42px;">
</a>
Beeld drywend
Gebruik die CSS float-eienskap om die prent regs of links van 'n teks te laat dryf:
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>
Wenk: Om meer te wete te kom oor CSS Float, lees ons CSS Float Tutoriaal .
Algemene beeldformate
Hier is die mees algemene beeldlêertipes wat in alle blaaiers (Chrome, Edge, Firefox, Safari, Opera) ondersteun word:
| 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 |
Hoofstuk Opsomming
- Gebruik die HTML
<img>-element om 'n prent te definieer - Gebruik die HTML
src-kenmerk om die URL van die prent te definieer - Gebruik die HTML
alt-kenmerk om 'n alternatiewe teks vir 'n prent te definieer, as dit nie vertoon kan word nie - Gebruik die HTML
widthenheighteienskappe of die CSSwidthenheighteienskappe om die grootte van die prent te definieer - Gebruik die CSS
float-eienskap om die prent na links of regs te laat sweef
Let wel: Die laai van groot beelde neem tyd en kan jou webblad vertraag. Gebruik beelde versigtig.
HTML-oefeninge
HTML-beeldetikette
| 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 |
Vir 'n volledige lys van alle beskikbare HTML-merkers, besoek ons HTML-merkerverwysing .