Hvad er HTML-billedmærker?
Den følgende artikel giver en oversigt over HTML Image Tags. Jeg kender dens kliché, men lad mig starte med at sige, at et billede er værd tusind ord. I tilfælde af websider er det især sandt. Et billede kan sælge besøgende med din idé, imponere nogen til at købe dit produkt, og det kan hjælpe en webside med at se så meget bedre ud. I denne vejledning vil vi se på, hvordan vi kan tilføje IMG til websiderne og justere dem korrekt sammen med at tilføje links til dem.
Føjelse af billeder til websider
Du kan tilføje IMG til en HTML-side ved hjælp af tag i HTML-dokumentet, her er syntaks:
Her fortæller IMG browseren, at mærket handler om at tilføje en IMG til dokumentet, og “src =” angiver, hvor billedet skal downloades fra.
Eksempel på en side med et billede
Example HTML IMG Tag
alt = " Software development icon " height = " 150 " width = "140" />
Her er kodens output:
En interessant kendsgerning ved disse HTML-sider er, at når du bruger IMG-taget, indsættes billedet ikke på den nævnte webside, i stedet skaber det en plads, hvor billedet sættes, når det er hentet.
Browserstøtte og kompatibilitet med attributter
Som du kan forvente, understøtter alle moderne browsere billeder og brugen af IMG-tags. Nogle gange ændrer mobilbrowsere størrelsen på billedet, så de passer til det på skærmen, hvis billedet ikke er indstillet som lydhør.
Når det kommer til kompatibilitet af attributter med HTML 4.01 og nyere HTML5, fungerer de fleste tags undtagen til justering, grænse, hspace og vspace, som simpelthen ikke understøttes i sidstnævnte.
Billeder som et link:
Der vil være tidspunkter, hvor du ønsker, at et billede skal fungere som et link til en anden side. Du kan få det gjort ved at tilføje IMG-tagget inde i tagget.
Indstilling af et billede som baggrund på en webside
Du kan tildele et billede som et baggrundsbillede af en webside ved hjælp af CSS-egenskaben baggrundsbillede i kropselementet på siden.
Baggrundsbillede
Indstilling af et billede til at flyde i browseren
Vi kan bruge CSS-egenskaben "float" til at indstille et billede til at flyde inden i hvor som helst i browservinduet. Lad os se på et eksempel, der kan hjælpe dig med at forstå.
Her flyder billedet af bilen til højre side af teksten.
Her flyder billedet af bilen til venstre side af teksten.
Attributter af billedtag
Følgende er attributterne for et billedtag.
1) Juster
Mulige værdier: Øverst, Nederst, Mellem, Venstre eller Højre.
Alight-attributten bruges til at specificere justeringen af et billede på websiden.
2) Alt
Værditype: Tekst
Alt bruges til at specificere den alternative tekst til et billede af en webside. I tilfælde, hvor visning af en IMG ikke er mulig, viser browseren denne tekst til brugeren. Søgemaskiner som Google og Bing bruger denne alt-tekst til at vise resultater i billedsøgningen.
3) Border
Værdi Type: Pixels
Det bruges til at oprette en kant med brugerdefineret tykkelse omkring billedet. Det fungerer ikke i HTML5.
4) Kors-Origin
Værditype: Anonyme brugsoplysninger
Denne attribut bruges, når vi vil specificere, hvordan fotos med krydsoprindelse skal håndteres. Dette bruges mest i tilfælde, hvor lærredselementer i JavaScript-webapps bruges.
5) Højde
Værditype: Procentdel eller pixel
Naturligvis bruges denne til at angive højden på billedet på HTML-websiden.
6) hspace
Værdi Type: Pixels
Ikke understøttet i HTML5, hspace-attributten bruges til at specificere i pixels, hvor meget hvidt rum der skal tilføjes til venstre og højre for det indsatte billede.
7) ismap
Værditype: URL til en side
ismap vi brugte til at definere det nævnte billede som et billedkort på serversiden. Når brugeren klikker (eller tapper) inde i billedet, sender browsere koordinaterne for kliket (eller tryk) til webserveren som en URL.
8) longdesc
Værditype: URL
Longdesc bruges til at give en detaljeret beskrivelse af et billede ved hjælp af en URL. URL-adressen, der bruges i attributten, bruges som beskrivelse af billedet.
9) src
Værditype: URL
src står for source, og det bruges til at specificere den adresse, hvorfra browseren henter billedet, denne URL kan anvendes på et billede i et bibliotek på den samme server, og det kan også gemme et billede i en tredjepartsserver med et andet domænenavn.
10) USEMAP
Værdi Type: # kortnavn
Usemap-attributten bruges til at definere billedet til et billedkort på klientsiden. Et usemap bruges altid med kort- og områdets HTML-tags.
11) vspace
Værdi Type: Pixels
Vspace-attributten bruges ikke til at indstille antallet af pixels, der skal bruges som hvidafstand øverst og nederst på billedet på websiden, ikke understøttet i HTML5.
12) Width
Værdi Type: Pixels
Ligesom navnet antyder, bruges breddeattributten til at specificere bredden på et billede på HTML-websiden.
Konklusion - HTML-billedmærker
Nu hvor vi har taget et kig på, hvordan billeder er tilføjet i HTML-sider, og hvordan man indstiller deres attributter, kan vi oprette attraktive flotte websider i et webprojekt.
Ud over at blot tilføje visuel flair til en webside, er billeder værdifulde, fordi de også hjælper med søgemaskineoptimering. Tilføjelse af rigtige alt-tags og beskrivelser til billeder hjælper søgemaskiner med at forstå indholdet af en webside bedre og forbedre rangeringen af en webside i mange tilfælde.
Anbefalede artikler
Dette er en guide til HTML-billedmærker. Her diskuterer vi attributterne ved billedtag sammen med browserstøtte og kompatibilitet med attributter. Du kan også se på de følgende artikler for at lære mere -
- En simpel guide til HTML-kommandoer
- Introduktion til hvad er XHTML?
- Tutorials om HTML-attributter
- Applikationer og topanvendelser af HTML
- Forskellige listestilarter i HTML
- HTML-rammer
- HTML-blokke