Slike

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 :


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.
-------------------------------------------------------------

  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 izgOvde uvek leda mozetepise onovideti odmah sa ovsto vi upiseteikao parametar alt= atributa, a taj tekst moze biti i duzi, ili kraci. Sve onako, kako se vama svidi.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 grešno 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.


  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.
    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...

Radovanovic Dragan