USLOVZAPOLAGANJEISPITAJESTEDASE

REALIZUJENAJMANJE20POENAIPROJEKTNI
ZADATAK(WEBSAJT)!

U2005.,procenjenojedaeoko900milionaljudi
pristupitiInternetu,meunjima188milionasamouSAD.
Akosenanjihdoda58milionajapanskihkorisnika,45
milionanemakihkorisnika,35milionabritanskih
korisnika,18milionaruskihkorisnikai17miliona
kanaana,veomajeoiglednoznaenjerei"svetski"u
"WorldWideWeb".Poredsvihljudikojikoristeinternet,
tujeimanjibrojljudikojizahtevajunovesadrajeza
Web.Iakojetekoodredititaanbrojwebstranica,
izvetajisapopularnogpretraivaaGooglepokazujuvie
od4milijardeindeksiranihwebstranica(podataksa
kraja2005.).
Svakih24sata,nadesetinehiljadanovihvebstranica
objavljujesenajavnodostupnimmestimanaInternetu.
Najmanjetolikostranicasepostavljanaprivatnim
intranetima,gdeihmoguvidetiposlovniljudipovezani
lokalnimmreama.Svakaodtihstranica,kaoi4milijarde
kojesuveonlinekoristeHypertextMarkupLanguage,
iliHTML.
Ciljjedaovladateovimosnovnimvetinamapotrebnim
dabistestvorilivebsajtzasamo9nedelja.

XHTML(ExtendedHypertextMarkupLanguage)iXML
(eXtensibleMarkupLanguage)sunovistandardiza
izraduvebstranica.Svakiprimerkojibudemoradilibie
upotpunostikompatibilansaXHTMLiXML,takodanije
potrebnoiznovauitiXHTMLiXMLkaozamenuza
staromodniHTMLa.
Uistovreme,sviprimerikojisebuduobraivalitestirani
suzakompatibilnostsanajnovijomverzijomsvihvelikih
internetpretraivaa.ToukljuujeMicrosoftInternet
Explorer,MozillaFirefox,OperaiSafari.Odsamog
poetkanauietedabudetekompatibilnisaprolou,
alispremnizabudunost.
CascadingStileSheets(CSS)omoguavajupaljivu
kontroluizgleda,fontova,bojaiformatiranjasvakog
aspektavebstranice,ukljuujuiitekstislike.Kadajere
kreiranjuprivlanihvebstranica,CSSidedalekoiznad
onogatotradicionalneHTMLstranicemogusameda
urade.Naprimer,CSSomoguavakonkretno
prilagoavanjeinformacijanastranicisamoza
tampanje,porednormalnogvebprikaza?
Nekadadavno,jodoknisupostajliotiscistopalana
mesecu,nekidalekovidiljudisuodluilidavidedali
mogudapoveuvieglavnihraunaraumreu.Da
skratimopriu,rezultatjebiomajkasvihmrea,koju
danaszovemoInternet.
Svedopoetka90tih,pristupinformacijamapreko
Internetabilajetehnikastvar.tavie,bilotolikoteko
dasu,akinauniciidoktorinauka,doivljavali
frustracijepokuavajuidazamenetekstove.Meutim,
jedanfiziar,danasveomapoznat,TimBernersLee
doaojenaidejukakodasalakoomunakrsno
referenciratekstnainternetuprekohypertextveza.To
inijebilanekanovost,alinjegovjednostavniHypertext
MarkupLanguage(HTML)jeuspeo,pasutektada
krenulivrloambiciozniprojekti.
OriginalnoznaenjeHypertextabilojetekstskladitenu
elektronskomoblikusavezamapoprenim
referenciranjemizmeustranica.Sadatoimaire
znaenjeiodnosisegotovonabilokakveobjekte(tekst,
slike,datoteke,...)kojimogudasepoveusadrugim
objektima.
HypertextMarkupLanguagepredstavljajezikkojimse
opisujekakosestranicesatekstom,grafikomidrugim
informacijamaorganizujuimeusobnopovezuju.Do
1993.ucelomsvetubilojegotovo100tinakraunara
opremljenodaopsluujeHTMLstranice.Te
interlinkovanestranicedobilesunazivWorldWideWeb
(WWW),aviebrowserajenapisanokojisuomoguavali
ljudimadapregledajutestranice.Zbogsvoje
popularnosti,nekolicinaprogramerakreiralisubrowsere
pomoukojihsemoglaprikazatiigrafikazajednosa
tekstom.JedanodtihprogramerabiojeiMarc
Andressenpostaojebogatiuven,prodavaojejedan
odnajpopularnijihwebbrowseraNetscapeNavigator.
Webstranicajetesktualnidokumentkojikoristi
komandeuposebnomjezikukojisezoveHTMLradi
dodavanjaformatiranja,grafikeidrugihmedijailinkova
kadrugimstranicama.

Naslajdusuprikazanedveistestraniceureenepo
standarduHTML4.01(XHTML1.1)iponajnovijem
standarduHTML5.RanijejekorisnikmoraodauCSS
datotecidefinieposebneidentifikatoreza<div>
elemente(#header,#nav,#content,#sidebar,#footer).
Kasnijeistekoristiuidentifikaciji<div>elementa.U
HTML5ovoseizbegavatimetosuapriorivedefinisani
selektoriodreenenamene(header,nav,article,section,
aside,footer)

Browserradimnogovieosimdaotvorifajliprikaega
naekran!
On,ustvari,sastavljakomponentestraniceiureujeih
onakokakojetodefinisanokomandamasakrivenimu
samomtekstustranice.TekomandesupisaneuHTMLu.
Webbrowserjekompjuterskiprogramkojiinterpretira
HTMLkomandedabisakupio,uredioiprikazaodelove
webstranice.

Naslajdujeprikazanlistingstranicekreiraneu
Notepadu.
SlikaprikazujetustranicuuSafaribrowseru.
Svakibrowseritakomandekojesuprikazaneulistingu
ovestraniceiinterpretiraihusvomprozorusve
zajednosaslikamaitekstom.
Dabistevidelilistingkodawebstranice,usvakom
browser,pritisnitedesnitastermiaiizaberiteView
SourceiliViewPageSource.Nekestranicesadre
frejmoveprekokojihmoeistovremenodaseprikae
viewebstranica.HTMLkomandezafrejmovemoguda
sevidepritiskomnadesnitasteriizboromopcijeView
FrameSource.

Prikazjedneverzijeistestranicenasajtu
www.csszengarden.com.

Istaprethodnastranicasadrugaijimizgledom
definisanimiskljuivopromenamaparametarau
priloenimhtmlicssdatotekama.

HTMLkodetenauiti,alisutinaizradejedneweb
stranicejestekucanjenekogteksta.Tomoetedaradite
ubilokomtekstprocesoruiliteksteditoru.Najvanijeje
dasetajtekstsnimikaotekstualnadatoteka,saASCII
enkodiranjem(iliUTF8)saekstenzijomhtml.
PANJA!:Nesavetujeseupotrebageneratoraweb
stranica(Dreamweaver,GoLive,FrontPage,...)jereoni
naudannainispisatiHTMLkd,kojiuveinisluajeva
neebitivalidaniliebitisaraznimgrekama.
SvakustranicumoeteproveritinakompatibilnostHTML
iCSSkodanasajtuhttp://validator.w3.org/
Kadaelitedasenastraniciprikaegrafika,zvuk,
animacija,videoiliinteraktivnisadraj,svenjihne
insertujetedirektnoutekstualnifajlstranice,kaoto
bistetouradilikoddokumenatanamenjenihza
tampanje(MicrosoftWord,AdobeAcrobat,...).Umesto
toga,kucateHTMLkomandekojebrowserugovoregde
danaetraenedatoteke.Samedatotekemedijesu
odvojene,iakowebbrowserprikazujedasusastavnideo
istogdokumentakadaprikazujestranicu.
Naprimer...
Listingprvestranicereferencirasenatrirazliitesliketo
semoevidetinadnulistinga
UPhotoshopuvidimodasuoneodvojenedatoteke.
Nastranici,ubrowseruoneizgledajukaojedinstveni
dokument.

Aulistingusevidikakoseonepozivaju...

UprvojlinijividiseverzijaXMLkodakaoitipenkodiranja
slovnihznakova.
Udrugojlinijikdidentifikujedajedokumenttipa
XHTML1.1,kojipotomomoguavabrowserudaproverii
obezbedidakdispunjavasvezahtevestandardaXHTML
1.1.
Takoe,moeteprimetitidodatnikdvezanza<html>
tag.Ovajkdsesastojioddvaatributa(xmlnsixml:lang),
kojisekoristezaodreivanjedodatneinformacijekojase
odnosinaovajtag.Ovadvaatributasustandardni
zahtevikodsvihXHTMLwebstranica.

Poetakstranice,bezodvajanjakoarkaa,bezslika,bez
formatiranja...
Tagovi:
<p>...</p>oznaavapoetakikrajpasusa
<br/>oznaavaprelomtekstaunutaristogpasusa

Ubacivanjeslika,formatiranjenaslovairazdvajanje
horizontalnimlinijama...
Prethodnotrebapotraitinasajtuwww.nba.comuopciji
Internationalplayerskojisutonaikoarkai.Zatimsa
sajtawww.nba.com/playerspreuzetisveinformacijei
slikenaihkoarkaauNBAligi.
Tagovi:
<h1>...</h1>headingprvognivoa(najveinaslov)
<h2>...</h2>headingdrugognivoa
<hr/>horizontalnalinija
<img..../>tagpomoukojegseumeeslikauweb
stranicu

RezultujuiprikazwebstraniceuSafaribrowseru.