You are on page 1of 18

2.1.

Poetak web-a
Pojavawebakakvogdanaspoznajemo,nijesedesilatakodalekokaotojetosluajsadrugimoblastimakojesmo
estoizuavali.Presamovieod25godina,webnesamodanijepostojaouovakvomoblikunegonijepostojao
uopte.Teknakon1990.godinepoinjesesaprvimaktivnostimanaovutemu,bezjasnogciljakaemusetano
ideitaenakrajubititerminwebkakvimgamidanaspoznajemo.Formalno,teknaprelazuizmeu1991.ka
1992.godini,pojavljujeseprvaverzijaHTMLa.Tektadasuseizvaninostekliuslovidaseovajjezik,asamimtim
iwebdaljerazvija.Meutim,HTMLjesamofazaurazvojuiistraivanjujezikakojisumuprethodili,paemose
kratkoosvrnutinasampoetak
2.2. Markap jezici
Markuplanguages(Markapjezici)sunastalisaciljemdasenapravijedanoblikstandardizovanogformatakojiese
koristitikaoizlazizpojedinihaplikacija,softvera,ureaja,...ibitiprilagoentoirojgrupimedijuma(razliitim
tipovimahardvera,softverima,operativnihsistema,...).Obziromdajeciljbiovrloambiciozan,aevidentnopostoji
velika razlika u tipovima, vrstama i nainima rada razliitih medijuma, Markup jezici moraju imati vrlo
jednostavnusintaksuistrukturudabibilisvimarazumljivi.
Kakotonisuprogramskijezici,panemogupostojatipromenljive,konstante,petljeisl.zaosnovnugradivnu
strukturuMarkupjezikajeizabrantag.NatajnainjedanMarkupjezikimakonanovelikiskuptagovakojimase
moe opisati ili kreirati eljeni sadraj. Markup jezici se piu kao obian tekst, pa su tako i tagovi odreeni
tekstualnisimboli.
PostojedvatipaMarkupLanguages:
1.SpecificMarkupLanguagesi
2.GeneralizedMarkupLanguages.
SpecificMarkupLanguagesserazvijajuzaposebne(vrlospecifine)nameneizadrugeuoptenepotrebenemogu
bitikorieni.Ovakvijezicinemorajubitikompatibilnisasvimdrugimajezicimaisoftverimajersepopravilu
koriste za posebne namene. Realni problemi su kada jedan programer odrava vie ovakvih jezika, koji su
meusobno razliiti, pa se stvara konfuzija u radu. Prednosti jezika ovog tipa su nerasprostranjenost i
nerazumljivostkodatomu"poveava"sigurnost.Sadrugestrane,visokodozvoljenaspecifinostkojajedatakao
mogunostprogramerujepreprekadasekreiraodgovarajuibrowserkojieumetidaprepoznaiznakakoda
tumai sve pojedinane specifinosti u samom jeziku. Zbog ovoga oni ni teorijski nemaju podrku za iroku
namenu.
GeneralizedMarkupLanguagessluedauniformiunainprikazivanjatekstailiobjektakomesudodeljeni.Njihovo
teorijsko razvijanje poelo jejo 1969.godine.Zarazliku odSpecificMarkupLanguagesGeneralizedMarkup
Languagesimajujasnuiunapredpoznatusintaksu.OvakviMarkupLanguagesinicijalnotrebadaopiustrukturu
dokumentaalinestilinainprikazivanja.Dabisenapraviobrowserilidrugisoftverkojijasnomoerazumeti
Generalized Markup Languages potrebno je da se definiu tana pravila i da se jezik standardizuje, da bi i
programerkojigapieisoftverkojigakreirailitumairadilipoistimpravilima.
2.3. HTML
HTML HyperText Markup Language nastao je krajem 1990. godine kao naslednik SGMLa. Predstavlja vrlo
striktnuformuSGMLaiimatanodefinisanbrojtj.skuptagovakojisunaraspolaganjuprogrameru.Svakitag
ima striktnu sintaksu i definisan nain delovanja na podatke. Pored toga pojedini tagovi imaju i grafiku
interpretaciju,pajeHTMLzamiljensaciljemdagrafikiurediistruktuirapodatke.
PrvaverzijaHTMLa,oznaenasaHTML1,pojavilase1991.godineitrajalasamojoutoku1992.Vetadajebilo
jasnodajetovrlosiromanaverzijajezikasamnogomanjkavosti.Naprimer,nijesemogaodefinisatieljenifont
stranice,pozadinskaboja,kreiratitabele,forme,itd.
Iztograzloga,ve1993.godinenastajeHTML2,kojitakoetrajesamodvegodine.Unarednedvegodine(1995.
1996.),pojavljujeseHTML3.2.InteresantnojedanepostojiverzjaHTML3.OvojeposledicatogatoWorldWide

Web ConsortiumW3C(Internacionalna organizacija za standardizaciju) nije na vreme dobila zahtev za


standardizaciju.Uovojverzijipodranjeradsastilovima(prvinivoCSSa)ipoveanbrojatributakojimaselake
ureujestranica.
Utoku1997.godine,zvaninosepojavljujeiHTML4.OvaverzijaHTMLajeimalavrlodobrekarakteristike,jerje
realizovanasadostapromenaipoboljanjauodnosunaranijeverzije,pajeuzsvojemanjemodifikacijetrajalado
2009.godine.KljunastvarjetojesvoformatiranjepojedinihelemenataicelestraneizmetenouCSS.
Uovomvrloproduktivnomperiodu,2003.godine,pojavljujeseiWeb2.0.ave2005.iAJAX.Sveovetehnologije
kreiraju dinamiki i interaktivni web kakvim ga mi danas poznajemo. Kvalitet HTML4 je time bio dodatno
potvrenobziromdajemogaodapodriiimplementirasvepromeneudrugimjezicimaitehnologijama.
Perioduod12godina,kolikojeHTML4bioaktivnouupotrebi,loginojemoraodoikrajobziromnapopularnost
webaisveveekorisnikezahteve.Takose2009.godinepojavljujeHTML5iCSS3,kojisesmatrajurevolucijomu
smisluuvedenihpromenainainarada.
2.4. WEB strana
WebstranajeobiantektualnifajlkojijenapisanprimenomjezikaHTMLiCSS.Poredovoga,webstranamoe
imatiinadogradnjuusmisluimplementacijeklijentskihiliserverskihjezika.Iakosuiklijentskiiserverskijezici
kategorizovanikaoprogramskijezici,kojisuviegrangaodmarkupjezika,oninemogudarealizujunijednu
stvar koju HTML moe. Na taj nain, iako argonski kategorizovan kao jezik najnieg prioriteta, najprostiji i
najlakiidaljejekljunizaprikaz,organizacijuiformatiranjewebstrane.
Ekstenzija HTML stranice moe biti html ili htm. Snimanjem fajla sa ovom ekstenzijom, operativni sistem
prepoznajekojipodrazmevanisoftvertrebadaaktivirakadasekliknenaovakavtipfajla.Usluaju,fajlovakojisu
htmlilihtm,podrazumevanisoftverzanjihovootvaranjajepodrazumevanibrowsernatomoperativnomsistemu.
HTMLjejezikkojiimatanodefinisanskupiimenatagovakojasunamnaraspolaganjuipomounjihsekreira
grafikasvakogsajta.Razliitostugrafikomizgledurazliitihsajtovajeposledicakreativnosti,dizajnairedosleda
primenepojedinihHTMLtagova.
KljunojerazumetidaHTMLHyperTextMarkupLanguagepredstavljaprosttekst.Meutimovajtekstnije
kaotekstkojiitamoudnevnimnovinama.IztograzlogaunazivuHTMLnalazisereHyper.Onaukazujeda
ovajtekstimaviinivoznaenjaanesamosadrajzakorisnika.Tajviinivoseodnosinanainprikazasadrajai
dodatneinfromacijezabrowseriserver,zatasuzaduenitagovi.Poredtoga,HyperTextukazuje,dasezarazliku
odobinogteksta,mogukoristitiiHyperLinkovi.Linkovipredstavljajumogunostdaseklikommiananeki
tekstilisliku,odserveramoetraitipotpunodrugitekstualnifajl(HTMLfajl)imesedobijaprikazpotpunonove
strane.
Prikaz web strane kod korisnika, zapoinje unosom URL adrese u browser, i klikom na Enter,
kreiranjemHttpRequesta.Kaoodgovorservera,HTTPprotokolomsealjetekstualniHTMLfajlkojisenalazina
webserveru,iprikazujeubrowseru.
KadabrowserdobijeovajHTMLkod,browserpoinjedaitajednupojednulinijukoda,idauskladusaimenima
tagovarealizujeonotosunjihovefunkcije.Natajnain,jedanodprvihkorakamoebititraenjedaserver
isporuipropratniCSSfajl,ukomesebliedefinienainprikazapodatakautomHTMLfajlu,prikazsadrajau
zaglavlju browsera, definisanje dimenzija strane, strukture, stilova i na kraju sadraja web strane. Sve ove
informacijesenalazeunutarHTMLstraneipropratnogCSSfajla.Meutim,unutarHTMLstraniceseinicijalno
nalazisamotesktualnisadraj,doksesvidrugi(slike,video,audiofajloviisl.)definieunutarHTMLkodakao
mestoidimenzijakojaserezerviezatakavfajlkaoiputanjagdesenaserverutajfajlfizikinalazi.Ceopostupak
interakcijebroserasaserverom,uskladusadefinisanimHTMLkodomipotrebamazadrugimfajlovimakoje
trebaprikazatiunutarwebstrane,serealizujeHTTPprotokolombezpotrebeintervencijekorisnika.Zbogovog
postupkakojiserealizujeuviekoraka,usluajudasekoristisporijaInternetveza,uitavanjestraneilinekih
njenihdelovanedelujedaserealizujetrenutno,toijesterealnostanjestvari.

KadasesadrajHTMLstraneuitaubrowser,uskladusanapisanimkodom,browseresadrajteHTMLstrane
grafikivizuelizovati.KorisnikusetakowebstranaprikazujegrafikidokjeupozadinioriginalniHTMLkod.Za
svakuwebstranukojaseprikaeubrowserumoesevidetiinjenoriginalniHTMLkod.Ovajkodsenikakone
moesakritiodstraneprogramera,veseprikazujeuoriginalnomoblikukaotojenawebserveru.Urazliitim
browserima,seprikazsadrajaHTMLstranedobijanarazliitenaine,alizanajveibrojnjihsedobijadesnim
klikommianaprikazanisadrajsajtaiizboropcijeViewpagesource.
2.5. Struktura HTML-a
Kao to je ranije napomenuto, osnovni gradivni element u HTMLu je tag. Tagovi mogu biti upareni ili
neupareni.Ovapodelajeizvrenauodnosunaoznakekojimasetagoviotvarajuodnosnozatvaraju.Upareni
tagoviimajuoznakuzaotvaranjeioznakuzazatvaranjetaga:
otvaranjetaga:<IME_TAGA>
zatvaranjetaga:</IME_TAGA>
Naprimer<p></p>
Neuparenitagoviimajusamojednuoznaku,kojomsetagistovremenootvaraizatvara:
<IME_TAGA/>
Naprimer</br>
HTML jezik nijecase sensitive,to znai da se imena tagova mogu pisati i velikim i malim i kombinovanim
veliinamaslova(title=Title=tiTLe),alijepreporukadasekoristemalaslova.
Pri prikazivanju stranica browseri se oslanjaju na imena tagova, jer se time precizno definie kako odreeni
sadrajtrebaprikazati.Svakitag,opisansvojimimenom,imapreciznodefinisanuulogu.Koduparenihtagova
funkcijakojutagobavljapoinjeodmestagdejetagotvorenizavravasemestomgdejezatvoren,asadrajnakoji
tagdelujejesadrajizmeuotvoreneizatvoreneoznaketaga.Izvanzatvorenogtagaefekattogtaganepostoji.
Takonaprimer,tagi,kojimsepostiedasetekstprikaekaoItalic,ikojidelujenatekstPera,ukodusepiekao
<i>Pera</i>aubrowseruprikazujekao
Kaotosevidi,oznakezaotvaranjeizatvaranjetagovaseubrowseruneprikazuju,alijenjihovefekat(uovom
sluajuItalic)postignut.
Usklopuoptihpravila,vanojenapomenutidasenapisaniHTMLkodrealizujeredosledomkojimjenapisan,
odozgonadole,islevanadesno.
Poredtaga,HTMLsestrukturnoopisujeiatributima.Atributsepieunutarimenataga,isluidabliedefinie
naindelovanjatagailiopietag.Imenaatributasupreciznodefinisana,kaoitokojiatributsemoekoristitisa
kojimtagom.Ujednomtagumoebitivieatributa.Sintaksazahtevadanakondefinisanjaimenaatributa,postoji
operatordodele=,iunutarznakovanavodavrednostatributa.Takonaprimer,atributclass,savrednouproba,u
tagui,piesekao
<iclass=proba>Pera</i>.
Svakitagimatanodefinisanspisakatributakojisemogupisatiunutarnjega.Spisaksvihatributa,uHTML4,po
pripadnostitagovimamoesedataljnoproitatinaadresi

http://www.w3.org/TR/html4/index/attributes.html.
Svakitagdelujenasadrajkojisenalaziunutartaga.Tajsadrajmoebititekstzakorisnika,alimoebitiidrugi
tag.Usluajudasetagnalaziunutartagaimamougnjedenjetagova,itadasvakiodtagovadelujesafunkcijom
kojuonrealizuje.Trebavoditiraunadasekodugnjedenihtagovaprvozatvaraposlednjeotvorenitag.Takona
primer,akoporedtagai,elimodadelujeitagb(boldovanjeteksta),piemo
<i><b>Pera</b></i>
Uoptepojmoveostrukturijezikatrebasvrstatiikomentare.Komentaripostojeusvakomprogramskomjeziku,i
sluedapomognuprogramerimasanapomenamaiopisimakojiseostavljeni.Komentarisudeloviwebstranice
kojiseneinterpretiraju,asamimtimineprikazujukorisniku.Ulogakomentarajelakesnalaenjeinavoenje
unutarprezentacije.Kometarisuskoroobaveznikadavieljudiureujesajt,ilikadasekoristinekiodskript
jezika.Sintaksakomentaraje
<!tekstkomentara>
Tekstkomentaramoebitiujednomilivieredovaimoebitiobiantekstilibilokoji.
2.6. HTML tagovi
HTML4
<!-->
<!DOCTYPE>
<a>
<abbr>
<address>
<area>
<b>
<base>
<bdo>
<blockquote>
<body>
<br>
<button>
<caption>
<cite>
<code>
<col>
<colgroup>
<dd>
<del>
<dfn>
<div>
<dl>
<dt>
<em>
<fieldset>
<form>
<head>
<h1> - <h6>
<hr>
<html>
<i>

<label>
<legend>
<li>
<link>
<map>
<menu>
<meta>
<noscript>
<object>
<ol>
<optgroup>
<option>
<p>
<param>
<pre>
<q>
<s>
<samp>
<script>
<select>
<small>
<span>
<strong>
<style>
<sub>
<sup>
<table>
<tbody>
<td>
<textarea>
<tfoot>
<th>

HTML5

NisupodraniuHTML5

<article>
<aside>
<audio>
<bdi>
<canvas>
<datalist>
<details>
<dialog>
<embed>
<figcaption>
<figure>
<footer>
<header>
<keygen>
<main>
<mark>
<menuitem>
<meter>
<nav>
<output>
<progress>
<rp>
<rt>
<ruby>
<section>
<source>
<summary>
<time>
<track>
<video>
<wbr>

<acronym>(<abbr>)
<applet>(<object>)
<basefont>(CSS)
<big>(CSS)
<center>(CSS)
<dir>(<ul>)
<font>(CSS)
<frame>
<frameset>
<noframes>
<tt>(CSS)

<iframe>
<img>
<input>
<ins>
<kbd>

<thead>
<title>
<tr>
<u>
<ul>
<var>

2.7. Struktura web strane


OsnovnitagovikojiopisujubazinustrukturuHTMLdokumentasu:
HTMLHTMLdokumentuvekpoinjetagom<html>,azavravasetagom</html>,imeseukazujenapoetaki
krajprimeneHTMLjezika.
HEADUparenitag<head>definiezaglavljeHTMLstranice,ukomesenalazeinformacijeosamomdokumentu
(naslov, opis, kljune rei, ime autora, itd.) i gde se piu svi script jezici (npr. Java Script) i veza sa drugim
eksternimfajlovima(CSS,js,...).Sadrajkojisepieutagu<head>senajeeneprikazujekorisniku,ivieje
namenjenkaoinstrukcijazabrowser.
BODYUperenitag<body>jenamenjenzapisanjekodakojitrebadaseprikaekorisniku.Ceosadrajstranice,
nalaziseuteludokumentakojeuokvirujeelement <body>.U stranicismedapostojisamojedanpartagova
<body></body>.
Skorosvitagovikojisunamenjenikorisnikunalazeseutagu<body>.Jedanodretkihizutetakajeregularnitag
<title>kojisepieu<head>tagu,idefinienaslovstrane,kojiseprikazujeuzaglavljubrowsera.
Ovajizuzetakjezbogtogatoprikazanisadrajnijeutelusajata,vepripadazaglavljubrowsera.
Nabaziovaetiritagamoesekreiratiprvawebstrana:
<html>
<head>
<title>MojaprvaWebstranica</title>
</head>
<body>
Dobardan!
</body>
</html>

Ovajkodpotrebnojeotkucatiubilokomtesktualnomeditoru(preporukaNotepad++,kojijebesplatan,imoese
preuzetisasajtahttp://notepad-plus-plus.org/download/),isnimitikaoindex.html.Nakonsnimanja,operativni
sistemeprepoznatidaseradiohtmlekstenzijifajla,iautomatskiikonicupromenitiuikonicubrowserakojijena
tomraunaruizabrankaopodrazumevani.Klikomnafajl,automatski eseotvoritipodrazumevanibrowser,i
prikazatisadrajwebstrane.

Trebanapomenuti,daiakonitaeksplicitnonijenapomenuti,ubrowserupostojepodrazumevanevrednostikoje
seautomatskiprimenjujunasajt:FontTimesNewRoman,Veliina:12px,Bojateksta:CrnaiBojapozadine:Bela.
SveovekarakteristikesemogudefinisatiipromenitiusamomHTMLkodu,aliakosenenavedu,koristeseove
inicijalne.
Kadasekreiraovakvastranica,onajerelativnoprosta,aliformirastrukturuwebstrane.Svetosedaljeradisvodi
senaproirenjebrojatagova,kojimasedobijeefekat,slike,boje,linka,ureenja,strukturiranjasadrajaislino.
2.8. Rad sa tekstom
Problem sa srpskim jezikom se javlja zbog toga to je podrazumevani kod, raspored na tastaturi i u samom
tekstualnomeditoru,ibrowseru,engleski.Iztograzloga,svaslovakojasuiuengleskomjezikuseregularno
prikazuju,alipostojiproblemsasrpskimslovima.Ovajproblemreavasekrozlinijukodakojomsebrowseru
ukazujedaprilikomprikazatrebadakoristidrugikodniraspored.Zasrpskolatininoiirilinopismo,koristise
UTF8.Ovalinijakodasepieuheadsekciji,iodnosisenakompletantekstualnisadrajwebstrane:
<metahttpequiv="ContentType"content="text/html;charset=utf8">

<html>
<head>
<title>Definisanjetipahtmlaiprikazanacionalnihkaraktera</title>
<metahttpequiv="ContentType"content="text/html;charset=utf8">
</head>
<body>
Tekstsasrpskimslovima.<br/><br/><!Ovojekomentar>
Sadasevideislova,,,i<br/>
??????????????:?,?,?,?,?,?,????????.
</body>
</html>
UHTMLupostojidostatagovakojiseuiremsmislumogukoristitizaradsatekstom.Ovdeemopomenutii
objasnitisamoosnovne,kojisenajeekoriste,dokeseveinarealnihposlovazaradsatekstomrealizovati
pmouCSSa.Naprimerutemplateaeseobjasnitiiostalipotrebnitagovi.
1.Radsapasusima:
Regularnitag<p>definiekreiranjepasusa,kojipoinjeunovomredu.Uokvirutaga<p>moesenavestiatribut
ALIGN,kojiodreujehorizontalnoporavnanjeparagrafa;vrednostovog atributamoebitijednaodsledeih:
LEFT,CENTER,RIGHT.
<palign="center">Ovojepasuskojijecentriran.</p>
Vrloslianefekatubrowserukaoitag<p>imaiuparenitag<blockquote>,saciljemdaukaedajedeoteksta
unutarnjegapreuzetodnekogdrugogizvora.

<blockquotecite="http://ict.edu.rs/studiranje/obavestenja_o_nastavi">
Sveana dodela diploma odrae se u sredu 15.4. sa poetkom u 10h.
</blockquote>
2.Prelazakunovired:
Efekatprelaskatekstaunoviredpostieseneuparenimtagom<br/>.Svakiovajtagimaefekatkao totaster
EnterimauWordu.
3.Formatiranjeteksta:
PomouHTMLtagovamoesepostiikvalitetnoformatiranjeteksta,vrloslinoosnovnimfunkcionalnostimau
Wordu. Meutim, jo pogodniji nain za formatiranje je kroz CSS koji se obrauje u narednom poglavlju.
Stilizovanjetekstakao:Bold,ItaliciUnderlinejepomouregularnihtagova<b>,<i>i<u>.
4.TagoviH1H6:
Uparenitagovi<h1>do<h6>sekoristezadefinisanjeveliineteskta.Iakojedefinisanjeveliinetekstamnogo
preciznijeCSSom,skorosviwebpretraivaioekujuHtagove.PrimarnaulogaHtagovajedaseistaknunaslovii
podnaslovi.PostojetagoviH1,H2,H3,H4,H5iH6.TagH1dajenajveuveliinuslova,aH6najmanju.Svakiod
ovihelemenatapoinjeunovomredu,abrowseridodajujomalopraznogmestaprenjihovogprikaza.Uokviru
tagasemoenavestiatributALIGN,kojiodreujehorizontalnoporavnanjeprikazateksta;vrednostovogatributa
moebitijednaodsledeih:LEFT,CENTER,RIGHT.
2.9. Rad sa grafikom
RadsagrafikomjemodanajbitnijideoHTMLaobziromdaoveknajeeprvoprimetislikuilianimaciju,ina
bazinjenogkvalitetailiizgledadajeocenucelogsajta.Utomsmisluobjasnieseosnoveradasagrafikom,asve
ostaloeseobjasnitikrozradsatemplateom.
1.Radsabojom:
Bojasedefiniekrozatributcolor,ilibgcolor.Moebitidefinisanakaoengleskare(blue,yellow,green,red,...)ili
kaooznaka.Preciznijadefinicijajeoznaka(heksadecimalnapredstavaboje),kojapopravilupoinjesimolom#i
imakombinacijuestslovatj.cifara.Usluajudaseeliproizvoljnanijansaboje,klikomnatubojuuveembroju
softverskihpaketakojeradesaobradomslike,ovaoznakaseautomatskidobijazatunijansuboje.
2.Referenciranjeobjekata:
Fiziki prostor na web serveru podeljen je na direktorijume i foldere. Da bi se odrao sadraj web strane
napravljene na personalnom raunaru, koja u sebi sadri i objekte (npr.slike) svi objekti se moraju
definisatirelativnimiliapsolutnimputanjama.
Relativnaputanjasekoristikadajeputanjabazirauodnosunafoldergdesenalazihtmlstranicakojapoziva
odreenifajl(npr.slikaA,kojasenalaziufolderuslikekojijeufolderuukomeihtmlstranica).
Apsolutnaputanjasekoristikadasepozivajufajlovisafiksnodefinisanomputanjom(npr.slikaB,kojasenalazina
drugomsajtu).
Primerzaslikupera.jpg,kojajeufolderuA,unutardirektorijumaB(gdejeikodstranicehtmlstranice),asveovo
jenaCdisku
Relativnaputanja(fajlkojipozivajeuistojravnigdeifolderA)
A/pera.jpg
Apsolutnaputanja(fajlkojipozivajebilogde,pasedajepunaputanja)
C:A/B/pera.jpg
Usluajudajestrukturafolderakompleksnijazaapsolutnuputanjumoradasepiesvakideliputanje,dokse
relativnanemenja.Obziromdajeestonepoznatastrukturavanrootfoldera(folderkojijeodstranehostinga
dodeljenzaodreenisajt)apsolutnuputanjutrebaizbegavatizasvefajlovekojisusastavnideosajtaafizikise
nalazehostovanisasajtom.Izuzetakkadaseaposlutnaputanjakoristijekadasepristupafajlusanekogdrugog
sajta,kaonaprimer
www.sajt.com/slike/pera.jpg
Iuovmsluaju,problemapsolutneputanjemoebitipromenalokacijeireorganizacijasajtasakogasedohvata
eljenifajl.
3.Radsaslikom:
Slikasedefinieneuparenimtagom<img/>.Kljuniatributtaga<img/>jesrc.Atributsrcdefinieputanju
(source)iimeslikekojaseeliprikazati.Putanjamoebitiilirelativnailiapsolutna:
<imgsrc=A/pera.jpg/>

<imgsrc=sajt.com/pera.jpg/>
Veliinaslikekojaseprikazujeubrowserujeoriginalnaveliinaslikeuploadovaneslikenawebserver.Promena
prikazaveliineubrowseru,realizujeseatributimawidthiheight.Meutim,naovajnainsmanjujesesamo
dimenzijaalineiteinaslike.
<imgsrc=pera.jpgwidth=400pxheight=200px/>
Veliinaslike,definisanaatributimawidthiheight,moebitiapsoluta(upikselima)ilirelativna(definisanau%u
odnosunaoriginalnuveliinuslike).Usluajudaseelifizikimanjaslikaprenositi,potrebnojeslikukreiratisa
eljenim dimenizijama, i manjom teinom i kao takvu je prikazati u browseru. Ovakve slike se nazivaju
thumbnailinajeesuprviprikazslike,dokseklikomnanjihprikazujedruga,veaslika,kojaseposebno
pripremaiuploadujenaserver.
4.Radsalistama:
podrazumevajojednuodstandardnihoblikaformatiranjateksta.Postojedvatipalisti(oblikanabrajanja):sa
numeracijom(ureene)ibeznumeracije(neureene).
Tagzadefinisanjelistesanumeracijomje<ol></ol>.Unutarovogtaganabrajajusekonkretnestavke,kojese
zovuelementiliste.Tag zasvakiodelemenatalisteje<li></li>.Inicijalnanumeracijajepo praviluarapskim
brojevima.Usluajudaseelidrugaijinainnumeracije,koristisetag<ol>saatributomtypeivrednouodkoje
ekrenutinovinainnumeracije.
Zaoznaavanje elemenataneureenelistekoristise regularnitag <ul>.Ovajtipoznaavanjasemoeurediti
posebnimgrafikimelementimaprimenomatributatype:
<ultype=disc>zacrnutaku
<ultype=square>crnikvadrat
<ultype=circle>crnakrunica

<ultype="square">
<li>Mercedes</li>
<li>Audi</li>
<li>Reno</li>
</ul>

5.Radsatabelama
TabelesuuHTMLukreirajuprimenomnekolikotagova.Popravilu,tabelasesastojeodvrstaikolona.UHTMLu
tabelasesastojiodredovakojisupodeljeninapolja,aprvapoljasvihredovaineprvukolonu,drugapoljadrugu
kolonu,itd.
Tagovizaradsatabelamasu:
<table>zakreiranjetabele,
<tr>zakreiranjereda,
<td>zapoljeunutarredatj.kolonu,
<th>zadefinisanjezaglavljatabele,
<thead>,<tbody>i<tfoot>sekoristekagrupisanjesadrajauzaglavlju,teluipodnojutabele,
<caption>definisanjenaslovaceletabele.
Kreiranjetabelepoinjetagom<table>,unutarkogasedefinieeljenibrojredovapomoutaga<tr>.Pojedinane
elijetj.koloneunutarredovadefiniusepomoutaga<td>,doksekonkretansadrajpieunutartagova<td>.Na
tajnain,tabeladimenzija2x2,isadrajemporedovimaA,Bi1,2kreirasekaouListingu.
<table>
<tr><td>A</td><td>B</td></tr>
<tr><td>1</td><td>2</td></tr>
</table>
2.10. Linkovi
Hyper linkovi predstavljaju vrlo bitan segment rada HTMLa, ali i konkretne primene obzirom na potrebu
navigacijemeurazliitimwebstranicamasajta.Tagzalinkje<a></a>.Izmeu<a>i</a>nalazisetekstilislika
kojaseprikazujekorisnikukaovidljivdeolinka,kojisesmatraaktivnimdelomlinka.Klikomnatajtekstilisliku,
trebadaseukaenanekifajliliobjekat(webstranu,sliku,videofajl,zipfajl,worddokument,...).Atributtaga<a>
kojimsedefinieputanjaifajlnakojieseklikomnalinkukazatidefinisanjeatributomhref.
Primer1:Linkkawebstraniistogsajta
<ahref=home.html>Ovdepritisnutidabividelinauhomestranu.</a>

Primer2:Linkkawebstranidrugeweblokacije
<ahref=http://nesto.com/index.htm>Ovdepritisnutidabividelisajtnesto.com.</a>

Primer3:Tekstualnilinkkanekomfajlu

<ahref=http://www.nesto.com/web/mika.zip>Ovdepritisnutidabiskinulimika.zipsasajtawww.nesto.com
</a>

Primer4:Link(slika)kawebstraniistogsajta
<ahref=home.html><imgsrc="slike/slika1.jpeg/></a>
Poredreferenciranjanafajlovevanwebstranemoguejeizvritiireferenciranjaunutarwebstrane.Ovosekoristi
kadajepotrebnoklikomnalinkskoititj.pozicioniratisenatanodefinisanideowebstranice.
Zaovepotrebekoristisespecijalnikarakter#kojisestavljanapoetkusadrajaatributahref.Izanjega,moese
definisatiproizvoljnoime,kojimseopisujenazivpozicijenakojuseskae.Dabiseunutarstranedefinisalogde
poinjupojedinepozicije,koristiseatributname.Takoulistingukojisledi,klikomnalinkJavaScript,korisnikue
sestranicasamaskrolovati,inavrhstranepostavitisadrajkojikreeoddelatekstaJavaScriptOvdeubacitimalo
vieteksta...
<html>
<body>
<ol><li><ahref="#1">HTML</a></li>
<li><ahref="#2">JavaScript</a></li>
<li><ahref="#3">PHP</a></li>
</ol>
<h3><aname="1">HTML</a></h3>
<p>Ovdeubacitimalo<br/>vieteksta.</p>
<h3><aname="2">JavaScript</a></h3>
<p>Ovdeubacitimalovieteksta.</p>
<h3><aname="3">PHP</A></h3>
<p>Ovdeubacitimalovie<br/>teksta.</p>
</body>
</html>
Prikazlinkovanihdokumenta:Klikomnanekilink,inicijalnosesadrajlinkovanewebstraniceprikazujeuistom
browseru. Meutim, primenom atributatarget, mogueje preciznije kontrolisati gde e se prikazatilinkovani
sadraj.Atributtargetpripradatagu<a>imoeimativievrednosti.
<ahref="www.nekisajt.com"target="_blank"/>Klik</a>
Vrednost

Opis

_blank

Otvaralinkovanidocumentunovomprozoruilitabu

_self

Otvaralinkovanidocumentuistomprozoru(default)

_parent

Otvaralinkovanidocumenturoditeljskom(nadreeom)frame
u

_top

Otvaralinkovanidocumentucelombodyjuprozoru

framename

Otvara linkovani document u posebnom frameu sa


definisanimimenom

Formatiranjetekstalinka:Linkimatrifazekojesedetektuju(inicijalnaboja,bojautrenutkuklika,ibojanakonklika
nalink).Ovetrifazesemogupojedinano definisatiproizvoljnombojom.ToserealizujekroztriatributaLINK,
ALINK iVLINK,taga<a>.Oviatributisemogudefinisatiutagu<body>itadapravilovaizasvelinkovena
tojstrani.

<bodyBGCOLOR="#CCFFAA"TEXT="blue"LINK="red"VLINK="green"ALINK="red">
2.11. Rad sa formama
Formapredstavljaskupgrafikihelemenatakojizaciljimajudaomoguekorisnikudaodreenepodatkeprosledi
webserveru.Formajejedininainnakojisekorisnikipodacimoguprosleditiwebserverusaciljemdaseoni
daljeanalizuraju,snimeiliauriraju.Iztograzlogaformepredstavljajuvrlobitandeouformiranjuinteraktivnosti
websajta.

Formajesastavljenaodelemenataforme.Elementiformesemogugrupisati kao:tekstualnapolja,radiotasteri,
checkpolja,dropdownlisteitasteri.
FormaseuHTMLkodudefinieuparenimtagom<form>.Ovajtagnemagrafikuinterpretaciju,alisluidase
unutarnjegadefinieelementiforme,kojitrebadainejednucelinu.Najednojwebstranimoebitivieformi,i
onesemeusobnorazlikujutimetosugrupisaneuposebneformtagove.
Poredtoga,tagomformomoguavasedefinisanjanjegovihatributakojisuvrlobitnizafunkcionisanjeforme.
Atributitagaformsu:
ActionURLadresawebstranicekojojbrowseraljesvepodatkeuneteuformu,klikomnatastertipaSubmit.Ako
sealjenamail,trebastavitimailto:adresa.
Methodjenainslanja.MoebitiHEAD,POSTiliGET.POSTmetodaljepodatkeHttpRequest/Responceom,pa
susamimtimskriveniodkorisnika.GETmetodaljepodatkejavnimputem,unutarURLadrese.
Titleiliid je ime forme, tj. njen identifikator, po kojoj joj moe pristupiti vii programski jezik i po kojoj se
meusobnorazlikujevieformi
Enctypetipkodiranjaprislanju.Obavezanjekoduploadafajlova.
PrimerupotrebeformtagasanjegovimatributimejedatuListingu.
<formname="formular_1"action=obrada.phpmethod=POST>
<!Ovdedolazeelementiforme>
</form>
Tagzanajveibrojelemenataformeje<input/>.Ovojejedanodneuparenihtagova.Dabiseelementiforme,koji
sedefiniutagominput,meusobnorazlikovali,koristiseatributtype.Uzavisnostiodelementaforme,postojijo
punoatributakojiseestokoristeurealnimupotrebama:id,name,size,maxlength,disabled,multiple,checked,
value,...
a.Tekstualanapolja
Prvitiptekstualnogpoljajetype=text.Ovojenajeekorientiptekstualnogpolja.Grafikaprezentacijaovog
tipapoljajeprikazananaslici
<form>
<inputtype="text"id="ime"name="polje1"value="Ovojeinicijalnitekst/>
</form>
Atributvaluedefinieinicijalnovidljivsadrajtekstualnogpoljakojejeeditabilan.
Drugitiptekstualnogpoljajetype=password.Sadrajovogelementaformeseneprikazujeuoriginalu,negose
svakikaraktermenjanekimgrafikimznakom,uzavisnostiodbrowsera.Ovajelementformesekoristizaunos
ifri.
<form>
<inputtype=password"id="ime2"name="polje2"value="Ovojetekst/>
</form>

b.Radiotasteri
Radio tasteri su elementi forme koji se aktiviraju klikom mia i imaju isprogramiranu logiku. Ova logika
omoguujedaseizboromjednogtastera,drugiselektovanitasterautomatskideselektuje.Natajnainsamojedan
tasterugrupiradiotasteramoebitiselektovan.
Radio taster se realizuje pomou taga input, uz type=radio. Atributomcheckedodreeni taster se inicijalno
oznaavaselektovanim.Obziromdaujednojstranimoebitiviegruparadiotastera(npr.zapol,zabranistatus,
posaoisl.)potrebnojedefinisatigrupuiradiotasterekojipripadajutojgrupi.Ovoserealizujeatributomname.
Takosvitasterikojipripadajujednojgrupimorajuimatiistisadrajatributaname,dabilogikaunutarbrowsera
kontrolisaladasamojedantasterugrupimoebitiaktivanujednomtrenutku.Iakovrednostatributanamemora
bitiistazasveelementegrupe,pojedinanitasterisemeusobnorazlikujuprimenomatributaid,ijavrednost
morabitidrugaijazasvakiradiotaster.
<form>
<inputtype="radio"name="grupa1"id="broj1"value="ABC/>Da<br/>
<inputtype="radio"name="grupa1"id="broj2"value="DEF"checked/>Ne
</form>
c.Checkpolje
Checkpoljapredstavljajuelementeformekojise,kaoiradiotasteri,oznaavaju(selektuju)klikommia.Zarazliku
odradiotastera,kodkojihsamojedanmoebitiselektovan,kodcheckpoljasemoeselektovatiproizvoljanbroj
elemenata.Iztograzloganemapripadnostigrupi,pasvakicheckboximadrugaijuvrednostatributaname(ovoje
obavezno)anaravnoiatributaid(tovaiuvekkaopravilo).
Pieseutagu<input>adefinieseatributomtype=checkbox.
<form>
<inputtype="checkbox"name="chbIt"id="chbIt"value="IT"/>Internettehnologije
<inputtype="checkbox"name="chbTk"id="chbTk"value="TK"/>Telekomunikacije
<inputtype="checkbox"name="chbMi"id="chbMi"value="MI"/>Medicinskainformatika<br/>
</form>
d.Dropdownlista
Dropdownlista(padajualista)jeskupstavkiobjedinjenihujednucelinu.Inicijalno,samojedanelementsemoe
izabrati, iz grupe ponuenih elemenata. Dodatno, posebnim atributommultiple, moe se omoguiti izbor vie
stavkiistovremeno.Svakapojedinanastavkasepieunutartaga<option>.Ovestavkesuobjedinjeneucelinu
pomoutaga<select>.
Atributidropdownlistesu:size(brojinicijalnovidljivihopcija),id,name,Multiple,selected(poetnavrednost),
valueime/vrednostkojasevraaserveru,...
<form>
<selectname="lista">
<optionvalue="pera">Petar</option>

<optionvalue="mika">Milenko</option>
<optionvalue="laza">Lazar</option>
</select>
</form>
e.Tasteri
Postojetrirazliitatipatastera,ipotpunoserazlikujuposvojimfunkcionalnostima.Svisepiuutagu<input>,ali
sarazliitimatributima.
Svakomodtasteramoesedefinisatiinicijalnitekst,atributomvalue,kojiseprikazujekaotekstnasamomtasteru.
Ujednojformimoebitivietastera,akiistogtipa.
Svakomtasterusemoedodelitiime(atributnameiliid)dabiviiprogramsijezikmogaodakomunicirasa
tasterom.
1) Taster tipa submit se koristi da se klikom na njega svi podaci iz forme poalju ka stranici definisanoj u
atributuaction.Formatrebadaimaovajtasterilitastertipabutton.
<inputtype="submit"id="taster1"name="ime1"value=Prijava">
2)Tastertiparesetsluidaseklikomnanjegasvipopunjenipodaciuformiponiteiformavratiuinicijalnostanje.
<inputtype="reset"id="taster2"name="ime2"value=Ponisti">
3)Tastertipabuttonnijeinicijalnoisprogramiraninemalogikuradakaotasteritipasubmitireset.Onsekoristi
kadapostojipotrebadaseklikomnatasterrealizujenekaposebnaaktivnost.Utomsluajuprogramertrebada
isprogramiraradsamogtastera.OvosenajeerealizujeuJavascriptu.
<inputtype="button"id="taster3"name="ime3"value=Izracunaj">

2.12. Organizacija sadraja web strane


Sadrajwebstraneinjegovaorganizacijaimajuprimarniuticajnastavkorisnikaosamomsajtu.Dosadaobraeni
deo HTMLkodaomoguavadasenastraniciprikaeiformatiraeljenisadrajasada eseposebnapanja
posvetitiorganizacijiistruktuiranjutogsadraja.Ovojeposebnovanoimajuiuvidudawebpretraivaiimaju
izrazito razliite kriterijume i pravila u smislu naina organizacije sadraja. Pored toga, dobra organizacija
obezbeujedase eljenisadrajprikazujeistousvimiliveinibrowsera, toinaenijesluajzbograzliitih
interpretacija HTMLa u pojedinim browserima.Organizacija sadraja stranice je prvi korak koji se prealizuje
prilikomizradesajta,paesetomeposvetitiposebnapanja.Iakopostojetrirazliitanainadaseovajpostupak
uradi,ibezobziratosvatrinisupodjednakozastupljana,svakiodnjiheseposebnoobraditi.Aktuelnitrendje
daseorganizacijasadrajarealizujeiskljuivopomouCSSa,dokradsatabelamatrebakoristitisamozapotrebe
ureenja dela sadraja strane sa podacima. Trei nain je primena frameova, koja je nepreporuljiva i nije
podrana u HTML5, ali je i dalje zastupljena u odreenom procentu komercijalnih web sajtoma. Bitno je
napomenutidaseeljenaorganizacijamoepostiiasvatrinaina,itotakodakorisnikinemoedadaprimeti
razliku. Meutim, odravanje koda, proirivanje i povezivanje sa drugim programskim jezicima, kao i
kompatibilnostsawebpretraivaimadrastinoutiunanainkakoeseorganizacijasadrajarealizovati.
2.13. Organizacija sadraja pomou CSS-a

PojavomHTML4organizacijasadrajaprimenomCSSajepostalamogua,asadaskorodanemaalternativu.Ovaj
nainorganizacijejevrlolakzakreiranjeiodravanje,skalabilanipoeljanzasvewebpretraivae.Iztihrazloga,
moemoreidajenesamopreporuljivnegoskoroiobavezan.IakojeovaorganizacijarealizovanapomouCSS
a,presvegajepotrebnokreiratiiodreenideouHTMLudabiCSSmogaodadeluje.Zatepotrebekoristesedva
taga:divispan.
Uparenitagovidivispannemajuinicijalnugrafikuinterpretaciju,isluezagrupisanjesadrajanawebstrani.
Spanjepopravilujednorednidiv,ieesekoristizagrupisanjetekstaujednojliniji.Sadrugestranedivsemoe
koristitizagrupisanjesvihvrstasadrajapaidrugihdivova.
Idivispansemogushvatitikaozagradeumatematici.Nemajuulogeoperatoraaliihkoristimozagrupisanje
elemenata u iskazu i na taj nain jasno definiemo redoslede prioriteta akcija ili grupacija. Isto tako, tag div
koristimodapomounjegovihdimenzijaipozicije,definiemojedanprostorunutarstranice.Takodivnemaulogu
dabudevidljiv,negodarezerviemestogdetektrebadadoenekisadrajkojikorisnikvidi.Naovajnain
strukturadivovasemoezamislitikaostrukturaprostorijaudokumentacijizaizradukue.Tanoznamokoliko
prostorijaima,kolikosuimdimenzije,gdesekojanalaziuodnosunadrugeisl.alinemamnametajajertakua
tektrebadasegradi.Istotakoseskiciranjemorganizacijedivovapraviorganizacionastrukturarasporedunutar
webstrane,isvakidivjejednaprostorija.Sadrajprostorijeesedefinisatikadasekuaizgradi,asadrajdiva
kadasezavriprvafazapisanjaHTMLkoda,kojikreiradivove.Onotoseeliprikazatinapozicijigdejenekidiv
pieseunutarotvorenogizatvorenogtagatogdiva.
Brojtagovadivunutarstranenijeogranienpasamimtimnibrojlogikihcelinakojesekreiranemalimita.U
realnimsajtovima,brojdivovajemnogoveinegotojebrojvidljivihdelovastranice,tojeposledicapotrebedase
obezbedi neraspadanje sajta. Ova pojava se deava zbog razliite interpretacije pojedinih tagova, atributa i
inicijalnihparametaraurazliitimbrowserima.Dabiseovoizbeglo,pribegavasepravilugrupisanjadivova,ime
seovajproblemreavauvelikojmeri.Pravilogrupisanjajerelativnolako:Ukolikouhorizontalnojstrukturi,ili
vertikalnoj,postojivieodjednogdiva,gledanoodkrajnjihivicabrowsera,tihviepojedinanihdivovasegrupie
ujedanvei.Ovopraviloseprimenjujedoksenedoedojednogjedinogdiva,kojiseargonskinazivaokvir
(wrapper).Naovajnain,ceosajtjejedandiv,unutarkogapostojisloenaunutranjahijerarhija.
Naprimer,pretpostavimodanamjepotrebnaosnovnastrukturasajtakao naSlici1(levaslika),dobijenana
osnovuzahtevaklijenta.Naslici(desnaslika)jeprikazannainnakojitrebagrupisatieljeneblokove,uskladusa
prethodnimobjanjenjem.

Slika1.Prikazblokovskestrukturezaorganizacijusadrajawebstrane.
Naovajnaindolosedojednogdiva:okvir.Ovakavdizajnstrkturejenajeialimoeodstupatiusluajudasu
potrebnorazliitiefektiilidodatnokreiranjekodauCSSu.
Kadajekreiranacelokupnastrukturadivova,potrebnojenapisatiHTMLkodkojiodgovaraovojstrukturi.Pre
negosetouradi,trebanaglasitidajeupostupkupisanjaHTMLkodapotrebnoomoguitiCSSkodu(kojiese
kasnijenapisati)damoedadelujenakreiraniHTMLkod,itakosepostignekonanicilj.
Ovavezaserealizujeprekoatributa(idiliclass)tagadivtj.span.Atributidsekoristizasvakidivilispankojiima
jedinstvene karakteristike, i oznaava skraenicu od identifikator. Jedinstvenost se moe ogledati u dimenziji,
poziciji,bojiisl.Natajnainakosusvidivovirazliiti,svakoimaatributid,saposebnimimenom(npr.id=prvi,
id=meni).Sadrugestrane,akodvailiviedivova(ilispanova)imajuistekarakteristike(alineobaveznoi
sadraj)koristiseatributclass.Zaonedivovekojiimajuistekarakteristikekoristiseistavrednostatributaclass.
Tako dvadivakojaimajuistekaraketristikeimajuclass=oglas,doknekadrugadvasadrugimzajednikim
karakteristikamamoguimaticlass=cena,itd.
UprimerusaSlike1,divovizaBaner1iBaner2,suistihdimenzija,istepozicije(desno),istestrukture(npr.imaju
samonekuslikuilink)injihtrebaopisatisaclass.Svidrugidivovisuunikatniiimaeatributid.

SadatrebanapisatiHTMLkodkadaseznakompletnastruktura,imenadivovaipripadnostclassiliidatributa
pojedinimdivovima.
Prvidivkojisevidijedivsaid=okvir.NjegovHTMLje
<divid=okvir>
</div>
Kakosusvidrugidivovinasliciunutardivaid=okvirsavostalikodsepieunutartaga<divid=okvir>
</div>.
Nasliannainsekreirajuiostalidivovi,kojisuprvisledeiugnjedeniudivokvir.Kakoseunutardivavrh,
nalazedvadiva:logoilogovanje,njihovkodtrebapisatiunutardivavrh.
<divid=okvir>
<divid=vrh>
<divid=logo>
</div>
<divid=logovanje>
</div>
</div>
<divid=sredina>
</div>
<divid=podnozje>
</div>
</div>
Daljimrazraivanjem,naistinain,dobijasekonaniHTMLkodzapotrebeorganizacijesadrajapomouCSSa.
<divid=okvir>
<divid=vrh>
<divid=logo>
</div>
<divid=logovanje>
</div>
</div>
<divid=sredina>

<divid=meni>
</div>
<divid=sadrzaj>
</div>
<divid=baneri>
<divclass=baner>
</div>
<divclass=baner>
</div>
</div>
</div>
<divid=podnozje>
</div>
</div>
2.14. Upotreba template-a
SvetojedosadaobjanjenoimalojezaciljdasekorisnikupoznasaosnovnimpravilimaHTMLa.Kakojecilj
ovogkursadapokaenainkreiranjakonkretneserverskeaplikacije,iskoristiesejednogotovobesplatnoHTML
reenjezadizajnaplikacije.
Dabiseboljerazumeokorienitemplate,anabazidosadanjeteorijeHTMLa,objasniesepojedinidelovikoda,
kojiekasnijebitibitnizadaljirad.
Poetnu verziju templatea, koji e se objanjavati moete preuzeti iz materijala koji su dodeljeni ovoj nedelji
nastave,klikomnalinkPreuzmitemplate,padaljiradnastavitidirektnouelektronskomoblikusamogtemplatea.
Unutar templateanalaze se dva html fajla (index i index2). Prvo emo analizirati index.html, koji predstavja
poetniobliktemplateakojisedobijapreuzimanjemsanekogodvelikogbrojasajtovasaInterneta,kojijedodatno
malomodifikovanzapotrebeaplikacije.
Izgledovestranicejevrlouopten,iprikazanjenaslici1.
Slika1.Prikazpoetnogtemplatea.
Ovajtemplatesadriinicijalnusliku,definisanepozicijezagornjimeni,naslov,centralnideoilogo.
Kodovogtemplateajepodeljenudveceline:headsekcijaibodysekcija.
HeadsekcijasadripodatkeoCSSu,kojijedobijensapreuzimanjemtemlatea,skriptove,kojisutakoedobijenii
nekolicinudrugihpodataka.Ovojeprikazanonaslici2.
Slika2.Deoheadsekcijeinicijalnogtemplatea.

Blok1,naslici2,sadripodatkeonaslovustraneilinijukodazakorienjesrpskihslova.Blok2,sadrivezuka
eksternimCSSfajlovima.Blok3,sadrivezukajavascriptfajlovima,dokblok4sadridodatneinstrukcijeza
prikazsajtausluajudasekoristiverzijaInternetexploreramanjaodverzije9.
Naslici3,nalazisedrugideokodatemplatea,tj.deobodysekcije.Unutarnje,oznaenesukarakteristinesekcije,
tj.divovi.Blok1,naslici2,nalaziselistaunutarkojejepredvienhorizonatalnimeni,tj.skuplinkova.Blok2
definiesloganstranice,dokblok3centralnideostranice.Blok4sadrilogo.

Slika3.Deobodysekcijeinicijalnogtemplatea.
Polazeiodovakodefinisanogtemplatea,potrebnojedodavanjemHTMLkoda,ovajtemplateprilagoditinaim
potrebama.Utomcilju,izmeneemoraditiuvidljivomdelustranicezakorisnika,tj.ubodysekciji.
Prvoemododatinaelinkove,iputanjedonaihstranica.Ovokonkretnoznaidaseblok1,slike3,menjasa
<nav>
<ul
<li><a
<li><a
<li><a
<li><a
<li><a
<li><a
<li><a
<li

</ul>
</nav>

href="oaplikaciji.html">O

href="korisnici_aplikacije.html">Kome

href="uslovi.html">Uslovi

class="end"><a

href='registracija.php'

id="menu">
href="index.php">Poetna</a></li>

aplikaciji</a></li>
je

namenjena</a></li>

korienja</a></li>
href="verzija.html">Verzija</a></li>
href="autori.html">Autori</a></li>
href="kontakt.html">Kontakt</a></li>
class='regLink'>Registracija</a></li>

Naovajnaindefinisanjeeljenisluplinkova.
Sadrajbloka2,ukomesenalazislogan,trebazamenitisa
<divid="slogan"><ahref="index.php">Pedagokaevidencija<br/>nastavnika!</a></div>
Ublok3trebapostavitiformuzaprijavu,kojaesekasnijepomouPHPafunkcionalnorealizovati.
<div
<form
<table>
<tr>
<td><label
</tr>
<tr>
<td><input
</tr>
<tr>
<td><label
</tr>
<tr>
<td><input
</tr>
<tr>
<td
<input

</td>

method="post"

class="loginText">Korisniko

type="text"

type="password"

type="submit"

name="tbKorIme"

class='login'>
action="logovanje.php">

ime:</label></td>

class="field"/></td>

class="loginText">Lozinka:</label></td>

name="btnSubmit"

name="tbLozinka"

value="Logovanje"

class="field"/></td>

align="center">
class="loginButton"/>

</tr>
</table>
</form>
</div>
Uposlednjemdelu,blok4,trebastavitiiimeinstitucije.
<h1><divid="logo"><p>VisokaICTkola</p></div></h1>
Naovajnain,dobijasekorigovanisadrajtemplatea,prikazannaslici4,aijikodsenalaziufajluindex2.html.
Slika4.Prikazkrajnjegtemplatea.
Na ovaj nain kreiran je HTML template koji e se koristiti kao dizajn prve stranice aplikacije. Kasnijim
manipulacijamasaPHPom,centralnideoovogtemplateaeseprogramskimenjatiuzavisnostidalijekorisnik
ulogovan, i dalje redom u zavisnosti koje funkcionalnosti aplikacije koristi. Te promene e veinski biti
kontrolisaneviimprogramskimjezikom,alijebazinidizajnHTMLastalnoprisutan.
Pored ove statike stranice, aplikacija sadri i nekoliko drugih statikih stranica namenjenih neautorizovanim
korisnicima.Tosustranicekojesenaslici4nalazeizalinkovaugornjemhorizontalnommeniju.
Sve ove stranice izgledaju delom isto kao i kreirana stranica templatea, ali imaju dodatak sadraja, koji je
"nastavakstranenadole",slika5.

Slika5.Prikazstraniceoaplikaciji.html.
Dizajnove,isvihdrugihslinihstranica,sesadalakokreirakadajekreiranaglavnastranicatemplatea.Njutreba
kopiratizasvakunarednustranicukojukreiramo,ipromenitijojimeuimetestranice.Uovomsluaju,ime
kopiranestranicetrebapromenitiuoaplikaciji.html.Ovoimejeuskladusakodomulistingu,ispodslike3,
<li><ahref="oaplikaciji.html">Oaplikaciji</a></li>
gdejedefinisanHTMLkodzahorizontalnimeni,igdejeodabranodaseklikomnalink"Oaplikaciji"otvara
fizika HTML stranica ije ime jeoaplikaciji.html. Na slian nain se kreiraju i sve druge stranice koje se
predvieneovimmenijem.
Kopiranjem,ipromenomimenauoaplikaciji.html,inicijalnosedobijaistastranicakaoipoetna.Sadajetreba
promenitiuskladusapotrebamanovestranice.Kadasepogledaslika5,vidimodajesloganilogozadran,alije
centralni deo izbrisan, a pojavljuje se novi deo na dnu stranice. U skladu sa tim potrebama, u
stranicioaplikaciji.html,prvotrebaizbrisatideokojimsekreiracentralnisadraj.Deokodakojitrebaizbrisatije
ceo<divclass='login'>,kaotojemarkiranonaslici6.
Slika6.Deokodakojitrebaizbrisati.
Sadajepotrebnododatideonovogkodakojisenalaziispodpostojeegsadraja,ikojiedonetinovisadraju
stranicu.Ovajdeokodatrebakopiratineposrednopre</body>imesesadrajubacujenadnopostojeestranice.
Kodkojitrebaunetijedatnaslici7.

Slika7.Deokodakojimsedodajenovisadrajustranicu.

Naovajnainnovisadrajjedodat,inasliannainsedodajeidrugisadraj(tekst,slike,linkovi)inapreostale
stranice.PreuzimanjemfajlaPreuzmitemplate2,kojijesastavnideomaterijalazaovunedelju,moetepreuzetii
analizirati dosada kreiranu index stranicu, oaplikaciji.html, ali i ostale statike stranice koje se pojavljuju u
horizontalnommeniju.