Korišćenje HTML IMG oznake za slike i objekte
HTML IMG oznaka uređuje umetanje slika i drugih statičkih grafičkih objekata unutar web stranice. Ova zajednička oznaka podržava nekoliko obaveznih i opcionalnih atributa koji daju bogatstvo vašoj sposobnosti da dizajniraju angažujuću web stranicu usmerenu na slike.
Primjer potpuno oblikovane HTML IMG tag-a izgleda ovako:
Obavezne oznake oznaka IMG
SRC. Jedini atribut koji trebate dobiti sliku za prikaz na web stranici je atribut SRC-a. Ovaj atribut identifikuje ime i lokaciju datoteke slike koja će se prikazati.
ALT. Za pisanje važećih XHTML i HTML4, takođe je potreban ALT atribut. Ovaj atribut se koristi za pružanje neovisnih pretraživača sa tekstom koji opisuje sliku. Pretraživači prikazuju alternativni tekst na različite načine. Neki ga prikazuju kao iskačuće kada stavite miša preko slike, drugi prikazuju u svojstvima kada kliknete desnim tasterom miša na sliku, a neki ga uopšte ne prikazuju.
Koristite alt tekst da biste dobili dodatne detalje o slici koja nije relevantna ili važna za tekst Web stranice. Ali zapamtite to u čitačima ekrana i ostalim pretraživačima teksta, tekst će se pročitati u liniji sa ostatkom teksta na stranici. Da biste izbegli konfuziju, koristite deskriptivni alt tekst koji kaže (na primjer), "O web dizajnu i HTML-u" umjesto samo "logotipa".
U HTML5, atribut ALT nije uvek potreban, jer možete koristiti naslov da biste mu dodali još opisa. Možete koristiti i atribut ARIA-DESCRIBEDBY za označavanje ID-a koji sadrži potpuni opis.
Alt tekst takođe nije potreban ako je slika čisto dekorativna, kao što je grafika na vrhu web stranice ili ikona. Ali ako niste sigurni, uključite alt tekst za svaki slučaj.
Preporučena IMG atributa
ŠIRINA I VISINA . Trebalo bi da uđete u naviku da uvek koristite WIDTH i HEIGHT atribute. I uvek koristite pravu veličinu i ne menjajte svoje slike sa pregledačem.
Ovi atributi ubrzavaju prikazivanje stranice jer pretraživač može dodijeliti prostor u dizajnu za sliku, a zatim nastaviti sa preuzimanjem ostatka sadržaja, umjesto čekajući čitavu sliku za preuzimanje.
Drugi Korisni IMG Atributi
TITLE . Atribut je globalni atribut koji se može primeniti na bilo koji HTML element . Štaviše, atribut TITLE omogućava dodavanje dodatnih informacija o slici.
Većina pretraživača podržava atribut TITLE, ali to rade na različite načine. Neki prikazuju tekst kao iskačuće, dok drugi prikazuju na ekranima informacija kada korisnik klikne desnim klikom na sliku. Možete koristiti atribut TITLE da biste napisali dodatne informacije o slici, ali ne računajte na to da su ove informacije sakrivene ili vidljive. Ne bi trebalo da definitivno koristite ovo da biste sakrili ključne reči za pretraživače. Većina pretraživača sada kažnjava ovu praksu.
USEMAP i ISMAP . Ova dva atributa postavljaju slike na strani klijenta () i server-side (ISMAP) na svoje slike.
LONGDESC . Atribut podržava URL-ove za dalji opis slike. Ova funkcija čini Vaše slike pristupačnijim.
Zastareli i zastarjeli IMG atributi
Nekoliko atributa je zastarelo u HTML5 ili zastarelo u HTML4. Za najbolji HTML, trebali bi pronaći druga rješenja umjesto korištenja ovih atributa.
BORDER . Atribut definiše širinu u pikselima bilo koje granice oko slike. U HTML-u je zastario u korist CSS-a i zastario je HTML5.
ALIGN . Ovaj atribut vam omogućava da postavite sliku unutar teksta i da tekst prelaze oko njega. Možete poravnati sliku sa desne ili leve strane. Prekoračeno je u korist float CSS svojine u HTML4 i zastarelo je u HTML5.
HSPACE i VSPACE . HSPACE i VSPACE atribute dodaju beli prostor horizontalno (HSPACE) i vertikalno (VSPACE). Beli prostor će biti dodan na obe strane grafike (gornji i donji ili lijev i desni), tako da ako vam je samo potreban prostor sa jedne strane, trebalo bi da koristite CSS. Ovi atributi su zastarjeli u HTML4 u korist margine CSS svojstva, a oni su zastarjeli u HTML5.
LOWSRC . Atribut LOWSRC daje alternativnu sliku kada je vaš izvor slike toliko velik da ga preuzima izuzetno sporo. Na primjer, možda ćete imati sliku koja je 500KB koju želite prikazati na vašoj web stranici, ali 500KB će trebati dugo vrijeme za preuzimanje. Dakle, kreirate mnogo manju kopiju slike, možda u crno-beloj ili ekstremno optimizovanoj, i stavite je u atribut LOWSRC. Manji snimak će se prvo preuzeti i prikazati, a onda kada se pojavi veća slika ona će zamijeniti mali izvor.
Atribut LOWSRC je dodan Netscape Navigator 2.0 u IMG oznaku. Bila je deo nivoa DOM 1, ali je zatim uklonjena sa nivoa DOM 2. Podrška pretraživača je bila skicirana za ovaj atribut, mada mnoge stranice tvrde da ga podržavaju svi savremeni pretraživači. Nije zastarjela u HTML4 ili je zastarjela u HTML5 zato što nikada nije bio zvanični dio bilo koje specifikacije.
Izbegavajte da koristite ovaj atribut i umesto toga optimizujete svoje slike tako da brzo učitavaju. Brzina učitavanja stranice je kritičan dio dobrog Web dizajna, a velike slike sporih stranica suvišno smanjene - čak i ako koristite atribut LOWSRC.