Detaljnije o istoriji i nastanku Interneta moţete pročitatiWeb server, kao što ćemo videti...

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

http://www.let.leidenuniv.nl/history/ivh/chap2.htm

http://www.let.leidenuniv.nl/history/ivh/chap2.htm

http://www.cern.ch

http://info.cern.ch/

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.

http://www.howstuffworks.com/question549.htm

http://www.howstuffworks.com/question549.htm

http://www.microsoft.com/technet/network/ipv6/default.mspx

http://www.microsoft.com/technet/network/ipv6/default.mspx

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.

http://en.wikipedia.org/wiki/Domain_Name_System

http://www.icann.org

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.


Web server i HTML

DNS servis

Web serverRačunar sa Web pretraživačem

Jedinstvena InternetIP adresa

Jedinstvena InternetIP adresa

Zahtev

(Request)

Odgovor

(Response)

http://www.w3.org

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.


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:


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.

http://en.wikipedia.org/wiki/Hexadecimal

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:


Tabele

http://www.microsoft.com/scg/obrazovanje/pil/casopis/default.mspx

http://www.microsoft.com/scg/obrazovanje/pil/casopis/default.mspx

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

<li>Stavka 1</li>

<li>Stavka 2</li>

<li>Stavka 3</li>

</ul> 

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>


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>

<li>Stavka 1</li>

<li>Stavka 2</li>

<li>Stavka 3</li>

</ol>

Nova lista:<br>

<ol>

<li>Nova stavka 1</li>



</ol>

Ovakvo inicijalno brojanje moţemo promeniti, tako da

naznačimo od kog broja počinje numeracija:

<ol>

<li>Stavka 1</li>

<li>Stavka 2</li>

<li>Stavka 3</li>

</ol>

Nova lista:<br>

<ol start="4">




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



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



</form>


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



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


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:


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.


Podešavanje Web strana

NAPOMENA

Pogledajte kako je to urađeno na sajtu

http://www.infostud.com/

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)


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:


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>


onmouseout="this.className=';'"> CSS </li>


onmouseout="this.className=';'"> JavaScript </li>


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>


onmouseout="this.className=';'"> HTML </li>


onmouseout="this.className=';'"> CSS </li>


onmouseout="this.className=';'"> JavaScript </li>


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.

Detaljnije o istoriji i nastanku Interneta moţete pročitatiWeb server, kao što ćemo videti...

Documents

Transcript of Detaljnije o istoriji i nastanku Interneta moţete pročitatiWeb server, kao što ćemo videti...