The HTML IMG oznaka upravlja umetanjem slika i drugih statičnih grafičkih objekata unutar web stranice. Ova uobičajena oznaka podržava nekoliko obveznih i neobaveznih atributa koji dodaju bogatstvo vašoj sposobnosti da dizajnirate zanimljivo web mjesto usmjereno na slike.
Primjer potpuno oblikovane HTML IMG oznake izgleda ovako:
Potrebni atributi IMG oznake
src = "/ put / do / image.jpg"
Jedini atribut koji trebate da biste sliku prikazali na web stranici je src atribut. Ovaj atribut identificira ime i mjesto slikovne datoteke koja će se prikazati.
alt = "Opis slike"
Za pisanje valjanih XHTML i HTML4, alt atribut je također potreban. Ovaj se atribut koristi za pružanje nevizualnim preglednicima teksta koji opisuje sliku. Preglednici prikazuju alternativni tekst na različite načine. Neki ga prikazuju kao skočni prozor kad mišem pređete preko slike, drugi ga prikazuju u svojstvima kad kliknete desnu tipku miša na sliku, a neki ga uopće ne prikazuju.
Koristiti alt tekst kako bi dao dodatne detalje o slici koji nisu relevantni ili važni za tekst web stranice. Ali, imajte na umu da će se u čitačima zaslona i ostalim preglednicima samo s tekstom tekst čitati u retku s ostatkom teksta na stranici. Da biste izbjegli zabunu, upotrijebite opisni alt tekst koji kaže (na primjer) "O web dizajnu i HTML-u", umjesto samo "logotip".
The alt tekst je također bitan za SEO (Search Engine Optimization). Botovi koje tražilice, poput Googlea, koriste za istraživanje sadržaja na web lokacijama, ne mogu "vidjeti" slike. Oslanjaju se na alt tekst kako bi se utvrdilo što je na stranici.
U HTML5, alt atribut nije uvijek potreban, jer možete koristiti naslov da bih mu dodao još opisa. Ovaj atribut možete koristiti i za označavanje ID-a koji sadrži cjelovit opis:
aria-describy = "Opis slike"
Alternativni tekst također nije potreban ako je slika isključivo ukrasna, poput grafike na vrhu web stranice ili ikona. Ali ako niste sigurni, dodajte alt tekst za svaki slučaj.
Veličina atributa
širina = "500"i.
visina = "500"Ovisno o vašem dizajnu, pomoću. visina i. širina
Općenito, želite da se veličina slike postavi u vašem CSS-u. Češće nego ne, to će biti rezultat dimenzija nadređenog spremnika slike. Ovaj pristup omogućuje najveću fleksibilnost pri prilagođavanju različitim veličinama zaslona. Međutim, još uvijek postoje slučajevi kada biste možda htjeli odrediti dimenzije slike kao HTML atribute.
Ostali korisni IMG atributi
title = "Opisno ime slike"Atribut je globalni atribut koji se može primijeniti na bilo koji. HTML element. Štoviše,. titula
Većina preglednika podržava titula atribut, ali to čine na različite načine. Neki tekst prikazuju kao skočni prozor, dok ga drugi prikazuju na zaslonima s informacijama kada korisnik desnom tipkom miša klikne na sliku. Možete koristiti titula atribut za pisanje dodatnih podataka o slici, ali ne računajte da će i ti podaci biti skriveni ili vidljivo. Definitivno to ne biste trebali koristiti za skrivanje ključnih riječi za tražilice. Većina tražilica ovu kaznu sada kažnjava.
usemap = ""i.
ismap = ""Ova dva atributa postavljaju na strani klijenta () i na strani poslužitelja (ISMAP) mape slika
longdesc = "Detaljniji opis vaše slike"The. longdesc
Zastarjeli i zastarjeli IMG atributi
Nekoliko je atributa zastarjelo u HTML5 ili zastarjelo u HTML4. Za najbolji HTML, trebali biste pronaći druga rješenja umjesto da koristite ove atribute.
obrub = "3"
align = "left"Ovaj atribut omogućuje vam postavljanje slike unutar teksta i omogućavanje protoka teksta oko nje. Sliku možete poravnati udesno ili ulijevo. Obustavljeno je u korist. plutajuće CSS svojstvo
hspcace = "10"i.
vspace = "10"The. hspace i. vspace atributi dodaju razmak vodoravno ( hspace) i okomito ( vspace
lowsrc = "/ put / do / lowres.jpg"The. lowsrc atribut pruža alternativnu sliku kada je vaš izvor slike toliko velik da se preuzima izuzetno sporo. Na primjer, možda imate sliku veličine 500 KB koju želite prikazati na svojoj web stranici, ali preuzimanje datoteka potrajalo bi dugo. Dakle, stvorite mnogo manju kopiju slike, možda crno-bijelu ili jednostavno izuzetno optimiziranu, i stavite je u. lowsrc
The lowsrc atribut je dodan u Netscape Navigator 2.0 oznaci. Bio je dio DOM razine 1, ali je zatim uklonjen iz DOM razine 2. Podrška preglednika za ovaj je atribut bila neuobičajena, iako mnoge web stranice tvrde da je podržavaju svi moderni preglednici. Nije zastario u HTML4 niti zastario u HTML5 jer nikada nije bio službeni dio niti jedne specifikacije.
Izbjegavajte koristiti ovaj atribut i umjesto toga optimizirajte svoje slike tako da se brzo učitavaju. Brzina učitavanja stranica važan je dio dobrog web dizajna, a velike slike izuzetno usporavaju stranice - čak i ako koristite lowsrc atribut.