Slika nije samo umetnuta direktno u tekst. Pregledaču se kaže njegovo ime i daje mu uputstva gdje i kako ga pozicionirati na ekranu. Da biste to učinili, koristite jednu HTML oznaku img. Određuje lokaciju grafičkog objekta na web stranici.
Ako su mnogi atributi opcioni za oznake, onda img oznaka mora imati barem jedan parametar - adresu slike. Ovaj atribut se zove src:
- - ovo će prikazati datoteku goat-j.webp" />
- - sa ovim parametrom img taga, pretraživač će učitati sliku objavljenu na Internetu na stranici megasellmag.ru.
Atributi poravnanja
Za pozicioniranje slika na stranici koristeći HTML, koristi se oznaka img, čiji su atributi odgovorni za postavljanje slike na stranicu i prirodu njenog prelamanja teksta.
Podrazumevano, pretraživač postavlja sliku u centar ekrana, a tekst se ne premotava oko nje. Oznaka img će vam omogućiti da izrazite svoje neslaganje sa pretraživačem koristeći atribut align (alignment).
- slika će biti pozicionirana na lijevoj ivici stranice, a tekst će se zaobići na desnoj strani.
Ponašanje teksta će biti slično ako je slika postavljena desno (poravnaj=desno), u sredini (poravnaj=sredina), gore (poravnaj=gore), dolje(poravnati=dno) i centar (centar).
Postavke i veličine
Da bi se spriječilo da se tekst uvuče u slike, img tag je dobio posebne atribute -hspace (horizontalne/horizontalne margine) i vspace (vertikalne/vertikalne margine), koji određuju količinu uvlačenja teksta od ivica slika u piksela.
Slika ne samo da će se poslušno udaljiti od teksta za zadatu količinu, već će se udaljiti i od ruba stranice, pa je najbolje izbjegavati velike uvlake.
Veoma su bitne geometrijske dimenzije slika koje su ne samo poželjne, već ponekad i jednostavno potrebne za ispravan prikaz slike. Za to se koriste atributi width (width) i height (height) čija se vrijednost postavlja u pikselima ili procentima.
Ako navedete samo širinu, visina će biti odabrana automatski sa originalnim proporcijama. Procentualne veličine vam omogućavaju da postavite sliku u desni dio stranice, bez obzira na veličinu prozora pretraživača, a ova potreba se često javlja.
Druge opcije
Atribut border obuhvata sliku u okviru određene debljine, što pretraživač ne radi po defaultu.
Granica takođe može imati naizgled besmislenu nultu širinu (border='0'), ali to je sve dok slika ne postane veza, kada je pretraživač automatski zaokruži plavim okvirom bez čekanja na uputstva.
Neki nestrpljivi korisnici, bijesni zbog niskih brzina interneta, jednostavno će onemogućiti prikaz slika. Za takve slučajeve obezbeđen je parametar alt koji vam omogućava da uđete alternativni tekst koji će korisnik vidjeti u okviru u kojem se slika žuri da se učita.
Ako vam se ne sviđaju mogućnosti alt parametra, img tag može ponuditi longdesc atribut, čija je vrijednost URL dokumenta sa detaljnijim opisom.
Atributi usemap i ismap govore pretraživaču da će slika biti slika na kojoj su hiperveze odvojene oblasti (link mapa), samo parametar usemap određuje navigacijsku kartu na serveru, a ismap - mapu na strana klijenta.
Opis linka 1 na slici ispod:
Egzotični artikli
Lowsrc atribut nalaže pretraživaču da prvo preuzme kopiju (ili drugu alternativu) originalne slike nižeg kvaliteta i, prema tome, "lakše". Ovaj trik je predviđen u slučaju male brzine interneta za korisnika. Originalna slika, kada je postavljena, zamjenjuje "lažnu".
Manje korišćeni atribut galleryimg oznake img poziva kontrolnu tablu slike (kada pređete mišem iznad), omogućavajući vam da otvorite podrazumevani folder Moje slike i odštampate, sačuvate ili pošaljete sliku e-poštom. Panel možete onemogućiti postavljanjem parametra galleryimg na no/false i omogućiti ga postavljanjem yes/true.
U novoj HTML5 specifikaciji, određeni broj oznaka ima zastarjele parametre. Na primjer, lowsrc, border, longdesc i name atributi img su povučeni.
