1. Umetanje slike u HTML i put do fajla
Umetanje slike izvodi se sa tagom IMG: <img src="slika.jpg"> .Atribut SRC određuje put do fajla koji može biti :
relativni ( .../slike/nature.jpg ) ili
apsolutni ( http://www.foo.com/html/osnove/slike/nature.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.foo.com naziv servera na kom je slika
/html/osnove/slike/nature.jpg je put do fajla (slike)
Primjer relativnog puta do fajla: vidi code » vidi stranicu
Primjer apsolutnog puta do fajla: vidi code » vidi stranicu
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 ova dva atributa uvijek napišemo. Eh, još samo da znamo koja je stvarna veličina slike...
Rješenje leži u dobrom HTML editoru texta, koji automatski izračunava širinu i visinu slike i ubacuje ju unutar našeg HTML dokumenta.
Primjer sa width i height: vidi code » vidi stranicu
Sliku možemo i povećati pomoću ova dva atributa. Pri tome treba paziti da ju ne povećamo previše jer će u tom slučaju slika biti mutna.
Povećajmo našeg geparda: vidi code » vidi stranicu
Jedan trik: Pogledajte kako možete razvlačiti ovu malu crvenu točkicu (
)
Primjer: vidi code » 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. Ako mijenjamo dimenzije prozora onda se sukladno tomu mijenjaju i dimenzije slike koje su izražene u postocima.3. Okvir oko slike (border atribut)
Slika se uokviruje pomoću BORDER atributa.
<img src=".../slike/marioicon.png" width="110" height="105" border="5">
gdje je 5 veličina debljine okvira u pixelima.
Primjer: vidi code » vidi stranicu
4. Poravnanje teksta uz sliku (align atribut)
Sliku možete poravnati u odnosu na text koji ju okružuje koristeći se ALIGN atributom, a vrijednost ALIGN atributa može biti:- prazan tj. default <img src=".../slike/alignbox.gif" align=" ">
Poravnava sliku koristeći se default postavkama browsera. Predefinirano (default) browser uzima sliku kao jedan znak (slovo) te ju stavlja u red.
Primjer: vidi code » vidi stranicu
- right <img src=".../slike/alignbox.gif" align="right">Poravnava sliku uz desni rub i omotoava text oko slike.
Primjer: vidi code » vidi stranicu
Omotavanje nije baš najljepše ispalo pa ćemo i text poravnati udesno.Primjer: vidi code » vidi stranicu
- left <img src=".../slike/alignbox.gif" align="left">Poravnava sliku uz lijevi rub i omotava text oko slike.
Primjer: vidi code » vidi stranicu
Da bi tekst skočio ispod slike upotrijebimo <br clear ="all">Primjer: vidi code » vidi stranicu
Ako upotrebimo samo <br> onda ćemo samo skočiti u novi red ali i ne ispod slike.Primjer: vidi code » vidi stranicu
- top <img src=".../slike/alignbox.gif" align="top">Poravnava gornji rub slike sa vrhom texta. Pri tome ne dolazi do omotavanja texta oko slike.
Primjer: vidi code » vidi stranicu
- texttop <img src=".../slike/alignbox.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 nekih browsera to ne radi tako.
Primjer: vidi code » vidi stranicu
- middle <img src=".../slike/alignbox.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.
Primjer: vidi code » vidi stranicu
- absmiddle <img src=".../slike/alignbox.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 nekih browsera ne radi tako.
Primjer: vidi code » vidi stranicu
- bottom <img src=".../slike/alignbox.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.
Primjer: vidi code » vidi stranicu
- baseline <img src=".../slike/alignbox.gif" align="baseline">Kod večine browsera baseline radi isto što i bottom. Pri tome ne dolazi do omotavanja texta oko slike.
Primjer: vidi code » vidi stranicu
- absbottom <img src=".../slike/alignbox.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.
Primjer: vidi code » vidi stranicu
- center <img src=".../slike/alignbox.gif" align="center">Poravnava sredinu (simetralu) slike sa dnom (baseline) texta . Pri tome ne dolazi do omotavanja texta oko slike.
Primjer: vidi code » vidi stranicu
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">
Bez razmicanja texta od slike vspace=" " hspace=" ": vidi code » vidi stranicu
Sa razmicanjem vspace="10" hspace="100": vidi code » vidi stranicu
Pogledajte naredne primjere!Jedan dobar lijevi primjer: vidi code » vidi stranicu
Jedan dobar desni primjer: vidi code » vidi stranicu
6. Alternativni text (alt atribut)
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" >
Primjer: vidi code » vidi stranicu
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.Pomalo smiješan primjer: vidi code » vidi stranicu
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">
Primjer: vidi code » vidi stranicu
I sada kad znate postaviti sliku na web stranicu pripazite kako to činite jer
ponekad slike mogu ispast nezgodne kao ova ovdje.