Neverovatno da ste vec stigli i do ubacivanja fotosa i ostale i grafike u vase radove. A, ako se secate,
pre par sati niste znali nista o HTML-u. No, kad je vec tako onda da znate da se i slike
ubacuju sasvim jednostavno, kao i tekst. Dakle, izmedju onih vrhova tag zagrada. Ali :
A sada, uzmite desnim dlanom svoj levi dlan, pa stisnite i protresite malo, kako bi sami
sebi cestitali na upravo savladanim osnovama smestanja neke slike ili grafike u vasu
buducu internet-prezentaciju. Dakle, ovaj gore tag upisete, ako hocete, i u sred neke
reci, i slika ce se smestiti izmedju dva slova, gde ste i ugnezdili njen tag. Kako to izg
Bitmapiranim slikama se nazivaju one grafike kod kojih su pojedini delovi
povrsine aktivni na dodir kursora i predstavljaju linkove na neku adresu. Dobijaju se
posebnom obradom u grafickim programima koji su namenjeni toj vrsti obrade, dok pojedini
HTML editori, poput Front Page-a sadrze i tu funkciju. Uglavnom, kad u takvom programu kliknete
na sliku za obradu da se markira u onaj markacioni fokus okvir, onda uobicajenim alatkama za
crtanje kruga, kvadrata ili nepravilnih linija (kod Front Page-a se te alatke ukazu pri svakom markiranju
na neku grafiku, ispod nje) oznacite deo slike koji zelite uciniti aktivnim. Tada taj naznaceni deo
predje u markirano stanje, pa je onda samo potrebno kliknuti i na ikonu opcije za adresiranje, linkovanje i
u dobijenoj rubrici upisati URL (adresu). I tako po slici, koliko vam puta treba. Naravno, editor,
ili bitmap program vam odmah napravi i potreban HTML kod od svega toga i stvar je spremna za upotrebu.
Ako tu sliku zelite kao takvu koristiti i u nekoj drugoj prezentaciji, onda morate prebaciti i
taj HTML kod za njen bitmap, jer sama slika na sebi nema nikakvih izmena. Stvar je samo u HTML kodu,
koji browseru oznacava zone na toj slici, gde treba pokazati aktivno stanje. Pri tome se ismap=
atributom uglavnom odredjuje aktivnost nekog cgi-a na serveru, koji onda dostavlja izmenu,
a sa usemap= se odredjuju promene kod klijenta, dakle pomocu
vec ucitanih podataka sa kompom i browserom klijenta, bez daljeg posredstva servera. Radovanovic Dragan
Izbor slika je
neogranicena stvar, pa takve stvari zato ni ne mogu spadati pod standardne velicine
izbora (poput slova i tih velicina), te je odredjen nacin da ->->->
se za svaku sliku pravi poseban poziv
i pakovanje u <img> (image) tagu sa src= atributom, te se slika umece u sadrzaj kao
<img src="nekaslika.gif">
gde je parametar "nekaslika.gif", zapravo adresiranje na naslov pod kojim se ta
slika nalazi na "cekanju" za upotrebu, negde u sadrzaju vaseg web paketa
dokumenata.
------------------------------------------------------------
Medjutim, isto tako
svaka slika moze imati neku svoju proizvoljnu duzinu, pa je onda->
neophodno i to odrediti atributom width= te
<img
src="nekaslika.gif" width="129">
vec lici na savim solidnu kolicinu podataka o slici, gde je parametar
"126" zapravo broj u pikselima (tackama) kojima se inace mere ti podatci na PC
monitorima ili TV ekranima.
-------------------------------------------------------------
Naravno, sada smo vec
prinudjeni da naznacimo i visinu slike, pa se to ->->->->
odredjuje height=
atributom, nakon cega je u
<img
src="nekaslika.gif" width="129"
height="30">
zaokruzena kolicina svih neophodnih detalja za bilo koju sliku koja ulazi na to mesto.
Bez atributa za duzinu i visinu browseri prikazuju sliku u velicini u kojoj je i napravljena.
--------------------------------------------------------------
I, posto su se autori
HTML-a vec dovoljno potrudili oko smisljanja ovih tag odredbi, normalno je da su svemu
pridodali i malo luksuza, te->->
na kraju balade o slikama imamo i alt= atribut, za smestanje teksta koji ce se ukazati kada neki
klijent dotakne tu vasu sliku kursorom, te
<img src="nekaslika.gif" width="129" height="30" alt="Krasna slika">
predstavlja zaista kompletnu verziju taga o slici, gde na kraju stoji kao parametar alt= atributa i tekst koji zelimo da se ukaze pri dodiru slike
kursorom misha. Bez njega, nece biti ni teksta.
-------------------------------------------------------------
leda mozete
videti odmah sa ov
i
m
blinkajucim zastavama koje su, naravno, slikice. A, kako reaguje browser ako
ih redom dodirujete kursorom misha, proverite odmah ovde i sami.
Medjutim, ovde gore se radi o malim
slikicama, koje su visinom odprilike jednake visini okolnih slova, a ako ubacite neku
vecu sliku, ona automatski preuzima dominatnu ulogu za odredjivanje visine u tom redu, pa
ce se i slova odmaci od predhodno pisanog, gornjeg reda, zajedno u liniji donje ivice slike. Time se
dobijaju nezeljene neestetske praznine, a jedan od nacina izbegavanja toga je obradjen u
predavanju o tabelama (Tables).
A sada se stiglo do jednog bitnog detalja, a to je upravo
"uzimanje" neke slike ili bilo kakvog drugog podatka za prikaz u browser-u.
Naime, sve sto vi vidite u nekome web-u, to su sve samo kopije. Kada vi dobijate nesto sa
nekog servera, on vam ne isporucuje onaj original koji se na njemu nalazi, nego pravi
kopije svega toga i to vam dostavlja na uvid i raspolaganje. Isto to radi i vas PC sa bilo
cime na vasem hard disku, CD-u i ostalome. Kada vi otkucate slovo A od
nekoga fonta, masina vam samo napravi kopiju od onog jednog jedinog originala koji vam
stoji u font arhivi, pa su tako i sva ova A koja vidite u ovome tekstu
samo ponovljena kopija onog jednog jedinog originala koji vam je negde na hardu. Vas
browser je tamo "zahvatio" onoliko puta koliko mu je to ovde bilo ovim sadrzajem
naredjeno. Tacno tako se desava i sa ovim slikama gore. Moj provider-server vam je isporucio
jednu kopiju koja se sada nalazi kao vas "original" negde na vasem hardu (obicno
u Natscape/Cache ili Windows/Internet Temporari direktoriju) i browser je sada koristi za proizvodnju
svojih kopija. Dakle, ovaj web sadrzi u svome paketu samo onu jednu blinkajucu
zastavicu, ali se njena kopija moze koristiti nebrojeno puta bilo gde u sadrzaju. Znaci,
ne morate u sadrzaju prezentacije imati vise od jednog primerka neke grafike,
jer svakim adresiranjem na nju u src= atributu vi dobijate njenih
kopija koliko vam treba unutar web prikaza. Isto tako mozete tu upisati kao parametar i
neku apsolutnu (URL) adresu, pa tako "dovuci" u svoj web i sliku sa tudje
prezentacije, naravno, ako znate njenu tacnu adresu na tom serveru, a koji moze biti bilo
gde.
A sada, o vrsti grafika za web. Naime, tu se uglavnom koriste dva foto-graficka formata
koje browseri mogu da koriste, a to su GIF (Graphic
Interchange Format) i JPEG (Joint
Photographic Experts Group). Prvog
karakterise prikazivanje u spektru od 256 boja, dok drugi podrzava prikaz do 16,7 miliona
boja. Medjutim, treba odmah imati u vidu da vecina internet grafika ni ne sadrzi vise od
desetak boja, pa je njihova primena stvar vaseg izbora. U profi-praksi JPEG se koristi
kada su zaista u pitanju neki bitni fotosi (posteri, razglednice i sl.), a GIF za sve
ostalo, jer se realizuje u svim browserima, dok sa JPEG-om, kao novijim resenjem, to nije
slucaj. Osim toga, vrlo cesto primenjivan efekat transparentnosti (providnosti) neke boje
moguc je samo sa GIF98a i GIF99 formatom, dok sa JPEG-om to nije izvodljivo. Uz sve ovo,
treba uvek imati u vidu da foto-grafike zahtevaju dosta vremena za prenos podataka i
njihovo ucitavanje, pa sa brojem i velicinom tih stvari u nekom prikazu treba uvek biti
racionalan, kako klijent nebi izgubio strpljenje i prekinuo prijem. Transparentnost kod
GIF-a se odredjuje tako sto se kod svih programa za grafiku ili foto koristi funkcija za
memorisanje Export, a ne Save ili Save As, pa se u procesu exporta odabere gif kao format za memorisanje,
nakon cega se dobija i ponuda u kojoj treba markirati mishem ili pipetom boju za koju hocete da bude providna u browserskom
prikazivanju. I, na kraju ovoga, bitna stvar: nikada ne pravite konverziju iz GIF-a u
JPEG, ili obratno, jer su to uvek vec konvertovani fajlovi iz nekog ranijeg formata
(TIF,BMP, APS i slicno), pa se dodatnom konverzijom gubi u svim oblicima grafickog kvaliteta.
Dodatno ovome imate izvedbu i GIF formata sa tzv. preplitanjem (Interlaced
GIF) gde se slika prikazuje sa preskokom od svojih sedam linija za prikaz, pa se
stice dojam da se ona pojavljuje iz nejasnog bledila do potpune jasnoce. Izradu takvog
GIF-a mozete obaviti sa Adobe Photo Shop ili Paint Shop Pro programima, ali treba znati da
se takvi GIF-ovi ne smeju koristiti i za neki background (pozadina) u web-u. Slicnu stvar
je uveo i JPEG kao Progressive JPEG na inicijativu Netscape-a, ali to
zahteva i posebne plugin alate za izradu, koji za sada jos nisu siroko dostupni.
Onda, na kraju svega dolaze i animirane slike, a koje su zapravo niz
od vise njih staticnih, pa se njihovim brzim prelistavanjem, na istom mestu prikaza, stice dojam
odredjenih pokreta. Njih mozete uzeti sa Interneta u svim mogucim namenama i idejama. Svaka
ta animacija se sasvim jednostavno uzima sa nekog web-a, istim postupkom kao i neka staticna
slika (vidi knjigu Internet). Animaciju instalirate u
svoju prezentaciju kao i svaku staticnu sliku. Jedino treba znati i da HTML editori sa svojom
funkcijom Import Image ponekad od animacije uvuku samo jednu sliku, pa stvar onda "ne
radi". U tom slucaju otvorite sadrzaj vaseg web-a sa Windows Explorerom (ne Internet
Explorer) pa tu sliku obrisite, a umesto nje uvucite (sa Copy i Paste) pomocu
Win-Explorera ponovo onu istu animaciju na to greno mesto i sve ce biti u redu.
Ponesto od izrade animacija (ako vas vec zanima) imate kod chika Milojka u knjizi Programi,
pod temom Corel Draw 8. Na kraju ovoga, imate i pokloncic u vidu foto programa koji
stane na samo jednu flopy-disketu, a izvanredan je po pitanju preciznosti isecanja
delova slike i ostalih osnovnih foto-retush funkcija. Naci cete ga u knjizi Pokloni pod nazivom iPhoto Plus.
No, vratimo se koristenju <img>
taga, jer su tu ostali neobradjeni jos neki atributi. Kao prvo tu je vec
poznati align= pomocu kojeg sa parametrima left
| right | top | middle | bottom
odredjujemo mesto u prostoru gde ce se slika smestiti (pazite, sada tu nije vise center nego middle parametar). Ovaj
atribut je najbolje smestati kao prvi po redu unutar <img>
taga, ako ga vec koristite, iako je redosled atributa u bilo kom tagu nevazan posto ih
browseri uvazavaju i realizuju bez obzira na redosled. Medjutim, sa upisanim pravilnim
redosledom postupaka stice se lepsi i razumljiviji dojam pri tekstualnom citanju i proveri
HTML-a. Nakon toga imamo i border= atribut za odredjivanje
debljine okvira oko slike. Sa parametrom "0" okvir se eliminise, cak ako je i nametnut kao posledica
aktivnog linkovanja slike. Onda hspace= i vspace= atributi za odredjivanje velicine praznog prostora oko
slike po horizontali i vertikali. I ovde se kao parametar upisuje brojna velicina.
Atribute ismap= i usemap= cemo
sada malo odloziti, posto se koriste pri upotrebi bitmapiranih slika, a to se
objasnjava upravo ovde ispod.
Da bi "rucno" intervenisali u nekoj bitmapi, potrebno je znati znacenja
atributa unutar tog HTML koda. Kao merna osnova sluzi gornji desni ugao slike, tacnije prva tacka, sam vrh slike,
a od kojeg se onda daju rastojanja u broju piksela. Prvi broj se uvek odnosi na meru po gornjoj ivici slike na desno, a drugi
broj na meru po desnoj ivici slike na dole. Tako pravougaona bitmapa poput rect=10,15,110,35 "govori"
browseru sa prva dva broja da je gornji desni ugao bitmap pravougaonika udaljen 10 pixela u desno i 15 pixela na dole od gornjeg levog ugla slike.
Sledeca dva broja oznacavaju vrh donjeg desnog ugla te pravougaone bitmap povrsine, po istom pravilu odstojanja od gornjeg levog ugla slike. I zaista,
time je sve odredjeno sasvim precizno. Povucite iz tih tacaka horizontalne i vertikalne linije i dobili ste taj
pravougaoni aktivni prostor i na uvid. Za kruznu bitmapu circle=150,220,25 prva dva broja daju mesto gde se nalazi tacka centra kruga, a
treci broj je mera za poluprecnik kruga koji se iz te tacke pruza na sve strane do ivice kruga. Za mnogougaonik poly=
navode se preseci odstojanja, za svaki vrh, ili ugao, tog mnogougaonika, Znaci redom, po dve navedene mere odstojanja za svaki ugao, onako kako ide linija prelamanja.
Postoji i vrlo retko primenjiv atribut default koji nema koordinata, jer se njime onda odredjuje da sav ostatak slike,
koji je bez bitmapiranih delova, takodje bude aktivan link za neku adresu. Inace, svaka kompjuterska grafika, bez obzira na ono
sto je kod nje vidljivo ili nevidljivo, je uvek pravougaonog oblika, poput svake standardne fotografije na foto.papiru, pa je ta
zakonitost oblika uzeta za sasvim pouzdano odredjivanje bitmap koordinata.
I, na kraju, da naucite jos jednu majstoriju, a to je upotreba lowsrc= atributa u <img> tagu. Njime se omogucava smestanje dve slike na istom mestu, s tim sto
browser prvo prikaze sliku koju pozivate sa lowsrc=, pa tek kada ucita i sve ostale podatke od web-a, onda je zameni sa onom
koju pozivate i sa src= , a koja
onda ostaje na dalje kao stalna. Verovatno ste negde vec primetili tu primenu, ako surfate
sa odgovarajucim browserom, jer lowsrc= ne podrzavaju svi citaci,
pa tog efekta tada jednostavno nema, nego samo
ono sto se poziva sa src=
atributom. Inace, oba ta pozivna atributa, kada se koriste idu zajedno, jedan za drugim, u isti <img> tag.
Toliko o slikama...