HTML Osnove

5. HTML Slike ( IMG tag )

5.1. Umetanje slike u HTML i put do fajla

Umetanje slike izvodi se sa <img src="slika.jpg"> .
Atribut SRC određuje put do fajla koji može biti :
relativni (npr. ../../slike/tenniel.jpg) ili
apsolutni (npr. http://www.adsoglasi.com/html/html_prirucnik/osnove/osnove_slike/tenniel.jpg).
Ukoliko je slika na istom serveru na kojem je i web stranica može se koristiti i jedan i drugi način. Ako je slika na nekom drugom serveru tada se mora upotrijebiti apsolutni put.

Kod apsolutnog puta je :
http://     oznaka protokola (hypertext transfer protocol)
www.adsoglasi.com     naziv servera na kom je slika
/html/html_prirucnik/osnove/osnove_slike/nature.jpg     je put do fajla (slike)
vidi stranicu     vidi code ---------> primjer relativnog puta do fajla
vidi stranicu     vidi code ---------> primjer apsolutnog puta do fajla

5.2. Širina i visina slike (img width i height atribut)

Širinu slike određuje WIDTH atribut , a visinu HEIGHT.
<img src="slika.jpg" width="203" height="153">
Vrijednosti 203 i 153 jesu pixeli (px). Večina browsera automatski određuje širinu i visinu slike pa ove atribute nije potrebno pisati. No sigurnosti radi i da bi browser brže učitao sliku dobro je da ovo uvijek napišemo. Eh, još samo da znamo koja je stvarna veličina slike...Rješenje leži u dobrom HTML editoru texta . Naručite ga !!! On naime automatski izračunava širinu i visinu slike i ubacuje ju unutar našeg HTML dokumenta. Bluefish za Windowse ne postoji, nego radi pod Linuxom. Ali zato za Windowse postoji hrpa drugih odličnih editora s ovakvom mogućnosti koje možete naručiti kod nas. Ili pak naručite LINUX jer s njime dobivate Bluefish i još mnogo, mnogo drugih odličnih alata za web majstore.
Pomoću Bluefish-a sam ubacio i ovu sliku u slijedećem primjeru. Morate priznati da izgleda jakooooo dobro :)
vidi stranicu     vidi code

Udebljajmo našu mršavicu tako da povećamo širinu i visinu slike sa originalnih
<img src="../../slike/laurie04_01_01.jpg" width="268" height="400"> na
<img src="../../slike/laurie04_01_01.jpg" width="800" height="600">
vidi stranicu     vidi code

Jedan trik: Pogledajte kako možete razvlačiti ovu malu crvenu točkicu ( )
vidi stranicu

Vjerojatno ste primjetili da se visina i širina slike može osim u pixelima izražavati i u postocima širine i visine prozora vašeg browsera.

5.3. Okvir oko slike (border atribut)

Slika se uokviruje pomoću BORDER atributa.
<img src="./primjeri_slike/etoile1.GIF" width="110" height="105" border="5">
gdje je 5 veličina debljine okvira u pixelima.
vidi stranicu     vidi code

5.4. Poravnanje

Sliku možete poravnati u odnosu na text koji ju okružuje koristeći se ALIGN atributom npr.
<img src="../../slike/etoile1.GIF" align="bottom"> i može biti :

- default <img src="../../slike/etoile1.GIF" align=" ">
Poravnava sliku koristeći se default postavkama browsera. Isto kao baseline.
vidi stranicu     vidi code

- right <img src="../../slike/etoile1.GIF" align="right">
Poravnava sliku uz desni rub i omotoava text oko slike.
vidi stranicu     vidi code

Omotavanje nije baš najljepše ispalo pa ćemo i text poravnati udesno.
vidi stranicu     vidi code

- left <img src="../../slike/etoile1.GIF" align="left">
Poravnava sliku uz lijevi rub i omotava text oko slike.
vidi stranicu     vidi code

Da bi skočili ispod slike upotrijebimo <br clear ="all">
vidi stranicu     vidi code

Ako upotrebimo samo <br> onda ćemo samo skočiti u novi red ali i ne ispod slike.
vidi stranicu     vidi code

- top <img src="../../slike/etoile1.GIF" align="top">
Poravnava gornji rub slike sa vrhom texta. Pri tome ne dolazi do omotavanja texta oko slike.
vidi stranicu     vidi code

- texttop <img src="../../slike/etoile1.GIF" align="texttop">
Poravnava gornji rub slike sa vrhom texta koji ima najveću visinu. Pri tome ne dolazi do omotavanja texta oko slike. Kod Mozilla browsera to ne radi tako.
vidi stranicu     vidi code

- middle <img src="../../slike/etoile1.GIF" align="middle">
Ovo kod nekih browsera poravnava sredinu slike s sredinom texta, a kod nekih sredinu slike s dnom texta. Pri tome ne dolazi do omotavanja texta oko slike.
vidi stranicu     vidi code

- absmiddle <img src="../../slike/etoile1.GIF" align="absmiddle">
Absmiddle radi ono što večina ljudi očekuje od middle. On poravnava sredinu slike sa sredinom texta. Pri tome ne dolazi do omotavanja texta oko slike. Ovo kod Mozille ne radi tako.
vidi stranicu     vidi code

- bottom <img src="../../slike/etoile1.GIF" align="bottom">
Poravnava donji rub slike s dnom texta. Pri tome ne dolazi do omotavanja texta oko slike. Kod nekih starijih browsera bottom označava najnižu liniju texta koja je ispod baseline linije. Vidi sliku
vidi stranicu     vidi code

- baseline <img src="../../slike/etoile1.GIF" align="baseline">
Kod večine browsera baseline radi isto što i bottom. Pri tome ne dolazi do omotavanja texta oko slike.
vidi stranicu     vidi code

- absbottom <img src="../../slike/etoile1.GIF" align="absbottom">
Ovo poravnava dno slike sa apsolutnim dnom texta (npr y i j znakovi imaju veće dno nego npr i ili u). Pri tome ne dolazi do omotavanja texta oko slike.
vidi stranicu     vidi code

- center <img src="../../slike/etoile1.GIF" align="center">
Poravnava sredinu (simetralu) slike sa dnom (baseline) texta . Pri tome ne dolazi do omotavanja texta oko slike.
vidi stranicu     vidi code

5.5. Vertikalni i horizontalni razmak

Pri omatanju texta oko slike često puta je korisno upotrijebiti VSPACE i HSPACE atribute. Omogućavaju nam da omotani text bude odmaknut od slike.
<img src="../../slike/alignbox.gif" width="99" height="99" vspace="20" hspace="50" align="left">
vidi stranicu     vidi code -primjer bez razmicanja texta od slike vspace=" " hspace=" "
vidi stranicu     vidi code -primjer sa razmicanjem texta od slike vspace="10" hspace="100"

Uočite kako se ne mogu koristiti postoci nego samo pixeli !!!

Pogledajte naredne primjere !!!
vidi stranicu     vidi code -- jedan dobar lijevi primjer
vidi stranicu     vidi code -- jedan dobar desni primjer

5.6. Alternativni text

Ukoliko slika iz bilo kojeg razloga ne može biti prikazana u browseru može umjesto nje biti prikazan neki text. To se postiže ALT atributom.
<img src="slika.gif" alt="SLIČICA" >
vidi stranicu     vidi code

5.7. Posebni efekti

Navest ćemo samo dva posebna efekta koja nisu ništa više od onoga što ste do sada naučili.

Umjesto obične slike možete ubaciti animiranu tzv. animated gif pa će to izgledati otprilike ovako . A ovdje vidi code !

Druga fora je korištenje prozirnih slika kako bi se ostvarili razmaci između texta. U tu svrhu koristi se prozirna slika 1x1 pixel koja se zove pixel.gif. Da bi ste ju mogli skinuti malo smo ju povećali i uokvirili no ona je u stvarnosti prozirni pravokutnik 1x1 pixel. Skinite ju !!
Upotrijebit ćemo ju tako da manipuliramo vertikalnim i horizontalnim razmakom povećavajući i smanjujući prozirni pravokutnik na slijedeći način
<img src="../slike/pixel.gif" width="1" height="1" vspace="10" hspace="40">
vidi stranicu     vidi code

Sada kada znate kako upotrijebiti slike vjerojatno ćete poželjeti neke od njih. Mi vam nudimo cijelu kolekciju statičnih i animiranih sličica na našem CD-u.
Naručite ga !