Slike unutar HTML dokumenta

<img> tag

<IMG> tag namenjen je umetanju slika u html dokument i prikazu u prozoru pretraživača. Da bi mogli da vidimo neki primer, biće nam potrebna jedna slika, ne veća od 200x300px koju ćemo snimiti u folder u kome nam se nalazi i izvorni html document. Ovo naravno, u realnom svetu, nije obavezno ali ćemo zbog jednostavnosti to pretpostaviti.

Za ispravan prikaz slika na webu, slike je najbolje pripremiti u jednom od formata: jpg, gif i png. Svakako nikako ne koristite .bmp.

Ukratko, izbor koji format izabrati, svodi se na sledeće:

  • ako vam je najbitnije da sve boje budu ispravno prikazane, koristite jpg
  • ukoliko vaša slika ima pozadinu koja je transparentna, koristite png ili gif
  • ukoliko vaša slika uključuje animaciju, jedini izbor je gif.

Sintaksa za img tag izgleda ovako:

<img src=”slika.jpg” alt=”Moja slika”>

Ovde vidite da je img tag samozatvarajući. Razlog je očigledan. Vi samo želite da umetnete sliku u dokument. Unutar nje vam ne treba tekst. Ovako napisan kod znači da se slika u prozoru pretraživača učitava u svojim originalnim dimenzijama , na primer 200x300px.

src=”slika.jpg” je deo koda koji govori pretraživaču da učita sliku slika.jpg koja se nalazi u istom folderu kao i dokument koji je poziva.

alt=”Moja slika” je sada već obavezan atribut img taga čija je namena višestruka. Prva i osnovna je da za slučaj da slika ne bude pronadjena, tekst unutar alt atributa bude ispisan na mestu predvidjenom za sliku. Drugi, mozda još važniji je što pretraživači koriste tu informaciju kako bi mogli da indeksiraju slike koje se na sajtu nalaze.

Iako je najbolja praksa da se izmena parametara prikaza prepusti CSS-u, ovde ćemo ipak napomenuti mogućnost stilizovanja unutar img taga html atributima. Naime, ukoliko želimo da naša slika bude prikazana kao manja u odnosu na originalnu (širina 200px i visina 300px), u kodu ćemo koristiti službene reči height za visinu i width za širinu na sledeći način:

<img src=”slika.jpg” alt=”Moja slika” width=”100″ height=”200″>

Ukoliko širina i visina nisu proporcionalno smanjene ili povećane doći će do nepravilne razmere pa će slika biti izdužena po jednoj od dimenzija.

Da bi to izbegli, najbolje je navesti samo jedan od parametara, širinu ili visinu, a pretraživač će drugu dimenziju prikazati proporcionalno umanjenu ili uvećanu. Na primer, ako napišemo:

<img src=”slika.jpg” alt=”Moja slika” width=”100″>

i izostavimo parameter height za visinu, visina slike će biti proporcionalno smanjena, tj. prikazana u veličini od 200px po visini.

Primećujete da ovde nismo stavljali dimenziju iza broja. To je zbog toga što je podrazumevana vrednost koju pretraživač dodaje u pikselima, tj. px.

 

Slika kao link

Sada se vraćamo na temu koju smo ranije pojasnili a tiče se linkovanja. Kako da slika bude link, tj. kako da nas klik mišem na slici odvede na željenu web stranu? Primer koda je ispod:

<a href=”www.google.com” ><img src=”slika.jpg” alt=”Moja slika” width=”100″ height=”200″></a>

Kao što možete videti, jedina razlika je u tome što ćemo umesto teksta, izmedju otvarajućeg i zatvarajućeg a taga staviti img tag. Tako slika postaje link!

 

Kako da link ne vodi nikuda?

Postoje situacije u kojima treba predstaviti link koji ne vodi nikuda, naročito u fazi kada još nisu definisane putanje ka kojima treba da vodi. U tim slučajevima, href atribut izgleda ovako href=”#”. Ovako definisan href atribut govori da ukoliko se mišem klikne na njega, on će uraditi refresh stranice,tj. učitati istu stranu. Time se objašnjava i zašto linkovanje mesta na istoj strani koje smo obradili, počinje znakom #.

Preporučite ovaj članak:
Email this to someoneShare on Google+Share on FacebookShare on LinkedIn