Upload
others
View
0
Download
0
Embed Size (px)
Citation preview
2
Svakodnevno, stotine miliona korisnika računara pose-
ćuje različite Web sajtove i stranice kako bi se informisali,
nešto novo naučili, pregledali svoje omiljene forume, neš-
to kupili i uradili još bezbroj drugih korisnih stvari.
Otvaranjem Internet pretraţivača i kucanjem adrese
otvorili ste ţeljeni Web sajt sa svim informativnim, multi-
medijalnim i drugim mogućnostima. Ili ste jednostavno u
potrazi za informacijom otvorili neki od mnogobrojnih
Web pretraţivača i dobili listu mesta koje vam mogu biti
interesantna.
Šta se tačno događa kada u svom Web pretraţivaču
ukucate neku Web adresu i dobijete sadrţaj sa nje?
Kako da sami napravite svoj Web koji će predstavljati vašu
školu, vas lično ili neko vaše interesovanje? U ovom serija-
lu ćete, nadam se, naći odgovor na ova pitanja i moći da
krenete u realizaciju svog Web sajta.
Kako funkcioniše Web
Najjednostavnije rečeno, Web predstavlja veliki broj
računara koji su međusobno povezani i koriste standardi-
zovane načine za komunikaciju i predstavljanje informaci-
ja.
Posledica ove jednostavne formulacija je da svi ljudi
sveta dobijaju moć brze i jednostavne komunikacije i raz-
mene informacija na način do sada neviđen u ljudskoj
istoriji.
Broj povezanih računara je ogroman, a trenutno posto-
ji preko 87 miliona različitih aktivnih javnih Web sajtova
koji su konstantno u mreţi. Svaki od ovih sajtova ima od
nekoliko do nekoliko hiljada ili više stranica informacija.
Pre nastanka globalnog Interneta kakvog ga poznaje-
mo danas, u svetu je postojalo puno nezavisnih, ponegde i
međusobno povezanih grupa umreţenih računara, prven-
stveno u školskim, istraţivačkim i drţavnim institucijama.
Za potrebe Američkog ministarstva odbrane kreiran je
ARPANET koji se smatra pretečom Interneta jer je postavio
osnovne standarde za povezivanje i komunikaciju između
ovako umreţenih računara. 29. oktobra 1969. godine su
povezana prva dva čvorišta, a nešto kasnije 5. decembra
iste godine su dodata još dva.
Detaljnije o istoriji i nastanku Interneta moţete pročitati
na Web lokaciji http://www.let.leidenuniv.nl/history/ivh/
chap2.htm
Standardni protokol pomoću kojeg je moguće priči i
pregledati sadrţaj bilo kog Web sajta je dizajniran 1989.
godine u istraţivačkoj instituciji CERN u Ţenevi
(www.cern.ch). Ovaj protokol pod nazivom Hypertext
Transfer protocol ili skraćeno HTTP je postavio kamen
temeljac za dalji eksplozivni razvoj javnog Interneta
(http://info.cern.ch/) . Sigurno ste primetili da svaka Inter-
net adresa i počinje sa upravo ovim prefiksom – http://
IP adrese
IP je skraćenica od Internet Protocol i predstavlja način
jedinstvene identifikacije svakog računara u bilo kojoj mre-
ţi uključujući i Internet. Veoma slično običnoj poštanskoj
adresi, IP adresa se sastoji od četiri broja od kojih svaki
moţe biti u opsegu od 0 do 255.
U stvari, u pitanju je jedan 32-bitni broj podeljen na
četiri dela koji su međusobno razdvojeni tačkama. Na pri-
mer validna IP adresa računara bi mogla biti 192.168.1.10.
Pokušajte da saznate IP adresu vašeg računara. Dovolj-
no je da je vaš računar povezan u lokalnu mreţu ili na
Internet da bi ovo uradili. Kliknite na Start meni i potom na
stavku Run. O otvorenom dijalogu otkucajte cmd i kliknite
na dugme OK. Na ovaj način ste otvorili komandni prozor.
U njemu otkucajte IPCONFIG i pritisnite Enter taster na
tastaturi. Na ekranu je prikazana konfiguracija mreţnog
adaptera (ili više njih ako postoje u računaru) , između
ostalog i linija IP Address kao što je prikazano na slici:
Izrada Web stranica (1)
Uvod i osnovni pojmovi
3
Elementarna kombinatorika pokazuje sledeće:
32 bita, gde svaki od njih moţe imati stanje 0 ili 1, daje
232 kombinacije, odnosno tačno 4,294,967,296 različitih
kombinacija. Preko 4 milijarde jedinstvenih adresa izgleda
više nego dovoljno u ovom momentu. Međutim nije tako,
jer postoje takozvane klase koje značajno ograničavaju
raspoloţiv opseg.
Više o IP klasama i njihovom značenju moţete pogle-
dati na lokaciji http://www.howstuffworks.com/
question549.htm .
Sve do sada rečeno vaţi za verziju IP protokola pod
nazivom IPv4. Od nedavno je uvedena nova verzija IPv6
koja umesto sadašnjih 32 bita daje čak 128 bitova odnos-
no 2128 raspoloţivih adresa. Ovo je stvarno veliki broj, (broj
veći od broja 3 iza koga ide 38 nula), koji se predstavlja sa
8 grupa 16 bitnih brojeva koji su prikazani u heksadeci-
malnom formatu.
Microsoft Windows Vista podrţava IPv6 protokol i na
sledećoj slici je prikazan dijalog za njegovu konfiguraciju.
Više o IPv6 protokolu moţete pročitati na lokaciji http://
www.microsoft.com/technet/network/ipv6/default.mspx
Do sada smo videli da svaki računar povezan u Internet
mreţu ima svoju jedinstvenu IP adresu. Međutim, kada
ţelimo da otvorimo neki Web sajt, nikada u adresnoj liniji
Internet pretraţivača ne unosimo IP adresu, već neki smis-
leni naziv.
Očigledno na Internetu mora postojati mehanizam koji
smislene nazive Web sajtova prevodi u njihove numeričke
stvarne IP adrese. Ovaj sistem predstavljaju DNS (Domain
Name System) serveri. DNS predstavlja distribuiranu listu
(direktorijum) svih Internet adresa i imena. Zahvaljujući
ovom servisu moţemo kucati na primer
http://www.microsoft.com, a on će ovo prevesti u pravu IP
adresu i preusmeriti nas na nju.
Napravimo mali eksperiment. Kako saznati numeričku
IP adresu Web sajta? Kao i u predhodnom primeru, kliknite
na dugme Start, potom na opciju Run, otkucajte cmd i
kliknite na dugme OK kako bi ponovo dobili komandni pro-
zor.
Ţelimo da utvrdimo IP adresu Web sajta
http://www.google.com
U komadnom prozoru ukucajte sledeće:
ping www.google.com
i pritisnite Enter taster na tastaturi. Sistemska naredba
ping "proziva" zadatu adresu i ispisuje statistike brzine
pristupa, ali i stvarnu IP adresu domena kao što je prikaza-
no na slici:
Sada znamo da je IP adresa domena www.google.com
zapravo 209.85.129.99
Otvorite internet pretraţivač i u adresnoj liniji otkucajte
http://209.85.129.99 i naravno otvoriće se početna strana
Google Internet pretraţivača.
Svakako, mnogo je lakše zapamtiti tekst google.com
nego brojeve 209.85.129.99.
4
Očigledno, DNS servis na Internetu ima veliki značaj i
nije ograničen samo na http protokol već vodi računa i o
elektronskoj pošti i drugim servisima.
Detaljnije informacija o DNS servisu moţete videti na
Internet lokaciji
http://en.wikipedia.org/wiki/Domain_Name_System
Rutiranje
Kada zatraţite određeni Web sajt, na njega ne odlazite
direktno već preko nekoliko DNS servera koji se međusob-
no "dogovaraju" i prave put (routing) od vašeg računara
do traţene IP adrese odnosno računara u Internet mreţi.
Ovaj put moţe u praksi angaţovati više čvorišta, što
zavisi od dosta faktora i trenutnog zauzeća globalne mre-
ţe. Interesantno je pogledati kojim putem se kreću podaci
kada na primer zahtevamo matičnu stranu Microsoft Web
sajta.
Početna lokacija je računar u Beogradu koji je preko
ADSL-a povezan na Internet. Krajnja tačka je server
Geografski prikaz je jednostavniji:
Web server
Web server je specijalizovani program koji opsluţuje
zahteve Web klijenata. Web server moţe biti lokalni i tada
je vidljiv samo u lokalnoj mreţi škole ili kompanije i tada se
ustanovljena mreţa zove Intranet – unutrašnji Internet.
Ako je računar gde se nalazi Web server javni – vidljiv
na globalnom Internetu, on mora da ima svoju javnu IP
adresu i da bude registrovan u ICANN organizaciji. ICANN
(Internet Corporation for Assigned Names and Numbers,
http://www.icann.org ) je neprofitabilna organizacija koja je
zaduţena za dodelu i koordinaciju javnih Internet domena.
Do 1998 godine ovu funkciju je imala organizacija InterNIC
(Internet Network Information Center).
Web server, kao što ćemo videti kasnije u ovom serijalu,
moţe imati jednostavnu ulogu isporučivanja fiksnog sadr-
ţaja (web stranice), ali i sloţenu aplikativnu ulogu kreiranja
i isporučivanja sloţenih web sadrţaja baziranih na podaci-
ma iz baza podataka, multimedijalnih materijala i ostalog.
Uz Windows XP operativni sistem se distribuira i Web
server koji je idealan za razvoj i testiranje Web sajtova. Ova
Microsoft verzija Web servera se zove Internet Informati-
on Server (skraćeno IIS) i veoma je zastuplje-
na na Internetu.
Kasnije će biti govora o ovom Web serveru,
njegovoj instalaciji i konfiguraciji.
U sledećem nastavku ovog serijala će
biti govora o jeziku HTML kao osnovnom jezi-
ku Weba, i njegovim ključnim elementima.
5
U ovom poglavlju ćemo se posvetiti načinu razmene
podataka između klijenta (Web pretraţivač) i Web servera
kao i osnovama HTML jezika.
Komunikacija
Kada u svom Web pretraţivaču otkucate adresu Web
sajta koga ţelite da pogledate, kao što smo videli u pred-
hodnom nastavku, vaš zahtev se preko DNS servisa usme-
rava na IP adresu računara gde se nalazi zahtevan Web
sajt ili strana. Terminološki ovo se naziva zahtevom (eng.
Request).
Kada sa pronađe zahtevana IP adresa računara ka njoj
se prosleđuje ovaj zahtev. Naredne akcije koje preduzima
Web server zavise od toga šta ste traţili: da li je zahtevana
statična ili dinamična Web strana, neki dokument ili na
primer multimedijalni sadrţaj. U najjednostavnijem sluča-
ju, kada je zahtevana statička Web stranica, web server na
vašu IP adresu (setite se da i vi imate jedinstvenu IP adre-
su kada ste povezani na Internet), prosleđuje traţenu
HTML stranu. Ovaj postupak se naziva odgovorom (eng.
Response).
Na sledećoj slici je prikazana request / response proce-
dura:
Na kraju vaš Web pretraţivač prikazuje uredno forma-
tiranu stranicu sa slikama, linkovima i ostalim elementima.
HTML
Ono što verovatno nije očigledno većini korisnika raču-
nara je da će se ova stranica na (skoro) isti način prikazati
bez obzira na operativni sistem, tip računara ili web pret-
raţivača koji koristite. Očigledno postoji standardizovani
način formatiranja i prikaza Web strana koji su svi usvojili.
HTML je standardizovan jezik koji se koristi na Web-u i
čija je namena opisivanja formata web stranice i njenih
elemenata. HTML je skraćenica od Hyper Text Markup Lan-
guage i njegovom specifikacijom upravlja konzorcijum
W3C (skraćenica od World Wide Web Consortium) čija je
matična strana na adresi http://www.w3.org .
Osim HTML jezika W3C je odgovoran za standardizaciju
i mnogih drugih Internet tehnologija.
Vaţno je napomenuti da HTML jezik ne sadrţi podatke,
već definiše način na koji se oni prikazuju. Na početku
predhodnog paragrafa sam napisao da će ista stranica
izgledati (skoro) isto u svakom web pretraţivaču. Tvrdnja
"skoro" u zagradi je zbog činjenice da nisu svi Web pretra-
ţivači u potpunom skladu sa HTML specifikacijom i što je
još češći slučaj, nisu ni sve Web strane saglasne sa specifi-
kacijom.
Sa sazrevanjem tehnologija, danas moţemo reći da su
svi vodeći web pretraţivači gotovo 100% saglasni sa HTML
specifikacijom, tako da obično krivica za nedosledan prikaz
pada na loše napisane web stranice.
Alat za početnike
Na trţištu postoji veliki broj aplikacija – alata za kreira-
nje web stranica, koji značajno olakšavaju kreiranje sta-
ndardnih elemenata, i automatski za vaš generišu potrebni
HTML kod. Međutim, ako zaista ţelimo da naučimo HTML
jezik, za početak je bolje koristiti najjednostavniji editor
teksta jer je HTML kôd očigledan i nije zaklonjen različitim
vizuelizacijama i čarobnjacima.
Kada savladamo HTML, preći ćemo i na ove moćne ala-
te, ali ćemo tada znati šta se događa "ispod haube".
U početku, za kreiranje i editovanje HTML strana ćemo
koristiti Notepad jer postoji u svakom Windows-u. Često i
iskusni kreatori web sajtova kao svoj osnovni izbor koriste
upravo Notepad ili neki sličan isto tako jednostavan editor.
Suština je da HTML strana predstavlja čist tekst bez
ikakvog binarnog sadrţaja, tako da praktično svaki manje
ili više sloţen editor teksta vrši posao.
Izrada Web stranica (2)
Web server i HTML
DNS servis
Web serverRačunar sa Web pretraživačem
Jedinstvena InternetIP adresa
Jedinstvena InternetIP adresa
Zahtev
(Request)
Odgovor
(Response)
6
Za početak nam ne treba ni Web server. U narednim
poglavljima ćemo se pozabaviti sa njime i načinom kako
se kreirani Web sajt publikuje, odnosno postavlja na Web
server. Web strane i kompletni sajt sa sadrţajime se moţe
nalaziti u nekom direktorijumu na vašem računaru, a pre-
gledaćemo ga otvaranjem početne ili bilo koje Web strane
jednostavnim duplim klikom na odgovarajuću datoteku sa
htm (ili html ekstenzijom).
Moja prva web strana
HTML jezik se sastoji od određenog skupa standardnih
oznaka (eng. tag) koje ćemo u ovom serijalu postepeno
upoznavati. Sve oznake se nalaze u okviru znakova veće i
manje (< i >) i mogu imati neke dodatne atribute. Na pri-
mer oznaka koja označava podebljani (eng. bold) tekst je
<b> i uvek treba da ide u paru sa oznakom za kraj podeb-
ljanog teksta </b>.
Kaţe se da oznaka za podebljani tekst ima početni i
završni deo - oznaku. Na primer:
Ovo je normalni tekst <b>a ovo je podebljani tekst.
</b>Ponovo normalni tekst.
Kada Web pretraţivač prikaţe gornji primer, tekst će izgle-
dati ovako:
Ovo je normalni tekst a ovo je podebljani tekst. Ponovo
normalni tekst.
Jasno, same oznake se ne prikazuju, već samo format
koji označavaju. HTML jezik nije teţak i na osnovnom
nivou se moţe veoma brzo naučiti.
Posle ohrabrenja, vreme je da napravimo našu prvu
Web (ili često nazvanu html) stranicu.
Negde na disku vašeg računara napravite direktorijum
pod nazivom Web gde ćemo snimati sve što budemo veţ-
bali.
Pokrenite Notepad editor – ako ne moţete da ga prona-
đete, kliknite na dugme Start, opciju Run i u otvorenom
dijalogu otkucajte Notepad i kliknite na dugme OK.
U otvorenom editoru otkucajte sledeći tekst:
<h1>Moja prva Web strana</h1>
<hr>
<b>Autor:</b>
Vaše ime i prezime
Kada ste završili kucanje u editoru izaberite meni File i
podmeni Save As...
Naredni koraci su jako bitno kako bi ispravno snimili dato-
teku:
u Save in: padajućoj listi izaberite direktorijum Web koji
smo kreirali na početku.
u File name: padajućoj listi ukucajte default.htm
u Save as type: padajućoj listi izaberite All Files
i konačno u Encoding: padajućoj listi izaberite Unicode
Kao što je prikazano na narednoj slici:
Zašto sve ovako treba uraditi?
Ime datoteke nije kritično, ali ekstenzija mora biti htm
ili html. Ukucali smo default.htm jer po nekom nepisanom
pravilu stranica sa ovim nazivom obično predstavlja počet-
nu stranu web sajta.
Za Snimi kao tip (eng. Save as type) treba izabrati
"All files" jer u suprotnom Notepad dodaje txt ekstenziju
pa bi ime fajla bilo pogrešno: default.htm.txt.
Encoding treba postaviti na Unicode čime smo ispravno
snimili sve naše latinične i/ili ćirilčne znakove.
Dobro zapamtite ova pravila jer ćemo ih koristiti u
narednim primerima.
Na kraju kliknite na dugme Save (snimi).
7
Sada ćemo pogledati kako ova strana izgleda u Web
pretraţivaču. Otvorite Windows Explorer, pronađite direk-
torijum Web i u njemu uradite dupli klik na default.htm.
Ako ste sve dobro uradili treba da dobijete sledeće (sa
svojim imenom i prezimenom naravno):
U ovom kratkom primeru smo upoznali još dve HTML
oznake.
Oznaka <h1> označava da tekst treba prikazati kao naslov
(heading) najveće veličine sve do zatvarajuće oznake
</h1>.
Po HTML specifikaciji postoji šest veličina naslova od
<h1> (najveći), do <h6> (najmanji) naslov. Pokušajte da
eksperimentišete sa različitim brojevima, ali vodite računa
da imate iste otvarajuće i zatvarajuće brojeve u oznaci.
Na primer <h2>Naslov</h1> je pogrešno, mada će
većina web pretraţivača ovo ispravno protumačiti – sveje-
dno dokument nije ispravno formatiran.
Druga oznaka koju smo koristili je <hr>. Ona nema
zatvarajući deo i označava horizontalnu liniju koja je
(u ovom slučaju) široka koliko i prozor web pretraţivača.
Ova oznaka ujedno pravi i novi red.
Paţljivi čitalac će primetiti jednu neobičnost.
U HTML kodu posle teksta "Autor:" se nalazi nov red pa
onda ime i prezime. Kada ovaj HTML kôd gledamo u web
pretraţivaču, nov red se ne prikazuje. Ime i prezime se ispi-
suju odmah posle "Autor:".
Objašnjenje je jednostavno. HTML specifikacija zahteva
eksplicitnu oznaku za novi red, ne uzimajući u obzir način
na koji je prelomljen tekst u kodu.
Oznaka koja predstavlja nov red je <br>
(eng. line break), odnosno <br /> (pogledajte napomenu).
Ako sada izmenite default.htm tako da posle "Autor:"
dopišete <br />
<b>Autor:</b><br />
strana u web pretraţivaču izgleda ovako:
Bitno je na kraju ovog nastavka zaključiti da je web pre-
traţivač zapravo interpretator HTML koda. Učitava ga liniju
po liniju i interpretirajući HTML oznake formatira web stra-
nu.
Osim ovakvog formatiranja strane, web pretraţivač ima
još puno mogućnosti kao što je izvršavanje skripti koje se
takođe nalaze na strani, ali o tome kasnije.
SAVET:
Dok vežbate HTML jezik najzgodnije je držati istovre-
meno otvorene i Notepad i Web pretraživač sa učitanom
HTML stranom.
U Notepad-u izmenite HTML kod, snimite ga (ovog
puta je dovoljno izabrati iz menija File -> Save). Potom se
prebacite u Web pretraživač i pritisnite F5 funkcijski taster
na tastaturi koji ponovo učitava istu stranu.
NAPOMENA:
Po najnovijoj verziji HTML standarda, svaka oznaka
mora imati početni i zatvarajući deo. U slučaju oznake
<hr> ovo znači da treba pisati <hr></hr> ali se u praksi
najčešće koristi skraćeni oblik: <hr />.
Takođe sve oznake treba pisati malim slovima. Svi
poznati web pretraživači se za sada neće buniti i ako ne
8
U ovom nastavku ćemo obraditi strukturu HTML doku-
menta i još neke značajne HTML oznake koje su neophod-
ne za rad u praksi.
Struktura HTML dokumenta
Većina WEB servera i HTML čitača će bez problema
isporučiti i pročitati jednostavne HTML dokumente koji
nisu formatizovani po striktnim pravilima. Međutim ako
ţelite da napravite Web sajt koji će se ispravno prikazati i
što je odavno podjednako vaţno, ispravno indeksirati od
strane poznatih mašina za pretraţivanje, neophodno je
korektno formirati sve HTML strane.
Osnovna struktura HTML strane izgleda ovako:
<html>
<head>
<title>Naslovna strana</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<meta name="keywords" content="Ključne reči po kojima
će se strana indeksirati">
<meta name="description" content="Ovo je opis sadrţaja
naslovne strane.">
</head>
<body>
</body>
</html>
Ispravno formatiran HTML dokument počinje sa ozna-
kom <html> i završava sa </html>. Unutar ove oznake
se nalazi kompletan sadrţaj strane, uključujući i eventual-
ne skriptove.
Sekcija <head> (zaglavlje strane) sadrţi informacije
koje su specifične za tu stranu.
Najočiglednija je oznaka <title> (naslov) gde se upisu-
je naslov strane koji će biti prikazan u Web pretraţivaču.
Na primer, u starijim verzijama Microsoft Internet
Explorera se ovaj naslov ispisuje u naslovnoj liniji progra-
ma, dok u poslednjoj verziji koja podrţava kartice, naslov
strane se prikazuje i na samoj kartici.
U <head> sekciji se tipično nalazi i nekoliko <meta>
oznaka koje se koriste u različite svrhe.
Ako sadrţaj strane koristi našu latinicu ili ćirilicu, veoma
je značajno naglasiti na koji način će se dokument snimiti i
interpretirati u Web pretraţivačima. Najbolje je koristiti
univerzalni Unicode standard koji će ispravno snimiti i pri-
kazati bilo koji set svetskih pisama. ASCI set znakova je
definisan jednim bajtoma što ostavlja mogućnost za defini-
sanje najviše 256 osnovnih znakova.
Unicode koristi dva bajta po znaku i omogućava prikaz
čak 65536 različitih znakova, čime su pokriveni svi znakovi
koji se koriste danas, uključujući kineske, arapske i druge
simbole i naravno našu ćirilicu i latinicu.
Preko atributa charset i njegove vrednost utf-8 defini-
šemo upravo ovo.
Sadrţaj strane je načešće html kod što definišemo pre-
ko content atributa i njegovu vrednost postavljamo na
"text/html".
Međutim ako ţelimo da prenesemo neki drugi sadrţaj
binarnog tipa, content atribut treba postaviti na odgovara-
juću vrednost.
Poznate mašine za indeksiranje Web sajtova kao što su
Google, Windows Live, Yahoo i slični će najpre potraţiti reči
za indeksiranje u meta oznaci keywords (ključne reči).
U vrednost atributa content treba uneti sve ključne reči
koje su relevantne za ono što strana predstavlja. Ako je na
primer u pitanju škola za informatiku iz Beograda kewords
oznaka bi mogla da izgleda ovako:
<meta name="keywords" content="škola, Beograd, infor-
matika, kompjuteri, računarske mreţe, programski jezici">
Svaka ključna reč je razdvojena zarezom i tehnički
moţete napisati reči koliko ţelite, ali ne treba preterivati.
Opciono moţemo postaviti description (opis) meta
oznaku preko koje dajemo detaljniji opis Web strane, ako
naslov nije dovoljan.
U <body> sekciju se smešta HMTL kod koji zapravo
predstavlja "pravi" sadrţaj strane.
Izrada Web stranica (3)
HTML oznake i struktura strane
Napomena:
Neke mašine za pretraživanje osim keywords oznake
definišu i svoje specifične koje samo one koriste. Svakako
se treba informisati o njima i koristiti ih. Na ovaj način ćete
"privući" mašine za indeksiranje i vaša Web strana će biti
9
HTML oznake
U prošlom nastavku smo obradili osnovne HTML ozna-
ke koje se bave formatizovanjem teksta. Sada nastavljamo
sa ovim poslom, a probanja radi najbolje je otvoriti Note-
pad ili slični editor teksta u kome ćemo pisati, snimati i
odmah zatim proveravati u Web pretraţivaću.
Dakle otvorite Notepad i odmah dokument snimite kao
default.htm – isto smo radili u predhodnom nastavku.
Potom otvorite default.htm u Web pretraţivaču.
Svaki put kada nešto izmenimo u Notepad-u i snimimo
ga, potrebno je jednostavno osveţiti stranu u Web pretra-
ţivaču kako bi videli izmene. Ovo osveţavanje strane se u
većini Web pretraţivača obavlja pritiskom na F5 funkcijski
taster.
Rad sa slikama
Slike na web strani se definišu oznakom <img> sa sle-
dećim atributima:
src – predstavlja lokaciju slike. Ako se slika nalazi u istom
direktorijumu gde i Web strana, dovoljno je navesti samo
njeno ime i ekstenziju.
U suprotnom, potrebno je navesti relativnu putanju u
odnosu na lokaciju Web strane, na primer:
Slike\NekaSlika.jpg.
Takođe se moţe navesti puna adresa lokacije slike na
Internetu:
http://www.slike.com/NekaSlika.jpg
alt – opcioni atribut koji se ispisuje ako je korisnik onemo-
gućio prikaz slike u svom Web pretraţivaču, što je ređi
slučaj; a ako se slika normalno prikazuje, vrednost alt atri-
buta se prikazuje u vidu opisa kada se mišem zadrţite na
slici.
Na primer, ako u istom direktorijumu gde se nalazi
Web stranica postavimo sliku sa nazivom gitara.gif, prika-
zali bi je na sledeći način:
<img src="gitara.gif" alt="Slika gitare">
Sliku po potrebi moţemo skalirati upotrebom atributa
width i height.
Na primer:
<img src="gitara.gi f"
a l t = " S l i k a g i t a r e "
width="80" height="222">
Obratite paţnju da propor-
cionalno skalirate sliku da
bi se očuvao odnos širine i
visine kako ne bi bila defor-
misana.
Skaliranje slike bi u praksi trebalo izbegavati, bilo da je
u pitanju smanjivanje ili povećavanje. Prvi razlog je gubitak
oštrine slike, a drugi činjenica da se nezavisno od skalira-
nja, kompletna slika prenosi od Web servera do Web pret-
raţivača klijenta.
Dakle, ako imate veliku sliku koju ţelite da umanjite u
prikazu, svejedno će cela preneti do klijenta i onda tamo
umanjiti – sporo učitavanje stranice uz loš kvalitet slike.
Uvek je bolje originalnu sliku skalirati i kao takvu prika-
zati u Web pretraţivaču – što moţete i videti na slikama.
10
Linkovi
Linkovi na Web strani se prave pomoću <a> oznake
(a je skraćeno od anchor - sidro). Atributi ove oznake su:
href - (hyperlink reference) koji označava lokaciju na koju
se preusmerava Web pretraţivač kada korisnik klikne na
link. Ovde vaţe slična pravila kao i kod umetanja slika:
moţete koristiti relativno ili apsolutno referenciranje na
dokument.
target – označava na koji način će se otvoriti ovaj link.
Ako ne navedete ovaj atribut, podrazumevano je da će
nova strana da se otvori u istom prozoru (ili kartici) i
zameniti Web stranu na kojoj je link. Ako ţelite da se stra-
na na koju ukazuje link otvori u novom prozoru
(ili kartici) Web pretraţivača, navedite ovaj atribut i posta-
vite njegovu vrednost na "_blank".
Na primer, ako ţelimo da postavimo link ka matičnoj
strani Microsoft-a i da ga otvorimo u novom prozoru
(ili kartici) Web pretraţivača, HTML kod bi izgledao ovako:
<a href="http://www.microsoft.com" target="_blank">Link
za Microsoft Web sedište</a>
Obratite paţnju na tekst u sredini oznaka "Link za Mic-
rosoft Web sedište". Ovo je tekst koji korisnik vidi u pretra-
ţivaču, a sa href atributom je definisana ciljna Web lokaci-
ja koja se otvara.
Lokacija koja se otvara ne mora biti isključivo Web stra-
na, već bilo koji dokument, slika, arhivirana datoteka, mul-
timedijalni materijali i slično. U ovom slučaju akcija koja se
događa kada korisnik klikne na link zavisi od toga šta on
ima instalirano na svom računaru. Na primer ako u linku
napravite referencu na Microsoft Word dokument:
<a href="Bilten.doc">Školski bilten</a>
i ako korisnik ima instaliran Microsoft Word, u prozoru
Web pretraţivača će se otvoriti dokument. Ako korisnik
nema Word, otvoriće se dijalog sa opcijom za prenos
(eng. download) datoteke Bilten.doc.
Web pretraţivač klijenta, na osnovu instaliranih aplika-
cija u računaru klijenta, prepoznaje ekstenzije i ako moţe
otvara ih. Ako ne prepozna ekstenziju, nudi prenos datote-
ke na vaš računar.
Ovde treba biti jako oprezan, jer ako kliknete na link
koji pokazuje na izvršni program bilo koje vrste (exe, js,
vbs,...) Web pretraţivač će ponuditi pokretanje ovog izvrš-
nog programa. Na ovaj način moţete nehotično na svoj
računar instalirati viruse ili druge maliciozne programe.
Dozvolite pokretanje ovakvih programa samo ako ste apso-
lutno sigurni da potiču sa pouzdanog izvora.
Na vašoj Web strani moţete kombinovati slike i linkove
tako da sama slika predstavlja vezu ka nekoj drugoj Web
strani ili dokumentu. Jednostavno oznaku <img> postavite
unutar oznake <a> kao u sledećem primeru:
<a href="http://www.microsoft.com"><img
src="MSLogo.gif"></a>
U sledećim nastavcima serijala
ćemo se pozabaviti kompleksnijim
HTML tagovima i stilovima.
11
U ovom, četvrtom nastavku serijala nastavljamo sa
html oznakama koje se najčešće koriste u praksi.
Formatiranje teksta
Uredna i pregledna web stranica koriste razne načine
za formatiranje teksa, kao kada bi pripremali stranice u
nekom papirnom izdanju. Na raspolaganju su standardne
oznake za izbor fonta, podebljanih (eng: bold), podvuče-
nih (eng: underline) i iskošenih (eng: italic) karaktera. Ove
oznake su jednostavne i u skladu sa gore navedenim ime-
nicama na engleskom jeziku.
Otvorite Notepad, i u njega upišite sledeći tekst:
Različiti oblici formatizovanja teksta:<br />
<b>Podebljan tekst.</b><br />
<u>Podvučen tekst.</u><br />
<i>Iskošen tekst.</i><br />
<font face="Verdana" size="6">Tekst sa drugačijim fon-
tom i veličinom.</font>
Potom ovaj tekst snimite kao test.htm na disku vašeg
računara. Pronađite ga i uradite dupli klik na njega, čime
ste pokrenuli Web pretraţivač i otvorili test.htm kao što je
prikazano na slici:
Oznake <b>, <u>, <i> respektivno predstavljaju pode-
bljan, podvučen i iskošen font.
Svaka od njih mora da ima i adekvatnu zatvarajuću
oznaku.
Oznaka za font je je nešto kompleksnija jer moţe defi-
nisati različite atribute. Počinje sa oznakom <font a nakon
toga se upisuju parovi – naziv atributa = vrednost.
Atribut face definiše font koji se koristi, ali ovde budite
oprezni. Ako na računaru na kome kreirate web stranu
imate instalirani font koji koristite, to ne znači da ga na
svom računaru ima i onaj koji pregleda vašu stranu.
Ako dođe do takve situacije, Web pretraţivač će nepos-
tojeći font jednostavno zameniti sa sistemskim, zavisno od
proizvođača i verzije Web pretraţivača. Tekst će biti čitljiv,
ali će vaša paţljivo formiranja strana sigurno izgledati bitno
drukčije nego što ste zamislili.
U ovom smislu je preporuka da se koriste standardni
fontovi, odnosno oni koji inicijalno postoji po instalaciji
operativnog sistema. Na primer Tahoma, Arial, Times,
Verdana i drugi.
Ako ipak ţelite da na poseban način naglasite tekstual-
ne delove strane (naslov, podnaslove i slično) sigurnije je
da od teksta napravite sliku i nju postavite na stranu. Tako
će se vaša strana uvek korektno prikazati u svakoj situaciji.
U atributu face moţete nabrojati i više naziva fonta, pri
čemu će pretraţivač početi od prvog, pa ako ga ne nađe
prelazi na drugi i tako do kraja. Na primer:
<font face="Comic Sans MS, Arial, Impact">Neki tekst...</
font>
Atribut size definiše veličinu fonta. Vrednost 6 koja se
koristi u primeru očigledno ne predstavlja veličinu kao što
ste navikli u na primer Word aplikaciji.
Ovako unesen broj označava relativnu veličinu fonta u
odnosu na postavke u Web pretraţivaču.
Opet, zavisno od Web pretraţivača i njegove verzije
moguće je definisati da li će tekst na strani biti prikazan u
normalnoj, smanjenoj ili povećanoj veličini. U Internet
Explorer-u 7.0 ova opcija se nalazi u meniju.
View -> Text Size kao što je prikazano na slici:
Izrada Web stranica (4)
12
Osim medijum postoje još dve gradacije za povećanje,
odnosno smanjivanje fonta. Probajte da menjate ovu opci-
ju i videćete zašto govorimo o relativnoj veličini fonta.
Pošto ne moţete biti sigurni da je svima na računaru
postavljena ista opcija, u praksi je bolje zadavati fiksne
veličine fonta.
Da bi ovo uradili moramo se posluţiti stilovima (eng:
style) koji je direktno upisan (eng: inline) u html kod.
Stilovima ćemo posvetiti jedan poseban nastavak ovog
serijala. U ovom momentu treba znati da stilove moţemo
direktno upisati u okviru html oznaka ili iz html-a moţemo
napraviti referencu na dokument koji definiše stilove.
Primeru dodajte sledeću liniju html koda:
<span style="font-size:24pt">Tekst sa fiksnom veličinom
pomoću stila.</span>
Sada je veličina fonta uvek ista bez obzira na podeša-
vanja Web pretraţivača.
Oznaka <span> se koristi za grupisanje html elemena-
ta koji imaju isti stil. U našem slučaju to je samo tekst, ali
kao što ćete videti kasnije, mogu biti i mnogi drugi ele-
menti.
Ako preko stila ipak ţelite da zadate relativne veličine
fonta, moţete koristiti standardne opisne vrednosti
font-size atributa
U sledećoj listi su date ove vrednosti sa odgovarajućim
merama u pt kao što ste navikli u editorima teksta:
xx-small 8pt
x-small 10pt
small 12pt
medium 14pt
large 18pt
x-large 24pt
xx-large 36pt
U sledećem primeru je pomoću direktno upisanog stila
definisano nekoliko atributa prikaza teksta:
<span style="font-size:8pt; font-family:Arial, Verdana";
color="#CC3320">Neki tekst</span>
Kao što se vidi, prilikom definicije stila upisuje se naziv
atributa, potom dvotačka iza koje ide vrednost atributa.
Separator između atributa je karakter tačka-zarez.
U primeru smo postavili i boju kojom će biti ispisan tekst.
Boje moţete takođe navesti opisno, na primer Red, Blu-
e i slično. Međutim u praksi je sigurnije koristiti heksadeci-
malni prikaz, jer ste tada sigurni da će svaki Web pretraţi-
vač ispravno prikazati izabranu boju.
U ovom smislu, svaka boja se sastoji od tri komponente,
redom: crvena, zelena i plava. Različitim kombinacijama
moguće je dobiti sve ostale boje. Intenzitet svake kompo-
nente je definisan brojem od 0 do 255 odnosno u heksa-
decimalnom prikazu od #00-#FF.
Na ovaj način (RGB – Red, Green, Blue) moţemo prika-
zati 256*256*256 odnosno preko 16 miliona različitih boja.
Osim RGB sistema postoje i drugi.
Više o heksadecimalnom sistemu moţete pročitati na
Web lokaciji http://en.wikipedia.org/wiki/Hexadecimal
U sledećemo nastavku ćemo se posvetiti listama i tabe-
lama.
13
U predhodnom nastavku smo obradili neke osnovne
elemente za formatiranje sadrţaja Web strane. U ovom
nastavku ćemo se posvetiti segmentu bez koga se praktič-
no ne moţe u svetu Web-a.
Različite tabele su očigledno veoma česte na Web stra-
nicama. Međutim, skoro svaka Web strana ima u sebi
tabele iako na prvi pogled to nije očigledno.
Stvar je u tome da tabele predstavljaju najpopularniji
način za pozicioniranje elemenata na Web strani. Pošto se
u takvoj primeni obično ne iscrtavaju okviri, vertikalne i
horizontalne linije - tabele nisu direktno vidljive.
U Web pretraţivaču pogledajte stranu našeg i vašeg
elektronskog časopisa:
http://www.microsoft.com/scg/obrazovanje/pil/casopis/
default.mspx
Na ovoj Web strani, se nalazi tačno 26 tabela sa pri-
marnim ciljem da ispravno pozicioniraju elemente na stra-
ni. Na sledećoj slici je prikazana ova Web strana sa ovog
puta vidljivim tabelama - uokvirene su crvenom bojom:
Tabele se mogu ugneţđavati u praktično neograniče-
nom broju nivoa (eng. Nested Tables). Širina i visina tabele
i njenih pojedinačnih kolona se moţe postaviti apsolutno u
pikselima, ili relativno u procentima u odnosu na širinu
strane ili nadređenog elementa.
HTML oznaka za početak tabele je <table> a za kraj,
standardno </table>
Svaki red u tabeli počinje sa oznakom <tr> (eng. Table
row) i završava sa oznakom </tr>.
Ćelija u tabeli počinje oznakom <td> (eng. Table data) i
završava sa oznakom </td>. Sadrzaj ćelije se upisuje izme-
đu oznaka <td> i </td>.
Kao i ranije otvorite Notepad editor teksta i u njemu
ukucajte sledeće:
<table>
<tr>
<td>C11</td>
<td>C12</td>
<td>C13</td>
</tr>
<tr>
<td>C21</td>
<td>C22</td>
<td>C23</td>
</tr>
</table>
Potom snimite datoteku pod imenom Tabele i ekstenzi-
jom htm. Dupli klik na ovu datoteku će otvoriti Web
browser i prikazati njen sadrţaj kao što je prikazano na
sledećoj slici:
Izrada Web stranica (5)
Tabele
14
Primetićete da se inicijalno ne prikazuju linije tabele.
Vidi se samo (uredno) sloţen sadrţaj ćelija. Takođe, širina
ćelija je prilagođena njihovom sadrţaju.
Oznaka <table> moţe sadrţati više atributa koji dalje
definišu njen izgled. Izmenite u Notepadu prvu liniju kao
što je prikazano:
<table border=“2”>
Ponovo otvorite datoteku Tabele.htm, ili ako je već učitana
u Web pretraţivač samo pritisnite F5 funkcijski taster koji
“osveţava” stranu.
Očigledno atribut border definiše debljinu linija tabele
u pikselima. Ako ovaj atribut ne postoji, podrazumevana
vrednost je nula, odnosno linije se ne prikazuju. Međutim
uvek je bolje eksplicitno napisati border=“0” ako to ţelite,
jer različiti Web pretraţivači imaju različite podrazumeva-
ne vrednosti. Ovako ste se osigurali da će Web strana biti
ispravno prikazana u svim Web pretraţivačima. Ovo pri-
hvatite kao opšte pravilo za sve druge elemente strane.
U tabeli je moguće postaviti razmak i okvir oko ćelija
tabele pomoću atributa cellspacing i cellpadding. Vred-
nosti su takođe u pikselima. Ako ovi atributi nisu navedeni
uslovno podrazumevane vrednosti su 0.
Ponovo izmenite prvu liniju datoteke:
<table border="2" cellspacing="10" cellpadding="15">
Rezultat je prikazan na sledećoj slici:
Širina tabele se postavlja pomoću width atributa u tab-
le oznaci. Vrednost ovog atributa se moţe navesti apsolut-
no u pikselima ili relativno u procentima u odnosu na širi-
nu kontejnera u kome se nalazi tabela.
Na primer:
<table border=“1” width=“600”>
ili
<table border=“1” width=“50%”>
Probajte obe varijante. U apsolutnom zadavanju širine,
bez obzira na veličinu prozora Web pretraţivača tabela je
fiksne širine. Kod procentualnog zadavanja širine tabela je
uvek pola od širine prozora Web pretraţivača, ali nikad
manje od širine koju diktira sadrţaj ćelija.
Takođe obratite paţnju da je svaka kolona tabele iste
širine, jer nigde nismo eksplicitno definisali širinu u <td>
oznaci.
Ako je tabela ugnjeţdena u ćeliju druge tabele (što se
često radi), relativna širina se ne računa u odnosu na širinu
prozora Web pretraţivača, već u odnosu na širinu roditelj-
skog elementa. Na primer, ako imamo ćeliju širine 400 pik-
sela, i u nju postavimo tabelu relativne širine od 75% njena
širina će zapravo biti 300 piksela.
Pomoću atributa bgcolor se postavlja boja pozadine
cele tabele. Boju pozadine moţemo postaviti i na nivou
pojedine ćelije. Atribut bordercolor postavlja boju linija
cele tabele.
15
Na primer:
<table border="2" bgcolor="silver" bordercolor="blue">
Tabela je sive boje sa plavim okvirom.
Često je potrebno spojiti (eng. Merge) dve ili više ćelija
u jednu, bilo po horizontali ili vertikali. Ovo se postiţe
pomoću atributa oznake <td> collspan za horizontalno
povezivanje, odnosno rowspan za vertikalno:
<table border="1" width="300">
<tr>
<td colspan="2">Spojene dve celije</td>
<td>C13</td>
</tr>
<tr>
<td>C21</td>
<td>C22</td>
<td>C23</td>
</tr>
</table>
<table border="1" width="300">
<tr>
<td rowspan="2">C11C21</td>
<td>C12</td>
<td>C13</td>
</tr>
<tr>
<td>C22</td>
<td>C23</td>
</tr>
</table>
U svakom slučaju treba voditi računa da postoji odgovara-
jući broj otvoren i zatvorenih <tr> i <td> oznaka, u suprot-
nom dobijaju se prilično nepredvidljivi rezultati koji sigurno
nisu ono što ste hteli na svojoj Web strani.
16
Na vašem Web sajtu ćete sigurno imati potrebe za kre-
iranjem različitih lista i njihovim formatiranjem. Ove liste
mogu biti statičke ili dinamičke, kao uostalom i ostali sadr-
ţaj Web sajta.
Statički sadrţaj je direktno upisan u HTML stranu i
menja se izmenom te strane i ponovnim slanjem na Web
server.
Dinamički sadrţaj se kreira pre slanja Web strane pret-
raţivaču, i oslanja se na neko skladište podataka: tekstual-
nu datoteku, XML, bazu podataka i slično. O ovome ćemo
pričati kasnije. Za sada ostajemo na statičkom sadrţaju.
Za kreiranje liste postoji nekoliko varijanti HTML ozna-
ka. Najčešće se koristi oznaka <ul> sa uparenom
</ul> koja predstavlja početak, odnosno kraj liste.
Svaka stavka u listi počinje oznakom <li> i završava
oznakom </li>.
Kao do sada otvorite Notepad editor teksta i u njemu
napišite sledeće:
<ul>
<li>Stavka 1</li>
<li>Stavka 2</li>
<li>Stavka 3</li>
</ul>
Potom snimite dokument pod nazivom Test.html i
otvorite ga u Web pretraţivaču. Ako ste sve dobro napisali
treba da dobijete stranu kao što je prikazano na sledećoj
slici:
Oznaka <ul> je skraćenica od unordered list
(nenumerisana lista). Ova lista ispred svake stavke ime
takozvani “bullet”.
Oznaka <li> je skraćenica od list item.
Komentari
HTML poseduje posebne tagove koji omogućavaju upis
komentara. Tekst u komentaru se ne procesira, već sluţi za
opis HTML koda i segmenata strane. Ne treba podcenjivati
značaj komentara. Bez obzira da li ćete vi ili neko drugi
nastaviti odrţavanje Web sajta, komentari su uvek korisni i
ne budite štedljivi u tom smislu.
Oznaka za početak komentara u HTML kodu je <!-- a za
kraj --> Sve između ove dve oznake se smatra komenta-
rom (moţe biti i više linija teksta) i ne prikazuje se u Web
pretraţivaču.
Predhodni primer sa upisanim komentarima bi mogao
da izgleda ovako:
<ul> <!-- početak liste -->
<li>Stavka 1</li>
<li>Stavka 2</li>
<li>Stavka 3</li>
</ul> <!-- kraj liste -->
Većina HTML editora će komentare obojiti u drugu
boju , najčešće zelenu.
Numerisane liste
Liste moţemo numerisati na različite načine, korišće-
njem rimskih ili arapskih brojeva. Ova mogućnost je direkt-
no podrţana u HML standardu pomoću oznake <ol> skra-
ćeno od ordered list.
Izmenite predhodi kod na ovaj način:
<ol>
<li>Stavka 1</li>
<li>Stavka 2</li>
<li>Stavka 3</li>
</ol>
Izrada Web stranica (6)
Liste
17
Snimite datoteku u pogledajte je u Web pretraţivaču:
Stavke su numerisane arapskim brojevima, od broja
jedan do ukupnog broja stavki u listi. Brojanje se računa
počev od <ol> do </ol> oznaka. Ako posle ove liste na
Web strani imamo još jednu, brojanje se ne nastavlja, već
ponovo počinje od jedan:
<ol><!-- prva lista -->
<li>Stavka 1</li>
<li>Stavka 2</li>
<li>Stavka 3</li>
</ol>
Nova lista:<br>
<ol><!-- druga lista -->
<li>Nova stavka 1</li>
<li>Nova stavka 2</li>
<li>Nova stavka 3</li>
</ol>
Ovakvo inicijalno brojanje moţemo promeniti, tako da
naznačimo od kog broja počinje numeracija:
<ol><!-- prva lista -->
<li>Stavka 1</li>
<li>Stavka 2</li>
<li>Stavka 3</li>
</ol>
Nova lista:<br>
<ol start="4"><!-- druga lista počinje od 4-->
<li>Nova stavka 1</li>
<li>Nova stavka 2</li>
<li>Nova stavka 3</li>
</ol>
Očigledno, atribut start u okviru oznake <ol> definiše
početak brojanja. Ako se ne navede, podrazumeva se vred-
nost jedan.
Dodavanjem atributa za stil u <ol> oznaci moţemo
numeraciju promeniti u rimske brojeve:
<ol style="list-style-type: upper-roman;">
<li>Stavka 1</li>
<li>Stavka 2</li>
<li>Stavka 3</li>
</ol>
18
Sintaksa je:
<ol style="list-style-type: tip_stila;”>
Sledeća tabela prikazuje moguće vrednosti za parame-
tar tip_stila:
Probajte stil sa malim slovima:
<ol style="list-style-type: lower-alpha;">
<li>Stavka 1</li>
<li>Stavka 2</li>
<li>Stavka 3</li>
</ol>
Moguće je koristiti liste sa bilo kojom drugom slikom
umesto ponuđenih markera:
style="list-style-image: url(Putanja_do_slike);"
Vrednost Putanja_do_slike treba da bude validna url
adresa, na primer:
http://mojServer/mojSajt/mojaSlika.gif
Tip_stila Opis
none bez markera
disc popunjeni krug.
Inicijalna vrednost
circle krug
square kvadrat
decimal broj
decimal-leading-zero broj sa vodećim nulama:
01, 02, 03,...
lower-roman rimski brojevi, mala slova:
i, ii, iii, iv,...
upper-roman rimski brojevi, velika slova:
I, II, III, IV,...
lower-alpha mala slova:
a, b, c,...
upper-alpha velika slova:
A, B, C,...
19
Prilikom kreiranja web sajta pre ili kasnije ćete naići na
potrebu da od korisnika preuzmete neke podatke i dalje ih
obradite na web serveru. U pitanju moţe biti zahtev da se
korisnik registruje tako što će uneti svoje lične podatke
koje vi kasnije upisujete u bazu podataka. Takođe korisnik
moţe imati potrebu da pretraţuje podatke pa treba da
unese ključnu reč za pretragu, izabere kategoriju i tome
slično. U ovom slučaju se rezultat pretrage dinamički krei-
ra i naravno zavisi od parametara koje je korisnik uneo.
Ovako kreirane strane, gde korisnik unosi ili bira podatke
se zovu web forme. Na istoj web strani se moţe nalaziti
više web formi ako za time ima potrebe. Tako da ne treba
izjednačavati pojmove web forma i web strana. Web for-
mu treba tretirati kao deo jedne web strane.
HTML oznaka za web formu počinje sa <form> i završava
sa </form>. Ovako označena web forma nema vidljivi
korisnički interfejs i ne prikazuje se u web pretraţivaču. Da
bi imali bilo kakvu funkcionalnost u okviru <form> oznaka
postavljamo takozvane ulazne (eng. Input) kontrole ali isto
tako i bilo koje druge HTML elemente. Postoji nekoliko
vrsta ovakvih kontrola koje pruţaju funkcionalnost sta-
ndardnih Windows kontrola: unos teksta, padajuće i obič-
ne liste, radio dugmad i slično.
Input kontrole
Prvo ćemo upoznati postojeće ulazne kontrole i njihove
atribute, a potom se vratiti na samu <form> oznaku i
detaljnije je obraditi.
Standardno, u okviru svake web forme postoje dva dug-
meta: Submit (potvrdi) i Reset (poništi).
Dugme Submit prosleđuje unete podatke web serveru na
obradu. Dugme Reset poništava (briše) podatke koje je
korisnik uneo, ili ih postavlja na inicijalne vrednosti ako
postoje. Oznaka za oba dugmeta je <input> a razlikuje ih
atribut type:
<input type="submit" value="Potvrdi" />
<input type="reset" value="Poništi" />
Atribut value definiše tekst koji se nalazi na dugmetu.
Kao i ranije, otvorite program Notepad i upišite sledeće:
<form>
<input type="submit" value="Potvrdi" />
<input type="reset" value="Poništi" />
</form>
Tekst snimite kao Test.htm i potom datoteku otvorite u
Web pretraţivaču. Ako ste sve tačno uneli, treba da dobije-
te sledeće:
Napravili ste prvu web formu. Istina, korisnik još ništa ne
moţe da unese, što ćemo odmah ispraviti.
Za unos teksta koristi se oznaka <input> sa atributom
type="text".
<input type="text" />
Pošto obično u okviru jedne web forme postoji više različi-
tih ulaznih kontrola, obavezno se svakoj dodeljuje jedins-
tveno ime. Ovo se radi pomoću atributa
name="ime_kontrole". Dopunite primer na sledeći način:
<form>
Ime: <input type="text" name="tIme" /><br />
Prezime: <input type="text" name="tPrezime" /><br />
<input type="submit" value="Potvrdi" />
<input type="reset" value="Poništi" />
</form>
Izrada Web stranica (7)
HTML forme
20
Napravili smo mali formular za unos podataka sa imenom
i prezimenom. Imena kontrola su "tIme" i "tPrezime".
Ova imena su jako bitna jer se pomoću njih referišemo na
podatke koje je korisnik uneo.
U kontroli za unos teksta obično se postavljaju još dva
atributa:
size="x", gde je x broj karaktera koji definiše širinu kon-
trole i maxlength="y", gde y predstavlja maksimalno
mogući broj karaktera koji se moţe uneti u kontrolu.
Dopunite kod:
<form>
Ime: <input type="text" name="tIme" size="10"
maxlength="10"/><br />
Prezime: <input type="text" name="tPrezime" size="15"
maxlength="20" /><br />
<input type="submit" value="Potvrdi" />
<input type="reset" value="Poništi" />
</form>
Obratite paţnju da je sasvim u redu da vrednost atributa
maxlength bude veća od vrednosti atributa size. Moţe
biti i obrnuto, ali baš nema mnogo smisla.
Često pitanje je vezano za uravnanje i uredniji prikaz ova-
kvih formulara. To se postiţe pomoću tabela koje smo
obradili u ranijim nastavcima. Jednostavno se u svaku ćeli-
ju tabele postavljaju odgovarajući tekstovi i ulazne kontro-
le.
Radio dugmad
Tip ulazne kontrole koji korisniku omogućava da izabe-
re jednu od ponuđenih opcija. Opcije se međusobno isklju-
čuju i obično se postavlja da najčešća od njih bude inicijal-
no uključena. Atribut type za ovu kontrolu je "radio".
<input type="radio" name="ime_kontrole" valu-
e="vrednost_kontrole" />
U našem primeru ţelimo da znamo da li je korisnik student
ili profesor. Pošto ima više studenata, postavićemo da inici-
jalno bude označen:
<form>
Ime: <input type="text" name="tIme" size="10"
maxlength="10"/><br />
Prezime: <input type="text" name="tPrezime" size="15"
maxlength="20" /><br />
Student:<input type="radio" name="status" valu-
e="student" checked /><br />
Profesor:<input type="radio" name="status" valu-
e="profesor" /><br />
<input type="submit" value="Potvrdi">
<input type="reset" value="Poništi">
</form>
21
Parametar checked znači da će kontrola biti inicijalno
označena.
Ime (name atribut) je isti kod obe kontrole što znači da
predstavljaju istu grupu – samo jedna u okviru grupe
moţe biti označena.
Atribut value, za razliku od ranije, ne označava natpis na
kontroli već vrednost koja će biti preneta serveru kada
korisnik klikne na submit dugme.
U sledećem nastavku ćemo se upoznati sa još nekim sta-
ndardnim kontrolama i načinima prenosa podataka na
Web server.
Provežbajte sami!
Pokušajte da napravite formu koja će imati izgled i
sadrţati elemente kao na sledećoj slici:
Pomoć: Napravite tabelu i u njene ćelije stavite tekst i ulaz-
ne kontrole kako biste omogućili njihovo poravnjanje.
22
U prošlom broju serijala o izradi Web stranica upoznali
smo se sa pojmom Web forme i prikazali nekoliko osnov-
nih Input kontrola, kao što su dugmad za prosleđivanje i
poništavanje podataka, kontrola za unos teksta, kao i
radio dugmad.
Sada nastavljamo sa opisom ostalih kontrola koje se mogu
dodati na jednu Web formu: polja za potvrdu i select liste.
Polja za potvrdu
Tip ulazne kontrole koji korisniku omogućava odabir jed-
ne ili više ponuđenih opcija, što ovu kontrolu razlikuje od
radio dugmića, kod kojih korisnik moţe u grupi odabrati
samo jednu od ponuđenih opcija. Atribut type za ovu
kontrolu je "checkbox". Web pretraţivač ovu kontrolu pri-
kazuje kao prazan kvadrat, koji moţe biti čekiran.
<input type="checkbox" name="ime_kontrole" valu-
e="vrednost_kontrole" checked >
Vrednost koju vidi korisnik
</input>
Da bismo isprobali ovu i druge kontrole, napravićemo jed-
nu stranicu za prijavu maturskog rada. Prvo ćemo napravi-
ti novu Web stranicu i u nju dodati kontrole koje smo opi-
sali u prethodnom broju.
Kao i ranije, otvorite program Notepad i upišite sledeće:
<form>
<h1>Prijava maturskog rada</h1>
Ime i prezime: <input type="text" name="tImePrezime"
size="30" maxlength="50"/>
<br />
Naziv teme: <input type="text" name="tTema" size="30"
maxlength="50" />
<br />
<br />
<input type="submit" value="Prijavi">
<input type="reset" value="Poništi">
</form>
Tekst snimite kao PrijavaMaturskogRada.htm i potom
datoteku otvorite u Web pretraţivaču. Ako ste sve tačno
uneli, treba da dobijete sledeće:
Zatim u novokreiranu stranicu dodajte sledeća polja za
potvrdu:
<input type="checkbox" name="stampa" value=" stampa"
checked > Štampani rad</input>
<br />
<input type="checkbox" name="PPT" value="PPT" >
PowerPoint prezentacija </input>
<br />
<input type="checkbox" name="WebSite" value="WebSite"
> Web prezentacija </input>
<br />
<input type="checkbox" name="CD" value="CD" >CD
</input>
<br />
<input type="checkbox" name="slajdovi" value="slajdovi"
> Slajdovi za grafoskop </input>
Kao i kod radio dugmadi, parametar checked znači da će
kontrola biti inicijalno označena, a parametar value ozna-
čava vrednost koja će biti prosleđena serveru kada se priti-
sne na submit dugme. Tekst koji se nalazi pored polja za
potvrdu, kuca se kao sadrţaj kontrole, tj. nalazi se između
početnog i završnog taga.
Izrada Web stranica (8)
HTML forme
23
Snimite ponovo stranicu i pogledajte kako ona sada izgle-
da u Web pretraţivaču.
Select kontrola
Tip ulazne kontrole koja omogućava da se korisniku ponu-
di skup opcija u obliku liste. Uobičajeno se koristi kada
postoji više ponuđenih opcija, a zbog preglednosti strane
ih nije zgodno predstaviti pomoću radio dugmića ili polja
za potvrdu. Kontrola se predstavlja pomoću taga select, u
okviru kojeg se nalazi više option tagova.
<select name="ime_kontrole" size="broj_linija" multi-
ple="multiple" >
<option selected="selected" value="vrednost 1 za
server">
vrednost 1 koju vidi korisnik
</option>
<option value="vrednost 2 za server">
vrednost 2 koju vidi korisnik
</option>
</select>
Podrazumevano, select kontrola prikazuje jednu opciju u
jednom momentu, dok se ostale opcije mogu videti u
okviru padajuće liste. Ukoliko se parametar size postavi na
vrednost veću od jedan ili više, select kontrola će u Web
pretraţivaču biti prikazana kao obična, a ne kao
padajuća lista, što znači da će biti vidjivo više opcija u jed-
nom momentu. Postavljanje parametra multiple na vred-
nost multiple omogućava korisniku odabir više od jedne
opcije istovremeno (uobičajeno pomoću tastera Ctrl). Para-
metar selected u okviru option taga omogućava inicijalno
selektovanje jedne opcije.
U našem primeru ţelimo da učenicima, koji popunjavaju
obrazac za prijavu maturskog rada preko Web stranice,
omogućimo odabir predmeta iz kojeg rade maturski.
U postojeću formu dodajte sledeći kod:
<select name="predmet" size="5" >
<option value="matematika">Matematika</option>
<option value="fizika">Fizika</option>
<option value="hemija">Hemija</option>
<option value="srpski">Srpski jezik</option>
<option value="istorija">Istorija</option>
<option value="geografija">Geografija</option>
<option value="psihologija">Psihologija</option>
</select>
Snimite ponovo stranicu i pogledajte kako ona sada izgleda
u Web pretraţivaču.
24
Ukoliko uklonite parametar size iz select kontrole, dobićete
formu kao na sledećoj slici:
U sledećem nastavku ćemo se upoznati sa još nekim sta-
ndardnim kontrolama i načinima prenosa podataka na
Web server.
U ovom broju časopisa završavamo opis kontrola koje se
mogu koristiti u okviru Web forme i bavimo se obradom
podataka koji su unešeni u formu.
Textarea kontrola
Predstavlja tip ulazne kontrole, koja korisniku omogućava
unos više linija teksta ili informacija. Obavezno je definisa-
nje rows i cols atributa, jer oni određuju veličinu kontrole
(broj redova teksta i broj kolona u svakom redu). Ovi atri-
buti ne ograničavaju duţinu teksta za unos, već samo opi-
suju veličinu definisane kontrole. Ukoliko je zbog veličine
unešenog teksta neophodno, pojavljuju se scrollbar-ovi.
Atribut wrap sa vrednošću virtual nije obavezan, a stavlja
se ukoliko ne ţelite da se pojavljuje horizontalni scrollbar.
<textarea name="ime_kontrole"
rows="visina kontrole u redovima"
cols="širina kontrole u kolonama"
wrap="virtual">
inicijelni tekst koji vidi korisnik
</textarea>
Da bismo isprobali ovu kontrolu, pomoću Notepad.exe
programa otvorite stranu PrijavaMaturskogRada.htm, koju
smo kreirali u prethodom broju i u nju, posle tagova za
padajuću listu, dodajte sledeće:
Opis rada:
<br />
<textarea name="opisRada"
rows="5"
cols="40"
wrap="virtual">
</textarea>
Otvorite datoteku u Web pretraţivaču. Ako ste sve tačno
uneli, treba da dobijete sledeće:
Izrada Web stranica (9)
HTML forme
25
Password kontrola
Kontrola omogućava unos jedne linije teksta isto kao i
textbox kontrola, ali se tekst prikazuje kao niz zvezdica ili
tačkica, odnosno kontrola sprečava se da se vidi unešeni
tekst. Uobičajeno se koristi za unos lozinke kod registraci-
onih formi ili kod formi za prijavljivanje korisnika. Jedina
zaštita koju pruţa ovaj tip kontrole je onemogućavanje
nekog ko gleda preko ramena da pročita šta je napisano.
<input type="password"
name="ime_kontrole"
size="širina textbox-a u karakterima"
maxlength="maksimalni broj karaktera u kontroli"
value=""
/>
Provežbajte sami!
Pokušajte da napravite formu sa imenom Login.htm, koja
treba da omogući prijavljivanje korisnika. Forma treba da
sadrţi jedan textbox za unos korisnikovog imena, jednu
password kontrolu za prihvatanje korisnikove lozinke, kao i
jedno dugme tipa submit i jedno dugme tipa reset. Forma
treba da izgleda na sledeći način:
Ostale kontrole
Napomenućemo da postoji još nekoliko kontrola koje se
mogu staviti na jednu Web formu, a kojima se ovog puta
nećemo detaljnije baviti:
Hidden kontrola (omogućavaju čuvanje vrednosti
koje korisnik ne moţe da vidi ili da menja - nije bit-
no gde se u okviru forme nalazi ova kontrola, jer je
nevidljiva za korisnika)
<input type="hidden"
name="ime"
value="vrednost" />
26
File kontrola (omogućava prenos datoteka na ser-
ver odn. upload datoteka - kontrola kreira textbox
kontrolu i browse dugme)
<input type="file"
name="ime_kontrole"
size="širina u karakterima"
/>
Image kontrola (omogućava korišćenje slike kao
submit dugmeta)
<input type="image"
src="ime_slike.jpg"
name="submit_dugme"
/>
Obrada podataka sa forme
Same za sebe, ili onako kako smo ih do sada pravili, forme
su relativno beskorisne, jer je osnovni razlog njihovog
korišćenja prikupljanje podataka od korisnika i obrada tih
podataka na serveru.
Da bismo definisali na koji način se to moţe uraditi, potre-
bno je da u okviru form taga dodamo još nekoliko atribu-
ta:
<form method="naziv_metoda"
action="ime_programa"
name="ime_forme" >
... kontrole na formi
</form>
Početni form tag ima dva glavna atributa: method i acti-
on.
Method atribut definiše na koji način će Web pretraţivač
proslediti podatke na server. Vrednosti za ovaj atribut
mogu biti get ili post.
Get predstavlja podrazumevanu vrednost za method atri-
but i označava da će podaci iz forme biti prosleđeni na
server preko URL adrese. Na našem primeru za prijavlji-
vanje teme za maturski rad, posle popunjavanja kontrola
na formi i klika na dugme submit, URL linija Web pretraţi-
vača ima sledeći sadrţaj:
D:/vezba.htm?txtIme=Nikola+Jovanov&txtRazred=IV-
3&txtTema=Grčko-persijski+ratovi&Predmet=istorija&
stampa=da&PPT=da&Submit=Potvrdi
Upravo dodavanje podataka sa forme na URL adresu se
smatra najvećim nedostatkom kod prosleđivanja podataka
na ovaj način. Drugi nedostatak je ograničeni broj znakova
(što zavisi od Web pretraţivača) koji čine jednu URL adre-
su, tako da se na ovaj način ne mogu prosleđivati veće
količine podataka.
Post prosleđuje podatke na server kao deo HTTP poruke
koju kreira Web pretraţivač i koju šalje preko Interneta. U
ovom slučaju unešeni podaci u kontrole na formi nisu vid-
ljivi u URL adresi i samim tim ne postoji ograničenje koje se
odnosi na broj znakova.
Action atribut definiše ime programa kojem će podaci sa
forme biti prosleđeni, i koji će te podatke obraditi na Web
serveru (u praksi, program podatke najčešće prosleđuje
nekoj bazi podataka).
Uglavnom se koriste sledeći načini da se napiše takav pro-
gram:
ASP.NET tehnologija - trenutno najpotpunija teh-
nologija za kreiranje serverskih Web strana, koje se
mogu napisati korišćenjem više od 30 programskih
jezika, od kojih su najviše korišćeni C# i Visual
Basic .NET.
ASP tehnologija - nešto starija Microsoft tehnologi-
ja za kreiranje serverskih Web strana, koje se uobi-
čajeno pišu korišćenjem Visual Basic Script i JavaSc-
ript jezika. Zamenjena je ASP.NET tehnologijom.
PHP skriptovi - skript jezik pisan specijalno za obe-
zbeđivanje interaktivnosti Web strana. Uz ASP.NET,
predstavlja dominantan način za kreiranje serverskih
Web strana.
Java serverske Web strane - pišu se korišćenjem
Java programskog jezika.
CGI skriptovi - najstariji način za obradu podataka
na serveru. Programi odn. skriptovi se mogu pisati u
Perl ili C programskom jeziku.
Odabir tipa programa za obradu podataka sa forme zavisi
najviše od znanja kojima Web programer raspolaţe, kao i
od vrste Web servera gde se nalazi i izvršava Web aplikaci-
ja.
27
Slika predstavlja ilustraciju obrade podataka sa naše for-
me:
1. Form tag u okviru strane PrijavaMaturskogRada.htm
je definisan na sledeći način:
<form method="post"
action="PrijavaObrada.aspx"
name="formPrijava" >
2. Korisnik, preko klijentske aplikacije (Web pretraţivača),
popunjava formu.
3. Posle klika na dugme Prijavi, Web pretraţivač kreira
poruku, koju šalje preko Interneta na odgovarajuću URL
adresu, odnosno Web server.
4. Web server prihvata podatke sa Interneta i prosleđuje ih
Web strani PrijavaObrada.aspx (koja je navedena kao vred-
nost za atribut action) na obradu.
5. Web strana PrijavaObrada.aspx pamti podatke o prijavi u
bazi i kreira poruku o potvrdi prijema podataka
6. Web server kreiranu poruku putem Interneta šalje klijen-
tu.
7. Web pretraţivač prikazuje primljenu poruku o potvrdi
prijave maturskog rada.
Toliko o formama. U sledećem nastavku ćemo govoriti o
meta-tagovima i optimizaciji Web strana vezanim za pro-
nalaţenje od strane mašina za pretraţivanje.
28
U ovom broju časopisa bavićemo se podešavanjem Web
strana, kako bi mogle da budu pronađene i prikazane u
listama mašina za pretraţivanje.
Da li ste se ikada zapitali kako Google, MSN, Yahoo ili
neke druge mašine za pretraživanje pronalaze sve one
sajtove?
Neke od tih sajtova su prijavili autori, ali je većina prona-
đena pomoću automatizovanih procesa, koji se nazivaju
robots (roboti) ili skraćeno bots. Roboti obilaze sajtove na
Internetu, pretraţuju sadrţaj dostupnih strana, i pamte
podatke o njima u svojim bazama podataka, a u obliku
indeksa (kao u knjizi). Proces pravljenja liste se naziva
Web crawling (gmizanje Webom). U cilju pravljenja što
korisnije i potpunije liste reči, roboti nastoje da pretraţe
što više Web stranica.
Kako roboti odlučuju koje će stranice na Internetu
posetiti i indeksirati?
To zavisi od robota, svaki od njih koristi različite strategije.
Generalno, startuju od neke svoje liste Web lokacija, ugla-
vnom od Web dokumenata koji se pojavljuju na mnogo
mesta, ili od najpopularnijih lokacija na Webu. Zatim, pra-
te linkove koje se nalaze na Web dokumentima.
Odluka kako će indeksirati pronađene stranice i zapamtiti
ih u svojim bazama podataka, takođe zavisi od pojedinač-
nog robota. Neki roboti koriste podatke iz naslova Web
strana, tekst iz nekoliko prvih pasusa, ili indeksiraju sve
reči na strani. Neki roboti čitaju meta, ili druge skrivene
tagove.
Search Engine optimizacija
Kada neko pretraţuje Internet, uobičajeno kuca jednu ili
više reči, koje po njegovom mišljenju, najbolje definišu ono
što ga zanima. Za kreatore Web sajtova je veoma vaţno da
se strane koju su napravili nađu na što višoj poziciji u listi
koju prikazuje mašina za pretraţivanje, jer će to omogućiti
bolju posećenost njihovih stranica.
Postoje različita mišljenja šta je sve potrebno uraditi da bi
se naše strane što više pozicionirale (ovaj proces se naziva
Search Engine optimizacija, skraćeno SEO), ali svakako
nećete pogrešiti ako:
definišete određene tagove u HTML dokumentu i
usaglasite sadrţaj definisanih tagova sa sadrţajem
Web strana
HTML <head> tagovi
Na početku jednog HTML dokumenta nalazi se <head>
sekcija, nevidljiva onima koji pregledaju određeni doku-
ment, ali veoma vidljiva Web browserima, kao i programi-
ma (robotima) mašina za pretraţivanje.
<title> tag
Najbitniji tag unutar <head> sekcije je <title> tag. Većina
autora koji se bave Search Engine optimizacijom, smatra
da definisanje odgovarajućeg <title> taga ima najveći uti-
caj na rangiranje neke Web strane. Dobar <title> tag treba
da sadrţi reči koje najbolje opisuju šta je tema Web strane,
odnosno da sadrţi odgovarajući naslov za stranu. To sva-
kako znači da treba da izbegavate naslove kao što je
"Dobrodošli na naš Web sajt", i da umesto toga stavite, na
primer "Srednja medicinska škola Petar Petrović Beograd :
Raspored časova".
Osim što je veoma bitan za pronalaţenje Web strana, tekst
koji stavite unutar ovog taga se pojavljuje: kao naslovna
linija u browseru, kao opis za stranu koja će se pojaviti u
listi Favorites ili Bookmark, prilikom štampanja strane, ili
kao link u listi koju vraćaju mašine za pretraţivanje.
Izrada Web stranica (10)
Podešavanje Web strana
NAPOMENA
Pogledajte kako je to urađeno na sajtu
http://www.infostud.com/
29
<meta> tagovi
O meta tagovima bilo je reči u nastavku #3 našeg serijala.
Ovde ćemo se samo ukratko podsetiti meta tagova vaţnih
kod optimizacije strana za mašine za pretraţivanje.
<meta name="description" content="opis Web strane">
Vrednost atributa content moţe biti reč, rečenica ili čak
paragraf koji opisuje Web stranu. Ne bi trebalo da opis
bude predugačak, odnosno ne bi trebao da prelazi 300
karaktera.
<META name="keywords" content="lista, ključnih, reči">
Stavite za vrednost atributa content reči koje najbolje defi-
nišu sadrţaj strane. Moţete uključiti i jedninu i mnoţinu
reči, kao i njihove sinonime.
Ukoliko na početku imate nedoumice koje ključne reči ili
opis da koristite, pretraţite Internet, i pronaćićete više
Web lokacija koje vam mogu pomoći u tome.
Preporuke za podešavanje
1. Dizajnirajte vaše strane na način kako ih roboti
mogu lako pronaći. Najbolje je da stavite tekstualni
navigacioni meni na početnu stranu Web sajta, koji
će roboti pratiti i tako posetiti sve strane u okviru
Web lokacije. Strane koje se sastoje od slika i Flash
animacija su uglavnom veoma interesantne, ali
ostaju neindeksirane.
2. Napravite Web sajt mapu, koja će sadrţati linkove
na sve strane vašeg sajta. Ukoliko mapa ima više od
100 linkova, podelite je na nekoliko strana.
3. Nastojte da se reči koje ste stavili u <title> i
<meta> tagove, pojavljuju i u okviru <body> taga.
Na taj način će sadrţaj biti usaglašen sa naslovom,
ključnim rečima i opisom strane, što je veoma vaţ-
no kod nekih mašina za pretraţivanje.
4. Stavite najvaţnije ključne reči u prvi deo vaše strane,
kako posetioci ne bi morali da koriste skrolovanje da
bi pronašli tekst zbog kojeg su i došli na vašu stra-
nu. Kao primer moţete uzeti članke iz novina: najva-
ţnije informacije su na početku, detalji se pojavljuju
kasnije u tekstu.
5. Pokušajte da koristite tekst, a ne slike, za prikaz vaţ-
nih imena, linkova i sadrţaja.
6. Definišite alt i title atribut u okviru <img> taga za
slike, kao i title atribut u okviru <a> taga za linkove.
Vrednost ovih atributa bi trebalo da bude kratka i
jasna.
7. Proverite da li ima pogrešnih linkova (koji nikuda ne
vode).
8. Redovno aţurirajte sadrţaj vaših strana. Ovo je vaţ-
no i zbog mašina za pretraţivanje, a verovatno još
vaţnije zbog posetilaca strane. (Zamislite samo stra-
nu na kojoj piše: Poslednji put promenjeno:
2.10.2003.)
9. Kreirajte sintaksno ispravan HTML dokument.
10. Dostupnost vašeg sajta takođe ima uticaj na njegovo
pozicioniranje. Zato, nađite dobrog Internet provaj-
dera.
11. Neprekidno nagledajte statistiku vaše Web lokacije,
kako biste pratili kako su vaše strane pronađene, i
na osnovu tih informacija podešavali vaše Web stra-
ne.
Strane koje roboti ne indeksiraju
Čak i ako ste se prilikom kreiranja vaših strana pridrţavali
svih preporuka za podešavanje, moţe se desiti da neke
strane ne budu indeksirane, i samim tim nedostupne maši-
nama za pretraţivanje. Ovo se dešava:
kod strana koje su dostupne isključivo preko submit
dugmeta,
kod strana kojima se pristupa preko padajućeg
menija,
kod strana dostupnih isključivo preko kontrole
textbox za pretraţivanje,
kod strana koje zahtevanju prijavljivanje (login stra-
ne),
kod strana koje su redirektovane pre prikazivanja
sadrţaja.
VAŽNO
Koristite samo reči koje zaista definišu i opisuju vašu
stranu, inače možete postići suprotan efekat - mašine za
pretraživanje neće uopšte indeksirati tu stranu.
30
A šta raditi u situacijama kada želite suprotno, odnosno
kada želite da neke od vaših strana ne budu dostupne
robotima mašina za pretraživanje?
Situacija je naravno rešiva, i to najčešće pomoću:
specijalnih meta tagova i/ili
robots.txt datoteke.
<meta name="robots" content="noindex, nofollow">
Ovaj meta tag sprečava indeksiranje strane na kojoj se
nalazi, ali i sprečava praćenje linkova, koji se nalaze na toj
strani. Sadrţaj atributa content moţe biti samo nofollow,
ukoliko ne ţelite da sprečite indeksiranje strane, već samo
praćenje linkova sa nje.
robots.txt datoteka
Datoteka omogućava da se na jednom mestu definišu sve
strane ili folderi, koji treba da se izuzmu od indeksiranja,
odnosno poseta robota.
robots.txt datoteka mora da se nalazi u okviru korenog
foldera vaše Web aplikacije, i mora da se zove tačno
"robots.txt". Potrebno je da sadrţi karaktere ASCII tipa, i
zbog toga je najjednostavnije kreirati je pomoću programa
Notepad.exe.
Sadrţi sledeće ključne reči:
User-agent: robot na koji se odnosi naredno pravi-
lo
Disallow: strana ili folder čiju posetu ţelite da spre-
čite od strane prethodno definisanog robota
Primeri sadržaja:
1. sprečava sve robote da posete sve strane Web sajta:
User-agent: *
Disallow: /
2. sprečava sve robote da posete foldere images i private:
User-agent: *
Disallow: /images/
Disallow: /private/
3. sprečava sve robote da posete stranu
rasporedza2007.html u folderu rasporedi (ostale strane u
ovom folderu će biti indeksirane):
User-agent: *
Disallow: /rasporedi/rasporedza2007.html
4. sprečava Googlebot robot da indeksira sve strane, osta-
lim robotima to dozvoljava.
User-agent: Googlebot
Disallow: /
Da biste razumeli kako sve ovo funkcioniše, napravite mali
test.
Prvo, probajte da pomoću nekoliko mašina za pretraţivanje
pronađete strane vezane za iste ključne reči. Moţda će vas
iznenaditi različiti rezultati, ali setite se da roboti imaju svo-
je sopstvene algoritme za indeksiranje, kao i da te algorit-
me menjaju s vremena na vreme.
Zatim, pokušajte da napisano u ovom tekstu primenite u
okviru vaše Web lokacije i pratite pozicioniranje vaših stra-
na. Verovatno nećete biti odmah sasvim zadovoljni, ali vas
ništa ne sprečava da promenite sadrţaj. Da bi roboti indek-
sirali vaše promenjene strane, ponekad je potrebno da pro-
đe i više dana. Zato imajte strpljenja, sigurno će se isplatiti.
U sledećem nastavku ćemo govoriti o podešavanju izgleda
Web strana pomoću kaskadnih stilova (CSS).
SAVET
Napred opisano nije jedino što utiče na rangiranje naših
Web strana. Veoma važan faktor predstavljaju i linkovi koji
sa drugih strana od drugih Web sajtova ukazuju na naše
strane. I zato, kreirajte deo sajta koji će biti interesantan i
drugima za linkovanje. Na taj način ćete značajno bolje
pozicionirati vaš sajt, jer će se povećati broj linkova koji
ukazuju na njega.
31
U ovom broju časopisa govorićemo kako se pomoću CSS
stilova (Cascading Style Sheets) moţe podešavati i kontro-
lisati izgled Web strana.
Do sada nismo mnogo govorili o uređivanju Web strana,
pri čemu mislimo na podešavanje boja pozadine, tipa i
veličine slova, izgleda linkova, tabela i ostalih elemenata.
Sa dobrim razlogom, jer ako za uređivanje koristimo sta-
ndardne atribute tagova, potrebno je podešavati svaki
element na svakoj strani.
Srećom, postoji CSS, koji omogućava definisanje fontova,
boja, margina, linija, visine, širine, slike pozadina eleme-
nata, pozicioniranje i još mnogo toga.
Šta je CSS?
CSS predstavlja jednostavan, ali veoma moćan jezik pomo-
ću kojeg moţete dodati stil vašim Web stranama, odnosno
definisati način na koji će njihov sadrţaj biti prezentovan.
CSS moţe biti dodat direktno u HTML elemente, u <head>
deo Web dokumenta, ili se moţe nalaziti u posebnom
dokumentu.
CSS sadrţi definicije stilova koji se primenjuju na elemente
HTML dokumenta.
CSS stilovi definišu kako će elementi biti prikazani i gde
će biti pozicionirani u okviru HTML dokumenta.
CSS predstavlja veoma vaţan deo razvoja Web lokacija.
Zašto koristiti CSS?
Neki od razloga zašto biste koristili CSS kod izrade vaših
Web strana su:
Lakoća korišćenja: jedan CSS dokument moţe kontrolisati
izgled više HTML strana. Da bi se promenio njihov izgled,
potrebno je promeniti samo CSS, a ne svaku pojedinačnu
stranu.
Manja veličina: CSS omogućava da se potpuno uklone svi
tagovi i svi atributi koji definišu izgled Web strana ( vred-
nosti za širinu, visinu, fontove, boje, slike pozadine), što
smanjuje veličinu Web strana.
Veća kontrola: CSS dozvoljava kontrolu izgleda strana
pomoću svojstava kao što su: capitalize, uppercase,
lowercase, text-decoration, letter-spacing, word-spacing,
text-indent, i line-height. CSS takođe moţe biti korišćen za
dodavanje margina, okvira, razmaka između elemenata,
boja pozadine i slika u bilo koji HTML element.
Primena kod različitih medija: CSS moţe biti kreiran za raz-
ličite medije (različiti Web čitači, štampači, projektori), bez
menjanja sadrţaja ili strukture dokumenta.
Da li postoji razlika između HTML i CSS?
HTML se koristi da definiše strukturu Web dokumenta.
CSS omogućava formatiranje definisane strukture Web
dokumenta.
Osnovna CSS sintaksa
Ukoliko bismo hteli da pozadina naše Web stane bude sivo
-srebrne boje, korišćenjem HTML jezika uradili bismo to na
sledeći način:
<body bgcolor="#c0c0c0 ">
Pomoću CSS jezika napisaćemo slično:
body {background-color: #c0c0c0;}
Kao što moţete videti, CSS kod je sličan HTML kodu.
Na osnovu prethodnog primera, moţemo definisati osnove
CSS modela.
CSS je predstavljen kao skup pravila, koja se pišu na
sledeći način:
selektor
{
atribut1: vrednost1;
atribut2: vrednost2;
}
Selektor moţe biti HTML element, stil klasa, kao i pseudo
klasa ili pseudo element.
U našem primeru, selektor je HTML element <body>, dok
je atribut background-color sa vrednošću #c0c0c0
(heksadecimalna oznaka za srebrnu boju).
Dodavanje CSS u HTML stranu
CSS stil se moţe dodati u Web stranu korišćenjem sledećih
načina:
1. inline (definicija stila se vezuje za pojedinačni HTML
element preko HTML atributa style)
Izrada Web stranica (11)
CSS stilovi
32
<html>
<head>
<title>Primer za inline CSS stil</title>
</head>
<body style="background-color: #c0c0c0;">
<p>Ova strana ima sivu pozadinu.</p>
</body>
</html>
2. ugrađivanjem (interni stil - definicije stilova su sas-
tavni deo HTML dokumenta, dodaju se u <head>
deo dokumenta pomoću taga <style>)
<html>
<head>
<title>Primer za ugrađivanje CSS stila</title>
<style type="text/css">
body {background-color: #c0c0c0;}
</style>
</head>
<body>
<p>Strana sa sivom bojom pozadine.</p>
</body>
</html>
3. povezivanjem (eksterni stil - definicije stilova su u
odvojenom CSS dokumentu)
<html>
<head>
<title>Primer povezivanja eksternog CSS-a
</title>
<link rel="stylesheet" type="text/css"
href="stil.css" />
</head>
<body>
</body>
</html>
Navedeni načini za kreiranje stila mogu biti istovremeno
definisani za jednu Web stranu i (ili) njene pojedinačne
elemente. U tom slučaju, kreira se novi "virtuelni" stil, koji
se primenjuje sledećim redosledom:
1. eksterni
2. interni
3. inline
Način primene je kaskadni: stil na niţem nivou prekriće stil
na višem nivou, odnosno, inline stil ima najveći prioritet,
što znači da će prekriti stil definisan unutar <head> taga, a
stil, definisan unutar <head> taga, prekriće stil definisan u
posebnom CSS dokumentu.
CSS dokument
Detaljnije ćemo se baviti definisanjem stilova Web strane,
korišćenjem posebnog CSS dokumenta.
CSS dokument je tekstualna datoteka sa ekstenzijom .css
koja sadrţi niz CSS pravila. Dodavanje <link> taga u
<head> sekciju Web strane, omogućava formatiranje te
strane na način definisan u CSS dokumentu.
U našem primeru, CSS dokument se zove stil.css. Jedna, ili
više HTML strana, moţe biti povezana sa istim CSS doku-
mentom. Time postiţemo da promena, načinjena u CSS
dokumentu, bude vidljiva na svim stranama, koje za svoje
formatiranje koriste taj CSS dokument. Ako je potrebno
promeniti boju pozadine, na primer na 50 strana, CSS stil u
kome je definisana boja pozadine i koji je povezan sa tim
stranama, će nas spasiti od menjanja svih 50 Web strana.
Da bismo isprobali kreiranje stilova, pomoću Notepad.exe
programa kreirajte dve datoteke: jednu Web stranu
(default.html) i jedan CSS dokument (stil.css).
default.html
<html>
<head>
<title> Izrada Web stranica - Veţba - Povezivanje sa CSS
dokumentom</title>
<meta http-equiv="Content-Type" content="text/
html;charset=utf-8">
<link rel="stylesheet" type="text/css" href="stil.css" />
</head>
<body>
<h1> Šta je CSS?</h1>
<p> CSS predstavlja veoma moćan jezik pomoću kojeg
moţete dodati stil vašim Web stranama, odnosno definisati
način na koji će njihov sadrţaj biti prezentovan.</p>
<p> CSS je doneo revoluciju u svet Web dizajna. </p>
</body>
</html>
33
stil.css
body {
background-color: #c0c0c0;
}
Smestite oba dokumenta u isti folder, na primer D:\
PIL_Primeri, i potom default.html otvorite u Web čitaču.
Ako ste sve tačno uradili, treba da dobijete sledeće:
CSS atributi
Navešćemo najčešće korišćene CSS atribute:
U nastavku teksta ćemo proširiti naš stil.css dokument,
kako bismo isprobali neke od navedenih CSS atributa.
Opis - primer
definisanje tipa slova
font-family: arial;
definisanje alternativnih slova
font-family: arial, verdana, "times new roman";
veličina slova
font-size: 10px;
iskošeni tekst
font-style: italic;
"običan" tekst
font-style: normal;
podebljani tekst
font-weight: bold;
boja teksta
color: red;
boja pozadine
background-color: pink;
slika kao pozadina
background-image: slika.jpg;
ravnanje teksta
text-align: left;
nazubljivanje paragrafa
text-indent: 18px;
ukrašavanje teksta
text-decoration: underline;
širina elementa
width: 100px;
visina elementa
height: 200px;
podešavanje prostora između okvira jednog elementa i
drugog elementa - margina
margin: 5px;
margin-left: 5;
margin-right: 5px;
margin-top:5px;
margin-bottom:5px;
podešavanje praznine oko sadržaja elementa, ali unutar
njegovog okvira - padding
padding: 3px;
padding-left: 3px;
padding-right: 3px;
padding-top: 3px;
padding-bottom: 3px;
podešavanje okvira elementa
border-style: dotted;
border-width: 2px;
border-color: black;
pozicioniranje elemenata - apsolutno
position: absolute;
top: 50px; right : 100px; bottom : 300px; left : 100px;
pozicioniranje elemenata - relativno
position: relative;
top: 50px; right : 100px; bottom : 300px; left : 100px;
34
Naš zadatak je da tekst na strani bude crne boje, ispisan
slovima tipa Verdana i da veličina slova bude 11 piksela.
Zatim, da tekst u okviru <h1> taga bude crvene boje na
plavoj pozadini, ispisan slovima tipa Arial, veličine 24 pik-
sela. Tekst u pasusima treba da bude poravnat sa obe
strane.
Da bi tekst izlegao baš kako smo poţeleli, potrebno je da
stil.css dokument ima sledeći sadrţaj:
body {
background-color: #c0c0c0;
color: #000000;
font-family: Verdana;
font-size: 11px;
}
h1 {
color: #FF0000;
font-family: Arial;
font-size: 24px;
background-color: #0000FF;
}
p {
text-align: justify;
}
Novi izgled naše default.html strane:
U sledećem broju ćemo zaokruţiti temu o izradi Web stra-
nica opisom dinamičkog HTMLa.
35
Da biste dizajnirali Web strane koje su i privlačne i interak-
tivne, potrebno je da koristite DHTML, odnosno Dinamički
HTML. DHTML predstavlja kombinaciju HTML jezika, CSS
stilova, skripting jezika i DOM modela. Mi smo se do sada
upoznali sa HTML jezikom i CSS stilovima, a u ovom, pos-
lednjem nastavku našeg serijala o izradi Web stranica,
ukratko ćemo objasniti JavaScript jezik i DOM model.
Osnovna namena HTML jezika je kreiranje statičkog sadr-
ţaja i izgleda Web strane, bez mogućnosti kreiranja odgo-
vora na korisničke akcije. Web strana se učita i nadalje se
ništa ne dešava u Web čitaču. Na primer, moţda je u polje
na Web strani potrebno uneti datum ili telefonski broj u
određenom formatu. Provera ispravnosti unesenih poda-
taka ne moţe biti izvršena od strane HTML jezika, jer
HTML ne moţe da proveri ispravnost unetih podataka u
obrasce.
Šta je DHTML?
Dinamički HTML ili DHTML, predstavlja skup tehnologija
koje Web programeri mogu koristiti da obezbede menja-
nje Web strane u zavisnosti od akcija korisnika. DHTML
omogućava da se jedna HTML strana, inače statična po
svojoj prirodi, moţe menjati u svakom momentu bez inte-
rakcije sa serverom, jer se sve dešava na klijentu (Web
čitaču), što dalje znači da se promene izvršavaju brzo i da
ne zavise od dostupnosti Internet konekcije.
DHTML komponente su:
HTML
CSS
Skript jezik
DOM
Document Object Model (DOM)
Svi savremeni Web čitači imaju ugrađenu sposobnost da
međusobno povezuju elemente jedne strane preko DOM-a.
Kada se element učita, DOM omogućava njegovo stavljanje
u hijerarhijski odnos sa drugim elementima na strani. Na
taj način DOM predstavlja strukturu i sadrţaj strane. Tako-
đe, DOM omogućava da svaki element na strani postane
objekat, sa sopstvenim skupom svojstava, metoda i doga-
đaja.
Nama kao Web programerima je potrebno samo da koristi-
mo DOM kako bi napravili dinamičke HTML stranice.
Na primer, sledeći HTML kod:
<html>
<head>
<title>HTML dokument - primer</title>
</head>
<body>
<h1> HTML dokument</h1>
<p>Ovo je primer <i>jednostavnog</i> dokumenta.
</p>
….
hijerarhijski prikazan preko DOM-a, izgleda na sledeći
način:
Izrada Web stranica (12)
Dinamički HTML
36
JavaScript jezik
JavaScript predstavlja objektno zasnovan skripting jezik
koji omogućava da se doda dinamičnost i interaktivnost
Web stranama. Na primer, JavaScript omogućava da se:
dinamički promeni stil pojedinačnih elemenata ili
cele strane;
dinamički promene elementi strane na osnovu uno-
sa korisnika;
sakupe i obrade podaci sa HTML obrazaca bez pot-
rebe da se zbog toga komunicira sa serverom;
doda interaktivnost grafičkim elementima na strani;
kreiraju i pamte podaci na korisničkim računarima
korišćenjem kukija (kolačića) i slično.
Ukoliko nemate iskustva u programiranju, učenje
JavaScript jezika moţe zahtevati prilično vremena. Mi
ćemo se u ovom članku upoznati isključivo sa osnovama
korišćenja. Ukoliko ţelite da samostalno pišete JavaScript
kod, na vama ostaje da se dalje usavršavate (čitanjem knji-
ga, praćenjem i promenom postojećih primera, pohađa-
njem kurseva).
Dodavanje JavaScript-a u HTML dokument
povezivanjem (definicije skriptova su u odvojenom
dokumentu)
<head>
<script language="javascript" src="leftMeni.js" />
</head>
ugrađivanjem (definicije skriptova su sastavni deo
<head> ili <body> sekcije dokumenta)
<script language="javascript">
function main()
{
window.alert("Hello, World!");
}
</script>
inline (skript se piše kao vrednost za događaj nad
elementom)
<input type="button"
onclick="window.alert('Zdravo!')"
value="Klikni za pozdrav" />
PRIMER
Da biste razumeli šta je DHTML, uradićemo primer, koji će
omogućiti promenu stila pojedinih elemenata strane na
osnovu akcije korisnika.
Postoji nekoliko događaja vezanih za korišćenje miša:
- onmouseover
- onmouseout
- onclick
- onmousemove
Naš primer će obraditi stavljanje i sklanjanje kursora miša
iznad objekata, odnosno obradiće onmouseover i onmou-
seout događaje.
Koristićemo ugrađeni stil za definisanje izgleda dokumenta.
Ţelimo da tekst bude plave boje, ispisan fontom Verdana
veličine 18px na sivoj pozadini. Takođe, kreiraćemo stil
klasu sa nazivom efekt, koja definiše crvenu boju teksta. U
<head> deo dodajemo sledeće:
<style>
body {
background-color: silver;
color: blue;
font: 18px verdana;
}
.efekt {
color: red;
}
</style>
Dodaćemo tekst na našu stranu:
<h1> DHTML komponente:</h1>
<ul>
<li>HTML </li>
<li> CSS </li>
<li> JavaScript </li>
<li> DOM </li>
</ul>
Naš cilj je da, kada korisnik stavi kursor miša iznad nekog
od elemenata navedene nenumerisane liste, da se boja tog
elementa promeni iz plave u crvenu, i da, kada skloni kur-
sor miša sa tog elementa, slova postanu ponovo plava.
Ovo ćemo postići na sledeći način: dodajemo događaj
onmouseover kao atribut u početni tag elementa i stavlja-
37
mo njegovu vrednost na this.className='efekt',što znači
da će se stil klasa sa nazivom efekt biti primenjena kada se
stavi kursor miša iznad elementa. Da bi se boja vratila u
plavu, odnosno da ne bude aktivna stil klasa efekt, dodaje
se i onmouseout događaj i njegova vrednost se postavlja
na this.className=';'.
Menjamo sledeće elemente:
<li onmouseover="this.className='efekt'"
onmouseout="this.className=';'"> HTML </li>
<li onmouseover="this.className='efekt'"
onmouseout="this.className=';'"> CSS </li>
<li onmouseover="this.className='efekt'"
onmouseout="this.className=';'"> JavaScript </li>
<li onmouseover="this.className='efekt'"
onmouseout="this.className=';'"> DOM </li>
Trebalo bi da korišćenjem Notepad programa napišete
sledeći kod:
<html>
<head>
<title>DHTML - 1. primer</title>
<style>
body {
background-color: silver;
color: blue;
font: 18px verdana;
}
.efekt {
color: red;
}
</style>
</head>
<body>
<h1> DHTML komponente:</h1>
<ul>
<li onmouseover="this.className='efekt'"
onmouseout="this.className=';'"> HTML </li>
<li onmouseover="this.className='efekt'"
onmouseout="this.className=';'"> CSS </li>
<li onmouseover="this.className='efekt'"
onmouseout="this.className=';'"> JavaScript </li>
<li onmouseover="this.className='efekt'"
onmouseout="this.className=';'"> DOM </li>
</ul></body></html>
Tekst snimite kao DHTML_Primer_1.htm i zatim datoteku
otvorite u Web čitaču. Ako ste sve tačno uneli, treba da
dobijete sledeće:
Testirajte stranu tako što ćete staviti kursor miša iznad
neke od komponenti DHTML-a. Ako je sve u redu, tekst bi
trebao da menja boju - iz plave u crvenu i obratno. Na sle-
dećoj slici je prikazan izgled strane ako je kursor miša
iznad elementa JavaScript.