Uporaba oznake IMG IMG za slike in predmete
Oznaka HTML IMG ureja vstavljanje slik in drugih statičnih grafičnih predmetov na spletni strani. Ta skupna oznaka podpira več obveznih in neobveznih atributov, ki bogatijo vašo sposobnost oblikovanja zanimive spletne strani, usmerjene na sliko.
Primer popolnoma oblikovane oznake HTML IMG je videti takole:
Zahtevani atributi oznake oznake
SRC. Edini atribut, ki ga potrebujete za prikaz slike na spletni strani, je atribut SRC. Ta atribut določa ime in lokacijo slikovne datoteke, ki jo je treba prikazati.
ALT. Za pisanje veljavnih XHTML in HTML4 je potreben tudi atribut ALT. Ta atribut se uporablja za zagotavljanje brezvisnih brskalnikov z besedilom, ki opisuje sliko. Brskalniki na drugačen način prikazujejo alternativno besedilo. Nekateri ga prikažejo kot pop-up, ko miško premaknete nad sliko, drugi pa v lastnostih, ko z desno tipko miške kliknete na sliko, nekateri pa jih sploh ne prikazujejo.
Uporabite alt besedilo, da dodate dodatne podrobnosti o sliki, ki niso pomembna ali pomembna za besedilo spletne strani. Vendar ne pozabite, da bo v bralnikih zaslona in drugih brskalnikih, ki se uporabljajo samo za besedilo, besedilo prebrali v celoti z ostalim besedilom na strani. Da bi se izognili zmedi, uporabite opisno alt besedilo, ki pravi (na primer), "O spletnem oblikovanju in HTML" namesto samo "logotipa".
Atribut ALT v HTML5 ni vedno zahtevan, ker lahko z njim dodate še več opisov. Za atribut ARIA-DESCRIBEDBY lahko uporabite tudi ID, ki vsebuje popoln opis.
Alt besedilo tudi ni potrebno, če je slika povsem dekorativna, na primer grafika na vrhu spletne strani ali ikon. Ampak, če niste prepričani, vnesite besedilo alt za vsak primer posebej.
Priporočeni atributi IMG
ŠIRINA IN VIŠINA . Moral bi se navaditi, da vedno uporabljate atribute WIDTH in HEIGHT. In vedno bi morali uporabljati dejansko velikost in ne spreminjati velikosti slik z brskalnikom.
Ti atributi pospešijo prikazovanje strani, ker lahko brskalnik dodeli presledek v zasnovi slike in nato še naprej prenese preostalo vsebino, namesto da bi čakal, da se celotna slika prenese.
Drugi uporabni atributi IMG
NASLOV . Atribut je globalni atribut, ki se lahko uporablja za vse elemente HTML . Poleg tega atribut TITLE omogoča dodajanje dodatnih informacij o sliki.
Večina brskalnikov podpira atribut TITLE, vendar to počne na različne načine. Nekateri prikazujejo besedilo kot pop-up, drugi pa prikazujejo na zaslonih z informacijami, ko uporabnik klikne desno na sliko. S atributom TITLE lahko napišete dodatne informacije o sliki, vendar ne upoštevajte, da so ti podatki skriti ali vidni. To najlepše ne bi smeli uporabiti za skrivanje ključnih besed za iskalnike. To prakso zdaj kaznuje večina iskalnikov.
USEMAP in ISMAP . Ti dve atributi postavljata slike na strani odjemalca () in strani strežnika (ISMAP) na svoje slike.
LONGDESC . Atribut podpira URL-je za daljši opis slike. S to funkcijo so slike bolj dostopne.
Zastareli in zastareli atributi IMG
Številni atributi so v HTML5 zastareli ali zastareli v HTML4. Za najboljši HTML, bi morali najti druge rešitve, namesto da bi uporabili te atribute.
BORDER . Atribut definira širino v slikovnih pikah poljubne meje okoli slike. V HTML-ju je bilo opuščeno v korist CSS in je zastarelo v HTML5.
ALIGN . Ta atribut vam omogoča, da postavite sliko znotraj besedila in prevedete besedilo okoli nje. Sliko lahko poravnate na desno ali levo. V HTML4 je zastarela v korist float CSS lastnosti in je zastarela v HTML5.
HSPACE in VSPACE . HSPACE in atributov VSPACE dodajajo beli prostor horizontalno (HSPACE) in navpično (VSPACE). Na obeh straneh grafike bo dodan beli prostor (zgoraj in spodaj ali levo in desno), zato, če potrebujete samo prostor na eni strani, uporabite CSS. Ti atributi so bili v HTML4 opuščeni v korist blagovne znamke CSS in so zastareli v HTML5.
LOWSRC . Atribut LOWSRC zagotavlja alternativno sliko, če je vir slike tako velik, da ga lahko prenesete zelo počasi. Na primer, morda imate sliko, ki je 500KB, ki jo želite prikazati na svoji spletni strani, 500KB pa bo trajalo veliko časa za prenos. Torej ustvarite veliko manjšo kopijo slike, morda črno-belo ali zelo izredno optimizirano, in jo postavite v atribut LOWSRC. Manjša slika se bo prenesla in prikazala najprej, nato pa, ko se bo prikazala večja slika, bo nadomestila nizko-vir.
Atribut LOWSRC je bil dodan Netscape Navigator 2.0 v oznako IMG. Bila je del ravni 1. stopnje DOM, nato pa je bila odstranjena iz nivoja DOM 2. Podpora brskalnika je bila za to atribut skrita, čeprav mnoga spletna mesta trdijo, da jo podpirajo vsi sodobni brskalniki. V HTML4 ni zastarela ali je zastarela v HTML5, ker nikoli ni bil uradni del specifikacije.
Izogibajte se uporabi tega atributa in namesto tega optimizirajte svoje slike, tako da se hitro naložijo. Hitrost nalaganja strani je kritičen del dobrega spletnega oblikovanja, velike slike pa počasi spuščajo - tudi če uporabljate atribut LOWSRC.