Slika

Za ubacivanje slika u HTML stranicu koristi se tag <IMG>. Ovaj tag nema zatvarajući tag. Obavezan atribut IMG taga je SRC koji definiše odakle brauyer da uzme sliku. Evo osnovnog kod-a za slike:

<body> <img src="slika.jpg"> </body>

A rezultat je:

slika 1

Pre nego krenemo na sledeće atribute da objasnimo detaljnije o pisanju putanja do slika da bi ih brauzer nalazio:

Putanja	Objašnjenje
SRC="slika.gif"	Slika je u istom folderu u kome je i HTML dokument koji je poziva.
SRC="images/slika.gif"	Slika je u folderu koji je unutar foldera u kome je HTML dokument koji je poziva. Koliko unutra ispod? U našem slučaju jedan jer imamo jednu kosu crtu.
SRC="../slika.gif"	Slika je u folderu jednom izvan u kome se nalazi folder koji sadrži HTML dokument koji je poziva.
SRC="../../slika.gif"	Slika je izvan dva foldera.
SRC="../images/slika.gif"	Slika je jedan folder izvan, pa jedan unutar u odnosu na HTML dokument.
SRC="../../../other/images/slika.gif"	Slika je tri foldera izvan, pa u dva foldera unutra u odnosu na HTML dokument koji poziva sliku

Obratite pažnju da uvek se pišu dve tačke a ne tri ili četri, itd. U tabelama su objašnjene relativne putanje. Medjutim putanju slike (ali i bilo kog fajla) možete da definišete i korišćenjem kompletne adrese gde se nalazi. Na primer http://www.nekisajt.com/skladiste/slike/pozadina.gif. I još nešto oko pisanja imena fajlova ili slika. Na primer imate na kućnom računaru windows i na njemu napravite sajt sa slikama. Prebacite sve to na host i primetite da vam slike ne rade. Razlog tome je da je host na unix / linux. Windows ne razlikuje mala i velika slova u nazivima fajlova, dok unix / linux razlikuje. Zato uvek pišite nazive fajlova malim slovima i nikad neće doći do greške. Takodje u nazivu fajlova ne koristite razmaknicu, već za razdvajanje reči u nazivu koristite donju crtu ili znak minus.

Ako napišemo IMG tag samo sa obaveznim SRC atributom brauzeru će trebati dodatno vreme pri otvaranju stranice kako bi definisao širinu i visinu slike. Da bi smo skratili vreme poželjno jedefinisati atributima širinu i visinu slike u pikselima. Širina se definiše WIDTH a visina HEIGHT atributom. Evo primera:

<body> <img src="pozadina.gif" width=200 height=100> </body>

Ovde treba napomenuti da mi možemo definisati visinu i širinu slike koja će se prikazati kako nam je volja nezavisno od stvarne širine i visine slike. Drugim rečima možemo da je skupljamo, ili širimo i po visini i po širini. Medjutim treba napomenuti da je mi na taj način ne smanjujemo u smislu bajtova. Znači bez obzira koliko je vizuelno smanjimo brauzer da bi je prikazao mora da isčita celu veličinu slike.

Može se desiti nekad da sliku slučajno izbrišemo, ili brauzer posetioca ne čita slike jer je on tako podesio, pa onda na mestu gde se treba pojaviti slika stoji samo prazan oivičen prostor. Da bi takav posetilac znao koja slika tu treba da stoji onda možemo u tom prostoru namenjen slici ispisati tekst koji imenuje sliku ili pak ispisuje neki kraći tekst objašnjenja. Medjutim ako je ta slika koja se ne vidi u stvarim link, onda je itekako bitno da ljudi znaju našta klikću ukoliko se slika ne pojavi iz raznoraznih razloga. U tu svrku koristi se tag ALT. Na primer ajde da stavimo sliku koja ne postoji:

<body> <img src="grad-nis.gif" width=200 height=100 alt="Grad Nis"> </body>

slika 2

Takodje možete i oivičavati sliku. Evo primer sa oivičenom slikom, ali i sa umanjenjem slike:

<body> <img src="pozadina.gif" width=200 height=100 alt="Slika pozadine" border=10> </body>

slika 3

Ovde vidimo da pomoću atributa BORDER se iscrtava okvir slike neposredno po obodu slike. Možemo napraviti da se prostor oko slike koji je nedodirljiv na rastojanju od slike kojeg mi definišemo u pikselima. Za tu shvrhu se koriste atributi Hspace i Vspace. Evo primera:

<body> <img src="pozadina.gif" width=200 height=100 alt="Slika pozadine" border=1 Hspace="30" Vspace="10">hhhhhh </body>

slika 4

Primećujete kako je slika pomerena za 30 piksela od vertikalne ivice, i 10 piksela od horizontalne sa svih strana kada uporedjujemo sa slikom iz recimo prvog primera.

E sad možemo pokazati kako se slika može umetati unutar teksta. Za tu shvrhu se koristi atribut ALIGN pa da vidimo:

<body> <BLOCKQUOTE> <p align="justify"> Ovde treba napomenuti da mi možemo definisati visinu i širinu slike koja će se prikazati kako nam je volja nezavisno od stvarne širine i visine slike. Drugim rečima možemo da je skupljamo, ili širimo i po visini i po širini. <img src="pozadina.gif" width=171 height=90 alt="Slika pozadine" border=1 Hspace="30" Vspace="10" align=left> Medjutim treba napomenuti da mi na taj način ne smanjujemo u smislu bajtova. Znači bez obzira koliko je vizuelno smanjimo brauzer da bi je prikazao mora da isčita celu veličinu slike. </p> <p align="justify"> Ovde treba napomenuti da mi možemo definisati visinu i širinu slike koja će se prikazati kako nam je volja nezavisno od stvarne širine i visine slike. Drugim rečima možemo da je skupljamo, ili širimo i po visini i po širini. <img src="pozadina.gif" width=100 height=50 alt="Slika pozadine" border=1 Hspace="30" Vspace="10" align=right> Medjutim treba napomenuti da mi na taj način ne smanjujemo u smislu bajtova. Znači bez obzira koliko je vizuelno smanjimo brauzer da bi je prikazao mora da isčita celu veličinu slike. </p> </BLOCKQUOTE> </body>

slika 4

Vidite da sa malo HTML koda možemo napraviti vizuelno mnogo dobre tekst stvari. Na primer mnogi će reći da znaju HTML. I oni bi mogli napraviti efekte teksta i slika iz prethodnog primera ali bi večina koristila tabele. Tako da bi na kraju više bilo teksta HTML koda nego samog efektivnog teksta kojeg želimo da vide posetioci. E sad da je samo jedna strana u pitanju nije bitno ali zamislite sajt sa 100 HTML strana i u svakoj 50% i više viška koda. Znači kad se dobro poznaje HTML to doprinosi u mnogome uštedi resursa, ali što je najbitnije i vreme učitavanja stranica.