The HTML Oznaka IMG ureja vstavljanje slik in drugih statičnih grafičnih predmetov na spletno stran. Ta skupna oznaka podpira več obveznih in neobveznih atributov, ki dodajo bogastvo vaši sposobnosti za oblikovanje privlačnega spletnega mesta, osredotočenega na slike.
Primer popolnoma oblikovane HTML IMG oznake je videti takole:
Zahtevani atributi oznake IMG
src = "/ pot / do / image.jpg"
Edini atribut, ki ga potrebujete za prikaz slike na spletni strani, je src atribut. Ta atribut določa ime in mesto slikovne datoteke, ki bo prikazana.
alt = "Opis slike"
Za pisanje veljavnih XHTML in HTML4 se višina atribut. Ta atribut se uporablja za nevizualne brskalnike z besedilom, ki opisuje sliko. Brskalniki prikazujejo nadomestno besedilo na različne načine. Nekateri jo prikažejo kot pojavno okno, ko z miško položite miškino sliko, drugi jo prikažejo v lastnostih, ko z desno miškino tipko kliknete sliko, nekateri pa je sploh ne prikažejo.
Uporabi nadomestno besedilo za dodatne podrobnosti o sliki, ki niso pomembne ali pomembne za besedilo spletne strani. Vendar ne pozabite, da bo besedilo v bralnikih zaslona in drugih brskalnikih z besedilom prebrano v vrstici z ostalim besedilom na strani. Da se izognete zmedi, uporabite opisno nadomestno besedilo, na katerem (na primer) piše »O spletnem oblikovanju in HTML-ju« namesto le »logotip«
The višina besedilo je prav tako bistvenega pomena za SEO (Search Engine Optimization). Boti, ki jih iskalniki, kot je Google, uporabljajo za raziskovanje vsebine na spletnih mestih, ne morejo "videti" slik. Zanašajo se na višina besedilo, da ugotovite, kaj je na strani.
V HTML5, višina atribut ni vedno obvezen, ker lahko uporabite napis da mu dodate več opisa. Ta atribut lahko uporabite tudi za označevanje ID-ja, ki vsebuje popoln opis:
aria-describyby = "Opis slike"
Nadomestno besedilo tudi ni potrebno, če je slika povsem dekorativna, na primer grafika na vrhu spletne strani ali ikone. Če pa niste prepričani, vključite nadomestno besedilo za vsak slučaj.
Velikost atributov
širina = "500"in.
višina = "500"Glede na vaš dizajn uporabite. višina in. premer
Na splošno boste želeli, da se v vašem CSS nastavi velikost slike. Pogosteje kot ne, to bo rezultat dimenzij nadrejenega vsebnika slike. Ta pristop omogoča največ prilagodljivosti pri prilagajanju različnim velikostim zaslona. Vendar še vedno obstajajo primeri, ko boste morda želeli določiti dimenzije slike kot atribute HTML.
Drugi uporabni atributi IMG
title = "Opisno ime slike"Atribut je globalni atribut, ki ga je mogoče uporabiti za katerega koli. Element HTML. Poleg tega. naslov
Večina brskalnikov podpira naslov atribut, vendar to počnejo na različne načine. Nekateri prikažejo besedilo kot pojavno okno, drugi pa ga prikažejo na informacijskih zaslonih, ko uporabnik z desno miškino tipko klikne sliko. Lahko uporabite naslov atribut, da napišete dodatne informacije o sliki, vendar ne računajte, da bodo te informacije bodisi skrite ali vidna. Vsekakor tega ne bi smeli uporabljati za skrivanje ključnih besed za iskalnike. To prakso zdaj kaznuje večina iskalnikov.
usemap = ""in.
ismap = ""Ta dva atributa nastavita na strani odjemalca () in strani strežnika (ISMAP) slikovni zemljevidi
longdesc = "Podrobnejši opis vaše slike"The. longdesc
Zastareli in zastareli atributi IMG
Številni atributi so zdaj zastareli v HTML5 ali zastareli v HTML4. Za najboljši HTML namesto teh atributov poiščite druge rešitve.
border = "3"
align = "left"Ta atribut vam omogoča, da sliko vstavite v besedilo in besedilo teče okoli njega. Sliko lahko poravnate v desno ali levo. Opuščen je bil v korist. lastnost float CSS
hspcace = "10"in.
vspace = "10"The. hspace in. vspace atributi dodajo presledek vodoravno ( hspace) in navpično ( vspace
lowsrc = "/ pot / do / lowres.jpg"The. lowsrc atribut ponuja alternativno sliko, če je vaš vir slike tako velik, da se prenaša izjemno počasi. Na primer, morda imate sliko, ki je 500 KB, ki jo želite prikazati na svoji spletni strani, vendar bi prenos 500 KB potreboval veliko časa. Tako ustvarite veliko manjšo kopijo slike, morda črno-belo ali samo izjemno optimizirano, in jo vstavite v. lowsrc
The lowsrc atribut je bil oznaki dodan v Netscape Navigator 2.0. Bil je del ravni DOM 1, nato pa je bil odstranjen iz ravni DOM 2. Za ta atribut je bila podpora brskalnika skromna, čeprav številna spletna mesta trdijo, da jo podpirajo vsi sodobni brskalniki. V HTML4 ni zastarel ali zastarel v HTML5, ker nikoli ni bil uradni del nobene specifikacije.
Izogibajte se uporabi tega atributa in raje optimizirajte slike, da se hitro naložijo. Hitrost nalaganja strani je ključni del dobrega spletnega oblikovanja, velike slike pa strani zelo upočasnijo - tudi če uporabljate lowsrc atribut.