Amittai Aviram - HTML Tutorijal

Amittai Aviram -
HTML Tutorijal
Ovaj dokument predstavlja nekoliko osnovnia HTML. HTML HTML je metod za markiranje dokumenata za stvaranje njihove eksplicitne
strukture, da bi maine mogle da ih itaju. HTML je proao kroz razne verzije od svog nastanka pre jedne decenije. Ovaj tutorijal predstavlja
poslednju i najbolju verziju HTMLa koja se irom koristi, nazvana XHTML 1.0 Strict. Ovaj tutorijal je pisan za netehnike itae i predstavlja
pomo najvanije markup elemente. Ovaj dokument takodje demonstrira sve njegove principe: sve to je spomenuto je korieno i svi
strukturni elementi su objanjeni u sadraju. Da bi stvari bije jednostavne, nema mnogo grafike. Upotreba Cascading Style Sheets
(CSS) za poboljavanje izgleda dokumenta e biti pokriveno u posebnom tutorijalu. Samo mali deli CSS e biti predstavljen na kraju ovog
tutorijala, da bi neke karakteristike HTML imale smisla.
Koncept HTML u "Nutshell"

HTML je skraenica od Hypertext Markup Language. On nije kompjuterski jezik. HTML je mali set simbola korienih u text dokumentu da
bi se pojasnila struktura dokumenta na nain da softver kao to je web pretraivamoe predstaviti tu strukturu.Npr. paragraph je
strukturalni element dokumenta. Veina pretraivaa el, po defaultu, prestaviti paragraph sa wordwrapom do poslednjeg reda i sa redom
vertikalnog prostora iznad i ispod paragrafa. Drugi elementi dokumenta ukljuuju headere, liste, i tabele.
HTML ne moe kontrolisati kako e dokument ispasti u prozoru web pretraivaa zbok pretraivaa, medija, hardvera, brzine konekcija, i
korisnikih potreba. HTML pojanjava strukturu dokumenta.
Pretraivai ignoriu svaki dodatni prostor koji imate u vaem HTML kodu, kao to su kartice ili dodatne linije, tako da moete da formatirate
va HTML kod na bilo koji nain elite da to ne utie na izgled dokumenta u prozoru. Pretraiva koristi HTML simbole same za odredjivanje
kako bi se prikazao sadraj. Razmak je dobro koristiti u vaem kodu za sopstvene potrebe, jer e vam pomoi da pronaete i druge ifrirane
elemente prilikom revizije dokumenta.
HTML treba smatrati produetkom interpunkcije. Tokom vekova, interpunkcija je razvijena zarad pismene strukture jezika koja se ne moe
predstaviti slovima. Slovo oznaava poetak reenice i period prestanka. Zarezi odredjuju klauzalne i zagradne fraze. Ali, iza reenice nivoa,
pisanje se oslanja na razmak i slova selekcije na izraavanje strukturalnih odnosa. Ove stvari se znatno razlikuju od raunara do raunara, u
zavisnosti od veliine ekrana, memorije, grafikih resursa, itd. Dakle, HTML ne koristi prostor da izraze strukturu, ali, umesto toga, simbolike
naznake koje svaki raunar moe pravilno protumaiti. I ba kao to vam u panskom interpunkcije omoguavaju da znate gde pitanje ili
uzvik poinje, tako prilaemo u ...! Ili ..., Isto tako HTML priloena struktura elemenata u parovima simbola, jedna na poetku i jedna na
kraju. HTML je konvencionalan i dosledan dovoljno da ga raunar proita mehaniki.
Elementi se mogu podeliti u dve grupe: Oni koji sadre i i oni koji su prazni, ili samostalni , elementi. Veina elemenata i dokumenta su
sadrajni - oni sadre tekst i neke druge elemente. Na primer, paragraf sadri obian tekst i moe sadrati nedvosmislen i snaan tekst ili
ak sliku. Ostali ukljuuju tabele, zahtevane inezahtevane liste, lista stvari koje ti spiskovi sadre i nedvosmislen tekst, koji sadri tekst
koji treba naglasiti. Prazni element ukljuuju slike, horizontalnih pravila (horizontalne linije razdvajanja) i redova koji se mogu pojaviti
unutar pasusa za posebne namene, kao to su stih ili adrese.
Postoje pravila ta moe da sadri ta. Paragrafi ne smeju da sadre paragrafe unutar njih. Tabela elije i lista stvari mogu da sadre
paragrafe i sve pasuse , ali paragrafii ne mogu da sadre tabele ili liste. Liste mogu da sadre samo stavke listi. Lista predmeta, zauzvrat,
moe da sadri i razne druge elemente. (Ovo je bolje objanjeno u nastavku, pod "Naruene liste.")
HTML simboli koji oznaavanje strukturalne elemente dokumenta se nazivaju oznake. Elementi koji sadre tekst ili druge elemente poeti sa
tagom otvaranja i zavravaju sa zavrnom oznakom. Tag za otvaranje se sastoji od simbola za elemente umetnutog
u < and > znakove: <p> za paragraf, <table> za tabelu. Tag zatvaranja ima dodatni / karakter da ga razlikujete od taga za
otvaranje: </p> i </table>. Dakle, stav poinje sa simbolom <p> i zavrava sa simbolom </p>, uz njegov sadraj dolazi izmeu dve
oznake. Prazni elemente, sastoje od pojedinanih oznaka koje se otvaraju sa < karakterom i zavravaju sa prostorom (ili zagradom u
vaem kodu, kojase tumai kao prostor), zatim />:
<hr />
<img
src="fun.gif"
title="Slika nas kako se zabavljamo"
alt="Zabavljali smo se"
/>
Bilo koji tag otvaranja ili samostalni tag moe da sadri, po imenu elementa (kao to je p ili img) jedan ili vie modifikovanih atributa. Atribut
precizira neke...atribute elementa. U drugom primeru, img element ima tri atributa: src, naslov , i alt. Src atribut, u ovom sluaju, daje ime
(a moda i put, ili lokacija) na fajl koji sadri slike kod. Naslov atributa obezbeuje tekst ako sluajno slika ne stigne do grafikog
pretraivaa, ili kada korisnik pree miem iznad slike. Alt Alt atribut obezbeuje da tekst bude izreen u negrafikom pretraivaa, kao to
su tekstualni pretraivai, Brajevi pretraivai ili audio pretraivaa.
Imajte na umu da je uvek atribut naveden po imenu i znaku jednakosti, a zatim vrednost atributa, u navodnicima. Ne postoje izuzeci.
HTML elementi dokumenata mogu biti podeljeni izmeu onih koji definiu oblast dokumenta i onih koji okruuju re ili frazu. Prvi tip elementa
se zove zove element blok nivoa. Pragrafi, liste , i tabele su slementi blok nivoa. Drugi tip elementa se naziva inline element. Primeri
inline elemenata su naglaeni tekst,jaki tekst, naslovi knjiga, i linkovi. Inline elementi moraju uvek biti sadrani u elementima blok nivoa.blok
na nivou kontejnera elemenata. Na primernedvosmislen tekst se mora uvek pojaviti u paragrafu ili listi stavki ili nekoj veoj strukturi.
Nazad na sadraj.
Poetak
Pre nego to pogledamo elemete koji ine HTML document, moda biste voleli da iamte prvo iskustvo stvaranja i pregledanja HTML.
Narvno, to e znaiti da ete raditi neke stvari koje jo uvek ne razumete. Ali usput e vam svaka od tih stvari postati jasnija-nadam se!
Prvo treba da otvorite pure text editor na vaem kompjuteru. Na Windows mainama e to biti Notepad, a na Macintosh
mainama , Simple Text ili modaBBEdit. Zatim mehaniki oznaite tekst ispod, sa desna gde pie "start copying" do gde pie "stop
copying" (ne ukljuujui te dve reenice). Ovo radite tako to drite desno dugme mia i vuete ga preko teksta. Ako to ne radi, ili nemate
mi, moraete sve da kopirate runo, to e dugo trajati. U svakom sluaju, pretpostavimo da moete oznaiti tekst sa miem, kopirajte ga i
ubacite (paste) u va editor prozor. Na veini maina ovo moete uraditi klikom vaeg mia editor prozor, zatim selektujete prozor
pretraivaa, zatim "Paste" iz Edit menija. Zatim pratite instrukcije odmah ispod "stop copying" reenice.
Ponite kopiranje (ispod ove reenice).
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
<title>Prva HTML Strana</title>
</head>
<body>
<h1>Radi!</h1>
<p>Ovo je HTML dokument i ja ga mogu videti bez
gobbledy-gook koda u mom prozoru. </p>
</body>
</html>
Zaustavite kopiranje (iznad ove reenice).

Kada stavite tekst iznad u va editor prozora, sauvajte ga kao novi dokument. Ime pod kojim ga sauvate mora imati posebnu formu. Prvi
deo svrha imena ne sme imati prostir izmedju, i mora se sastojati samo iz slova, brojeva, donje crte (_), ili gornje crte (-), u bilo kojoj
kombinaciji. Zatim taka ("dot"), i etiri slova "html." Sauvajte dokument na mesto gde ga moete nai odmah! U Windows, to moe biti
u My Documents direktorijumu.
Zastanite na sekund i primetite tagove i uredjenje HTML koda.
Zatim ostavite va editor prozor otvorenim, otvorite bilo koju fajl listu, kao Windows Explorer u Windowsu, i nadjite listing za va fajl. Otvorite
ga duplim klikom. Ako je sve kako treba, pretraiva kao to je Explorer ili Netscape Navigator, e se otvoriti i pokazati vam lepo, bez ifre
pretraivanje HTML koju ste upravo napravili.
Slobodno promenite tekst izmedju <p> i </p> simbola u vaem editoru. Moete dodati koliko elite teksta, dokle god zadrite <p> na poetku
i </p> na kraju i ne radite nita drugim delovima koda. Sauvajte fajl u vaem editoru, predjite sa prozora na pretraiava, refreshujte
pretraiva (ili reload stranice). Da biste ovo uradili idete na View meni i nadjete "Refresh" ili "Reload." Trebali biste da vidite promene koje
ste napravili reflektovane u pretraivau.
Sada kada ste videli neto od HTML u akciji, pogledajmo elemente koji ine dobar HTML dokument. Ovo nee dugo trajati i uskoro ete moi
da stvarate HTML dokumente kako elite.
Nazad na sadraj.
Elementi koji sadre blok nivo
<p>Paragraph</p>
<h1>Top-Level Header</h1>, <h2>Sub- Header</h2>, <h3>Sub-Sub-Header</h3>, etc.
<ol>Ordered List</ol>
<ul>Unordered List</ul>
<li>List Item</li>
<table>Table</table>
<tr>Table Row</tr>
<td>Table Cell (Also Called "Table Data")</td>
Nazad na sadraj.
Paragrafi
Paragrafi su objanjeni iznad. HTML ne prua neke druge korisne block elemente, kao poetic stanza. Iz ovog razloga zavriete tako to
ete mnoge svari zvati paragrafima iako nee izgledati kao paragrafi. Ne zaboravite da uvek imate otvarajui <p> i </p> tag.
Nazad na sadraj.
Header-i
Header-i je element teksta koji se koristi za poetak dela dokumenta. Grafiki pretraiva generalno izaziva header-e da se pojavljuju
boldirani i vei od ostatka teksta. HTML vas snabdeva sa celom serijom numerisanih header-a, tako da header prvog prioriteta je oznaen sa
tagovima <h1> ... </h1>, i prioritet vanosti se smanjuje kako se brojevi poveavaju. Ne treaba da pratite numeriki redosled sa header-ima
iako je to u ovom tekstu uradjeno. Npr. iznad stavke pridodate<h1>H1 Element</h1> elementu, moete imati sa malim header-om,
tj. <h4>H4 Element</h4>. Header uvek preokupira svoju sopstvenu reenicu teksta u prozoru pretraivaa i veina pretraivaa takodje
ubacuju vertikalni prostor iznad i spod headera, bez obzira koliko je visok ili nizak broj ispred.
Nazad na sadraj.
Naruene liste i liste stavki
Naruena lista je lista numerisanih stavki. Lista poinje sa tagom <ol> i zavrava se sa tagom </ol>. Unutar ovih tagova, svaka stavka na
listi poinje sa <li> tag om i zavrava se sa </li> (za "lstavke na listi"). Stavke na listi, zauzvrat mogu sadrati razne druge argumente kao to
su paragrafi, ali naruena lista moda nee sadrati nita drugo sem liste stavki.Drugim reima ne sme biti tag izmedju otvarajueg <ol>
taga i prvog <li> taga.
Ne kucate brojke u naruenu listu. Umesto toga, pretraiva automatski stavlja brojke u pravi redosled. Ako pomerite stavke, pretraiva e
ponovo dodeliti brojke. Dobra veba je pisati listu sa uvuenim redom, iako to nema nikakve veze kako e se pojaviti u prozoru pretraivaa:
<ol>
<li>Prva stavka</li>
<li>Druga stavka</li>
<li>Trea stavka</li>
</ol>
Ovako e se kod iznad prikazati u prozoru pretraivaa:
1.
Prva stavka
2.
Druga stavka
3.
Trea stavka
Ako moete da ugradite listu unutar liste da to uratite bilo kojem nivou hijerarhije, sa tim da ugradjena lista se nalazi unutar liste stavki.
Tabela sadraja na poetku ovog dokumenta je primer ugradjivanja. Evo jednostavniji primer:
<ol>
<li>Druga stavka
<ol>
<li>Prva podstavka</li>
<li>Druga podstavka</li>
</ol>
</li>
<li>Trea stavka</li>
</ol>
Ovo je rezultat koda iznad kako ga je va pretraiva protumaio za prezentaciju:
1.
Prva stavka
2.
Druga stavka
1.
Prva podstavka
2.
Druga podstavka
3.
Trea stavka
Primetite kako podstavka poruene liste je ugradjena u listu stavki na roditeljskoj listi.
Cascading Style Sheets ( CSS), koji e biti pokriven u posebnom tutorijalu, omogua vam da menjate stvari kao to je brojani metodto
za npr. rimske brojke (velike ili male), ili za slova umesto brojeva
Nazad na sadraj.
Nenaruene liste i lista stavki
Nenaruena lista je kao naruena lista, ali se ne pojavljuje sa brojkama. Zato je pretraiva ugravnom prikazuje kao liste sa takama,
ovako:
Prva stavka
Druga stavka/li>
Trea stavka
Da bi se stvorila nenaruena lista, jednostavno koristite <ol> i </ol>. tagove umesto

i
. Moete ugraditi naruene ili nenaruene liste u bilo koju permutaciju u koju elite.
Nazad na sadraj.
Tabele, redovi tabela i elije tabela (or "Tabela Podataka")
Tabela je struktura koja ima kolone i redove i najbolja je za korienje etvrtastih informacija koje prate takvu strukturu, kao npr. tabela
fakultetskih email adresa i telefonskih brojeva:
Lista Odeljenja Engleskog Fakulteta
Ime
E-Mail
Tel e p h o n e
A m i t t a i A v i r a m avirama@gwm.sc.edu
777-2058
Stan Dubinsky
dubinsk@vm.sc.edu
777-2056
Judith James
jamesj@gwm.sc.edu
777-5063
W i l l i a m R i c h e y richeyw@gwm.sc.edu
777-2054
Da biste napravili tabelu, otvorite element sa <table> tagom. Moete odrediti irinu border width u pikselima, kao i prostor i veliinu elija.
elijski prostor je koliina prostora izmedju teksta u eliji i bordera oko njega i jako je koristan atribut. (U tabeli iznad, elijski prostor je
nameten na "5.") Veliina elije je veliina prostora izmedju elija i po pievom iskustvu, potpuno beskoristan atribut, jer bilo koja veliina
"0" uvek izgleda udno. (Ali isprobajte brojke.) Ova tri atributatabele elemenata udaraju po prezentaciji vie nego strukturalne brige kako
stvari izgledaju pre nego ta su one ali su izuzetak u strukturi duha XHTML..
Takodje,XHTML vam dozvoljava da promente irinu tabele, ako je to potrebno. Ako nije, veina grafikih pretraivaa e proiriti tabelu
koliko je potrebno da bi svi podaci bili smeteni u njoj, smanjujui tekst do potrebne veliine. Na primeru kada elite da odredite irinu tabele,
pretpostavimo da imate stranicu sa dve tabele, jednu ispod druge. Moa poelite da tabele budu kompatibilne jedna sa drugom, i zato
moraju da imaju istu irinu. Ako odredite irinu sa brojem i znacima navoda (width="500"), to e naterati grafiki pretraiva da nacrta tabelu
u odredjenoj irini u pikselima ali trebalo bi da izbegavate ovo. Uvek je bolje odrediti irinu tabele u procentima od totalne irine
prozora: width="85%". Odredjivanje irine ima prednost pomaganja pretraivau pri crtanju tabele tako to uklanja jedan deo kakulacija iz
procesa crtanja, koji ponekada moe rezultirati u brim performansama kada se pregledaju stranice.
Zatim izborno, moete odrediti caption element za vau tabelu. Ovo e se pojaviti po defaultu odmah iznad tabele, uglavnom centrirano.
Ovo je jako koristan element, ne samo za grafike i tekstualne pretraivae ve i za audio pretraivae, poto je jasnija svrha tabele.
Zatim i dalje izmedju otvaranja <table> i zatvaranja </table> tagova, morate imati makar jedan red tabele elemenata i taj red mora imati
makar jednu eiju. Red tabele je oznaen sa <tr> i </tr> tagovima. elija poinje sa <td> i zavrava se sa </td>. "td" je skraenica od table
data. (tabela podataka). (TNisu me pitali za miljenje kada su ovo pravili!) Umesto regularne elije tabele "table data" tipamoete
koristit th element za red ili kolonu. ("th" je skraeno od "table header,".)Po defaultu, pretraivai uglavnom prikazuju boldiran tekst
u th elementu, to je korisno.
Ako koristite th header element za kolonu ili red, dobra je veba odrediti obim atributa kao "col" ili "row." Ovo govori audio pretraivaima da
li se header odnosi na njegove kolone ili redove i spreava dezorijentaciju kada neko slua itanje tabele naglas.
Kod za stvaranje tabele je ovde iznad:
<table border="1" cellpadding="5" cellspacing="0">
<caption>Lista Odeljenja Engleskog Fakulteta</caption>
<tr>
<th scope="column">Ime</th>
<th scope="column">E-Mail</th>
<th scope="column">Telefon</th>
</tr>
<tr>
<th scope="row">Amittai Aviram</th>
<td>avirama@gwm.sc.edu</td>
<td>777-2058</td>
</tr>
<tr>
<th scope="row">Stan Dubinsky</th>
<td>dubinsk@vm.sc.edu</td>
<td>777-2056</td>
</tr>
<tr>
<th scope="row">Judith James</th>
<td>jamesj@gwm.sc.edu</td>
<td>777-5063</td>
</tr>
<tr>
<th scope="row">William Richey</th>
<td>richeyw@gwm.sc.edu</td>
<td>777-2054</td>
</tr>
</table>
Primetite uvueni red, koji pomae koderu da najde put do koda. Nema se pojma kakvi e se rezultati pojaviti na prozoru pretraivaa.
Nazad na sadraj.
Block quotation
Ako imate produeno citiranje, moete ga staviti u blockquote element okruujui ga

sa <blockquote> i </blockquote> tagovima. Blockquote elementmoe sadrati paragrafe, ali paragraf ne moe sadrat blockquote.
Normalno ako imate block quotation, zavriete paragraf pre sa </p> tagom, i zatim stavite citirani paragraf unutar vae <blockquote>...
</blockquote> tagova. Grafiki pretraivai uglavnom predstavljaju block quotations po defaultu sa identinom lvom marginom i redom
vertikalnog prostora iznad i ispod. Autori ne bi trbali da koriste ove elemente da bi neto uvukli. Ako imate tekst koji nije citran, ali elite da
uvuete, stavite ga u odgovarajui element, kao npr paragraf , sa odgovarajuom klasom atributa i zatil ili napiite CSS klasu ili neka va
webmaster to uradi.
Nazad na sadraj.
Prazni (Standalone) Elementi
Slike: <img /> (inline)

Horizontalni lenjir: <hr /> (block)
Zagrade <br /> (inline)
Ova kategorija je kombinacija dve stvari, poto su neki elementi u nivou bloka a drugi inline. Inline elementi moraju biti sadrani unutar
elemenata dlok nivoa. Slikei zagrade su inline elementi, sa se moda nee pojaviti van sadrujueg elementa, kao to
je paragrap ili division. (Pogledajte dalje ispod o <div> tagu i divisionelementu.)
Nazad na sadraj.
Slike
Kada ugradite sliku u HTML dokument, sama slika nije zapravo deo koda dokumenta. Umesto toga, HTML izvorni kod ima img element u
njemu, koja sadri podatke koji povezuje trenutni dokument sa drugom datotekom, koja sama po sebi, ima kod za slike. Zaista, slika
datoteke i HTML fajlovi dokumenata su veoma razliiti po svojoj prirodi: HTML datoteka se sastoji iskljuivo od teksta znakova i simbola, dok
slikovne datoteke se sastoji od binarnog koda koji ljudi ne mogu proitati. U img tag elementa sadri informacije koje omoguavaju
pretraivau da zatrai datoteku slike kao posebnu stavku i prikae je na pravom mestu u pravom iznosu od prostora rezervisanog za to.
(Odeljak u nastavku o serverima objanjava vie o ovom "zahtevajuem" procesu.)
Datoteka sadri stvarni binarni kod za sliku zvani izvor slike. Poto tekst i audio pretraivai ne prikazuju slike, takoe treba da bude neka
vrsta teksta u imgelementu da stoji u mestu slike u tim kontekstima. Shodno tome, slika oznaka mora navesti, u najmanju ruku, dva atributa:
(1) izvor izvor slike, i (2) alternativni tekst. Takoe je dobra ideja da navedete (3) naslov slike. Konano, svakom img elementu takoe treba
navesti irinu i visinu u pikselima, da pomogne pretraivau pri raspodeliti prostora za to.
Izvorni atribut se pie src u <img> tagu. Njegova vrednost je ime posebnog fajla koji sadri kod slike. Bez obzira da li kreirate sopstvenu
sliku ili je uzimate (legalno!) iz nekog drugog izvora, uvek bi trebalo otvoriti prvo u grafikom ureivanja programa kao to su Adobe
Photoshop ili Jasc Paint Shop Pro. Onda treba da ga promenite veliinu na onu koju elite da imate na svojoj web stranici, a zatim
sauvate pod eljenim imenom i na mestu gde moete da ga pronaete. Mesto slova e biti vrednost vaeg src atributa, dok e veliine
dimenzije biti potrebne za irine i visine dimenzije. Evo nepotpuni img element, navodei samosrc atribut:
(Nepotpuno nemojte da kopirate ovaj primer!)
<img src="http://www.cla.sc.edu/engl/faculty/faculty.jpg" />
Ako su HTML dokument datoteka i datoteka slike su na istoj maini, adresa moe biti relativna. U drugom sluaju, ako je dokument bio u
istom direktorijumu na istoj maini kao na slici, src moe da uzme jednostavno "faculty.jpg. kao svou vrednost.
Alternativni tekst atribut pojavljuje u tagu kao alt, a njegova vrednost treba da obezbedi ekvivalent tekst informativne vrednosti slike, ako
postoji. Vrednost altatributa koristi tekst pretraiva poput Linx-a umesto slike aaudio ili Brajevi pretraivai mogu koristiti isti tekst za istu
svrhu. Slt atribut je obavezan , i komponovanjem njegove vrednosti vam daje priliku da razmislite o tome zato vi stavljate sliku tamo na
prvom mestu. Da li vaa fotografija fakulteta na Univerzitetu ministarstva pokazuju njegovu razliitost i broj? Da li vaa fotografija studenta
koji itaju knjigu na otvorenom pokazuje nadahnutost vaih studenata? Ako vaa slika zaista ne doprinosi nikakvu informaciju i istoje
dekorativna, moete staviti alt="" u oznaci. Posebno je vano da informativni tekst u alt atributu bilo koje slike slui kao link, kao to je
custom- made dugme.
Takoe je mudro da navedete naslov. Ovo bi trebalo da bude vie od opisnog naziva slike. Pre nego to se slika uita na grafikom
pretraivau, ili ako slika ne moe da se uita na nekog razloga - kao to je problem sa serverom ili linkom - pretraiva moe da prikae
naslov u kutiji na mestu gde bi slika se pojavila. Takoe, mnogi grafiki pretraivai omoguavaju da vidite tekst alt atribut kao alatku poput
teksta koji iskae sa strane kada korisnik pomera mi preko slike. Generalno, ako je naslov izostavljeno, grafiki pretraiva e
koristiti alt tekst za ove namene.
Konano, dimenzije slike u pikselima su navedene. Ovo moe da zvui kao pitanje kako neto izgleda nego to je, to, pa jo prezentaciona
funkcija se nalazi u XHTML, ali slika je, budimo iskreni, u sutini vizuelna, tako da njene dimenzije su zaista deo njene prirode. Dimenzije
su irina i visina. Obino moete dobiti ove dimenzije precizno iz vaeg programa za editovanje slika, kao to je upravo pomenuto.
Dakle, gore img img tag mora biti revidiran kako bi izgledala ovako:
<img
src="http://www.cla.sc.edu/engl/faculty/faculty.jpg"
title="Slika Odeljenja Engleskog Fakulteta"
alt="Na raznovrsan fakultet ima preko 50 lanova"
/>
Dalji detalji o prikazu slike bi trebali biti kontrolisani od strane style sheet-a.Upotreba style sheet-a za kontrolisanje izgleda HTML
dokumenata e kasnije biti pokrivena u posebnom tutorijalu.
Kao inline element, slika mora biti sadrana u nekom drugom elementu blok nivoa kao to je paragraf, lista, tabela, division, ili
ak header.
Nazad na sadraj.
Horizontalni lenjir
Horizontalni lenjir je horizontalna linija koja se pojavljuje povuena preko ekrana u delu gde je tekst dodeljen poziciji taga u HTML kodu.
Korisno je separatisati divisions. Horizontalni lenjir nije inline elementve element blok nivoa, paralelan sa paragrafom, listama,
i tablelama, tako da ne mora da bude sadran u bilo kom drugom blok elementu i ne treba da bude sadran u nijednom osim u eliji tabele.
Tag horizontalnog lenjira izgleda ovako: <hr />. U akciji horizontalni lenjir izgleda ovako:
Nazad na sadraj.
Zagrade
Zagrada je taka gde je re privremeno zadrana i reenica teksta ne radi, da bi nastavilana sledei niz. Ovo je jako korisno za pregledanje
poezije ili adresa. Moe se pojaviti sa header-om, sa header-om polomljenim na dva reda, bez vertikalnog prostora. Tag se uvek pojavljuje
ovakva: <br />.
Zagrada je inline element, to znai da mora biti sadran u veem elementu blok nivoa ,kao to je paragrapf ili header.
Evo primer nekoliko stihova, prvo oznaenih onda pregledanih od strane pretraivaa:
Oznaeno
<blockquote>
<p>
Jednostavni Simon je upoznao burekdiju<br />
Odlazak na sajam<br />
Rekao je Jednostavni Simon burekdiji<br />
"Dozvoli mi da probam tvoj proizvod!"<br />
</p>
<p>
Rekao je burekdija Jednostavnom Simonu,<br />
"Pokai mi prvo tvoj dinar"<br />
Rekao je Jednostavni Simon burekdiji<br />
"Istina, nemam ni jedan"<br />
</p>
<blockquote>
Pregledano
Jednostavni Simon je upoznao burekdiju
Odlazak na sajam.
Rekao je Jednostavni Simon burekdiji,

"Dozvoli mi da probam tvoj proizvod!"
Rekao je burekdija Jednostavnom Simonu,
"Pokai mi prvo tvoj dinar."
Rekao je Jednostavni Simon burekdiji,
"Istina, nemam ni jedan."
Kod iznad bi radio dobro i bez<br /> na kraju svake strofe prole linije, neposredno pred zatvaranje </p>. Stavaio sam je tamo samo zbog
opsesije prema konzistenciji i ona nita ne menja
Nazad na sadraj.
Inline Container Elementi

Svi inline elementi su potrebni da se zadre unutar elemenata blok nivoa. Ovo pravilo ukljuuje linkove: link mora biti sadran
unutar paragrafa, elije tabele, ilidivizije. Elementi pokriveni u ovom delu su inline elementi koji takodje sadre neto. Empatian tekst,
jak tekst, i citati naslova mogu sadrati tekst ili linkove koji sadre tekst. Link moe sadrati samo tekst,ili ceo paragraf ili header, ili sliku.
<em>Emphatic Text</em>
<strong>Strong Text</strong>
<cite>Title Citations</cite>
<a href="some_url.html">Links</a>
Nazad na sadraj.
Nedvosmislen tekst, jaki tekst i citiranje naslova
Nedvosmislen i snaan tekst i citirani naslov e se razmatrati zajedno, jer sva tri dela, manje ili vie rade na isti nain, oznaavanjem rei,
fraza, reenica ili nekih drugih tekstualnih jedinica za neku vrstu posebne obrade. Jaki tekst je najbolje koristiti da izazove tekst da se pojavi
snaniji, i grafiki pretraivai obino pruaju jak tekst po defaultu kao boldfaced. (Svaki put kad vidim izraz kao to je jak tekst po defaultu
kao boldfaced. (Svaki put kad vidim izraz kao to je jak tekstboldfaced u ovom dokumentu, to je zato to je zapravo sadran u jakom
tekstu elementa.) Isto tako naglaeni tekst je za naglaavanje i obino se pojavljuje u italics-u u vaem grafikom prozoru. Citirani
naslov (okruen <cite> i </cite> tagovima) treba da se koristi za naslove knjiga, predstave, filmove, umetnika muzika, itd. Oni, takoe, se
uglavnom pojavljuju kao italics u grafikim pretraivaima, koji prate standarde modernog tampnja. Ovo je dobra instanca razlike izmeu
HTML i obrade teksta. HTML pravi razliku izmeu naslova i naglaavanja jer su razliite stvari, ak i ako su obino tretiraju vizuelno na isti
nain. Sa upotrebom Cascading Style Sheets (CSS) , pokrivenog u posebnom tutorijalu, vi (ili va webmaster) moete, zaista, da postavite
prezentaciju ova dva elementa da bude drugaija. Ovo je dalje diskutovano u odeljku o <div> i <span> ispod.
U tampi, mi koristimo italics u nekoliko drugih svrha osim za akcentovanje ili naslov, a moete nai izbor <em> ... </em> i <cite> ...
</cite> ograniavajui. A ta emo sa stranim reima i izrazima? I ta sa tehnikim uslovima kada su prvo predstavljeni? ta sa engleskim
reenicama se koriste kao jedinke - primeri dijalekta, gramatika, ili upotrba? Za ove svrhe, i element i njegovi <i> ... </i> tagovi mogu biti
korisni. Oni su pokriveni u sledeem odeljku.
Nazad na sadraj.
Ostatak <b>, dalje koristan <i>, i mali uvid u Cascading Style Sheets
XHTML 1.0 Strict dozvoljava upotrebu <b> ... </b> tagova za boldface tekst i <i> ... </i> tagove za italic tekst. To su ostaci iz starijih verzija
HTML, koji nisu razlikovali strukturu o prezentacije dobro kao trenutne verzije. Upotreba ovih elemenata je nepotrebna
pored strong i em elemenata kao i cite.
Ipak postoje neke instance gde je i element jako zgodan: naroito za strane izraze, za predstavljanje tehnikih termina, i za tekst koji se
koristi kao uzorakdijalekta, renika, upotrebe ili slinog:
Kod:
<p>E - mail skraenice, kao to <i>FWIW</i> znai "ono to je vredno" i
<i>AFAIK</i> za "koliko ja znam", postali su neka vrsta kompjuterskog <i>argot</i> a
<i>nestandardne</i> upotrebe - i neete nai u
<cite>Oxford English Dictionary</cite> i stoga ne ba
<em>formali</em> Standardan Engleski.</p>
Rezultat:
E - mail skraenice, kao to FWIW znai "ono to je vredno" i AFAIK za "koliko ja znam", postali su neka vrsta kompjuterskog argo
a nestandardneupotrebe - i neete nai u Oxford English Dictionary.
Ali, u stvari, strani izrazi i primeri jezika se ne razlikuju samo d nedvosmislen izraza i titulu citata, oni se razlikuju jedni od drugih.
Pretpostavimo da emo kasnije eleti da ih pretraivai donesu jasno. Dokle god sam koristio iste oznake za oznaavanje i stranih izrazai
jezikih primeraka, neu moi da nateram pretraiva da ih razlikuju vizuelno. Reenje ovog problema je korienje class attribute u
kombinaciji sa Cascading Style Sheet-a da stvore podelu unutar kategorije ielementa, tako da imamo jednu klasu i elemene za strane
izraza, drugu za tehnike uslove, a treu za primerake jezika. Dok sam na tome, ja u koristiti lang atribut da navedem jezik stranog
izraavanja, u sluaju da kasnije elim da koristim ovu informaciju na neki poseban nain u programu. Klasa i lang atributi su standardne
osobine - za bilo koji element, u saradnji sa CSS, i poslednje za bilo koji element koji sadri tekst (i stoga mogu imati jezik). Takoe sam
napravio razlikovanje vrste citiranog naslova koji mi je dao atribut klase ija je vrednost knjiga. Ovde je isti prolaz, ali sa pridodatim
atributima:
<p>E - mail skraenice, kao to
<i class="specimen">FWIW</i>
znai "ono to je vredno" i <i class="specimen">AFAIK</i>
za "koliko ja znam", postali su neka vrsta kompjuterskog
<i class="foreign" lang="fr">argot</i> a
<i class="technical">nonstandard</i> upotreba- nije jos vidljiva u
<cite class="book">Oxford English Dictionary</cite> i stoga ne ba u<em>formal</em> Standardnom
Engleskom.</p>
Da bih pokazao korienje CSS sa klasom atributa - vrlo kratko - ja sam stvorio poseban fajl pod nazivom tutorial.css koji sadri definicije
mojih klasa. Odluio sam da promenim boje pozadine za stranim izrazima, primerima jezika i naslova knjige, da bi svaki izgledao drugaije
od drugog. Takoe sam poveao teinu u ovim elementima, kako bi se njihove boje lake videle.Nedvosmislen tekst sam ostavio pod
defaultom.
cite.book {
font-style: italic;
font-weight: bold;
color: blue;
background-color: white;
}
i.foreign {
font-style: italic;
font-weight: bold;
color: red;
background-color: #99ff99; /* Numeric code for light blue. */
}
i.technical {
font-style: italic;
font-weight: bold;
color: #009900; /* Dark green. */
background-color: white;
}
i.specimen {
font-style: italic;
font-weight: bold;
color: white;
background-color: #009900; /* Numeric code for dark green. */
}
HTML dokument koji itate je povezan sa ovim CSS fajlom pomou jednog link elementa, koji se javlja na vrhu izvornog koda ovog
dokumenta u glavielementa. I elementi glave i link elementi su objanjene u daljem tekstu.
E - mail skraenice, kao toFWIW znai "ono to je vredno" i AFAIK za "koliko ja znam", postali su neka vrsta kompjuterskog argot
a nestandardneupotrebe - i neete nai u Oxford English Dictionary.
Grafiki pretraivai koji ne podravajuCSS e verovatno pregledati sve i elemente kao italics.
Vrednost klase atributa ista kao re koju prati taka u CSS unoenju, koja se zove CSS class selector. Pravila za vrednost klase atributa i
odgovarajueg CSS class selector su izmeana: svaki pojedinaan selector-and-class-name mora biti samostalna re, bez razmaka i da se
sastoji samo od slova, brojki, ili hyphen, u bilo kojoj kombinaciji, Vrednost klase foreign ili foreign1 je OK, ali ne foreign? ili *123foreign.
Vrednost lang atributa mora biti izabrana iz skupa standardni dvoslovnih skraenica kao to je en za engleski, fr za francuski, de za
nemaki, es za panski, i ru za ruski. Uglavnom su isti kao ona dva slova koja se nalaze na kraju Web adresa van SAD.
Nazad na sadraj.
Linkovi ("Anchors")
Spisak iznad treba da se koristi pri upotrebi prve tri vrste inline elemenata. Linkovi, meutim, zahtevaju poseban nain. Iz istorijskih razloga,
link element nije tehniki naziva "link", ali je anchor, tako da je oznaen sa tagovima otvaranja <a> i zatvaranja </a> tagova. (Ne znam zato
se neko odluio da ga zove "anchor" tj. sidro, ali sada smo zaglavili sa njim.) Ba kao element slike (img) mora imati najmanje izvor slike
naveden kao vrednost src atributa meta linka (ili "anchor") mora biti naveden u oznaci otvaranja <a> koristei href atribut. Meta linka je
adresa na koju treba da ide sledea pretraga kada kliknete na link, a href je skraenica za "hypertext reference", koji je manje - vie ono to
jeste. Vrednost atributa href je adresa, takoe poznata kao URL, kao vrednost src atributa. Ba kao i sa srcatributom img taga, tako i ovde
moete koristiti relativnu adresu ako su dokument i meta linka na istoj maini i samim tim imaju iste poetaka do njihove adrese - na primer,
http://www.cla.sc.edu/index.html i http://www.cla.sc.edu/departments.html. U takvom sluaju, link na prvoj stranici koji se odnosi na drugi bi
mogao da izgleda ovako:
<a href="departments.html">Departments</a>
Inae, ako se meta linka nalazi na drugom domainu - sve to dolazi odmah posle "http: //" je drugaije - onda morate navesti ceo URL,
ukljuujui http:// na poetku::
<a href="http://www.amittai.com/">Amittai's Website</a>
ta ide izmeu tagova otvaranja <a> i zatvaranja </a> je tekst koji e se koristiti kao link. Po defaultu, pretraivai obino istiu ovaj tekst na
neki nain, obino kao podvuen plavi tekst.
Naglaavanje u druge svrhe, osim linkova se ne smatra stvar strukture, tako da nije podrano od strane verziji HTML u ovom uputstvu
(XHTML 1. 0 Strict). Naglaavanje moe da se pojavi na veini pretraivaa oznaavanjem nekih drugi elemenata kao isticanje teksta
pomou Cascading Style Sheet ( CSS). Cascading Style Sheets je tehnika za vebanje pretraivaa da donese HTML strukture u skladu
sa utvrenim prezentacionim pravilima. Oni su tema sama za sebe i ovde se nee pokriti. Osim toga, ako kreirate web stranice za vei sajt
koji ima web menadera ili webmastera, verovatno je bolje samo da kaete webmasteru kako elite da se vaa struktura pojavi i da
webmaster stvori style sheet za vas. Vano je da se odredi element strukturalno kako biste voleli da vidite istaknuti tekst. Pogledajte sledei
odeljak, o div i span elementima, kao mali uvod u ovu temu.
Meta linka moe biti neto drugo od spoljnog dokument. Umesto toga, ona moe da bude drugi deo istog dokumenta. Na primer, moete
imati tabelu sadraja na vrhu dokumenta u obliku zahtevane ili nezahtevane liste, gde svaka stavka na listi je naslov sekcije a takoe je i
link, tako da moete da kliknete na te naslove i dodjete na njih. Zatim, u samoj taki, moda postoji slian link unazad do sadraja. Linkovi
koji se koriste za ovu svrhu su isti u obliku linkova koji ukazuju na spoljna dokumenta. Jedina razlika je u ciljnoj adresi. Za namera korienja
URL adrese ili povezane adrese, koristite identifikator fragmenta. Identifikator fragmenta je ekvivalent adresi, ali se koristi za fragment ili
deo dokumenta. On uvek ima simbol # ispred. Sledee link ukazuje na odredjeni fragment "top":
<a href="#toc">Jump to bottom of document</a>
Da bi ovo funkcionisalo, morate da identifikuju ono mesto u dokumentu na koje se povezuju take. Ovo se postie tako to elemenatu
dajete id atribut. Na primer, header moe posluiti kao ciljni fragment, a moe da sadri id: <h2 id="info">Info</h2>. Ovo je preferirani metod
za odreivanje mesta u dokumentu, kao prepoznatljivog fragmenta.
Ovaj dokument ve demonstrira korienje ove tehnike za interne veze sa sadrajem na vrhu vezanog za sekcije i linkove ispod svakog dela
koji omoguava korisniku da se vrati u sadraj. Svi ciljni fragmenti se poistoveuju sa id atributa u headerima.
Moete kombinovati URL drugog dokumenta i identifikator fragmenta u tom drugom dokumentu, tako da vas link odvede na odreeni deo tog
drugog dokumenta. U tom sluaju, atribut href e imati svoje vrednosti i URL adresu, a zatim bez razmaka od strane identifikatora
fragmenata, koji je odvojen od URL adrese #karakterom:
<a href="another_document.html#part_in_middle">
Idite na mesto u sredini drugog dokumenta.
</a>
Pored povezivanja sa drugim dokumentom ili na drugom ili istom dokumentu, moete, konano, koristite anchor da se povee na e - mail
adresu. Generalno, pretraiva korisnika e nositi link isti onom to e otvoriti podrazumevani potansku program kada korisnik klikne na
link, sa adrese primaoca ve udje u "To" polje odlazne e - pote. Da biste kreirali ovu vrstu veze, koristite href atribut kao pre, ali vrednost je
re mailto, praeno dvotakom, zatim e - mail adresu eljenog:
Kontaktirajte autora:
<a href="mailto:amittai.aviram@yale.edu">
amittai.aviram@yale.edu
</a>
Postoji primer mail linka na samom dnu ovog dokumenta. Poto tie - in za slanje zavisi iskljuivo od toga da li korisnik ima server slanja i
server pretraivaana svom sistemu i da li njih dvojica rade zajedno, ne moete pretpostaviti da e mail link raditi. Dakle, uvek stavite
stvarnu e - mail adresu izmeu tagova za otvaranja i zatvaranja jednog elementa. Na taj nain, ljudi koji ne mogu samo da kliknu i mail e
znati eljenu adresu i da poslati e - mail na neki drugi nain..
Ako elite da imate link sa Usenet newsgroup, koristite istu tehniku kao i veoma za povezivanje na e - mail adresu, samo koristite
prefiks news: umesto mailto:. Ista pravila vae o stavljanju na ime diskusione grupe u tekstu linka, u sluaju da korisnikov kompjuter nije
podeen da automatsko otvoranje spiker programa - to je esto sluaj. Druga tehnika za povezivanje sa Usenet newsgroup je korienje
veze sa Google News Service na webu. Ako pogledate spisak resursa na kraju ovog uputstva, a zatim pogledate u svom izvornom kodu,
videete da je tehnika u akciji.
Nazad na sadraj.
Skraenice i akronimi
Ako ste itali ovaj dokument u up-to-date grafikom pretraivau, moda ste primetili tooltip-tip teksta koji se pojavljuje kada predjete miem
preko teksta, pokazujui ili "Hypertext Markup Language" ili "Extensible Hypertext Markup Language," ili "Cascading Style Sheets." To e se
desiti kad se pokaziva mia nalazi na vrhu jedne od tri skraenica - odnosno, HTML, XHTML, ili CSS. HTML obezbeuje dva zanimljiva
ugnjedena elementa, jedan za skraenicu i drugi za akronim: abbr i acronym. U oba sluaja, trebalo bi da podesite atribut naslova u
vrednosti proirenog znaenja skraenica ili akronima. Ovaj postupak ne samo da omoguava usaglaene pretraivaa za prikazivanje
instant definiciju skraenice ili akronim, ve i da pretraivai ponude korisniku mogunost irenja svih skraenica i akronima u tekstu ili ih da
ih vrati nazad, ili da prikae proirenu verziju prvog pojavljivanja skraenica i akronima. Ovo bi trebalo da rade za tekst, Brajevo pismo i
audio pretraiva , kao i grafiki pretraiva. Prema tome, ja sam priloio svaki sluaj svakog akronima u ovom dokumentu u <acronym> ...
</acronym> tagovima, i postavio naslob na odgovarajui nain. Da bih se sauvao od dugakog kucanja svaki put, u poetku sam kucao
sve akronime, a zatim koristio globalnu pretragu i zamenu funkcije u mom editoru da promeni sva pojavljivanja tih akronima u njihove
tagove.
Neki okviri trenutne XHTML specifikacije jasno su zbunjeni sa reju acronym, koji zaista znai izgovorljiv lettervords, kao to su radar, LAN,
i UNICEF. Oigledna suvinost abbr i acronym elemenata moe dovesti vie od konkurencije meu kreatorima pretraivaa - "ratovi
pretraivaa" - nego iz potrebe ili logike - taka koja je u drastinim razlikama u pretraivau. Ukratko, ova dva elementa su deo HTML uvek
u kretanju.
Nazad na sadraj.
<div> i <span>
Ako imate odreene strukturne elemente u dokumentu za ije oznake HTML vokabular to nije dovoljan, moete oznaiti svoj element na blok
nivou sa <div> i</div> tagovima, a na ravnom nivou, sa <span> i </span> tagovima. Poto ove oznake ne pokazuju nikakvu specifino
znaenje, njihova funkcija je potpuno preputena style sheet-u. Obino, div (podela) ili span element e imati atribut navedene klase.Naziv
klase se zatim koristi u stilu da kontrolie prezentaciju elementa.
Na primer, pretpostavimo da imam knjievno - kritiki esej u kome sam citiram blok teksta, a zatim komentar na prolaz u tom bloku. Moda
elim da istaknem prolaz u drugoj boji. Ja u pozvati taj pasus span i podesiti vrednost class da bude naglaena i onda koristiti definiciju
CSS klase za promenu izgleda:
<p>Chaucerov narator komentarie
Monkove preference o lovu

iznad ivota to zvui kao
odobravanje:</p>
<blockquote lang="enm">
<p>
And I seyde that his opinion was good.<br />
<span class="highlighted">What sholde he studie and make hymselven
wood,<br />
Upon a book in cloystre alwey to poure,<br />
Or swynken with his handes, and laboure,<br />
As Austyn bit? How shal the world be served?<br /></span>
</p>
</blockquote>
<p>U veini ovog odlomka, narator koristi
<iclass="technical">free indirect discourse</i>,
pria o Monku u treem licu
imitirajui ta su pretpostavljeni
Monkovi uslovi i argumenti, da
bi ga imitirao. Ovde se predlae
mogunost ironije, tako da narator
moe konotirati kritiki pogled
bez izraavanja.</p>
Zatim se sledei kod pojavljuje u mom style sheetu:
span.highlighted: {
font-weight: bold;
color: black;
background-color: yellow;
}
HOvo su rezultati:
Chaucerov narator komentarie Monkove preference o lovu iznad ivota to zvui kao odobravanje:
And I seyde that his opinion was good.
What sholde he studie and make hymselven wood,
Upon a book in cloystre alwey to poure,
Or swynken with his handes, and laboure,
As Austyn bit? How shal the world be served?
U veini ovih redova narator koristi slobodno indirektno zakljuivanje, priajui o Monku u treem licu ali imitirajui ta su pretpostavljeni
Monkovi uslovi i argumenti, da bi ga imitirao. Ovde se predlae mogunost ironije, tako da narator moe konotirati kritiki pogled bez
izraavanja.
Evo primer kako je nonce div element u konjukciji sa CSS kodom:
<div class="centered">
<h4>Centered Text</h4>
<p>Ovaj tekst je centriran
ispod centriranog hedera.</p>
</div>
Ovo je dodato tutorial.css fajl:
div.centered {
text-align: center;
}
Evo ga rezultat:
Centrirani Tekstt
Ovaj tekst je centriran ispod centriranog headera.
Gledajete follow-up ovog tutorijala koji e vam objasniti osnove style sheets u vie detalja.
div element je takodje koristan pri zatvaranju anchora u kontejneru ali paragraf ili takva druga tekstualna struktura nije odgovarajua jer je
anchoru zaista najbolje samom. Ovaj dokument koristi div element u ovu svrhu, tda bi sadrao ime <a name="top"></a> na vrhu
dokumenta koji slui kao meta za linkove koji usmeravaju nazad na sadraj.
Nazad na sadraj.
Komentari
esto, je dobra ideja da ubacite neki tekst u dokument koji ne elite da svet vidi u prozoru, ali da vi i bilo koji drugi programer treba da vidi
kad god pogledate kod izvorni dokument. Moete da ubacite podsetnike, na primer, da biste aurirali neki deo periodino, ili neki tekst koji e
vam pomoi da pronaete mesto koje vam je potrebno da se esto revidira. HTML komentar je oznaen sa tagom za otvaranje  Sve izmeu  se nikada nee pojaviti u prozoru, ali se, naravno, pojavljuju u izvornom kodu. Drugi nain kojim
komentari mogu biti korisni je da se omogui da se maskira u HTML sekciji. Na primer, neki deo stranice moe biti privremeno nevaeom,
ali moda ete eleti da se zadrite tekst u sluaju da kasnije elite da ga ponovo prikaete. Moete jednostavno postaviti celu stvar u
komentaru i ona e nestati iz pretraivaa bez traga.
Nazad na sadraj.
Glava i telo
Diskusija jvas je do sada obezbedila sa oznakama za tekst u dokumentu. HTML dokumenti takoe moraju imati malo naznaka okruujui
ceo sadraj, da bi omoguili softveru pretraivaa da pravilno obradi dokument. Pre svega, ceo dokument se smatra jednim
velikim html element. Mi takoe kaemo da je htmlelement korena, iz kojeg se svi ostali elementi "granaju". (Metafora je malo apstraktna.)
Dakle ceo dokument mora biti obeleen sa takovima otvaranja <html> i zatvaranja </html> Mora postojati samo jedan html element u
dokumentu.
<html>

</html>
<html> tag treba da sadri nekoliko specijalnih atributa,o kojima e kasnije biti rei.
Da biste sami videli<html> tag, moete da vidite izvorni kod iz vaeg pretraivaa. Na grafikom pretraivau, kao to je Microsoft Internet
Explorer ili Netscape Navigator, pronadjite "View Source" u View meniju i izaberite ga. To e otvoriti poseban prozor sa izvornim kodom ovog
dokumenta, a zatim moete da vidite sve tagove, ukljuujui i one za otvaranje <html> i zatvaranje </html>. Slovo e biti poslednja stavka
koju vidite, ali prethodna nee biti prva. ta dolazi iznad njega e uskoro biti objanjeno, zajedno sa tim atributima za otvaranje html tag.
Sadrane unutar html elementa su dve vane komponente glava i telo. Sadraj elementa glave je uglavnom nevidljiv za korisnika i nalae
raunaru na predmetima koji uslovljavaju pruanje dokumenta. Na primer glava je ta koja prikazuje style sheet appears , ili element koji
povezuje dokument na spoljni fajl sa stilom. (Ova vrsta povezivanja elemenata, uzgred se zove link! To je navedeno u samostalnom <link />
tag.) Jedan element u okviru glave je prikazan i uvek treba da se pojavi u glavi: naslov. Tekst naveden u naslovu elementa pojavljuje se u
naslovnoj traci, koja je, po pravilu, plava ili bela traka na vrhu grafikog prozora pretraivaa. Ako ne navedete naziv, naslov bar e obino
samo pokazati URL, koji uvek izgleda jadno i neprofesionalno i omoguava svetu da zna da autor stranice ne zna HTML. Evo izgleda
element glave ovog tutorijala:
<head>
<title>Short HTML
Tutorial</title>
<link rel="stylesheet" type="text/css" href="tutorial.css" />
</head>
Ponovo pogledajte izvorni kod ovog dokumenta, da biste videli <head> i </head> tagove sadrane u <title> i </title> tagove i samostalni <link
/> tag. Linkelement se povezuje sa spoljnim lstyle sheetom koji precizira kod za span i div elemente prikazane iznad. Obratite panju kako
su elementi uvueni da se lako ita ifra, i kako to nema uticaj na to kako tekst je prikazan u prozoru.
Ispod elementa glave dolazi element tela sa niim izmeu. Element tela sadri sve podatke dokumenta, ukljuujui sve oznake o kojima
smo razgovarali pre.
Nazad na sadraj.
Document Type Declaration

Pre sve, pa ak i html korena elementa, ima nekoliko reenica koda koji uslovljavaju itanje ostatka dokumenta pretraivaa, i glave i tela.
Prvo dolazi XML declaration. deklaracija. Ovo se prvo stavlja, jer trenutna verzija HTML, zvana XHTML podskup XML i u skladu sa njenim
pravilima. XML, Extensible Markup Language, nije stvarno jezik, ve apstraktni sistem pravila koja reguliu oznaavanje jezika u celini.
Pored XML verzije, XML deklaracija definie kodiranje, odnosno skup znakova koji se koristi. Ovo je sve vano u novijim pretraivaima koji
podravaju mnoge skupove karaktera, ukljuujui kineski, tajlandski, hebrejski i arapski. Kodiranje ISO - 8859 - 1 podrava sve zapadne
alfabet znakove, ukljuujui i one koji imaju akcente ili dijakritikim oznake. Najvee inkluzivno kodiranje je UTF - 8, koje prihvata bilo koji
jezik trenutno definisan za korienje interneta, ukljuujui i one bez zapadnih karaktera. UTF - 8 je kodiranje proglaeno za ovaj dokument.
Ako pratite moj primer, va deklaracija XML treba da se pojavi na sledei nain:
<?xml version="1.0" encoding="utf-8"?>
XML deklaracija nije tag. Otvara se i zatvara sa posebnim XML simbolima <? ... ?> pre nego < ... />.
Odmah ispode XML deklaracije dolazi deklaracija tipa dokumenta, koja takodje nije tag samo tako izgleda. Ovako se prikazuje:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Ima toliko mnogo informacija u ovoj stavki koje sam mogao podeliti u dve reenice, ali takoe moe biti napisano kao jedna. U sutini, ovo
izjavljuje da koren elementa u dokumentu je html, da je tip dokumenta definisan i opisan na drugom mestu u javnom dokumentu, koji je
napisan u XHTML 1. 0 Strict, da je njegova definicija je napisana na engleskom jeziku, i gde je definisanje pravila od 1, 0 XHMTL Strict se
moe nai online. Kao deo dobrog XHTML 1. 0 Strict prakse, otvaranje tagova HTML root elementa takoe treba navesti nekoliko atributa:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="enUS">
U sluaju da ste radoznali o njima, xmlns=" http://www.w3.org/1999/xhtml " oznaava XML namespace . je toliko apstraktan i fleksibilan
da omoguava vie od jednog seta imenovanih atributa u istom dokumentu, diferencirano njihovim namespaces. Namespace se signalizira
prefiksom pre atributa, kao to su xhtml:id. Ovo moe postati dosadno, pa umesto toga, trebalo bi proglasiti namespace podrazumevani za
sve unutar korena elementa, a to je ono to xmlns atribut radi. Dalje treba da se podesi jezik dokumenta. XHTML se oslanja na jezik
postavljen u XML namespace nego u sopstvenoj namespace, tako lang atribut snosi xml:prefix. Njegova vrednost je standardna skraenica
za jezik u dokumentu, zajedno sa regionalnom varijantom, kao to su en-US a ameriki engleski ili en- GB za britanski engleski. Nakon toga,
obian stari lang atribut duplira iste informacije u korist starijih pretraivaa koji se ne mogu tumaiti bilo XML simboli i nemaju odredbe za
namespaces uopte. Pa, pitali ste, zar ne?
Ako piete dokument u XHTML 1. 0 Strict, kao to ovo uputstvo savetuje, onda moete samo da kopirate prvih nekoliko redova ovog
dokumenta i ubacite ga na vrh bilo koje od vaih dokumenata. Kopirajte iz prve linije kroz otvaranje <html> taga. Ovo bi trebalo da vas
potedi neke nepotrebne ekanja.
Uzgred, svaki put kada predjete sa jezika dokumenta u celini na neki novi jezik, trebalo bi da to kaete u lang atributu na relevantnom
elementu. Tipino, ovo moe biti i element, kao to je ranije pomenuto, ili moda blockquote element ako imate itav blok teksta na drugom
jeziku. Takoe moete da koristite span ilidiv element za ovu svrhu. Jezik svakog delia dokumenta je korisna informacija za audio
pretraivae izmeu ostalog, jer e se primenjivati razliita pravila za izricanje iste likove, u zavisnosti od jezika.
Nazad na sadraj.
Entiteti karaktera
Ako ste bili na oprezu, moda se pitate o neemu tokom ovog dokumenta: svaki put kada sam predstavio ilustraciju HTML koda, ja sam
ukljuio oznake u njemu, tako da moete da ih vidite. Ali, ako oznake postoje, kako pretraiva "zna " da samo ja citiram oznake za vas da ih
vidite nego da koristim oznake za organizovanje svog teksta? Kako zaustaviti pretraiva pri uzimanju <table> oznake i kreiranje tabele
umesto da samo prikae samu oznaku za vas da vidite? Odgovor se moe nai ako ste videli izvor ovog dokumenta. Gde god je potrebno
da predstavlim tag pre nego to ga idkoristim, ja sam izbegavao znakove otvaranja < i zatvaranja > Umesto toga, ja sam koristio posebno
reenje da prouzrokuje brower da prikae te znakove na prozoru bez bukvalnog unoenja karaktere u moj kod. Za karakter otvaranje < ja
koristim kombinaciju znakova <. Ono to vidite kada napiem je < karakter, ali ono to pretraiva "vidi" je etiri karaktera koji ine reenje.
Ovaj tip alijasa za karakterese zove acharacter entiteta, i HTML definie entitet karaktera za svaki znak i simbol koji se moe prikazati u
datom kodiranom sistemu. Svi entiteti karaktera poinju sa ampersand ( &) i zavravaju sa zarezom (;).
Ali kako sam predstavljaju kombinaciju < i > na ekranu za vas, bez njihovog automatskog prevodjenja u odgovarajue pojedinane
karaktere < i >? Kao to se deava, entitet za ampersand se pie &. Tako moete to da koristite da bi izazvati ampersand pojavu bez
pisanja ampersand u vaem kodu, i to spreava vau sekvencu karaktera od toga da je tumai kao karakter subjekta.
Entiteti karaktera su takoe korisni za "specijalne karaktere" koji nisu ukljueni u standardnom ameriko - engleskim tastaturama. Na primer,
kombinacija se koristi za naglaeni a karakter . Isto tako, ö daje , ê daje , and ç daje . Bilo koja standardna
referenca na HTML - u e imati punu listu korisnih znakova entiteta. Pogledajte ispod za referentni link. Moda ete smatrati daa je ova
karakteristika za HTML toliko kul da nikada nee eleti da se vratite obinoj obradi rei ponovo.
Do sada sam samo spomenuo znakove entiteta koji imaju lepe, Mnemonic forme. Nemaju svi entiteti karaktera ove mnemotehnika, ali svi
oni nemaju numerike forme. U ovom dokumentu, ja koristim entitet za dugo crtice ovako. To je jako zgodno pri prepisivanju poezije
Emily Dickinson.
Nazad na sadraj.
Pisanje HTML
Pa kako treba da piete HTML? Koje alatke bi trebalo da koristite? Da bi va HTML bio ispravan, morate da koristite neki metod koji vam
omoguava da sauvate datoteku kao isti ASCII teksta. Najbolje je da koristite neto poput Notepad na Windows maini ili jednostavan
tekst ili BBEdit na Mac raunaru. Linux i FreeBSD maine imaju mnogo dobrih tekst editora, kao to su vi, emacs, ili kate. Ako koristite
program za obradu teksta, kao to je Microsoft Word, Corel WordPerfect ili Claris Works, vi rizikujete da u program ubacite sve vrste
nevidljivog, nestandardnog, vlasnikog koda u tekst kako bi podrao va sistem formatiranja. Jednostavnom tekstualnom editoru, moete
verovati da e tekst uvek biti ta god je to to ste uneli. Na Windows mainama, moete nai Notepad pod Programs Accessories. Ako
vam ne smeta potronja od oko $ 28, moete dobiti super - duper - souped - up tekst editor za Windows maine nazvanTextPad, dostupan
na http://www.textpad.com. Ovo je sjajna alatka za razvoj HTML, i ja sam je koristio za pisanje ovog teksta.
Popularne programi za obrada teksta, kao to su Corel WordPerfect i Microsoft Word, e vam ponuditi opciju da sauvate datoteku "kao
HTML". To je gotovo uvek greka. Pretpostavimo da ste napisali neto u italic-su. Kako da va procesor moe znati , da li to znai podveno
ili naslov knjige ili strani izraz ili tehniki termin? Stavie ih sve na isti tip elementa, kao to je onaj i element. Sada, pretpostavimo da elite
nekoga da izgradi web prigram za vas koji pretrauje sve vae stranice za knjigu naslova. To je sasvim prihvatljivo - to moe biti pretraiva
fakulteta publikacija ili za knjige razgovaranim na stranicama na sajtu. Pretraiva e se pokazati rei i fraze koje ste eleli samo da
naglasite, pomeane sa naslovima. Isto vai i za headere i mnoge druge elemenate. Vi ne treba da koristite obradu teksta da napie HTML
jer HTML je daleko vie nego to artikulisan od obrade teksta. Obrada rei je rasporeivanje rei da imaju odreeni pogled na odtampanoj
stranici. HTML proiruje pisanu interpunkciju da napravi strukturu dokumenta eksplicitnom. Bolje vam je da piete dokumenta u HTML , a
zatim da je va procesor za rei pretvoriti rei obraenog teksta za tampu.
Mnogi komercijalni alati i softverski paketi su dostupni kojima bi trebalo da bude "lako" stvoriti HTML stranice. Ovo ukljuuje Microsoft
FrontPage, Adobe GoLive,, Macromedia Dreamweaver i Netscape Navigator. Svi ovi proizvodi daju ozbiljne probleme, najgore i najzloglasniji
je FrontPage. Oni imaju tendenciju da se uvedu u vaj kod razliite nestandardne, vlasnike stavke koje ine nemoguim da ljudi ne koriste
te proizvode za odravanje dokumenata. Takoe, oni imaju tendenciju da zaostaju iza vremena, a ljudi esto imaju starije verzije ovih alata,
pa kod koji oni proizvode je retko,po sadanjim XHTML standardima. Ukoliko koristite bilo koji od ovih alata, vano da prvo razumete HTML.
Na primer, ako ne poznajete HTML, moete misliti o headeru kao o veem i teem tipu nego kao o posebnom elementu. Ne moete traiti
opcije menija da biste kreirali header, a zavriti sa stvaranjem velikog, teeg tipa. Va softver nije vie u stanju da ita misli nego to je
procesor rei. Pretpostavimo da vam, kasnije, padne na pamet da stavite veliki header preko cele stranice i podredite sve aktuelne headere
na njega? Poto prethodni headeri nisu oznaeni kao headeri, ne moete globalni pretragu i zamenu okrenuti <h1> u <h2> celom
dokumentu. Umesto toga, moraete da proeljate kroz dokumenta red po red, u potrazi za velikim tipom! Ili pretpostavimo elite da
promenite opti stil i da svi headeri budu plavi. Kako se to moe uraditi se headeri ne nalaze u nalaze u odgovarajuem h1 ili drugim
elementima? HTML nije veoma komplikovan ni teak, i uz malo prakse, moda e vam biti lake da ga piete runo nego da nauite sve
menije, trikove i gore jednog proizvoda van ambalae.. Da ne pominjemo da je samostalno pisanje HTML mnogo jeftinije!
Kako da sauvate i pregledate dokument je pokriveno na poetka ovog tutorijala, ali hajde da se podsetimo. Kada ste napisali neki HTML,
sauvajte datoteku pod valjanim imenom, ali sa ekstenzijom fajla .html. The name must contain only characters, numerals, the underscore,
or the hyphen. HTTP, the rules for handlingHTML Ime mora da sadri samo znakove, cifre, donju ili gornju crtu. HTTP, pravila za rukovanje
HTML fajlova na Internetu i u pretraivaima, je stroiji od mnogih operativnih sistema, tako da ne mogu imati nikakve razmake, navodnike,
upitnike, uzvinike, itd u svom imenu datoteke. (Zapravo, razlog za to je da su svi ti simboli rezervisani za posebne namene i funkcije. Znak
pitanja, na primer, dolazi izmeu URL pravilno i stringa ulaznih podataka koji dolaze iz nekog oblika online mree.) Fajl
ekstenzija .html obavetava pretraiva da fajl treba da bude pre pretraen nego downloadovan i sauvan i obavetava operativni sistem da
sa fajlom treba da se bavi pretraiva.
Tada bi trebalo da vidite rezultate svojih kodiranja otvaranjem fajla u vaem pretraivau. Morate prvo da otvorite prrtraiva, a zatim, u
okviru njega, otvorite lokalni fajl (obino preko File Open menu selection). Ako dobijete dijalog koji vas pita da napie adresu u prazno,
pogledaj za "Brose" (Windows) , ili "Locate" dugme na dijalogu. To e otvoriti neku vrstu fajlova u listi i moete ii u potrazi za svojim
dokumentom. Alternativno, moete da pronaete fajl u listi fajlova kao to je Windovs Explorer ili My Documents listi na Windows maini
jednostavno duplim klikom na listu.
To je generalno najbolje uraditi im imate minimalnu napisanu koliinu HTML koje se moe vidjeti u pretraivau - odnosno, im imate svoje
deklaracije na vrhu, otvaranje i zatvaranje oznake vaeg html root elementa, neki head element, a telo sa bar malo teksta u njemu. Neka
va editor teksta radi u isto vreme. Nakon unoenja novog HTML, moete da preete na prozor i videti rezultate. Da biste aurirali prozor
pretraivaa svaki put kada ste sauvali reviziju dokumenta, izaberite View Refresh menu. Tako se va rad odvija u ciklusu: pisanje /
ureuivanje, sauvati, promena prozora, osveiti, vidieti rezultate, promena prozora, pisati / urediti, uvati, zameniti prozore, osveiti,
pogledati rezultate, zameniti prozore... Ovo se zove razvojni ciklus. Da bi razvojni ciklus bio laki za vas, obino moete koristiti preice na
tastaturi za prelaenje izmeu prozora. Na Windows maini se prebacujete izmeu prozora aplikacije drei Alt taster na dole i pritiskom na
taster Tab. Ovaj isti kombinacija radi na Linux mainama sa KDE. Mnogi pretraivai na mnogim operativnim sistemima vam dozvoljavaju da
drite Alt ili Command taster pritisnut dok pritiskom na taster R obavljate refresh ili "reload" stranice.
Nazad na sadraj
Nainite ga validnim!!
Kad ste gotovi sa vaim HTML dokumentom i izgleda kao da je cela struktura dobro definisana po onome to se prikazuje na pretraivau,
pokuajte da dokument napravite validnim. World Wide Web Consortium, takodje znana kao W3C, prua besplatnu upotrebu svojih softvera
za validaciju, koji proveravaju va HTML u potrazi za grekama ili problemima i govore vam gde su oni nastali po broju reda i poziciji
karaktera u redu. W3C HTML Validator moete nai na ovoj adresi: http://validator.w3.org. Pratite instrukcije da biste proverili fajl uitavajui
ga u Validator. Nemojte se nervirati ako imate neke greke (i ja sam ih imao u ovom dokumentu). Moete ih ispraviti i pokuavai iznova sve
dok vam Validator ne estita i ponudi privilegiju ubacivanja malog decalu u va tekst u ou koji je validan sa HTML.
Poto je cela poenta pisanja HTML da ga maine itaju i pretrae, svaki detalj se rauna. Maine su jako glupe i ne znaju kako da se
ponaaju sa pogrenim spelovanjem. Vie oprataju od profesora engleskog. Zato svaki deo source koda mora biti taan. Validator vam
olakava da nadjete greke i da ih ispravite jer vam automatski govori gde su u vaem kodu i ak predlae vam rta bi moglo da im fali. Ovo
je mnogo bolje od gledanja u prazan ekran pitajui se gde je greka koja je naterala va tekst da nestane.
Nazad na sadraj
"Kako usluiti svet ?"

Kada je va dokument gotov i njegov HTML dokazan kao validan, moda je vreme da postane dostupan javnosti. Da biste to uradili treba da
ga stavite na mestu gde Web server dobiti pristup da ga servira kompjuterima koji ga trae. Izraz server, na komjuterakom, se odnosi na
bilo koji program koji alje podatke (elektronske signale) bilo kom drugom programu zvanom client kada client zahteva podatke iz
server. U ovom kontekstu World Wide Web, program koji igra ulogu client je va pretraiva. Kada je pozvan client i da prui mu
podatke (jedinice i nule) kao odgovor na njegov zahtev. U Web kontekstu, klijent je pretraiva. Kada usmerite va pretraiva na Web
adresu, va pretraiva Web client alje zahtev preko ica i konekcija interneta do Web server. Server odgovara slanjem zahtevanog
HTML document nazad do client-a, tj. vaeg pretraivaa. Ovo niste morali do sada da radite da biste pregledali va dokument, jer ste do
sada bili jedina osoba koja je to radila jo nije bio objavljen preko interneta za javnost.
Tipino, Web server radi na nekim kompjuterima host koji su konentovani sa internetom u svako vreme i koji takodje sadre HTML
fajlove ne njihovom hard drajvu. Normalno ovaj host je negde daleko, povezan za va kompjuter preko interneta a ne preko nekog
kancelarijskog Ethernet kabla, tako da se server kompjutera naziva remote host. (Ljudi esto zovu remote host serverom po metonymy.)
Tako da zahtev vaek pretraivaa (tj. klijenta) ide do remote hosta, i server koji radi na remote hostu alje sredstva nazad HTML
dokumenta ako su dostupna. Cela automatizovana interakcija je je regulisana po standardnim pravilima zvanim HTTP, Hypertext Transfer
Protocol.
Skoro svi igrai u drami HTTP transakcije imaju razna tehnika imena. Web adresa se takodje zove URL, ili Uniform Resource Locator,
takodje je znana kaoURI, ili Uniform Resource Identifier. Va pretraiva se takodje zove user agent, poto radi robotski za vas, korisnika.
Ime koje moda najvie podsea je jedno od aliasa za Web server: HTTP daemon. Koliko ja znam Internet ise jo uvek zvanino ne zove
"dark Satanic mill."
Da bi Web server posluio vau stranicu, mora imati pristup njoj i to uglavnom znai da ga morate otpremiti od vae lokalne maine do
remote hosta, i sauvati ga u nekom direktorijumu na remote hostu specijalno odredjenom za server da pogleda u njega kada dodju zahtevi.
Da biste to uradili, poalite va HTML fajl do remote hosta koristei softver koji prati File Transfer Protocol, ili FTP. Po metonymy, ime
protokola se pretvatra u re: you "FTP va fajl do servera." Da biste FTP va fajl, treba vam dozvola da sauvate fajlove za va remote host
Web direktorijum, i dobijate korisniko ime i ifru. Zatim moete koristiti odgovarajuo komercijalni FTP client da, druga vrsta klijenta ne
pretraiva ve program koji zahteva da se remote host konektuje za va lokalni kompjuter i dozvoljava vam da aljete fajlove napred i
nazad izmedju dva kompjutera).Dva popularna FTP klijenta su WS_FTP i CuteFTP (koji vam mogu izgledat jako slatki). Ako nemate dozvolu
da montirate HTML fajlove u remote hostu, moda imate webmaster u kancelariji koji moe to uraditi za vas.
Osim stvaranja novih dokumenata, druga upotreba HTMLa je struktuisanje porcija dokumenata koje moete uneti u polja sa formama za
specijalne namere. Npr. kada stvarate stavku na Blackboard course websajtu, imate opciju ubacivanja tksta kao HTML. Blackboard prua
spoljni HTML code, ukljuujui html elemente otvaranja i zatvaranja tabova, cele glave, ili delova tela. Blackboard ubacuje va novi kod
u telo elementa. U tom sluaju bi trebali da napiete va HTML lokalno sa svim potrebnim okvirima deklaracija tipa
dokumenta, elementi glave i tela, da biste ih validirali. Zatim oznaite kod u telu, kopirajte i ubacite (paste)ga u Blackboard formu polja,
vodei rauna da markirate kutiju za HTML.
Nazad na sadraj.
Sredstva za dalje informisanje
http://www.w3.org/MarkUp/#tutorials. Ova stranica ima linkove za odline, up-to-date tutorijale i nalazi se na oficijalnom W3C sajtu.
http://www.hclrss.demon.co.uk/demos/wgl4.html. Ova stranica daje veoma temeljnu listu HTML entiteta. Iako se po naslovu ini da
se odnosi samo na Windows maine, to nije sluaj. Samo bazira listu na osnovu sistema Windows karaktera jer su relativno
kompletni, ali numerik i mnemoiki entiteti bi trebali da rade na bilo kom pretraivau koji se sastavlja sa standardima.
http://safari.oreilly.com/main.asp?bookname=htmlpr2. Informavcije o HTML depne reference, drugo izdanje, by Jennifer Niederst.

Jako zgodno, kratko, lagano i jeftino-a na papiru.
http://safari.oreilly.com/main.asp?bookname=htmlpr2. Informacije o HTML & XHTML: Definitivni vodi, peto izdanje, by Chuck
Musciano i Bill Kennedy.
http://htmlhelp.com/faq/html/. Lista esto postavljanih pitanja ("FAQ") koja pripada comp.infosystems.www.authoring.html, Usenet
newsgroup posveeno pretragama i diskusijama o HTML i XHTML.
Newsgroup comp.infosystems.www.authoring.html, povezani za va default newsreader program ako je tako nameteno.

Usenet newsgroup comp.infosystems.www.authoring.html je dola do Google News usluge na njihovom sajtu.
Nazad na sadraj
Zahvalnost
elim da iskaem veliku zahvalnost uesnicima na Usenet
newsgroups comp.infosystems.www.authoring.html i comp.infosystems.www.authoring.stylesheets na njihovim komentarima,sugestijama,
sugestijama i ispravkama na ovom dokumentu dok se razvijao (i dalje se razvija). Dali su mi jako veliko iskustvo prilikom vrenja pregleda i
bili su mi dobar izvor tehnikih informacija. Uvek se sve mora proveriti sve to se nalazi napisano protiv oficijalnih dokumenata proglaeno
od strane World Wide Web Consortium.
_______________________________________________________________________________________________________________
01 - Osnove HTML-a
ta je HTML?
HTML je jezik za opisivanje web strana
HTML - Hyper Text Markup Language
Markup language je skup markup tagova

HTML tagovi
Tag je kljuna re okruena sa < i >, npr. <html>
Tagovi su najee u paru, npr. <b> i </b>
Prvi je start tag (opening tag), a drugi end tag (closing tag)
Ne razlikuju se velika i mala slova preporuka je mala

HTML dokument = Web strana
Web browser ita HTML dokument i prikazuje ga kao web stranu
Primer:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>...</h1>
<p>...</p>
</body>
</html>
Ime HTML dokumenta se zavrava sa .htm ili .html
Za pregled u browser-u VIEW -> SOURCE / PAGE SOURCE

HTML elementi (Elements)
HTML element je sve od start taga do end taga
Neki HTML elementi nemaju sadraj i zatvaraju se u start tagu
Veina HTML elemenata mogu da i maju dodatne atribute
Mogu se ugnjedavati (!)

HTML atributi (Attributes)
Atributi obezbeuju dodatne informacije o elementu
Uvek se navode u start tagu
Piu se u obliku imeatributa="vrednostatributa"

HTML naslovi (Headings)
Koriste se tagovi <h1> do <h6>
<h1>Naslov</h1>
Vanost pravilne upotrebe naslova

HTML pasusi (Paragraphs) / prelomi reda (Line Breaks)
Koriste se tagovi <p> i <br />
<p>prvi red<br />drugi red</p>

HTML veze (Links)
Koristi se tag <a>
<a href="http://skola.kraguljac.com/">Klikni ovde</a>
Veza moe pokazivati na bilo koji resurs na netu - HTML stranu, sliku, zvunu ili video datoteku...
Target atribut odreuje gde se otvara link
<a href="http://skola.kraguljac.com/" target="_blank">Klikni ovde</a>
Name atribut odreuje imenovano sidro u HTML dokumentu
<a name="mesto">neto</a>
<a href="#mesto">Klikni ovde</a>
Slanje mail-a
href="mailto:ime@domen.com?Subject=PredmetPoruke"
HTML slike (Images)
Koristi se tag <img>
<img src="/slika.jpg" />
Alt atribut odreuje alternativni tekst za sliku
<img src="/slika.gif" alt="Opis slike" />
Podeavanje irine / visine
Atributi width i height

HTML linije (Lines)
Koristi se tag <hr />

HTML komentari (Comments)
Pie se u obliku 

Beline
Browser uklanja dodatne razmake i dodatne prazne linije u toku prikazivanja strane
Bilo koji broj praznih linija, kao i bilo koji broj razmaka se raunaju kao jedan razmak
HTML formatiranje teksta
Koriste se tagovi za formatiranje (Formatting Tags):
<b> - podebljani (bold) tekst
<big> - vea slova
<em> - naglaen tekst
<i> - kurziv (italic) tekst
<small> - manja slova
<strong> - jaa sloba, podebljani tekst
<sub> - indeks
<sup> - eksponent
<ins> - umetnuti tekst
<del> - obrisani tekst
<code> - raunarski kod
<kbd> - tekst sa tastature
<samp> - primer raunarskog koda
<tt> - telegrafski (teletype) tekst
<var> - promenljiva
<pre> - preformatirani tekst
<abbr> - skraenica
<acronym> - skraenica (akronim)
<address> - adresa
<bdo> - smer teksta
<blockquote> - dui navod
<q> - krai navod
<cite> - citat
<dfn> - definicija
HTML zaglavlje (Head)
<head> je kontejner za elemente zaglavlja - <title>, <style>, <meta>, <link>, <script>, <noscript> i <base>
<title> - Definie naslov dokumenta koji se koristi i za bookmark i prikaz rezultata na pretraivau
<base> - Odreuje osnovni URL za sve relativne linkove na stranici
<link> - Veza ka eksternim sadrajima koji se ugrauju u stranicu
<style> - Definisanje stilova za elemente koji se koriste na stranici
<meta> - Razni dodatni podaci o stranici - description, keywords, author, last modified
<meta name="author" content="Pera Peric">

<script> - Definisanje skriptova koji e se koristiti na stranici
HTML stilovi (Styles)
Stilovi obezbeuju univerzalan nain za doterivanje HTML elemenata
Mogu se primeniti direktno na HTML element korienjem style atributa ili indirektno pomou posebne CSS datoteke
Primeri:
Boja pozadine - <body style="background-color:yellow">
Font, boja, veliina - <p style="font-family:courier new; color:red; font-size:20px">
Poravnanje - <h1 style="text-align:center">

HTML tabele (Tables)
Koriste se sledei tagovi:
<table> - za tabelu
<tr> - za red
<td> - za eliju
<th> - za elije u zaglavlju
<caption> - za naslov (odmah iz table taga)
Sadraj elije moe biti tekst, slike, liste, pasusi, forme, horizontalne linije, tabele...
Atributi (bolje je da se koristi CSS, tj. atribut style):
border - odreuje okvir
colspan - spaja kolone
rowspan - spaja redove
cellpadding - dodaje prostor oko sadraja elija
cellspacing - dodaje prostor izmeu elija
bgcolor postavlja boju pozadine
background postavlja sliku kao pozadinu
width/height postavljaju irinu/visinu u px ili %
align odreuje poravnanje sadraja
Da bi tabela ouvala pravilnu strukturu u prazne elije treba staviti

HTML liste (Lists)
Nenumerisana lista (Unordered List)
Poinje <ul> tagom
Svaka stavka poinje <li> tagom
Atribut type:
square - kvadrat
circle - krug
disc - disk
Numerisana liste (Ordered List)
Poinje <ol> tagom
Svaka stavka poinje <li> tagom
Atribut type:
A - velika slova
a - mala slova
I - rimski brojevi
i - mali rimski brojvi
1 - normalna numeracija (podrazumevano)
Atribut start (ol) - Promena poetnog znaka liste
Atribut value (li) - Promena poetnog znaka liste
Lista definicija (Definition List)
<dl> - lista definicija
<dt> - pojam
<dd> - definicija pojma
Ugnjedene liste
HTML forme (Forms)
Sadre polja (ili dugmad) koja korisnik moe da popuni traenim podacima ili uini izbor izmeu vie ponuenih opcija i unetu
informaciju vrati vlasniku stranice
Forma je oblast koja sadri elemente forme koji omoguavaju korisniku unos informacija:
Tekst polja (text fields)
Tekst oblasti (textarea fields)
Padajui meniji (drop-down menus)
Radio dugmad (radio buttons)
Polja za potvrdu (checkboxes)
itd.
<form> tag oznaava formu
<input> tag oznaava element za unos
tekst polje <input type="text" name="ime" />
size duina polja za tekst
maxlength maksimalan broj karaktera koji se mogu uneti u polje
value poetni tekst
tekst polje za lozinku <input type="password" name="ime" />
radio dugme <input type="radio" name="ime" value="vrednost" />
checked ako postoji, radio dugme je odmah selektovano
polje za potvrdu <input type="checkbox" name="ime" value="vrednost" />

checked ako postoji, polje za potvrdu je odmah selektovano
Tekst oblast <textarea name="ime">Poetni tekst</textarea>
col broj kolona
row broj vrsta (redova)
wrap da li se tekst prelama
Padajua lista
<select name="ime">
<option value="vrednost">tekst opcije</option>

selected="selected" odmah selektovana opcija
size="veliina" pravi obinu listu
multiple selekcija vie stavki u obinoj listi
Polje za biranje datoteka
<input type="file" name="ime" />
size duina polja za tekst
maxlength maksimalan broj karaktera koji se mogu uneti u polje
accept tip fajla koji je dozvoljeno izabrati

image/gif, text/plain, application/pdf...
Action atribut forme i Submit dugme
<form action="program.asp" method="get"><br />Username:<br /><input type="text" name="ime" /><br /><input

type="submit" value="Posalji" /><br /></form>
Reset dugme
<input type=reset" value=Obrisi">
<fieldset> skupovi polja, za grupisanje srodnih stavki
<legend> - naslov za grupu polja

HTML Iframe
Slui da se prikae stranica/sadraj unutar stranice
<iframe src="/URL"></iframe>
<iframe src="/demo_iframe.htm" width="200" height="200"></iframe>
iframe kao target za link
<iframe src="/nesto.html" name="iframe_ime"></iframe>

<p><a href="http://www.kraguljac.com" target="iframe_ime">Klikni ovde</a></p>
HTML slike kao mape
Atribut usemap definie koja se mapa koristi

<img src="/slika.gif" usemap="#imemape" />
<map> definie mapu
<map name="imemape">
<area> definie oblast na mapi (slici) koja se koristi kao link
<area shape="rect" coords="0,0,82,126" href="/strana.htm" alt="tekst" />
Atribut shape odreuje oblik aktivne oblasti
rect pravougaonik
circle krug
poly poligon
Atribut coords odreuje koordinate kljunih taaka oblasti
rect x1,y1,x2,y2
circle x,y,radius
poly x1,y1,x2,y2,..,xn,yn
gornji levi ugao slike je 0,0
Atribut href odreuje odredite za link
Atribut nohref odreuje da oblast nema pridruen link
Atribut target odreuje gde se otvara link
Atribut alt odreuje alt tekst za oblast

HTML entiteti i simboli
Rezervisani znakovi u HTML-u se moraju zameniti entitetima
Znaci kojih nema na tastaturi se takoe esto menjaju entitetima
&ime_entiteta; ili &#kod_entiteta;
Dijakritiki znaci, akcenti
à - a
á -
â - a
ã - a
Ò - O
Ó - O
Ô - O
Õ - O
Neki ee korieni znaci
- - neprelamajui razmak
< - < - manje od
> - > - vee od
& - & - ampersand
¢ - ¢ - cent
£ - £ - funta
¥ - ¥ - jen
€ - € - evro
© - © - kopirajt
® - ® - registrovana oznaka
∑ - ∑ - suma

HTML kodiranje (Character Set)
HTML4
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
HTML5
<meta charset="UTF-8">
HTML Uniform Resource Locator - URL
scheme://host.domain:port/path/filename
scheme - Definie vrstu Internet servisa
http - HyperText Transfer Protocol
https - Secure HyperText Transfer Protocol
ftp - File Transfer Protocol
file - Lokalna datoteka
host - Definie host za domen (za http je www)
domain - Definie ime Internet domena (npr. w3schools.com)
port - Broj porta na hostu (za http je 80)
path - Putanja na serveru (ako nije navedeno dokument je u korenom direktorijumu sajta)
filename - Ime dokumenta/resursa

HTML5
HTML5 je najnoviji standard za HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<body>
Sadrzaj dokumenta...
</body>
</html>
U odnosu na HTML4 neki elementi su ukinuti, a dodato je dosta elemenata za grafiku, medije, forme, geografsku poziciju
korisnika...
Novi elemnti za strukturu dokumenta
<header> - zaglavlje celog dokumenta ili odeljka
<main> - Glavni sadraj dokumenta
<nav> - Navigacija na stranici, meni
<section> - Odeljak u dokumentu, tematski deo dokumenta, obuno ima svoj naslov
<article> - Nezavistan sadraj na stranici (post na forumu, blog post, vest, komentar...)
<aside> - Sadraj koji prati glavni sadraj, sajdbar
<figure> - Poseban sadraj unutar glavnog sadraja (ilistracija, dijagram, fotografija, listing...)
<figcaption> - Natpis za <figure>, postavlja se iznad ili ispod
<footer> - Podnoje celog dokumenta ili odeljka
<details> - Dodatni detalji koje korisnik moe da vidi ili sakrije
<summary> - Vidljivo zaglavlje za element <details>
<mark> - Oznaeni/istaknuti tekst
<time> - Datum/vreme
Da bi ovo radilo korektno u starijim pregledaima stavlja se
header, section, footer, aside, nav, main, article, figure { display: block; }
Da bi ikako radilo u starijim IE stavlja se


HTML5 Shiv se preuzima sa code.google.com/p/html5shiv/
Novi tipovi polja za unos
color - Odabir boje

Odaberi omiljenu boju: <input type="color" name="favcolor">
date - Odabir datuma

Rodjendan: <input type="date" name="bday">
datetime - Unos datuma i vremena sa vremenskom zonom

Rodjendan (datum i vreme): <input type="datetime" name="bdaytime">
datetime-local - Unos datuma i vremena bez vremenske zone

Rodjendan (datum i vreme): <input type="datetime-local" name="bdaytime">
email - Mejl uz kontrolu unosa

E-mail: <input type="email" name="email">
month - Odabir meseca i godine

Vazenje kartice (mesec i godina): <input type="month" name="cartvalid">
number - Unos numerike vrednosti uz ogranienja vezana za tip
Kolicina (izmedju 1 i 5): <input type="number" name="quantity" min="1" max="5">
Ogranienja - max, min, step (korak), value (podrazumevana vrednost)
range - Broj unutar zadatog opsega uz ogranienja za tip

<input type="range" name="points" min="1" max="10">
search - Polje za pretragu (ponaa se kao tekstualno polje)

Google pretraga: <input type="search" name="googlesearch">
tel - Unos telefonskog broja

Telefon: <input type="tel" name="usrtel">
time - Odabir vremena
Odaberite vreme: <input type="time" name="usr_time">
url - Unos URL adrese uz validaciju pri slanju podataka sa forme

Omiljeni sajt: <input type="url" name="homepage">
week - Odabir sedmice i godine

Godisnji odmor: <input type="week" name="week_year">
Novi elementi za forme
<datalist> - Lista predefinisanih vrednosti za polje za unos, omoguava automatsko kompletiranje unosa
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">

<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<keygen> - Omoguava sigurnu autentifikaciju korisnika
<output> - Prikaz rezultata izraunavanja
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100 +

<input type="number" id="b" value="50">=
<output name="x" for="a b"></output>
</form>
Novi atributi za forme
Za <form> element:
autocomplete - Popunjavanje na osnovu ranije unetih vrednosti, vrednost je on ili off
<form action="demo_form.asp" autocomplete="on">
novalidate - Logiki atribut, ako je naveden ne radi se validacija vrednosti unetih u polja
<form action="demo_form.asp" novalidate>
Za <input> element:
autocomplete - Popunjavanje na osnovu ranije unetih vrednosti, vrednost je on ili off, radi za text, search, url, tel,
email, password, datepickers, range i color

<input type="email" name="email" autocomplete="off">
autofocus - Logiki atribut, ako je naveden polje automatski dobija fokus po uitavanju stranice
<input type="text" name="fname" autofocus>
form - Definie kojim sve formama pripada polje za unos
formaction - Definie akciju razliitu od podrazumevane akcije za formu, radi za type="submit" i type="image"
<input type="submit" formaction="demo_admin.asp" value="Submit as admin">
formenctype - Definie vrstu kodiranja rezliitu od podrazumevanog kodiranja za formu, radi za type="submit" i
type="image", a samo za forme sa method="post"

<input type="submit" formenctype="multipart/form-data" value="Submit as Multipart/form-data">
formmethod - Definie metod za slanje podataka sa forme razliit od podrazumevanog metoda za formu, radi za
type="submit" i type="image"
<input type="submit" formmethod="post" formaction="demo_post.asp" value="Submit using POST">
formnovalidate - Logiki atribut, ako je naveden forma se alje bez validacije
<input type="submit" formnovalidate value="Submit without validation">
formtarget - Navodi gde e se prikazati rezultat slanja podataka sa forme razlito od podrazumevanog za formu,
radi za type="submit" i type="image"

<input type="submit" formtarget="_blank" value="Submit to a new window">
height and width - Definie visinu i irinu u <input type="image"> radi rezervisanja mesta za sliku pri uitavanju
<input type="image" src="/img_submit.gif" alt="Submit" width="48" height="48">
list - Povezuje polje za unos sa predefinisanom listom
min i max - Definiu najmanju i najveu dozvoljenu vrednost za polje za unos, rade za number, range, date,
datetime, datetime-local, month, time i week
multiple - Logiki atribut, ako je naveden korisnik moe da unese vie od jedne vrednosti u polje za unos, radi za
email i file
Odaberite slike: <input type="file" name="img" multiple>
pattern - Definie regularni izraz za validaciju vrednosti u polju za unos
<input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
placeholder - Savet o vrednosti koja se unosi, stoji u polju pre unosa vrednosti, radi za text, search, url, tel, email i
password
<input type="text" name="fname" placeholder="First name">

required - Logiki atribut, ako je naveden oznaava polje sa obaveznom vrednou, radi za text, search, url, tel,
email, password, date pickers, number, checkbox, radio i file
<input type="text" name="usrname" required>
step - Korak pri odabiru vrednosti, radi za number, range, date, datetime, datetime-local, month, time i week
<input type="number" name="points" step="3">
Canvas
<canvas> je kontejner za crtanje grafike "u letu" korienjem skriptova
To je pravougaona oblast na stranici
Podrazumevano je da nema okvir i sadraj, ali se to moe menjati pomou CSS-a
Mogue je da postoji vie ovakvih elemenata na stranici koji se razlikuju po id atributu
<canvas id="myCanvas" width="200" height="100"></canvas>
Crtanje na kanvasu
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
</script>
Linija

ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
Krug

ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
Ispunjeni tekst

ctx.font = "30px Arial";
ctx.fillText("Hello World",10,50);
Konturni tekst

ctx.font = "30px Arial";
ctx.strokeText("Hello World",10,50);
Linearni gradijent

var grd = ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
ctx.fillStyle = grd;
Radijalni gradijent
var grd = ctx.createRadialGradient(75,50,5,90,60,100);

grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
ctx.fillStyle = grd;
Slika na kanvasu

var img = document.getElementById("scream");
ctx.drawImage(img,10,10);
Inline SVG (Scalable Vector Graphics)
Koristi se XML format, dakle ist tekst
Sve prednosti vektorske grafike
Svaki element i atribut u SVG grafici moe se animirati
Ugradnja SVG grafike direktno na stranicu

<svg width="300" height="200">
<polygon points="100,10 40,198 190,78 10,78 160,198"

style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
Video
<video width="320" height="240" controls>

<source src="/movie.mp4" type="video/mp4">
<source src="/movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Atribut control prikazuje kontrole play, pause, volume
Preporuka je da se uvek navedu eljene dimenzije, slino kao i za sliku
Tekstualni deo je tu za pregledae koji ne podravaju prikazivanje videa na ovaj nain
Od vie navedenih <source> elemenata pregleda e iskoristiti prvi koji moe
Pomou JavaScript-a se mogu iskoristiti DOM metode i svojstva za upravljanje videom
Audio
<audio controls>
<source src="/horse.ogg" type="audio/ogg">
<source src="/horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Geolokacija
Koristi se za odreivanje lokacije korisnika
Zbog privatnosti potrebna je potvrda korisnika
Prost primer odreivanja lokacije bez obrade greaka

<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude;
}
</script>
Prikaz na mapi korienjem nekog od dostupnih servisa, npr. Google map

function showPosition(position) {
var latlon = position.coords.latitude + "," + position.coords.longitude;

var img_url = "http://maps.googleapis.com/maps/api/staticmap?center="+latlon+"&zoom=14&size=400x300&sensor=false;
document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";
}
Drag & Drop
Make an Element Draggable
<img draggable="true">
What to Drag - ondragstart and setData()

function drag(ev) {
ev.dataTransfer.setData("Text", ev.target.id);
}
Where to Drop - ondragover

event.preventDefault()
Do the Drop - ondrop

function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("Text");

ev.target.appendChild(document.getElementById(data));
}
Web Storage
U HTML5 web stranice mogu da uvaju podatke lokalno u korisnikom pregledau, ranije su se koristili kolaii za to
Koriste se dva objekta:
window.localStorage - Podaci se uvaju bez vremenskog ogranienja
code.sessionStorage - Podaci se uvaju samo za tekuu sesiju, tj. do zatvaranja kartice
Parovi ime/vrednost se uvek uvaju kao stringovi
Provera da li pregleda omoguava ovo:

if(typeof(Storage) !== "undefined") {
// Moze da se koristi localStorage/sessionStorage

} else {
// Nema podrske za koriscenje
}
Objekat localStorage
localStorage.setItem("lastname", "Smith");
document.getElementById("result").innerHTML = localStorage.getItem("lastname");
localStorage.lastname = "Smith";
document.getElementById("result").innerHTML = localStorage.lastname;
localStorage.removeItem("lastname");
Objekat sessionStorage
Koristi se slino kao localStorage
Primer koji broji koliko puta je kliknuto na dugme u toku sesije:
if (sessionStorage.clickcount) {
sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " +
sessionStorage.clickcount + " time(s) in this session.";
Application Cache
Omoguava da se sauva offline verzija web aplikacije kreiranjem cache manifest datoteke
Web Workers
Web worker je JavaScript koji radi u pozadini i tako ne umanjuju performanse web stranice
Primer:
<body>
<p>Count numbers: <output id="result"></output></p>

<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>
<br><br>
<script>
var w;
function startWorker() {
if(typeof(Worker) !== "undefined") {
if(typeof(w) == "undefined") {
w = new Worker("demo_workers.js");
}
w.onmessage = function(event) {
document.getElementById("result").innerHTML = event.data;
};
} else {
document.getElementById("result").innerHTML = "Sorry! No Web Worker support.";
}
}
function stopWorker() {
w.terminate();
}
</script>
</body>
Server-Sent Events
Server-Sent Events omoguavaju web stranici da povuku aurirane verzije sa servera

Multimedija
HTML5 podrava kao video format samo MP4, WebM i Ogg
HTML5 podrava kao audio format samo MP3, WAV i Ogg
Plug-ins
Pomone aplikacije su mali programi koji dodaju neku funkcionalnost pregledau - npr. Java apleti i Adobe Flash Player
Mogu se koristiti za prikazivanje mapa, skeniranje virusa, proveru prijave na e-banking...
<object> element
<object width="400" height="50" data="bookmark.swf"></object>
Tekst koji se navede izmeu tagova se prikazuje ako pregleda ne podrava <object>
<embed> element
<embed width="400" height="50" src="/bookmark.swf">
Ne zatvara se u tagu
Ne moe da ima alternativni tekst
Sounds / Audio
Najzgodnije je obezbediti vie varijanti:

<audio controls>
<source src="/horse.mp3" type="audio/mpeg">

<source src="/horse.ogg" type="audio/ogg">
<embed height="50" width="100" src="/horse.mp3">
</audio>
Alternativa je da se samo postavi link i da se koristi pomona aplikacija

<a href="/horse.mp3">Play the sound</a>
Videos
Najzgodnije je obezbediti vie varijanti:

<video width="320" height="240" controls>
<source src="/movie.mp4" type="video/mp4">

<source src="/movie.ogg" type="video/ogg">
<object data="movie.mp4" width="320" height="240">
<embed src="/movie.swf" width="320" height="240">
</object>
</video>
Alternativa je da se samo postavi link i da se koristi pomona aplikacija

<a href="/intro.swf">Play a video file</a>
YouTube Videos
YouTube iFrame
<iframe width="420" height="345" src="http://www.youtube.com/embed/XGSy3_Czz8k"></iframe>
YouTube Embedded
<embed width="420" height="345" src="http://www.youtube.com/v/XGSy3_Czz8k" type="application/x-
shockwave-flash">
HTML Forme
Forme (form)
Na web sajtu, forma je osnovni nain komunikacije sa korisnicima. Ispod je dat izgled jedne tipine forme na sajtu.
Forma je sastavljena iz razliitih polja za unos podataka i, po pravilu, dugmeta na dnu koje slui da se uneeni podaci
poalju. Podaci mogu biti poslati na mail ili uskladiteni u bazu podataka.
Osnovni tag za kreiranje formi naziva se form. Njegova uloga je da sve podatke koje korisnik unese u okviru forme
posmatra kao celinu i kao takve ih dalje procesuira.
Nije mogue ugnjezditi jednu formu unutar druge.
Osnovni tagovi forme su input tagovi i namenjeni su unoenju podataka od strane korisnika. Postoji nekoliko tipova input
polja, zavisno od vrste podataka koji se unose.
Tako postoje input polja namenjena unoenju kraeg teksta (ime, prezime, adresa), brojnih vrednosti (telefon, matini
broj), password polja, polja za unos vee koliine teksta. Pored ovih, postoje i input polja specijalne namene kao to su
izbor jedne od ponudjenih opcija u vidu kruia na koje korisnik klike, ekiranje jedne ili vie opcija od ponudjenih, itd.
Na kraju, poseban tip input taga je i dugme koje slui za slanje podataka nakon to korisnik pravilno popuni formu.
Sada emo prikazati jednu jednostavnu formu u koju korisnik unosi svoje ime i prezime. Forma izgleda ovako
<form method=get action=procesuiraj.php>
Ime: <input type=text name=ime placeholder=unesite vase ime><><br>
Prezime: <input type=text name=prezime placeholder=unesite vase ime><>
</form>
Ako pogledamo u pretraivau:
Radi preglednosti, iskopiraemo ponovo kod formulara.

Ime: <input type=text name=ime placeholder=unesite vase ime><br>
Prezime: <input type=text name=prezime placeholder=unesite vase ime>
</form>
U prvom i poslednjem redu definiemo granice forme. Sve unutar otvarajueg i zatvarajueg taga
posmatrano kao celina.
U drugom redu, pre <input> taga nalazi se tekst
form bie
Ime: kako bi korisnik znao ta od podataka treba da unese.
Tekst Ime: koji stoji ispred input taga nije neto to program gleda kada procesuira formu, tj. za dalje procesuiranje
unetih podataka vaan je nameatribut. U naem sluaju vrednost atributa
name je ime, a u drugom input polju,

vrednost atributa name je prezime. Ovi podaci se kasnije koriste za procesuiranje.
Vrednosti atributa name ne prikazuju se nigde unutar prozora pretraivaa.
Naime, ta bi se desilo da ne postoji razliito definisano ime input polja (vrednost vezana za atribut name). Server bi
dobio oba podatka (ime i prezime) ali ne bi znao koji unos odgovora kom polju. Isto to zbunilo bi i developera koji treba
da iskoristi te podatke. Iz tog razloga, svako polje se jednoznano obeleava kako bi se uneti podaci kasnije pridruili
adekvatnom imenu.
Dalje, u oba input polja nalazi se atribut koji definie tip polja. U naem sluaju, oekujemo da korisnik unese krai niz
karaktera pa emo oba polja definisati kao type=text.
Ovo znai da je u njih mogue uneti neki od karaktera definisanih u ASCII ili UTF-8 standardu ukljuujui I naa slova.
Atribut placeholder predstavlja tekst koji se pojavljuje u delu za unos podataka i ostaje prikazan do trenutka kada
korisnik klikne u to polje i pone da unosi podatke. On ustvari predstavlja dodatni opis kakav tip podataka oekujemo.
ta nedostaje ovoj formi?
Mogunost da nakon unoenja podataka, o tome obavestimo pretraiva. Ta akcija oliena je u dugmetu koje se nalazi
pri dnu svake forme. Kod koji nam je u ovu svrhu potreban je
<input type=submit value=Submit>
Sada e kompletiran kod forme izgledati kao
Ime: <input type=text name=ime placeholder=unesite vase ime><br>
Prezime: <input type=text name=prezime placeholder=unesite vase ime>
<input type=submit value=Submit>
</form>
Akcija koja se inicira klikom na dugme Submit usko je povezana sa postojanjem

tagu.
method i action atributa u form
U cilju daljeg objanjenja, pretpostaviemo da smo u polje sa atributom name=ime uneli
Milan a u polje sa atributom
name=prezime Petrovic.
Nakon klika na dugme Submit, pretraiva poziva fajl definisan u action atributu (u naem sluaju procesuiraj.php) a
vrednosti dobijene od korisnika zapisuje u nastavku adrese u sledeem obliku:
www.primer.rs/folder_putanja/proba.html ?ime=Milan&prezime=Petrovic
Ta operacija naziva se
HTTP GET upit i podrazumeva da pretraiva, nakon imena stranice na koju link upuuje,
doda znak pitanja (?) I nakon njega vrednosti iz input atributa name (u ovom sluaju atribut ime sa vrednou Milan i
atribut prezime sa vrednou Petrovic) . U naem sluaju, taj niz izgleda ovako:
?ime=Milan&prezime=Petrovic
Znai, znak pitanja, pa vrednost atributa prvog input polja name, zatim znak jednako (=) iza koga sledi uneto ime. Nakon
ispisanih podataka iz prvog input polja sledi znak (&) koji se automatski dodaje ukoliko sledi jo jedan podatak (u naem
sluaju to je atribut prezime) u ovom sluaju prezime=Petrovic
U sluaju da korisnik u polje ime ne unese nita, adresna linija bi izgledala ovako:
www.primer.rs/folder_putanja/proba.html ?ime=&prezime=Petrovic
ili za sluaj da korisnik nije nita uneo ve kliknuo na dugme Submit :
www.primer.rs/folder_putanja/proba.html ?ime=&prezime=
Ono to se kasnije deava je da navedeni file (procesuiraj.php) preuzima ove podatke i sa njima manipulie u smislu
skladitenja u bazu podataka, ispisa na ekranu, slanja na definisanu mail adresu, itd.
Pored osnovnog input taga tipa text, postoje i drugi atributi. Da bi ih lake objasnili, pogledaemo primere u nastavku.
INPUT type password

Lozinka: <input type=password name=loz>
U input polje tipa password se mogu unositi isti znakovi kao i u polju text sa tom razlikom to se karakteri koje kucamo u
ovom polju ne prikazuju onako kako ih kucamo ve u vidu simbola
INPUT type radio

<input type=radio name=pol value=muski>Muski<br>
<input type=radio name=pol value=zenski>Zenski<br>
Ovo polje je sloenije i podrazumeva izbor samo jedne od grupe ponudjenih opcija. Grupiu se preko atributa name,
znai moe biti izabrana samo jedna opcija unutar grupe sa imenom
pol
INPUT type checkbox

Za razliku od tipa radio, unutar checkbox grupe polja moe biti izabran nijedan, jedan ili vie checkbox
elemenata.
<input type=checkbox name=vozilo value=bicikl>Ja imam bicikl
<input type=checkbox name=vozilo value=auto>Ja imam auto
SELECT
Pored input polja, u formama se mogu nai i select tagovi. Unutar select taga nalaze se option tagovi koji ustvari
predstavljaju opcije padajueg menija kreiranog tagom
select.
<select name=kola>
<option value=volvo>Volvo</option>
<option value=saab>Saab</option>
<option value=fiat>Fiat</option>
<option value=audi>Audi</option>
</select>
Nakon klika na strelicu pojavljuje se meni kao na slici ispod.
Na kraju, treba napomenuti da postoji ekvivalent input polju tipa submit koje slui za slanje podataka forme. Ogleda se u
tagu pod imenom <button>. Razlika izmedju ova dva je to je unutar taga button mogue definisati html, ubaciti sliku i
tekst, itd. Znai,omoguava bolju kontrolu izgleda samog dugmeta.
Primeri dugmeta kreiranog pomou button taga prikazani su ispod.
Kompleksne HTML Forme

KOMPLEKSNA FORMA I SLANJE NA ZADATU MAIL ADRESU
Sada emo kreirati kompletnu formu i poslati je na zadatu mail adresu. U ovom primeru koristiemo dva fajla: jedan
HTML dokument za prikaz i popunjavanje forme i drugi php fajl za procesuiranje i slanje podataka na zadatu mail
adresu.
Forma e imati sledei izgled u prozoru pretraivaa:
HTML kod koji koristimo izgleda ovako:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>HTML forma</title>
</head>
<body>
<form method=get enctype=text/plain action=posaljimail.php>
Ime<input type=text name=ime><br>
Prezime<input type=text name=prezime><br>
Email adresa<input type=text name=email><br><br>
Izaberite pol<br>
<select name=pol>
<option name=muski>Muski</option>
<option name=zenski>Zenski</option>
</select><br><br>
Zelim da mi periodino saljete vesti<br>
Da<input type=radio name=vesti value=Da>
Ne<input type=radio name=vesti value=Ne><br><br>
Oblast koja vas interesuje?<br>
HTML<input type=checkbox name=oblast[] value=HTML><br>
CSS<input type=checkbox name=oblast[] value=CSS><br>
JavaScript<input type=checkbox name=oblast[] value=JavaScript><br>
WordPress<input type=checkbox name=oblast[] value=Wordpress><br><br>
<input type=submit value=Send>
</form>
</body>
</html>
PHP dokument pod imenom posaljimail.php ima sledeu sintaksu:
<?php
$ime=$_GET[ime];
$prezime=$_GET[prezime];
$email=$_GET[email];
$pol=$_GET[pol];
$vesti=$_GET[vesti];
$oblast=$_GET[oblast];
$broj=count($oblast);
$poruka=Ime: .$ime.'<br>';
$poruka .=Prezime: .$prezime.'<br>';
$poruka .=Email: .$email.'<br>';
$poruka .=Pol: .$pol.'<br>';
$poruka .=Vesti: .$vesti.'<br>';
$poruka .=Oblast: ;
for($i=0;$i<$broj;$i++){
$poruka .=$oblast[$i].,;
}
$headers = From: bratimir@it4you.rs . \r\n .
$headers .= MIME-Version: 1.0 . \r\n;
$headers .= Content-type:text/html;charset=UTF-8 . \r\n;
mail(office@it4you.rs,Poruka sa sajta,$poruka, $headers);
?>
Block i inline tagovi

HTML blok i inline tagovi
Tagovi koje smo pominjali do sada bili su podeljeni po nameni. Kako se budemo bliili kraju HTML obuke, sve e nas
vie zanimati stilizovanje unetih slika i teksta. U tom cilju potrebno je pojasniti ta su to
block a ta inline elementi.
Ono to je izuzetno vano, kasnije, kada budemo radili formatiranje (stilizovanje elemenata) je injenica da inline
elementi ne mogu imati irinu i visinu. Njih je mogue staviti unutar block elemenata ili ih transformisati u blok element i
na taj nain upravljati njihovim dimenzijama.
Neki od block tagova koje smo obradjivali su <h1> do <h6>, <p>, <table>, <div>, itd.
Sa druge strane, inline tagovi koje smo pominjali: <span>, <img>, <a>, itd.
Blok elementi su elementi koji podrazumevano zauzimaju celu irinu web strane
(prozora pretraivaa) tako da elementi navedeni u html dokumentu posle njih poinju u
novom redu.
Inline elementi su elementi koji se ne zavravaju na kraju reda ve je odmah nakon
zavretka njihovog sadraja mogue dodati novi inline element. Iz tog razloga, mogue
je u jednom redu imati vie inline elemenata. Takodje, mogue je inline elemente
grupisati unutar blok elemenata.
Svaki od elemenata na web strani ima neke podrazumevane parametre za prikaz. Tako i block elementi (h1-h6,p,itd.)
podrazumevano zauzimaju kompletno raspoloivu irinu prozora pretraivaa (tanije elementa roditelja), nezavisno od
toga da li je njihov sadraj manji od duine reda koji se moe prikazati u prozoru pretraivaa ili ne.
Nasurot njima, inline elementi (span, a, img) po irini zauzimaju samo onoliko prostora koliko im je neophodno za prikaz
sadraja koji se nalazi u okviru njih. Ukoliko je njihov sadraj vei od irine prozora pretraivaa, delovae da se
ponaaju kao block elementi, iako to nisu.
Da bi razumeli, pogledaemo primere za neke od pomenutih elemenata.
Ovde je zbog lakeg razumevanja korien CSS atribut za boju pozadine kako bi jasnije videli granice elemenata.
Pravilo je da inline elementi mogu biti sadrani unutar block elemenata, dok
obrnuto ne vai!
<!DOCTYPE html>
<html>
<head>
<title>Pozicioniranje elemenata kreiranjem DIV-ova</title>
<style>
body{color:white;font-size:120%;}
h1{background-color:red;}
p{background-color:pink;}
span{background-color:grey;}
</style>
</head>
<body>
<h1>Naslov kreiran koriscenjem h1 taga</h1>
<p>Paragraf kreiran koriscenjem block elementa p.</p>

<p>Paragraf unutar koga se nalazi <span>span tekstualni inline element</span> koji zauzima samo neophodan
prostor.</p>
<p>Paragraf koji sadrzi sliku kao inline element.<img src=kafe1.jpg Kao sto se moze videti slika ce zauzeti samo
neophodan prostor ali ce ujedno definisati visinu block elementa unutar koga se nalazi.</p>
<span>Span tag, kao inline element, zauzima samo neophodan prostor.</span>
</body>
</html>
Ovaj primer, prikazan u prozoru pretraivaa, izgleda kao na slici ispod.
Kao to vidimo, u prvom redu nalazi se block element (h1) koji je zauzeo kompletno raspoloivu irinu prozora
pretraivaa iako je njegov sadraj dosta krai.
Ispod njega, prikazan je block element p koji takodje, nezavisno od sadraja, zauzima celokupnu irinu.
U treem redu nalazi se block element (p) unutar koga se nalazi span (inline element) sa pozadinskom sivom bojom. Vidi
se da, obzirom da zauzima samo minimalno potreban prostor za prikaz sadraja, ne remeti izgled block taga p unutar
koga se nalazi. Ovo
je primer pravila da se inline elementi mogu nalaziti u okviru

block elemenata.
U sledeem redu, primer je identian, s razlikom to je umesto span taga, u p tag umetnuta slika (img tag). Razlika je u
tome to zbog visine slike, ceo tag izgleda vii kako bi ukljuio celokupnu visinu slike.
U poslednjem redu vidimo inline tag koji zauzima samo neophodnu irinu za prikaz sadraja koji se u okviru njega nalazi.
HTML div tag
DIV tag je specijalna vrsta taga. On nema semantiko znaenje poput p, h1 ili img taga ve predstavlja kontejner u koji
se smeta sadraj koji smo pominjali: tekst, slike, video, vie sekcija teksta ili slika.
On slui kao omota odredjenog sadraja i slui da taj sadraj kao celinu pozicionira na web strani.
Kako bi ovo pojasnili pogledaemo primer gde NEMAMO primenjene div tagove.
<!DOCTYPE html>
<html>
<head>
<title>Poravnanje teksta</title>
</head>
<body>
<h1>Naslov celine 1</h1>
<p> Lorem Ipsum , ,
.
Lorem Ipsum ,
. Lorem Ipsum
, .
200 Lorem Ipsum
. Lorem Ipsum ,
.</p>
<p> Lorem Ipsum , ,
.
Lorem Ipsum ,
. Lorem Ipsum
, .
200 Lorem Ipsum
. Lorem Ipsum ,
.</p>
<p> Lorem Ipsum , ,
.
Lorem Ipsum ,
. Lorem Ipsum
, .
200 Lorem Ipsum
. Lorem Ipsum ,
.</p>
<p> Lorem Ipsum , ,

.
Lorem Ipsum ,
. Lorem Ipsum
, .
200 Lorem Ipsum
. Lorem Ipsum ,
.</p>
<p> Lorem Ipsum , ,
.
Lorem Ipsum ,
. Lorem Ipsum
, .
200 Lorem Ipsum
. Lorem Ipsum ,
.</p>
</body>
</html>
Ovaj kod u pretraivau izgleda kao
Ako bi sada oko svake celine (pod celinom podrazumevamo naslov i pridruene paragrafe) primenili div tagove, dobili bi
celine nad kojima moemo da vrimo razliite manipulacije u smislu pozicioniranja, dimenzionisanja, dodele pozadinskih
boja, itd. Tada bi kod mogao da izgleda ovako (za sad ne obraajte panju na css koji se nalazi u okviru head sekcije
dokumenta)
<!DOCTYPE html>
<html>
<head>
<title>Poravnanje teksta</title>
<style>
div#prvi{font-size:22px; width:400px; float:left;backgroundcolor:green;color:white;padding:20px;margin-right:20px;}

div#drugi{font-size:14px; width:300px; float:left;backgroundcolor:red;color:grey;padding:20px;margin-right:30px;}
div#treci{font-size:18px; width:260px; float:left;backgroundcolor:magenta;color:yellow;padding:30px;margin-right:10px;}
div#cetvrti{font-size:12px; width:400px; float:right;backgroundcolor:yellow;color:black;padding:15px;}
</style>
</head>
<body>
<div id=prvi>
<p> Lorem Ipsum , ,
.
Lorem Ipsum ,
. Lorem Ipsum
, .
200 Lorem Ipsum
. Lorem Ipsum ,
.</p>
</div>
<div id=drugi>
<p> Lorem Ipsum , ,
.
Lorem Ipsum ,
. Lorem Ipsum
, .
200 Lorem Ipsum
. Lorem Ipsum ,
.</p>
<p> Lorem Ipsum , ,
.
Lorem Ipsum ,
. Lorem Ipsum
, .
200 Lorem Ipsum
. Lorem Ipsum ,
.</p>
</div>
<div id=treci>
<p> Lorem Ipsum , ,
.
Lorem Ipsum ,
. Lorem Ipsum
, .
200 Lorem Ipsum
. Lorem Ipsum ,
.</p>
</div>
<div id=cetvrti>
<p> Lorem Ipsum , ,
.
Lorem Ipsum ,
. Lorem Ipsum
, .
200 Lorem Ipsum
. Lorem Ipsum ,
.</p>
</div>
</body>
</html>
a prikaz u pretraivau
TABELE table tag

Tabele su web elementi sastavljeni od redova i kolona. U njihovim presecima nalaze se elije koje su ujedno i jedini
prostor unutar tabele u koji se moe smestiti tekst, slike, video zapisi ali i nove tabele.
Tabele se u HTML-u kreiraju korienjem taga <table>. Unutar njega mogue je koristiti razne tagove, medju kojima su
najosnovniji <tr> i <td>. Na slici ispod prikazano je na ta se pomenuti elementi odnose, ukljuujui <table> tag koji
okruuje kompletnu tabelu.
Kao to vidite na slici, <table> tag je tu da definie granice neke tabele. <tr> je tag koji definie red tabele. Tag <td>
namenjen je definisanju pojedinane elije.
Sada emo kreirati jednostavan primer tabele i objasniti kako stvari funkcioniu.
<!DOCTYPE html>
<html>
<head>
<title>Naslov dokumenta</title>
<meta charset=UTF-8>
</head>
<body>
<table border=1>
<tr>
<td>Mesec</td>
<td>Usteda</td>
</tr>
<tr>
<td>Januar</td>
<td>100 din</td>
</tr>
<tr>
<td>Februar</td>
<td>80 din</td>
</tr>
</table>
</body>
</html>
Prvi zanimljiv tag je table i on oznaava poetak tabele. Ispod njega definiemo prvi red. U njemu smo definisali
border=1 atribut kako bi lake videli granice pojedinih elemenata. Znai imamo prvi otvarajui <tr> tag koji govori
pretraivau da ono to sledi unutar njega predstavlja prvi red tabele. Odmah nakon otvaranja <tr> taga imamo
Mesec). Nakon toga, zatvaramo prvu eliju i

otvaramo sledeu (gledano sleva na desno). Druga elija ima sadraj Usteda. Nakon to je tatvorimo, imamo
otvarajui <td> tag koji definie prvu eliju u liniji naslova (sa tekstom
zatvarajui tag </tr> ime je definisanje prvog reda zavreno.
Dalje otvaramo drugi red, ponovo piui <tr> tag iza koga otvaramo prvu eliju drugog reda sa tekstom
Januar i tako
dalje dok na kraju ne zavrimo sa zatvaranjem poslednjeg reda tagom </tr> i konano samu tabelu tagom </table>
Izgled u prozoru pretraivaa je ispod.
Ukoliko elite da okvire predstavite kao jednostruke linije u crnoj boji, u okviru taga table dodajte dva atributa cellpadding
i cellspacing. Ispod je table tag sa unetim izmenama.
<table cellpadding=0 cellspacing=0 border=1>
Sada emo uraditi malo sloeniji primer tabele. Izgled tabele na slici ispod.
Prvo to je btino primetiti da imamo 3 elije koje se proteu na vie od jednog reda, tj. kolone. To su elije obeleene
brojevima 1,2 i 3.
elija broj 1 i 2 proteu se na dva reda dok se elija 3 protee kroz 2 kolone. Da bi mogli da kreiramo ovakvu tabelu,
moramo koristiti attribute colspan (za elije koje se proteu u vie kolona) i rowspan (za elije koje se proteu u vie
redova).
Prvo to treba da uradimo je da kreiramo otvarajui i zatvarajui <table> tag. Unutar tabele imamo dva reda. Tu nema
nita novo u odnosu na prethodni primer.
Kako definiemo ukupan broj kolona tabele? Tako to gledamo red u kome ima najvei broj elija. U naem primeru
unutar prvog reda imamo 5 elija, a drugog 4. Ovde je presudno primetiti da iako se elije 1 i 2 ne zavravaju u ovom
redu, one u njemu poinju. elije
se definiu u redu u kome poinju.
Prva elija u prvom rede normalno se kreira otvarajuim i zatvarajuim <td> tagom. Iza toga sledi kod koji definie eliju
broj 1. Unutar otvarajueg taga definiemo njenu razliitost na taj nain to navodimo atribut rowspan i broj redova kroz
koji se protee, u ovom sluaju 2. To na kraju izgleda ovako:
<td rowspan=2></td>
Sledee dve elije u prvom redu nemaju nikakvih posebnosti, znai definie se samo otvarajui i zatvarajui td tag.
Poslednja elija takodje pripada prvom redu jer u njemu poinje. I u ovom sluaju kodu elije dodaemo atribut
rowspan=2.
U drugom redu treba da definiemo samo dve elije. Zato?
Iako u njemu vidimo da postoje 4 elije, dve od njih ne poinju u tom redu i ve su definisane sa rowspan parametrom pa
njih ne navodimo. Pretraiva e ih, imajui rowspan atribut u vidu, samo produiti u sledei red. Poenta prie je da
pretraiva ovaj kod razume.
Znai, prvo definiemo prvu eliju u drugom redu uobiajenim postupkom. Drugu eliju koja se protee na dve kolone,
definiemo tako to u otvarajuem td tagu ovog puta definiemo atribut colspan poto se elija protee na dve kolone,
to na kraju izgleda: colspan=2 a ceo kod elije
<td colspan=2></td>
Kompletan kod ( sa ubaenim tekstom u elijama) dat je ispod:
<table border=1 cellpadding=0 cellspacing=0>
<tr>
<td>123</td>
<td rowspan=2>123</td>
<td>abc</td>
<td>123</td>
<td rowspan=2>abc</td>
</tr>
<tr>
<td>321</td>
<td colspan=2>abc</td>
</tr>
</table>
Izgled u prozoru pretraivaa
Jedino to jo nismo objasnili je izgled otvarajueg taga table. U njemu postoje tri atributa koje smo dodali. Border
oznaava dodavanje okvira na sve elije, cellpading i cellspacing imaju vrednost 0 kako tabela ne bi imala duple linije
ivica. Probajte da ih izostavite i pogledajte razliku u prozoru pretraivaa.
Ovim je objanjenje primera zavreno.
Sadraj elije tabele moe biti tekst, slika, video zapis ili nova ugnjezdjena tabela. Ovo je sve to za sada treba da znate
o tabelama. Njih je naravno, kao i ostale elemente, mogue stilizovati CSS-om.
Treba napomenuti da su se nekad tabele koristile za definisanje izgleda web strana. Danas ete retko naii na sajtove
ija je struktura i raspored elemenata na stranama definisan tabelama jer su njihovu ulogu preuzeli <div> tagovi (o njima
kasnije). Ono gde se jo uvek zadralo stilizovanje putem tabela su HTML emailovi, tj. kod mailova koji sadre formatiran
tekst i slike. Ovde, zbog razliitog ponaanja email klijenata, jedini sigurni nain da se obezbedi ispravno formatiranje
lepo ukraenog maila je u sluaju korienja tabela u tom cilju.
Veba:
Napraviti tabelu koja izgleda kao na slici dole:
Reenje zadatka:
<table>
<tr>
<td colspan=2 rowspan=2>Rezultati istraivanja</td>
<td colspan=3>Godite</td>
</tr>
<tr>
<td>12 do 25 god</td>
<td>26 do 40 god</td>
<td>Preko 40 god</td>
</tr>
<tr>
<td rowspan=3>Koja je vaa omiljena destinacija?</td>

<td>Disneyworld</td>
<td>25%</td>
<td>50%</td>
<td>25%</td>
</tr>
<tr>
<td>Las Vegas</td>
<td>30%</td>
<td>50%</td>
<td>20%</td>
</tr>
<tr>
<td>Evropa</td>
<td>30%</td>
<td>50%</td>
<td>20%</td>
</tr>
</table>
BASE i U tag
<base> tag
Base tag je tag koji se smeta odmah na poetku head dela HTML koda, najbolje odmah ispod otvarajueg head taga
kako bi svi ostali tagovi mogli da ga koriste.
Kada na jednoj web strani ima puno linkova sa istim apsolutnim putanjama, vrlo je praktino definisati base tag kako bi
se izbegla ponavljanja pri definisanju linkova na web strani. Zamislite da imamo 10 slika na jednoj web strani i da je
potrebno definisati njihove href attribute sa apsolutnim putanjama 10 puta. Dodatno, zamislite da sajt razvijamo na test
server/domenu i da nakon to predjemo na produkcioni server, treba promeniti sve te linkove. Umesto 10 puta,
promeniemo samo base href atribut i time zavriti posao.
Evo primera koda cele HTML strane gde se base tag NE koristi:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<a href=http://www.primer.rs/probnidirektorijum/strana1.html target=_blank>Strana1</a>
</body>
</html>
Ako bolje pogledate, videete da za svaki link piemo kompletnu URL putanju. U sluaju da koristimo base atribut, u
svim <a> tagovima stavili bi samo imena dokumenata (strana1.html, strana2.html i strana3.html, respektivno) Primer
koda sa ubaenim <base> tagom i izmenjenim linkovima dat je ispod:
<!DOCTYPE html>
<html>
<head>
<base href=http://www.primer.rs/probnidirektorijum/ target=_blank>

</head>
<body>
<a href= strana1.html>Strana1</a>
<a href=strana2.html >Strana2</a>
<a href=strana3.html>Strana3</a>
</body>
</html>
Dodavanjem <base> taga, izbegavamo ponavljanje ispisivanja celih putanja i atributa target=_blank.
Tag u
<u> tag se koristi za podvlaenje teksta, jedne ili vie rei. Zbog usvojenog ponaanja linkova gde je u svesti ljudi da
podvuena re predstavlja link, treba je oprezno koristiti, tj. koristiti u specijalnim sluajevima.
Slike unutar HTML dokumenta

<img> tag
<IMG> tag namenjen je umetanju slika u html dokument i prikazu u prozoru pretraivaa. Da bi mogli da vidimo neki
primer, bie nam potrebna jedna slika, ne vea od 200x300px koju emo snimiti u folder u kome nam se nalazi i izvorni
html document. Ovo naravno, u realnom svetu, nije obavezno ali emo zbog jednostavnosti to pretpostaviti.
Za ispravan prikaz slika na webu, slike je najbolje pripremiti u jednom od formata: jpg, gif i png. Svakako nikako ne
koristite .bmp.
Ukratko, izbor koji format izabrati, svodi se na sledee:
ako vam je najbitnije da sve boje budu ispravno prikazane, koristite jpg
ukoliko vaa slika ima pozadinu koja je transparentna, koristite png ili gif
ukoliko vaa slika ukljuuje animaciju, jedini izbor je gif.
Sintaksa za img tag izgleda ovako:

<img src=slika.jpg alt=Moja slika>
Ovde vidite da je img tag samozatvarajui. Razlog je oigledan. Vi samo elite da umetnete sliku u dokument. Unutar nje
vam ne treba tekst. Ovako napisan kod znai da se slika u prozoru pretraivaa uitava u svojim originalnim dimenzijama
, na primer 200x300px.
src=slika.jpg je deo koda koji govori pretraivau da uita sliku slika.jpg koja se nalazi u istom folderu kao i
dokument koji je poziva.
alt=Moja slika je sada ve obavezan atribut img taga ija je namena viestruka. Prva i osnovna je da za sluaj da slika
ne bude pronadjena, tekst unutar alt atributa bude ispisan na mestu predvidjenom za sliku. Drugi, mozda jo vaniji je
to pretraivai koriste tu informaciju kako bi mogli da indeksiraju slike koje se na sajtu nalaze.
Iako je najbolja praksa da se izmena parametara prikaza prepusti CSS-u, ovde emo ipak napomenuti mogunost
stilizovanja unutar img taga html atributima. Naime, ukoliko elimo da naa slika bude prikazana kao manja u odnosu na
originalnu (irina 200px i visina 300px), u kodu emo koristiti slubene rei
sledei nain:
height za visinu i widthza irinu na
<img src=slika.jpg alt=Moja slika width=100 height=200>

Ukoliko irina i visina nisu proporcionalno smanjene ili poveane doi e do nepravilne razmere pa e slika biti izduena
po jednoj od dimenzija.
Da bi to izbegli, najbolje je navesti samo jedan od parametara, irinu ili visinu, a pretraiva e drugu dimenziju prikazati
proporcionalno umanjenu ili uveanu. Na primer, ako napiemo:
<img src=slika.jpg alt=Moja slika width=100>
i izostavimo parameter
height za visinu, visina slike e biti proporcionalno smanjena, tj. prikazana u veliini od 200px
po visini.
Primeujete da ovde nismo stavljali dimenziju iza broja. To je zbog toga to je podrazumevana vrednost koju pretraiva
dodaje u pikselima, tj. px.
Slika kao link

Sada se vraamo na temu koju smo ranije pojasnili a tie se linkovanja. Kako da slika bude link, tj. kako da nas klik
miem na slici odvede na eljenu web stranu? Primer koda je ispod:
<a href=www.google.com ><img src=slika.jpg alt=Moja slika width=100 height=200></a>
Kao to moete videti, jedina razlika je u tome to emo umesto teksta, izmedju otvarajueg i zatvarajueg a taga staviti
img tag. Tako slika postaje link!
Kako da link ne vodi nikuda?

Postoje situacije u kojima treba predstaviti link koji ne vodi nikuda, naroito u fazi kada jo nisu definisane putanje ka
kojima treba da vodi. U tim sluajevima, href atribut izgleda ovako href=#. Ovako definisan href atribut govori da ukoliko
se miem klikne na njega, on e uraditi refresh stranice,tj. uitati istu stranu. Time se objanjava i zato linkovanje mesta
na istoj strani koje smo obradili, poinje znakom #.
Linkovi na istoj strani

Kako da definiete link koji vas vodi na poetak web strane?
U sluaju dugakih web strana, nakon odlaska na eljeno mesto, potrebno je na neki nain definisati i povratak na mesto
sa koga smo doli. Ono je obino poetak web strane ali moe biti i neko drugo.
U tom cilju potrebno je definisati link ispod teksta na mestu na koje smo otili sa tekstom koji indikativno govori korisniku
da se klikom na njega vraa na vrh strane:
<a href=#top>Povratak na sadrzaj</a>
Ono to jo dodatno treba da uradimo je da odmah nakon otvarajueg body taga kreiramo nevidljivi a link koji e
izgledati ovako
<a id=top></a>
Primer koda nalazi se ispod.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv=Content-Type content=text/html; charset=utf-8>
<title>Link na istoj strani</title>
</head>
<body>
<a id=top></a>
Sadrzaj<br>
<a href=#stavka1>Stavka 1</a><br>
<a href=#stavka2>Stavka 2</a>
<a id=stavka1></a>
<h1>Stavka 1</h1>
<p> Lorem Ipsum , ,

.
Lorem Ipsum ,
. Lorem Ipsum
, .
200 Lorem Ipsum
. Lorem Ipsum ,
.</p>
<a href=#top>Idi na vrh</a>

<a id=stavka2></a><h1>Stavka 2</h1>
<p> Lorem Ipsum , ,
.
Lorem Ipsum ,
. Lorem Ipsum
, .
200 Lorem Ipsum
. Lorem Ipsum ,
.</p>
<a href=#top>Idi na vrh</a>
</body>
</html>
Pojanjenje koda
Odmah nakon otvarajueg body taga stavljate kod predstavljen na liniji
<a id=top></a>
koji govori pretraivau gde elite da odete nakon to korisnik klikne na link naveden dole u tekstu <a href=#top>Idi na
vrh</a>
Referenciranje tano odredjene pozicije na drugoj strani ovo je specijalan sluaj u kome
klik na tag otvara drugu stranu I skroluje sadraj na mesto na kom se nalazi link sa id-jem odredjeni_deo.
<a href=druge_strana.html#odredjeni_deo>Link</a>
Na mesto na koje elimo da odemo, umee se tag
<a id=odredjeni_deo></a>
Logiko povezivanje ova dva taga u celinu se, kao i u prethodnom sluaju, deava preko definisanog imena, tj vrednosti
atributa id.
U prolosti je umesto atributa id bio korien atribut name ali od HTML verzije 5 to vie nije dozvoljeno, tj. koristi se
iskljuivo atribut id.
Referenciranje maila ova modifikacija a taga koristi se u situaciji kada ne elimo da adresa bude javno
prikazana u okviru web strane.
<a href=mailto:bratimir@it4you.rs>Pisite nam</a>
Klik na ovaj link otvara predefinisanu mail klijent aplikaciju na raunaru (na Windows platformi to je obino Outlook) i
polje To:novog maila se automatski popunjava mail adresom zadatom u href atributu (u ovom
sluaju bratimir@it4you.rs)
Za sluaj da, pored popunjavanja polja primaoca i Subject: polje maila elimo da popunimo, sintaksa izgleda ovako:
<a href=mailto:bratimir@it4you.rs?subject=Poruka%20sa%20sajta>Pisite
nam</a>
Tada e se, nakon klika na link, otvoriti nova mail poruka sa popunjenim poljem primaoca a Subject polje bie popunjeno
tekstom Poruka sa sajta. Ovde primeujete specijalan znak %20 koji ustvari predstavlja HTML kod za prazno mesto. U
sluaju da space ne napiete na ovaj nain ve kao Poruka sa sajta moe se desiti da neki mail klijenti to protumae
pogreno. Stavljanje %20 umesto praznine osigurava ispravnost sintakse.
Referenciranje dokumenata/aplikacija
Ukoliko elite da korisnik klikom na link download-uje ili otvori file koji se nalazi na serveru, najsigurniji nain je kreiranje
dokumenta u pdf formatu jer veina pretraivaa ima ugradjen Adobe Acrobat Reader engine pa moe da otvori
dokument unutar prozora pretraivaa. Ukoliko elite da korisnik dobije mogunost uvanja umesto automatskog
otvaranja, najsigurniji nain je da fajl upakujete kao .zip arhivu i linkujete nju. Svi ostali naini u nekim pretraivaima
rade, a u nekima ne.
<a href=uputstvo.zip>Preuzmite uputstvo</a>
Ovim smo iscrpeli sve mogue scenarije koje ete sretati u praksi.
Pretpostavljam da e neki od vas pomisliti kako je prilino dosadno kliktati na tekst i da je mnogo uzbudljivije kliknuti na
sliku. Ovo nas dovodi do taga <img> .
HTML Linkovi (nastavak)

LINKOVI (nastavak moguih referenciranja lokacija)
Referenciranje na istoj strani ovo je ujedno najkomplikovaniji nain referenciranja jer ukljuuje kreiranje
dva a taga. Prvi tag izgleda vrlo slino po strukturi ve pomenutim sluajevima s tom razlikom to href atribut poinje
znakom # koji oznaava da je link na koji elimo da odemo na istoj HTML strani.Ovde se ne radi o tome da e klikom na
link biti uitana druga web strana, ve e praktino, klik na link izazvati skrolovanje sadraja strane do mesta na kome se
nalazi drugi a tag.
Sintaksa tog drugog taga je razliita u odnosu na prethodno prikazanu. Razlika je u tome to taj a tag nema
href atribut
id. Sintaksa oba taga je prikazana ispod.

<a id=link_na_istoj_strani></a> ovaj kod je nevidljiv na strani, tj. ne prikazuje se nikakav tekst (vidite
ve umesto njega ima atribut
da izmedju otvarajuceg i zatvarajueg dela nema nikakvog sadraja). Ovaj kod se umee na mesto na koje elimo da
pretraiva dodje skrolovanjem sadraja kada se klikne na link prikazan ispod.
<a href=#link_na_istoj_strani>Link</a> klik na ovaj link inicira skrolovanje strane do mesta na

kome se nalazi a tag sa atributom id=link_na_istoj_strani.
Primer:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv=Content-Type content=text/html; charset=utf-8>
<title>Link na istoj strani</title>

</head>
<body>
Sadrzaj<br>

<p> Lorem Ipsum , ,
.
Lorem Ipsum ,
. Lorem Ipsum
, .
200 Lorem Ipsum
. Lorem Ipsum ,
.</p>
<p>Iskopirajte prethodni paragraf 10 puta kako bi videli efekat skrolovanja!!!</p>
<a id=stavka1></a>
<h1>Stavka 1</h1>
<p> Lorem Ipsum , ,
.
Lorem Ipsum ,
. Lorem Ipsum
, .
200 Lorem Ipsum
. Lorem Ipsum ,
.</p>
<a id=stavka2></a>
<h1>Stavka 2</h1>
<p> Lorem Ipsum , ,
.
Lorem Ipsum ,
. Lorem Ipsum
, .
200 Lorem Ipsum
. Lorem Ipsum ,
.</p>
</body>
</html>
Pojanjenje. Odmah nakon otvaranja body taga, imate kod

<body>
Sadrzaj<br>

On oznaava mesto unutar strane na koje ete otii kada kliknete na tekst Stavka 1 ili Stavka 2. Dole u kodu imate
<a
id=stavka1></a> koje slui kao odrednica mesta na koje dolazite nakon to kliknete na Stavka 1. Isto se
deava i u sluaju klika na Stavka 2
HTML interno povezivanje

Navodjenje putanja u HTML-u
Ovo je izuzetno vana stvar. Kada kaemo putanja u HTML-u, tu mislimo na pozivanje drugih dokumenata, slika ili neeg
treeg to se nalazi negde na Internetu ili naem web serveru. Uzeemo primer taga <img>, tanije njegovog atributa
src. Ovde moemo imati nekoliko opcija. Jedna je da navedemo kompletnu URL adresu gde se slika nalazi. Na primer, u
sluaju da se slika nalazi u na web serveru unutar root domena
http://www.primer.rs u podfolderu slike, src atribut
bi izgledao ovako:
<img src=http://www.primer.rs/slike/slika1.jpg alt=Prva slika>
Ovo je najjednostavniji primer. Sa druge strane ovo moe napraviti problem. Zato? Iz prostog razloga to u sluaju da je
ovo test site a da se kasnije ceo sajt prebaci na drugi domen, veza ka svim slikama bi morala da se redefinie tako da
odraava novu strukturu. U tom sluaju svi linkovi bi morali da se menjaju, jedan po jedan.
Ovo se naziva apsolutna putanja. Preostali primeri se zbirno nazivaju
relativnim putanjama.
Sledei primer je kada se slika nalazi u istom direktorijumu gde i HTML dokument iz koga se slika poziva.
<img src=slika1.jpg alt=Prva slika>
Navodjenje samo imena slike slika1.jpg govori pretraivau da na ovo mesto postavi sliku sa tim imenom koja se
nalazi u istom direktorijumu (folderu) u kome je i dokument iz koga se poziva.
Trei primer je za sluaj da su sve slike smetene u folder
images a da se HTML dokument nalazi u istom
direktorijumu gde i direktorijum images, putanja bi izgledala ovako:

<img src=images/slika1.jpg alt=Prva slika>
Generalna pravila:
Ako ponete src sa / znai da kreete iz root direktorijuma sajta.
Ako ponete sa ../ znai da se vraate jedan direktorijum iznad (roditelj ) i kreete sa tog mesta
Ako ponete sa ../../ znai da se vraate dva direktorijuma iznad HTML dokumenta.
Sada emo se vratiti na priu o linkovima.
HTML linkovi
LINKOVI <a> tag
a tag je tag koji nam omoguava da prelazimo sa stranice na stranicu, sa sajta na sajt itd. Svo kretanje unutar stranica
obezbedjuje ovaj tag. Bez njega ne bi bilo weba i svakoj strani bi pristupali tako to bi adresu svake strane morali da
kucamo u adresnoj liniji pretraivaa i znamo napamet. Otuda i njegova izuzetna vanost.
Najosnovniji oblik a taga prikazan je u kodu ispod:
<a href=http://www.google.com>Klikni da odes na Google</a>
Pre nego ponemo sa objanjenjem prikazanog koda, pogledajmo kako ovaj kod izgleda u tekst editoru a kasnije i u
pretraivau:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
Zbog lakeg razumevanja, iskopirali smo kljunu liniju:

Sama injenica da se tekst ispisan na web strani Klikni da odes na Google nalazi unutar a taga govori pretraivau da
je na ovaj tekst mogue kliknuti i da se klikom na njega aktivira mehanizam koji ita href atribut, tj. njegovu vrednost.
Vrednost href atributa predstavlja lokaciju na koju nas klik vodi, u ovom slucaju sajt Googlea.
Ono to moete primetiti je da je tekst, za razliku od izgleda teksta u ranije obradjenim tekstualnim tagovima (p,h1,span)
u plavoj boji i podvuen linijom. Ovo je podrazumevani stil kada je u pitanju a tag i davno je tako osmiljen kako bi se
znalo da se radi o linku na koji korisnik moe da klikne a da bi se razlikovao od ostatka teksta koji je bio u crnoj boji i nije
bio podvuen.
U sluaju da elite da vam se stranica otvori u novom tabu, iskoristiete atribut a taga
target.
Njegova vrednost _blank upravo govori pretraivau da otvori stranicu u novom tabu. Izmenjen kod izgleda ovako:
<a href=http://www.google.com target=_blank>Klikni da odes na Google</a>
Ranije se umesto _blank koristila vrednost _new ali je ona sada prevazidjena.
Prema tome gde link moe da nas odvede nakon to kliknemo na tekst linka, razlikujemo nekoliko sluajeva.
LINKOVANJE KA RAZNIM LOKACIJAMA
Referenciranje druge strane unutar istog sajta je sluaj u kome se u href atributu navodi samo
putanja, tj. ime html dokumenta (strane) na koju elimo da odemo. U naem primeru, ta strana se zove
druga_strana.html.
<a href=druga_strana.html>idi na drugu stranu</a>

Zato navodimo samo ime fajla? Ovde je izvrena pretpostavka da se obe pomenute strane, strana na kojoj se nalazi
link i strana na koju odlazimo (u ovom sluaju druga_strana.html ) nalaze u istom folderu na web serveru.
Za sluaj da se predmetna strana hijerarhijski ne nalazi u istom folderu ve u podfolderu u odnosu na fajl iz koga je
kreativa ) href atribut izgledao bi ovako:

<a href=kreativa/druga_strana.html>idi na drugu stranu</a>
pozivamo (na primer folder pod imenom
Za sluaj da se pomenuti fajl/strana (druga_strana.html) nalazi u nivou foldera u kome se nalazi
prvi.html, href
href=../druga_strana.html
<a href=../druga_strana.html>idi na drugu stranu</a>
Ovo je moda idealno mesto da napravimo digresiju i objasnimo kako se navode
putanje, bilo da je u pitanju link ili slika, ili ve neto tree.
atribut imao bi sledecu putanju
Gnezdjenje tagova
U prethodnom primeru imali smo sluaj da se jedna lista nalazi unutar druge. Sada emo objasniti generalno pravilo
kada je jedan element unutar drugog u HTML strukturi strane.
Postoji izriito pravilo da tagovi moraju biti ugnjezdjeni unutar drugih. ta to znai? Pogledajmo jednostavan primer
ispravno ugnjezdjenih tagova:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>HTML sintaksa je prilicno laka. <i>Osnovno sto treba nauciti je da <strong>tagovi unutar drugih moraju i da pocnu i
da se zavrse.</strong></i> Pogledajte primer na sledecoj strani. Unutar njega <a href=http://www.google.com>naci
cete adekvatan primer</a></p>
</body>
</html>
Svi tagovi poinju i zavravaju se po principu ugnjezdjenja. Znai, pravilo glasi da
tag koji se otvori unutar drugog taga mora biti zatvoren pre nego se taj drugi tag
zatvori. Ili, tagovi unutar drugih tagova moraju da se otvore i zatvore pre
zatvaranja taga u okviru koga se nalaze.
Ako pogledamo bitan deo koda iz primera iznad:
<p>HTML sintaksa je prilicno laka. <i>Osnovno sto treba nauciti je da <strong>tagovi unutar drugih moraju i da pocnu i
da se zavrse.</strong></i> Pogledajte primer na sledecoj strani. Unutar njega <a href=http://www.google.com>naci
cete adekvatan primer</a></p>
vidimo da u odnosu na otvarajui tag <p>, svi ostali tagovi (<i>,<strong> i <a>) poinju i zavravaju pre zatvarajueg
</p> taga. Ako krenemo dublje, videemo da se <strong> tag otvara i zatvara unutar <i> taga.
Ovo naravno vai i za sve tagove koji se nalazi unutar HTML dokumenta, pa se na primer body tag otvara i zatvara
unutar html taga, title i meta tag unutar head taga, itd.
Ovo je naroito vano pravilo, koje, u sluaju mnogo sloenijeg koda od prikazanog, zna da napravi veliki problem jer se
greka tee nalazi.
Primer nepravilnog gnezdjenja prikazan je ispod:
<i>Osnovno sto treba nauciti je da <strong>tagovi unutar drugih moraju i da pocnu i da se zavrse.</i></strong>
Ovde vidimo da se tag <strong >zatvara nakon <i> taga iako je otvoren nakon otvaranja istog. Na ovaj nain, pretraiva
pri prolasku kroz html kod ne zna gde da zavri prikazivanje italic ili bold teksta.
Gnedjenje listi
Vrlo je bitno pokazati sintaksu za situaciju u kojoj se jedna lista nalazi unutar druge.
<ul>
<ol>
<li>Treca podstavka</li>
</ol>
<li>Druga stavka</li>
<ol>
<li>Treca podstavka</li>
</ol>
</ul>
Gledano u pretraivau ovaj kod izgleda:
Definicione liste (dl)

Definicione liste
Definicione liste se kao HTML elementi retko koriste ali ih, kada za tim ima potrebe i smisla, ne treba izbegavati. Pored
strukture, one pomau i pretraivaima jer obino predstavljaju sadraj u kome se objanjavaju neki pojmovi.
Inae, pored osnovnog otvarajuceg <dl> i zatvarajueg </dl> taga, unutar njih se nalaze jo dva taga zaduena za ime
pojma i taj tag se zapisuje kao <dt>. Pored njega, tag zaduen za objasnjenje pojma zapisuje se kao <dd>.
Oba imaju otvarajui i zatvarajui deo kao i ostali tagovi iji je sadraj tekst . Primer je dat ispod:
<dl>
<dt>Ime pojma 1</dt>
<dd>Definicija 1</dd>
</dl>
HTML liste (ol i ul)

Tagovi zadueni za nabrajanja (uredjene i neuredjene liste) <ol> i <ul>
U sluaju da unutar HTML dokumenta elite da postignete ispis teksta u vidu nabrajanja:
Prvi
Drugi
Treci
Cetvrti
Ili nabrajanja sa brojevima

1.
2.
3.
4.
Prvi
Drugi
Treci
Cetvrti
koristiete sledee tagove: <ul> za liste bez nabrajanja i <ol> za liste gde se nabrajanje radi sa brojevima 1,2,3,4.
U oba tipa liste, pored tagova <ul> i <ol> imamo jo jedan element koji treba objasniti pre nego napiemo primer html
koda.
To je tag <li>. On se koristi i kod neuredjenih i uredjenih listi. <li> tag je namenjen odvajanju jedne stavke liste od druge.
U naem sluaju, svaka od stavki (Prvi, Drugi, Treci i Cetvrti) imae sopstveni <li> otvarajui i </li> zatvarajui tag.
Pogledajmo primer koda prve navedene liste:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<ul>
<li>Prvi</li>
<li>Drugi</li>
<li>Treci</li>
<li>Cetvrti</li>
</ul>
</body>
</html>
Obavezno uoite da na kraju, posle poslednjeg zatvarajueg taga </li> dolazi i zatvarajui </ul> tag kako bi saoptili
pretraivau da se ovim lista zavrava. Izostavljanje moe dovesti do nepredvidjenih problema u prikazivanju koda koji
se moe nai ispod toga. U pretraivau kod napisan iznad izgleda ovako:
Drugi primer je uredjena lista a razlika u kodu u odnosu na neuredjenu svodi se na to da se umesto otvarajueg <ul> i
zatvarajueg </ul> taga, koriste <ol> i </ol>, respektivno. Primer koda kao i izgled u prozoru pretraivaa dati su ispod.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<ol>
<li>Prvi</li>
<li>Drugi</li>
<li>Treci</li>
<li>Cetvrti</li>
</ol>
</body>
</html>
Izgled koda u pretraivau prikazan je na slici ispod:
Sad je dobar trenutak da rekapituliramo ono to smo prethodno nauili kroz prikaz fleksibilnosti HTML jezika, tj. njegove
sintakse i pokaemo kako se ista stvar moe postii korienjem razliite sintakse.
Primer na kome emo to pokazati je pri kreiranju listi. Videemo da izgled uredjene liste moemo postii na tri naina.
I Nain podrazumeva korienje iskljuivo <pre> taga
<pre>
Lista:
1.
2.
3.
4.
5.
Stavka jedan
Stavka dva
Stavka tri
Stavka cetiri
Stavka pet
</pre>
II Nain korienjem p i br taga kao i specijalnog html znaka
<p>Lista:<br>
   1. Stavka jedan<br>
   1. Stavka dva<br>
   1. Stavka tri<br>
   1. Stavka cetiri<br>
   1. Stavka pet<br>
</p>
Trei nain je naravno, korienjem pomenutog <ol> taga.
<ol>
<li>Prvi</li>
<li>Drugi</li>
<li>Treci</li>
<li>Cetvrti</li>
</ol>
HR tag i naglaavanje teksta

<hr> tag
Dok smo jo ovde, vredi pomenuti jo jedan tag, pod imenom <hr>. Taj tag prikazuje crnu liniju preko celog ekrana
pretraivaa, naravno na mestu na kome je umetnut. HR tag je samozatvarajui tag. Ako u kod prethodnog primera
dodamo <hr> tag izmedju poslednjeg zatvarajueg </h6> taga i otvarajueg <p> taga, dobiemo prikaz kao na slici
ispod:
Kao to vidite, izmedju naslova i teksta umetnuta je linija koja se protee celom irinom prozora. Efekat ovog taga
mogue je postii korienjem raznih CSS metoda ali nije loe znati njegovu ulogu. Moda vam nekad zatreba.
Tagovi za naglaavanje delova teksta

esto u okviru jedne reenice postoji re (ili vie njih) koju na neki nain treba izdvojiti ili naglasiti. U tu svrhu kreirana su
etiri taga. To su: <b>, <i>, <strong> i <em>. Strong i em su uvedeni kasnije.
U najveem broju sluajeva, inie vam se da je isti efekat ako umesto <b> koristite <strong> ili umesto <i> koristite
<em> To u prikazu u prozoru pretraivaa i jeste sluaj.
<b> oznaava podebljanje odredjene rei a <i> govori pretraivau da zakrivi slova koja se nadju unutar tog taga. Slino
italic fukciji u Wordu.
Korespodentni tagovi njima su <strong> i <em>. Iako u veini pretraivaa daju isti efekat kao <b> i <i> razlika je u
sledeem:
Tekst unutar strong i em elemenata moe biti dodatno stilizovan, promenjena boja ili veliina teksta dok sa <b> i <i> to
nije sluaj. Takodje, na nekim ekranima sav tekst je ve podebljan pa samim tim <b> ne znai nita. Razlika dolazi do
izraaja i u sluaju itanja razliitim screen reader-ima (za slepe osobe) kada <b> ne znai nita dok <strong> moe
znaiti pojaan ton pri izgovoru teksta koji se nalazi unutar njega.
SPAN i H1-H6 tagovi

Tag <span>
Span tag namenjen je formatiranju teksta unutar paragrafa, najcee u situacijama kada elimo da neku re posebno
formatiramo u odnosu na ostatak paragrafa, poveamo njen font, promenimo joj boju, podvuemo je, itd.
Pravilna upotreba ovog taga je u kodu ispod.
<p>Ovo je prva recenica paragrafa. Zatim sledi<span>druga<span> recenica paragrafa. Iza nje sledi treca
recenica paragrafa a iza nje jos jedna. Sve ove recenice deo su jednog te istog paragrafa.</p>
Na primeru iznad vidite da je re
druga na poetku druge reenice stavljena unutar <span> taga. Ovako napisana,
nee izazvati nikakvu promenu kada pogledate u prozoru pretraivaa, ali je ovo HTML nain da se deo teksta unutar
paragrafa odvoji, bez promene izgleda celog paragrafa i nad njim kasnije izvede neka promena u formatiranju.
Tag <h>
H tag kao takav ne postoji. Postoji est varijacija ovog taga a svi su namenjeni formatiranju naslova. Postoje: <h1>,
<h2>, <h3>, <h4>, <h5> i <h6>. <h1> ima najvei font dok <h6> ima najmanji. Pored uloge kreiranja istaknutog teksta u
vidu naslova, njegova uloga je i u tome sto pretraivai na njih obraaju posebnu panju pri klasifikovanju strane.
(rangiranju) h1 se posmatra kao glavni naslov strane dok se ostali posmatraju kao podnaslovi. Vrlo retko ete u praksi
koristiti h4,h5 i h6.
Ako napiemo jednostavan kod koji e sadrati naslov i paragraf, celokupan kod html dokumenta izgledae ovako:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Naslov</h1>
<p>Ovo je prva recenica paragrafa. Zatim sledi druga recenica paragrafa. Iza nje sledi treca recenica paragrafa a iza nje
jos jedna. Sve ove recenice deo su jednog te istog paragrafa. Sve ove recenice deo su jednog te istog paragrafa. Sve
ove recenice deo su jednog te istog paragrafa. </p>
</body>
</html>
U pretraivau to izgleda ovako:
Da li primeujete razliku u veliini fonta samog naslova i teksta unutar <p> taga? Pored toga, uoavate da iznad i ispod
teksta <h1> taga imamo vee praznine. Ove praznine nazivaju se margine I o njima e biti rei kasnije
Radi kompletnosti, pogledaemo kako izgledaju i ostali h tagovi uvrteni u html dokument. Kod jeprikazan ispod.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Naslov H1</h1>
<h2>Naslov H2</h2>
<h3>Naslov H3</h3>
<h4>Naslov H4</h4>
<h5>Naslov H5</h5>
<h6>Naslov H6</h6>
<p>Ovo je prva recenica paragrafa. Zatim sledi druga recenica paragrafa. Iza nje sledi treca recenica paragrafa a iza nje
jos jedna. Sve ove recenice deo su jednog te istog paragrafa. Sve ove recenice deo su jednog te istog paragrafa. Sve
ove recenice deo su jednog te istog paragrafa. </p>
</body>
</html>
Onako kako se vidi u pretraivau:
Ako bolje pogledate, videete da je nakon prvog <h1> taga, svaki sledei tekst sve manji, zakljuno sa tagom <h6>.
Primetiete takodje i da je veliina fonta <h5> i <h6> ak manja od onog unutar <p> elementa. Sve ovo i jo mnogo
drugih stvari mogue je fino podesiti korienjem CSS-a.
Tagovi za prikaz teksta

Tagovi za prikazivanje teksta
Kao to smo pomenuli, u sluaju da vas ne zanima nita vie od mogunosti da imate stranu sa crnim tekstom i belom
pozadinom, tekst moete unositi direktno izmedju <body> otvarajueg i </body> zatvarajueg taga. U sluaju da elite
neto vie od toga, kao na primer, da izmenite veliinu slova kojima je pojedini tekst napisan, promenite boju ili font kojim
elite da tekst bude ispisan, stilizujete ga na razne naine ili kasnije nad njim vrite neke Java Script akcije, koristiete
tag-ove. Tagovi omoguavaju da tekst napisan unutar njih bude formatiran onako kako elite a bez uticaja na ostatak
teksta na strani. Osnovni tagovi za grupisanje teksta su<h1> do <h6>, <p> i
<span>. Pored njih postoje i drugi
tagovi koje bi mogli nazvati pomonim i uglavnom se koriste za formatiranje manjih delova teksta. Ti tagovi su <b> , <i>,
<sub>, <sup>, itd. Sa sve jaom podrkom za CSS, o kojoj emo priati kasnije, ovi tagovi sve vie gube na znaaju.
Tag <p>
Tag p predstavlja skraenicu za paragraf i otprilike se tako i primenjuje na blok teksta sastavljen od jedne ili vie
reenica koje logiki predstavljaju celinu.
Primer:
<p>Ovo je prva recenica paragrafa. Zatim sledi druga recenica paragrafa. Iza nje sledi treca recenica paragrafa a iza
nje jos jedna. Sve ove recenice deo su jednog te istog paragrafa. Sve ove recenice deo su jednog te istog paragrafa. Sve
ove recenice deo su jednog te istog paragrafa. Sve ove recenice deo su jednog te istog paragrafa. Sve ove recenice deo
su jednog te istog paragrafa. Sve ove recenice deo su jednog te istog paragrafa. Sve ove recenice deo su jednog te istog
paragrafa.</p>
Ukoliko ovu sekciju teksta dodate na prethodni primer, celokupan kod izgledae ovako
<!DOCTYPE html>
<html>
<head>
</head>
<body>
Ovo je prva recenica u prvom redu. Ovo je druga recenica u prvom redu<br>Ovo je prva recenica u drugom
redu.<br>Ovo je prva recenica u trecem redu.<br>
Ovde je toliko dosadno.
<p>Ovo je prva recenica paragrafa. Zatim sledi druga recenica paragrafa. Iza nje
sledi treca recenica paragrafa a iza nje jos jedna. Sve ove recenice deo su jednog
te istog paragrafa. Sve ove recenice deo su jednog te istog paragrafa. Sve ove
recenice deo su jednog te istog paragrafa. Sve ove recenice deo su jednog te
istog paragrafa. Sve ove recenice deo su jednog te istog paragrafa. Sve ove
recenice deo su jednog te istog paragrafa. Sve ove recenice deo su jednog te
istog paragrafa.</p>
</body>
</html>
Ako ovaj kod snimite i prikaete ga u pretraivau, videete ta je to to razlikuje tekst koji piemo bez tagova i tekst koji
je deo paragrafa, tj. onog teksta koji se pie izmedju <p> otvarajueg i </p> zatvarajuceg taga.
<p> tag dodaje takozvane margine iznad i ispod paragrafa ineci ga uoljivo izdvojenom celinom. Otud i re paragraf.
Iskopirajte ceo blok teksta jo jednom ispod poslednjeg zatvarajueg </p> taga i dobiete neto kao na slici ispod.
Odredjivanje pomenutih margina (vertikalnih belih praznina izmedju paragrafa moe se promeniti kao i jo puno drugih
parametara vezanih za formatiranje).
PRE tag
<pre> Tag
Pre tag je tag koji u situacijama slinim gore pomenutim, moe biti izuzetno koristan. Ukoliko imate potrebu da tekst bude
struktuiran sa puno praznina (primer stihova pesme) korienje
<br> taga kao i znakova moe biti zamorno
ako ne i besmisleno. Tada se koristi tag pre koji govori pretraivau da sav sadraj unutar njega prikae obraajui
panju na to kako je uneen u dokumentu.
Drugi primer korienja pre taga je sluaj kada imate ve formatiranu veliku koliinu teksta koju bi trebalo samo da
iskopirate tako da on zadri strukturu. Tada ete taj blok teksta okruiti otvarajuim
zatvarajuim </pre> tagom i zadrati eljeni format.
Primer:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<pre>
TI SI CVRCAK MOG ZIVOTA
Kad livade obuku svoje zelene pidzame
kad jele zanjisu svojim kukovima
docices,docices rekao si to
dok si saptao reci o nasoj sreci
Ti si cvrcak mog zivota
sto me podseca na srecu
nije lako kad setas po poljani
a nema onog znanog glasa
Kad oblaci u svojim sivim odelima dodju
a kisu zameni gospodja duga
smejem se cvrcku moj jer nestaje tuga,
od suza ostaje samo loj
Ti si cvrcak mog zivota
sto me podseca na srecu
nije lako kad setas po poljani
a nema onog znanog glasa
</pre>
</body>
</html>
bie prikazan sa zadranim formatom.
<pre> i
Formatiranje praznina
<wbr> Tag
Tag po smislu slian
<br> tagu je <wbr> . Ovo je novi tag u HTML verziji 5 i koristi se u sluaju dugackih rei koje
bi u suprotnom pravile problem. Primer ispod:
<p>
Da bi naucili AJAX, morate se prethodno upoznati sa XML<wbr>Http<wbr>Request objektom.
</p>
U primeru iznad vidite da postoji izuzetno dugaka re XMLHttpRequest. Ukoliko ova re bude poslednja u prikazu
pretraivaa, tj, ukoliko ne bude mogla da stane u prozor pretraivaa, nad njom e biti izvren prelom, tj. nee
celokupno prei u novi, pa e na primer u jednom redu ostati XML a u drugom preostali deo rei HttpRequest. Bez ovog
taga definisanog na dva mesta unutar rei, kompletna re bila bi prenesena u novi red.
Komentar unutar HTML koda

U primerima do sada, komentarisanje koda nije bilo od neke naroite vanosti jer je kod kratak i jednostavan. Radi
lakeg snalaenja kasnije, VRLO JE DOBRA PRAKSA unutar samog HTML koda pisati komentare.
Komentar u HTML-u izgleda ovako:
<!- Ovo je komentar. On nece biti prikazan u prozoru pretraivaa. ->

i moe se pisati u vie linija. Bitno je da poinje sa <!- i zavrava se sa >
Praznine pri pisanju HTML koda
Iako smo ovo pomenuli u prethodnom izlaganju, ovde emo malo detaljnije objasniti ponaanje HTML-a kada naidje na
praznine u kodu. Praznine unutar teksta pretraiva ne prepoznaje kao takve. Znai, isti izgled u pretraivau dobijate i
ako tekst napiete na sledei nain:
<body>
Ovo je prva recenica u prvom redu.
redu<br>
Ovo je prva recenica u drugom redu.
prva recenica u trecem redu.</body>
Ovo je druga recenica u prvom

<br>Ovo je
Ili ako ga napisete bez praznina:
<body>Ovo je prva recenica u prvom redu. Ovo je druga recenica u prvom

redu<br>Ovo je prva recenica u drugom redu.<br> Ovo je prva recenica u trecem
redu.</body>
Sa druge stran, ako elite da u pretraivau vaa reenica izgleda ovako
Ovde je toliko
dosadno.
Tekst u html dokumentu treba da napiete na sledei nain:
Ovde je toliko dosadno.
Jednu prazninu pretraiva uzima u obzir jer bi u suprotnom svaku reenicu morali da piete bez razmaka izmedju rei
toliko i prvog ,

jo tri zbog tri znaka i na kraju, jo jednu zbog praznine izmedju poslednjeg i reidosadno.
ali vie od toga, prosto ignorie. U primeru iznad, imaemo 5 praznina (jednu izmedju rei
Postoji ipak nain da tekst zadri format bez besomune upotrebe <br> i nbsp; sintakse. Ovaj tag je sledei na redu.
Formatiranje teksta
Postoji nekoliko tagova namenjenih formatiranju teksta. Jedan od njih je ve pomenuti h1 tag. Ostali najznaajniji su p i
span.
Pre nego ih objasnimo, treba obavezno rei da stavljanje odredjenog teksta unutar tagova nije obavezan! Znai, mogue
je tekst unutar body taga pisati na raznim mestima bez obaveze da tekst bude smeten unutar nekog od pomenutih
tagova.
Zato ga ipak stavljamo unutar tagova? Iz prostog razloga to na taj nain moemo da ga selektujemo i formatiramo uz
pomo ve pomenute CSS sintakse. Pored toga, nije samo CSS taj koji koristi HTML tagove. Postoje i programski jezici
namenjeni manipulaciji html elementima kao na primer Java Script i slini koji takodje koriste tagove za selekciju.
Naravno, prevazilaze okvir ovog kursa pa o njima neemo dalje priati.
Kako bi ilustrovali izreeno pogledaemo primer
<!DOCTYPE html>
<html>
<head>
</head>
<body>
Ovo je prva recenica u prvom redu. Ovo je druga recenica u prvom redu<br>Ovo
je prva recenica u drugom redu.<br>Ovo je prva recenica u trecem redu.
</body>
</html>
Ako kod prikazan iznad iskopirate u Notepad i snimite ga kao proba.html (obavezno izaberite All files u sekciji Save as
type: u okviru Save As dijalog prozora i Encoding UTF-8) on e prikazan u prozoru pretraivaa izgledati kao na slici
ispod.
Ako pogledate paljivije tekst koji smo uneli u okviru body taga, primetiete ipak jedan novi samozatvarajui
tag
<br> koji slui za nasilni prelazak teksta u novi red. Ako ga napiemo vie puta, napraviemo prored od vie
linija.
Sada ete verovatno postaviti logino pitanje. Pa zar umesto br taga nismo mogli jednostavno da tekst drugog reda
kucamo u sledeem? Mogli smo ali to ne bi reilo problem, tj. i dalje bi celokupan tekst bio prikazan kao celina koja se
nastavlja i prelazi u novi red tek ako dodje do kraja linije, tj. desne ivice prozora pretraivaa.
Ovo ponaanje se deava zbog injenice da HTML ne obraa panju na praznine! Obraa samo u sluaju teksta koji se
pojavljuje na web stranici i to tako da ga zanima samo jedna praznina u nizu (slino razdvajanju rei u reenici) Znai,
razmak izmedju dve rei bie ispisan u prozoru pretraivaa sa samo jednom prazninom, bez obzira koliko puta vi
pritisnete taster space pri kucanju teksta u html dokumentu. Ako ipak hoete da naglasite vie od jedne praznine, za
svaku prazninu pisaete poseban skup karaktera a to znai da ako elite pet praznina, napisaete

Iskreno, retko ete biti u takvim situacijama a i postoje mnogo komforniji naini da se to postigne, o emu emo uiti
kasnije.
Sada kada smo razjasnili ta radi br tag, predjimo na jedan slian njemu i po nazivu i po nameni.
BODY sekcija
VIDLJIVI DEO HTML DOKUMENTA (<body>)
U sledeem redu nalazi se otvarajui tag <body> i on govori pretraivau da sve to se u okviru njega nadje, prikae u
svom prozoru. Unutar body taga mogu se nalaziti i tagovi koji nemaju zatvarajui deo i oni koji ga imaju. Ovo pravilo vai
i za head sekciju dokumenta.
Na kraju koda imamo tag koji zatvara body
</body> i odmah nakon njega zatvarajui html tag </html>
Da zakljuimo, tagovi su elementi HTML stranice koji mogu imati razliito znaenje, tj. uloge. Sami HTML tagovi se ne
prikazuju na web stranici. Na web stranici se prikazuje njihov sadraj!
VRSTE TAGOVA
Sintaksa taga koji ima i otvarajui i zatvarajui deo

<ime_taga> sadrzaj </ime_taga>
Uzeemo za primer tag po imenu h1. Tag h1 je namenjen za pisanje teksta koji logiki predstavlja glavni naslov strane.
Ako pretpostavimo da naslov prikazan na web strani treba da glasi Osnovne odlike HTML jezika to emo u HTML
dokumentu napisati ovako:
<h1>Osnovne odlike HTML jezika</h1>

Prikazano u prozoru pretraivaa
U ovom primeru:
<h1> predstavlja otvarajui tag

Osnovne odlike HTML jezika predstavlja sadraj h1 taga
</h1> predstavlja zatvarajui deo taga

Kao drugi primer, naveemo tag p namenjen ispisivanju teksta na web strani, slino paragrafu u Word dokumentu .
<p> Svaki HTML dokument ima minimalni broj tag-ova koji moraju biti sadrzani u bilo kom html dokumentu i to u
odredjenom rasporedu. Svaki HTML dokument ima minimalni broj tag-ova koji moraju biti sadrzani u bilo kom html
dokumentu i to u odredjenom rasporedu. Svaki HTML dokument ima minimalni broj tag-ova koji moraju biti sadrzani u
bilo kom html dokumentu i to u odredjenom rasporedu. Svaki HTML dokument ima minimalni broj tag-ova koji moraju biti
sadrzani u bilo kom html dokumentu i to u odredjenom rasporedu. </p>.
I u ovom sluaju bie prikazan samo tekst koji se nalazi unutar otvarajueg i zatvarajueg p taga ( <p>,</p>) kao na
slici ispod:
Tagovi koji imaju otvarajui i zatvarajui deo su tagovi koji sadre tekst.
Sintaksa samozatvarajueg taga
Samozatvarajui tag je tag koji ima samo otvarajui deo, a ostale informacije koje govore o sadraju koji e se umesto
njega prikazati na web strani sadrane su u takozvanim atributima koji se nalaze unutar njega.
Kada su unutar body taga, samozatvarajui tagovi ne sadre tekst.
Najbolji primer je tag <img> koji slui za prikazivanje slika na web stranici. Sintaksa taga izgleda ovako:
<img src=lokacija_i_ime_slike>
A primer
<img src=logo_it4you.png>
prikazan u pretraivau izgleda kao:
src=logo_it4you.png koji se pored slubene rei img nalazi u samom tagu govori pretraivau gde da
pronadje sliku koju treba da prikae, u ovom sluaju logo_it4you.png
img tag ima jo jedan obavezan atribut alt. Taj atribut predstavlja opis slike koji pretraivai kao Google, itd. koriste pri
klasifikovanju sadraja. Ostali tagovi su opcioni.
<img src=logo_it4you.png alt=Logotip firme IT4YOU>
HEAD sekcija
Prvi tag na koji nailazimo u head sekciji naziva se <title> tag i predstavlja tag iji sadraj pretraiva ispisuje kao tekst u
takozvanom Title Bar-u (tekst kartice otvorene web strane). Primer sintakse
<title>Naslov web strane</title>

Prikazano u pretraivau, to izgleda ovako:
title taga nalazi se u kodu ispod:
Taj naslov nee biti vidljiv nigde u prozoru pretraivaa sem na ovom mestu. Izuzetno je bitno postaviti ga jer se korisnik,
u sluaju da ima otvorenih vie tab-ova, lake snalazi i pronalazi onaj koji ga zanima.
Naredni red sadri samozatvarajuci <meta> tag koji govori pretraivau da karaktere/sadraj koji se nalazi u okviru
HTML dokumenta tretira ispravno, tj. u naem sluaju ispravno prikae latinina I irilina slova
Meta tag je samozatvarajui tag to znai da nema zatvarajui deo taga </meta>
Meta tagovi, generalno sadre meta podatke, tj. podatke o podacima.
charset=UTF-8
U ovom konkretnom primeru, charset je atribut ij je vrednost utf8, a namena je prethodno opisana, ispravan prikaz slova
.
Ima raznih primena meta taga. Jedna od najpoznatijih primena meta taga je prikazana ispod:
<meta name=description content=Ova web strana je namenjena svima.>

Ovaj meta tag govori Internet pretraivaima kao to su Google, Bing, Yahoo i drugi da u svojim rezultatima pretrage
ispod web linka stranice prikau reenicu Ova web strana je namenjena svima.
Delovi meta taga kao to su u prvom primeru
charset=UTF-8
name=description
content=Ova web strana je namenjena svima.
predstavljaju atribute taga koji blie opisuju ta meta tag ustvari opisuje.
Sledei red sadri </head> koji govori da se zavrava deo HTML dokumenta iji se sadraj NE prikazuje.
HTML jezik tagova

Tagovi su oficijelna sintaksa HTML jezika. Tagovi mogu imati razliitu namenu, od toga da definiu sam html dokument,
tj. njegov poetak i kraj, pa do taga koji slui za umetanje slika.
Izgled osnovnog HTML dokumenta, ili ta dokument HTML tipa mora da sadri da
bi bio ispravan?
Svaki HTML dokument ima minimalni broj tag-ova koji moraju biti sadrani i to u odredjenom redosledu da bi html
dokument bio validan. Ispod je dat primer osnovnog HTML dokumenta.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
Sadraj dokumenta..
</body>
</html>
Hajde da objasnimo primer iznad.
Na poetku dokumenta nalazi se <!DOCTYPE
html>. Ovaj tag mora da bude prvi kod koji se nalazi u html
dokumentu i govori pretraivau o kojoj verziji HTML jezika/sintakse se radi. Ovako napisan, govori pretraivau da se
radi o dokumentu HTML verzije 5. Ovo je inae jedini oblik deklaracije u HTML verziji 5 za razliku od prethodnih verzija
koje su imale mnogo vei broj opcija.
Iza njega, u drugom redu, nalazi se <html> otvarajui tag. Ovaj tag govori pretraivau da na ovom mestu poinje
HTML dokument, da unutar njega moe da se nadje sve to HTML dokument sadri. On predstavlja kontejner* u okviru
koga e se nalaziti svi ostali HTML tagovi sa svojim sadrajem, sve do njegovog zatvaranja.
</html>tag predstavlja
zatvarajui deo <html> taga i ujedno poslednju liniju HTML dokumenta .
*kontejner je prostor unutar otvarajueg i zatvarajueg taga u okviru koga se nalazi neki
HTML sadzaj: tekst, slika ili neto tree.
Sve to se nalazi ispod zatvarajueg </html> taga (koji je inae poslednja linija html dokumenta) nee biti tretirano kao
ispravna sintaksa i razliiti pretraivai e se prema tom sadraju odnositi na razliite naine. Svakako, tako napisan html
document ne smatra se validnim.
U treem redu nalazi se <head> otvarajui tag. Sve do njegovog zatvarajueg taga (</head>) nalazie se kod koji je
sastavni deo HTML dokumenta ali se NE prikazuje u prozoru pretraivaa.
Unutar head taga mogu se nalaziti sledei tagovi: <title>, <meta>, <style> ali i mnogi drugi.
Da bi lake upamtili, sve unutar head taga NE prikazuje se u prozoru

pretraivaa, dok se sve to se nadje u okviru tagabody prikazuje!
U kom programu piemo HTML kod?

HTML kod je kod od koga je sastavljen html dokument. On se moe pisati u bilo kom text editoru. Na primer, na Windows
platformi to moe biti Notepad. Ono to morate izbei su text editori tipa Word-a i slino jer oni po pravilu formatiraju tekst
a to dodatno formatiranje esto pravi problem.
Znai, kada otvorite novi dokument u Notepad-u i upiete neophodan HTML kod u vidu obinog teksta, neophodno je pre
snimanja uraditi 3 stvari:
1. Zadati ime dokumenta sa ekstenzijom .html

2. U polju Save as Type izabrati All Files
3. U polju Encoding izabrati UTF-8
Ovako snimljen HTML dokument postaje validan za prikaz u pretraivau.
Kako postaviti ekran pri pisanju koda?

Kada radite na izradi html dokumenata korienjem Notepad-a za pisanje koda i pretraiva za pregled promena,
najbolje ih je rasporediti tako da oba zauzmu po polovinu displeja, podaljeno po horizontali. Tako najlake moete raditi i
pratiti izmene.
Ako elite da otvorite HTML dokument u cilju prepravki, nemojte to raditi dvostrukim klikom mia na fajl. Ako to uradite,
Windows e, po defaultu, html dokument otvoriti u pretraivau, to nije ono to ste hteli da postignete. Umesto toga,
stanite na ime dokumenta i iz menija do koga dolazite pritiskom desnog tastera mia, izaberite Open
with > Notepad . Pogledajte sliku ispod.
Zato emo izuavati HTML i CSS zajedno?

Najbolje da to predstavimo slikovito jer ete tako najlake shvatiti njihovu povezanost. Na prvoj slici ispod prikazana je
jednostavna web strana u ijoj izradi je koriena samo HTML sintaksa dok je na drugoj prikazana ta ista HTML strana
na kojoj je HTML-u pridruen CSS u cilju stilizovanja.
Uoavate razliku?
Naime, neke od stvari koje smo primenili na prethodnoj slici, koristei CSS, su:
dodali smo tamnu pozadinsku boju celoj strani

promenili boju teksta u belu
pomerili logotip tako da ne ide uz samu ivicu prozora i malo ga smanjili
naslov Web training i kontakt podatke pomerili tako da budu sa desne strane i u ravni logotipa
paragrafe koji opisuju HTML, CSS i Java Script poredjali smo jedne pored drugih i definisali im ivice u jednoj od
boja logotipa
Kako web sajt funkcionie kao celina?

Da bi objanjenje uprostili, uzeemo za primer takozvani statiki sajt sa fiktivnim domenom www.primer.rs , tj. sajt
sastavljen od ukupno 5 web strana. Tih pet strana na serveru predstavljene su u vidu pet HTML dokumenata, smetenih
u root folder, pod imenomprimer.rs sa imenima
index.html
o-nama.html
kontakt.html
cime-se-bavimo.html
nasi-klijenti.html
Kako se tim stranama pristupa?
I nain Tako to se u browseru direktno ukuca njihovo ime iza navodjenja imena domena i kose crte (/)
U prethodno pomenutom primeru, kucali bi:
www.primer.rs/index.html (ovo moe i samo navodjenjem www.primer.html kao sto mo prethodno objasnili)
www.primer.rs/o-nama.html
www.primer.rs/kontakt.html
www.primer.rs/cime-se-bavimo.html
www.primer.rs/nasi-klijenti.html
II nain Drugi nain pristupanja ovim stranama je kucanjem imena domena www.primer.rs to nas odvodi
na index.htmlstranu. Sa nje je na druge strane mogue otii preko takozvanih linkova koji su definisani preko
HTML link <a> tagova. Tipian primer tih linkova je u obliku menija koji se nalaze u vrhu web strane veine sajtova.
Primer koda koji bi bio sadran u dokumentu index.html predstavlja link ka strani o-nama.html:
<a href=http://www.primer.rs/o-nama.html >O nama</a>
U browseru ovaj upravo otkucani red HTML koda izgledao bi ovako O nama i na njega bi moglo da se klikne miem. Klik
miem na ovaj link tekst inicirao bi proces u kome bi vas pretraiva zatraio stranu
opisanoj proceduri i prikazao je u prozoru vaseg pretraivaa.
o-nama.html po prethodno
Za sluaj da se sve strane nalaze u istom folderu prethodni red koda mogao bi da izgleda i ovako:
<a href=o-nama.html >O nama</a>
jer navodjenjem samo imena fajla server pretpostavlja da se traeni dokument nalazi u istom folderu. (relativna putanja)
NAPOMENA Postoje situacije u kojima vi u adresnoj liniji pretraivaa ne ukucavate
www. ispred imena domena, tj.
kucate samo primer.rs i opet uspeno zavravate na index.html strani pomenutog domena
(www.primer.rs/index.html)
To je iz razloga to su web serveri podeeni da podrazumevaju www ispred imena domena koje kucate i sami ih
pridodaju. Postoje serveri na kojima ovo nije podeeno i u sluaju da ne otkucate
www dobiete informaciju da traena
strana ne postoji. Sve vei broj web servera je podeen da ovo prepozna kao ispravno unetu adresu.
ta je HTML?
HTML je jezik u kome se piu web strane. Znai, svaka web strana je jedan HTML document. HTML document je obian
tekstualni fajl koji je sastavljen od kombinacije HTML sintakse poznatije kao tagovi i samog sadraja (tekst, slike, audio,
video, itd.)
ta je CSS?
CSS je jezik osmiljen da ulepa web stranice. Stranice napisane samo HTML sintaksom nisu vizuelno atraktivne. CSS
fajlovi su, po strukturi, takodje obini tekstualni fajlovi koji slede jednostavnu sintaksu pisanja CSS koda.
CSS kod se moe nalaziti unutar HTML dokumenta ali i kao samostalan dokumentsa ekstenzijom .css .
Pre nego krenemo sa izuavanjem oba pomenuta jezika, hajde da obradimo neke osnovne termine vezane za Internet,
tj. World Wide Web.
ta je pretraiva?
Pretraiva (Browser) je aplikacija instalirana na raunaru korisnika ija je osnovna namena da prikazuje web strane.
Kada u adresnoj liniji ukucate eljenu adresu, pretraiva zna kako da ode do web servera na kome se strana nalazi,
zatrai je od web servera, prevue na lokalni raunar i ispravno prikae u svom prozoru. Postoji veliki broj web browser
aplikacija (pretraivaa) medju kojima su najpoznatije: Google Chrome, Internet Explorer, Mozilla Firefox i Apple Safari.
Osnovni jezik koji pretraiva razume naziva se HTML. HTML jezik je jezik kojim se piu
.html dokumenti i sastavljen
je od elemenata koje nazivamo tagovi.

Pored HTML jezika, pretraiva odlino razume i CSS sintaksu.
Hosting
Hosting usluga je nezavisna usluga od registracije domena u tom smislu to ona predstavlja uslugu dranja i
usluivanja stranica vaeg veb sajta, rada mail servisa, itd. Hosting se takodje plaa u intervalu od jedne, dve ili vie
godina.
Zakup hostinga je neto to se esto mea sa registracijom domena. Ovo se deava iz prostog razloga to korisnici
registruju domen i postavljaju sajt kod istog provajdera pa im se ta operacija ini kao jedinstvena.
Znai, radi pojanjenja, mogue je registrovati domen kod jednog provajdera a drati vebsajt kod drugog.
Dodatno, mogue je imati registrovan domen a nemati sajt.
Trei mogui scenario je da kod jednog provajdera imate registrovan domen, pa ak i mail server a kod drugog
provajdera postavljen vebsajt. Ovo nije racionalno (jer plaate istu uslugu na dva mesta) ali moe biti teorijski korisno iz
razloga dostupnosti bar jednog od servisa maila ili vebsajta.
I u ovom sluaju dolazi do zabune jer hosting paket, u veini sluajeva, pored dranja vebsajta, podrazumeva i uslugu
mail servisa koju klijenti ne koriste ve komunikaciju odravaju putem gmail, hotmail, live i slinih javnih mail servisa nad
kojim realno nemaju nikakvu kontrolu.
Znai, imamo dve nezavisne stvari. Prva je ona kojom elite da promenite to
ko daje odgovore gde se nalazi
va sajt (kada dodje upit od korisnika za vaom veb stranicom) a drugi je mesto na kome e se dokumenti od kojih je
sainjen va sajt, nalaziti. Svakako je uvek najbolja varijanta da obe stvari drite kod istog provajdera.
Kako funkcionie mail usluga u okviru hosting paketa?
www.nesto.rs, vi u okviru hosting paketa definiete mail adrese koje

izgledaju ovako: office@nesto.rs, dragan@nesto.rs , milan.petrovic@nesto.rs, itd.
Ako zamislimo da registrujete domen
Za svaki od tih mail naloga moete podesiti takozvanu kvotu, znai ograniiti koliinu prostora u MB koja e biti alocirana
za skladitenje mailova. Treba uzeti u obzir da e, u veini sluajeva, koliina prostora koju koristite za mail smanjiti va
preostali prostor za sadraj sajta i obrnuto.
Izbor hosting paketa

Mislim da je ovo najmanje jasan korak za prosenog korisnika, tj. korisnika koji po prvi put radi zakup hostinga. Stvar
postaje jo kompleksnija zbog injenice da je i ovde, kao kod veine usluga u savremenom svetu, marketing prilino
zastupljen.
Pojasniemo neke od parametara koji se pominju kao karakteristike paketa kako bi vam olakali izbor.
Broj baza veina CMS sistema (kakav je i WordPress) zahtevaju jednu MySQL bazu u cilju skladitenja podataka.
U najjednostavnijem sluaju, jedan sajt zahteva jednu bazu.
Kada moete imati potrebu za vie od jedne baze? U sluaju kada, u okviru istog hosting paketa elite da postavite vie
nezavisnih sajtova. Tada svaki od njih ima svoju bazu (ne mora, ali je lake za kasniju administraciju). Takodje, za sluaj
da elite da pored sajta, imate i nezavisnu aplikaciju koju je neko napravio za vas, najbolja praksa je da podaci vezani za
aplikaciju budu smeteni u nezavisnu bazu kako bi se i proces bekapa i oporavka na neki nain, razdvojio. Dodatni
razlog je to ete u tom sluaju izolovati problem kada on nastane na jednom od sajtova ili aplikacija.
Prostor na disku Prostor na disku je, kao to mu ime govori, dodeljen prostor na diskovima provajdera koji
moete koristiti u svrhu skladitenje podataka. U to spada: zauzee prostora za dokumente koji sainjavaju va vebsajt,
podaci koji se nalaze u pripadajuoj bazi podataka ali i podaci koji se uvaju a tiu se vaih mail naloga, tj. mailova.
esto, naroito u fazi razvoja sajta, korisnici rade bekap na taj nain to kopiraju kompletan home folder koji kasnije
download-uju na svoj raunar ili na neko besplatno skladite na webu. U sluaju da tako uvate podatke, va hosting
paket mora da podrazumeva dodatni, gotovo nepotrebni prostor koji vam u krajnjem diktira zakup paketa sa veim
skladinim prostorom. Zbog toga je izuzetno bitno proveriti da li va hosting provajder ima uslugu automatskog uvanja
podataka (na dnevnom, nedeljnom ili mesenom nivou) a koja vam ovaj problem u velikoj meri otklanja.
Broj sajtova (broj domena) Ovaj podatak govori koliko nezavisnih web sajtova je mogue postaviti u okviru
jednog hosting paketa. Kao to smo pomenuli, ovaj parametar vam znai da ete na istom mestu i za istu cenu, moi da
postavite nekoliko sajtova potpuno razliite sadrine. Svaki od njih predstavljae poseban folder u kome e biti smeteni
neophodni dokumenti za ispravno funkcionisanje web sajta ili web aplikacije.
Broj poddomena ovaj parametar govori koliko nezavisnih sajtova na istom domenu moe biti postavljeno. Na
primer, beograd.naplata.rs, pancevo.naplata.rs, novisad.naplata.rs su nezavisni sajtovi koji
funkcioniu pod zajednikim domenom, u ovom sluaju naplata.rs. Sa druge strane, to su potpuno nezavisni sajtovi
sa razdvojenom administracijom. U sluaju WordPress-a, postoji reenje (Multisite) koje vam olakava administraciju
veeg broja sajtova na istom mestu ali je za njegovo korienje potrebno dodatno znanje.
Maksimalni meseni protok je ogranienje koliine saobraaja ka i od svih sajtova postavljenih u okviru
jednog hosting paketa. Resursi provajdera nisu samo diskovi, procesori i memorija koju koristite kako bi vai sajtovi radili
bez prekida, ve i resursi za komunikaciju sa spoljnim svetom (nazovimo ga Internetom). Takodje, na deljenom hostingu,
(deljeni hosting objanjavamo u nastavku) kada ne bi bilo postavljeno ogranienje protoka, intenzivan rad samo jednog
sajta doveo bi do degradacije dostupnosti ostalih.
Javna IP adresa ima vanost u sluaju da se, umesto klasinog vebsajta, na serveru nalazi aplikacija kojoj se, u
veini sluajeva, ne pristupa putem pretraivaa ve putem neke klijentske aplikacije. Takodje, javna IP adresa vas
odvaja od drugih koji se nalaze na tom istom web serveru, po pitanju identiteta. Na primer, za sluaj da na serveru
postoji sajt koji ima neprikladnu sadrinu ili je namenjen za slanje spama, uredjaji na Internetu koji o tome brinu, mogu
blacklist-ovati tu javnu IP adresu, ne vodei rauna o ostalima koji koriste tu istu adresu, i na taj nain, uskratiti pristup
ostalim sajtovima ili mail-ove poslate sa drugih domena oznaiti kao spam.
Ogranienje broja poslatih mailova po satu ovo je vaan parametar za one koji imaju nameru da,
direktno sa servera, alju veliki broj mailova svojim korisnicima. To mogu biti mass mailing poruke ili periodino slanje
newslettera i slinih materijala. Svakako, ukoliko nameravate da koristite ovu funkcionalnost, obavezno zakupite javnu IP
adresu.
Broj mail naloga ovo je parametar koji oznaava ukupan broj mail adresa koji je mogue kreirati u okviru
hosting paketa. Svaki od definisanih mail naloga troi neke resurse
Mail kvota je parametar koji definiite za svakog od korisnika (tj. za svaki mail nalog) i oznaava koliinu podataka,
nezavisno od broja mailova, koje je provajder u obavezi da dri (uva) na serveru. Ovo je prilino bitan podatak jer u
sluaju prekoraenja ove kvote moe doi do privremenog prestanka isporuke ili slanja mailova. Uglavnom, uz prethodno
obavetenje da je kvota prekoraena, provajder automatski alje mail obavetenje o tome, to vam je signal da to pre, ili
pobriete nepotrebne mailove ili neke od njih arhivirate na lokalnom raunaru, u okviru mail klijenta koji koristite (MS
Outlook, itd.).
SSL sertifikati su sertifikati koji omoguavaju kriptovanu vezu za prenos podataka izmedju web servera i kranjeg
korisnika, tj. posetioca sajta. SSL sertifikat vam omoguava da podaci u komunikaciji servera i klijenta budu neitljivi
onome ko pokua i uspe da ih presretne. U sluaju klasinih sajtova, bitno je posedovati jedan od njih samo u sluaju da
se u komunikaciji vri prenos osetljivih informacija. Klasian primer je kada radite online trgovinu i na svom serveru
uvate ili procesuirate podatke o kreditnim karticama.
Broj parkiranih domena parkirani domen se koristi u situaciji kada hoete da vie domena upuujete na isti
ili preusmerite upit koji dolazi ka tom domenu na neki drugi sajt. Drugi primer je kada hoete da registrujete domen a jo
uvek nemate (ili ne planirate u skorijoj budunosti) sadraj na tom domenu.
Primer parkiranog domena moe biti sledei. Registrovali ste sledee domene: mojsajt.rs, mojsajt.co.rs, . ,
mojsajt.com, itd. Vi ne elite da duplirate sadraj ovih sajtova ve elite da sajt postavite i aurirate kao mojsajt.rs a da za
sluaj da neko ukuca adresu mojsajt.com, bude preusmeren na mojsajt.rs.
Da zakljuimo, ono to je ovde vano primetiti je da svaki od parametara hosting paketa, sam za sebe govori neto.
Naalost, pri izboru hosting paketa (ali i provajdera) treba obratiti panju na vae specifine potrebe, ali i ukrstiti dva ili
vie pojedinanih parametara. Na primer, ukoliko u paketu imate 1GB prostora, parametar
Broj domena koji kae da
moete postaviti neogranien broj sajtova nema ba nekog smisla jer ete ubrzo shvatiti da vam 1GB u nekim
sluajevima nije dovoljan ni za jedan site a kamoli neogranieni broj. Drugi primer bi bio 1GB raspoloivog prostora sa
neogranienim brojem baza podataka, koji takodje, u veini sluajeva ne znai puno.
Takodje, kada govorimo o smetaju vie od jednog klijenta u okviru jednog hosting paketa, treba biti obazriv jer su u tom
sluaju svi sajtovi pod jedinstvenim cPanel username/password-om. U sluaju da jedan od klijenata eli pristup cPanelu,
najee je to baza, samostalno kreiranje mail naloga i slino, nije dobra ideja staviti ga u okviru jednog paketa jer e u
tom sluaju korisnik imati pristup svim ostalim sajtovima na vaem cPanel nalogu. Praktino, to znai da jedan korisnik
moe obrisati sve ostale sajtove ili izmeniti informacije na njima.
Svakako, bez ogranienja, pristupati tudjim podacima.
Izbor hosting provajdera

Pored tehnikih parametara koji svakako igraju ulogu pri izboru paketa, dodatno je potrebno ispitati kvalitet samog
pruaoca usluge, tj.
da li i kakvu zatitu imaju serveri na kojima se domen nalazi (zatita samog servera kao i mail naloga, zatita od
hakovanja sajta)?
kakva je podrka u sluaju problema sa nekim od servisa (web, mail, 85 ili 247 itd)?
koja je brzina odziva i vreme reavanja vaeg problema?
da li su serveri pod zatitom od privremenog nestanka elektrine energije, tj. da li provajder u Data Centru
poseduje agregat ili UPS?
koliko esto se radi automatski potpuni bekap podataka? (ovo je izuzetno vano u periodu startovanja sajta dok
je sajt u fazi izrade i estih izmena)
da li korisnik moe samostalno (brzo i lako) da povrati sadraj sajta bez potrebe za kontaktiranjem podrke i/ili
koliko izmena pritom gubi: dan, nedelju dana, mesec?
Jedna od bitnih stvari kod izbora hosting provajdera je i lokacija njegovih servera, naroito u sluaju da veina posetilaca
dolazi iz jedne zemlje ili regiona. Iako je brzina kojom podaci putuju kroz optike kablove tolika da ovaj kriterijum nema
presudnog uticaja na odziv sajta, svakako je neto o emu treba razmisliti.
Tipovi hostinga deljeni, VPS i dedicated

Deljeni (shared) ili masovni hosting
Deljeni hosting podrazumeva da jedan fiziki web server opsluuje stotine korisnikih prezentacija. Prednosti ovog
modela su izuzetno niska cena iznajmljivanja a mane to po pitanju raspoloivih resursa zavisite od ozbiljnosti
provajdera i to po sledeim pitanjima:
koliko je jak server na kome se nalazi shared hosting? (RAM, procesorska snaga, mreni resursi)
koliko korisnika je smeteno na jednom serveru?
da li provajder vodi rauna o tome da na razliite servere stavlja korisnike sa slinim potrebama?
da li je provajder implementirao bar neka ogranienja po pitanju korienja resursa kako bi uticao na
ravnopravno korienje resursa svih korisnika?
da li periodino prati ponaanje klijenata i nekorektne sklanja na druge servere?
da li vodi rauna o tome da korisnike sa zastarelim platformama (programskim kodom) prepunim sigurnosnih
propusta, o tome obavetava ili sklanja na drugi web server i time smanjuje rizik bezbednosti ostalih korisnika na
tom serveru?
Naalost, ovi podaci su, u veini sluajeva, potpuno netransparentni za krajnjeg korisnika i nita od toga se uglavnom na
nalazi u opisu paketa usluga koje provajderi nude. Jedino reenje je temeljno istraivanje razliitih foruma na kojima se
mogu proitati iskustva korisnika. Mada, ovde treba biti izuzetno oprezan jer jedno miljenje ne znai da je provajder
zaista lo (naalost, taj komentar moe biti delo konkurencije ili korisnika koji za
male pare oekuje uda).
Ipak, nakon to postavite sajt, mogue probleme moete uoiti putem dostupnih alata na Internetu kao to je Reverse IP
lookup. Ovim postupkom okvirno moete saznati koliko se jo korisnika, pored vas, nalazi na web serveru.
Primer. Ako odete na stranu http://www.yougetsignal.com/tools/web-sites-on-web-server/ i
ukucate web adresu vaeg sajta, dobiete broj i spisak sajtova sa kojima delite hosting resurse. Podatak sam za sebe ne
znai puno (jer snaga servera moe biti prilagodjena tom broju) ali e vam svakako ukazati da neto nije u redu ukoliko
na tom serveru zateknete stotine ili hiljade drugih sajtova. Druga korisna informacija koju moete dobiti je prisustvo
nekog od sajtova sa neprikladnom sadrinom. Ova injenica nije zanemarljiva jer e veina pretraivaa kao to su
Google, Bing, Yahoo itd. i va sajt (zbog injenice da ste na istoj IP adresi) rangirati loije i va sajt, tj. skor za pretragu,
umanjiti.
Iz ovog razloga, ak i kada se nalazite na deljenom hostingu, nije loe zakupiti svoju IP adresu kako bi veinu problema
sa SEO rangiranjem ili blacklist-ovanjem spreili.
Druga grupa problematinih sajtova sa kojima delite prostor su sajtovi sa velikom koliinom video sadraja, koji su dosta
poseeni ili oni kojima se pristupa nesrazmerno mnogo u odnosu na va. Njihov uticaj na mreu je prilian i mogu
ugroziti ostale korisnike na serveru po pitanju mrenih resursa ali i procesorske snage.
VPS hosting
VPS hosting je usluga kojom dobijate mnogo veu kontrolu nad resursima, bezbednou i zadovoljenjem vaih
specifinih potreba, u poredjenju sa deljenim hostingom kod koga to nije mogue. Naravno, ono to je mana je via
cena usluge.
U VPS okruenju vi imate garantovane resurse (CPU, RAM, skladini prostor, IP adresu). Da ne bude zabune, vi u ovom
scenariju takodje delite resurse fizikog servera ali su njegovi resursi tako particionisani da garantuju resurse koji stoje u
ponudi. Praktino, probleme koji pravi drugi VPS korisnik na tom serveru ne odraavaju se na rad vaeg. Sigurnosni
propusti na jednom od njih nemaju uticaja na sigurnost vaeg, itd. pa je i bezbednost kod ovog tipa hostinga poveana.
Mogue je da mrea bude deljeni resurs mada se i to u sluaju dobro uredjenih podeavanja, izbegava. Ukratko, u dobro
podeenom VPS okruenju gotovo da nema mogunosti za probleme koji se javljaju u sluaju Deljenog (Shared)
Hostinga.
Dodatne prednosti VPS okruenja su mogunost finog podeavanja potrebnih aplikacija koje su neophodne za rad vaeg
web servisa a kojih u sluaju deljenog hostinga nema. Jo jedna prednost ovog tipa servisa je da pad jednog od servisa
koji se na serveru nalaze, ne prouzrokuje nikakav prekid rada vaeg, i obrnuto.
Mana ovog reenja, ukoliko se tako moe nazvati, je via cena usluge koja je opet u skladu sa poveanim kvalitetom.
Preporuka je da se uvek pone sa najmanjim paketom VPS usluge i po potrebi, kroz vreme, poveava.
Dedicated hosting
Dedicated hosting je najskuplji vid usluge i prilino je malo zastupljen. Ovaj vid usluge podrazumeva da je ceo server
namenjen korienju od strane samo jednog korisnika. Praktino, ceo server je u vaem posedu. Ukoliko imate potrebu
za ovakvim vidom usluge, preporuka je da uvek prvo krenete sa VPS uslugom i vidite da li i u kojoj meri zadovoljava vae
potrebe.
Popis osnovnih naredbi HTML-a

Obavezni elementi
<html>...</html> deklaracija HTML dokumenta
<head>...</head> zaglavlje dokumenta
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> potrebno zbog prikaza naih slova
<title>...</title> naziv dokumenta; naslov stranice (nalazi se na vrhu prozora)
<body>...</body> tijelo dokumenta
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Naslov</title>
</head>
<body>
Ovdje piemo tekst, postavljamo slike i ostalo.
</body>
</html>
Naslovi
<h1> TEKST </h1>
<h2> TEKST </h2>
<h3> TEKST </h3>
<h4> TEKST </h4>
<h5> TEKST </h5>
<h6> TEKST </h6>
Font
<font face="Arial"> Ovo je vrsta fonta </font>
<font size="6"> Veliina slova moe biti izmeu 1 i 7 </font>
<font size="+2"> Veliina slova </font>
<font color="yellow"> Boja slova </font>

<font color="#ffff00"> Boja slova </font>
Stilovi
<b> podebljano </b>
<i> ukoeno </i>
<u> podcrtano </u>
<br> novi red ista funkcija kao pritisak na enter u wordu (nema zavretak)
<hr> horizontalna crta (nema zavretak)
<p> novi odlomak</p>
Odlomci
<p align="left">lijevo</p>
<p align="center">sredina</p>
<p align="right">desno</p>
<p align="justify">obostrano</p>
Efekti
<marquee> tekst putuje s desna na lijevo</marquee>
<blink> tekst blinka </blink>
Brojane i simbolike liste

<ul>...</ul> Brojane lista (tokice)
<ol>...</ol> Simbolike lista (brojevi)
<li>...</li> Redak liste
<ul type="Neki simbol"> Simbol na poetku retka
A - velika slova
a - mala slova
I - rimski brojevi
i - mali rimski brojevi
circle - krui
disc ispunjeni krui
square kvadrati
Boje
<body bgcolor="#ff0000"> Boja pozadine je crvena.
<body bgcolor="red"> Boja pozadine je crvena.
<body bgcolor="#ff0000" text="#fffffff ">Boja pozadine je crvena, a tekst je bijeli. <font color="#ff0000">
Ovdje upisujemo tekst </font>
<font color="red"> Ovdje upisujemo tekst </font>
<body link="blue" vlink="#violet" alink="red"> Boja linka je plava, posjeenog linka ljubiasta, a aktivnog
linka crvena. U ovom primjeru link oznaava link, vlink oznaava posjeeni link, a alink aktivni link.
Slike
<img src="slika.jpg">
<img src="slika.jpg" width="150" height="200"> Slika u pixelima
<img src="slika.jpg" width="10%" height="40%"> Slika u postotcima
<img src="slike.jpg" width="100" height="170" border="5"> Broj 5 je debljina obruba.
irinu slike odreuje WIDTH atribut , a visinu HEIGHT.
Za poravnanje slike koristimo isti atribut kao i za tekst (ALIGN) i sljedea poravnanja:
LEFT poravnava sliku lijevo i tekst omata oko slike
RIGHT poravnava sliku desno i tekst omata oko slike
CENTER poravnava sredinu slike sa dnom teksta
TOP poravnava gornji rub slike sa vrhom teksta
MIDDLE poravnava sredinu slike sa sredinom teksta
BOTTOM poravnava donji rub slike sa dnom teksta
VSPACE vertikalni razmak
HSPACE horizontalni razmak
<img src="slika.gif" alt="Moja slika" >
Ako slika.gif ne postoji na serveru tada e se na ekranu pojaviti sljedea poruka: Moja slika.
Tablice
Za izradu tablice koristimo <table> za poetak i </table> za kraj.

<tr> red u tablici
<td> elija u tablici
<table border="n"> debljina ruba tablice
<rowspan="n"> spajanje elija nekog retka
<colspan="n"> spajanje elija nekog stupca
<cellspacing> razmak izmeu elija
<cellpading> udaljenost teksta (ili slike) unutar elije od ruba elije
<bgcolor> boja unutranjosti tablice, retka, elije (ovisi gdje je upiemo)
Linkovi
<a href= "povijest.html"> povijest </a>
Boju linka moemo i na ovaj nain promijeniti:
<a href="povijest.html"> <font color="green"> povijest </font> </a>
elimo li link bez podcrtavanja, onda je potrebno napisati sljedee:
< a href="povijest.html" style="text-decoration:none ; " >
elimo li klikom na link otvoriti stranicu u novom prozoru potrebno je koristiti naredbu target.
<a href="povijest.html" target="_blank">
Parametri naredbe target su sljedei:
_blank uitava stranicu u novom prozoru preglednika
_self uitava stranicu u isti prozor ili okvir preglednika
_parent uitava stranicu u okvir prozora koji je vie kategorije od okvira u kojem je link
_top otkazuje sve okvire i uitava stranicu u punom prozoru
Link unutar stranice:

<a name="gore" id="gore">gore</a> Cilj odreujemo bacanjem sidra (anchor):
Klikni <a href="#gore"> ovdje </a> Ovako odreujemo link.
Slika kao link:

<a href="filmovi.html"><img src="iceage.jpg"></a>
<a href="povijest.html"><img src="slika.jpg" width="47" height="47"></a>
Link na neku drugu stranicu:

<a href="http://www.google.hr/"> Google </a>
Link na e-mail:
<a href="mailto:blabla@bj.t-com.hr "> kontakt </a>
Okviri
<frameset cols=50%,50%> Dimenzije okvira.
<frame src="index.html" name="linkovi"> <frameset rows=20%,80%> Dimenzije okvira.
<frame src="prvi.html" name="prvi"> Ovdje odreujemo koja se stranica otvara u kojem okviru.
<frame src="drugi.html" name="drugi"> Ovdje odreujemo koja se stranica otvara u kojem okviru.
</frameset>
</frameset>
Obrasci
Textbox ovdje upisujemo tekst
Text unos teksta
Checkbox stavljamo kvaicu u kvadrati, mogu je viestruki izbor
Radio dodajemo tokicu u krui, mogu samo jedna izbor
Button gumb (OK, CANCEL)
Submit potvrda unosa ( koristi se u kombinaciji sa textbox)
Dropdown padajui izbornik
Textbox
<textarea rows="10" cols="30"> Ovdje moemo upisivati tekst. </textarea>
Text
<form>
<br>Ime:<input type="text" name="ime">
<br>Prezime:<input type="text" name="prezime">
</form>
Checkbox
<form>
<h1>Volim jesti:<h1>
<br>jabuke<input type="checkbox" name="voce" value="Jabuke">
<br>kruke<input type="checkbox" name="voce" value="Kruke">
<br>marelice<input type="checkbox" name="voce" value="Marelice">
</font>
</form>
Radio
<form>
<br><input type="radio" name="spol" value="muko">Muko
<br><input type="radio" name="spol" value="enko">ensko
</form>
Button
<form action="">
<input type="button" value="OK">
</form>
Submit
<form>
Korisniko ime:<input type="text" name="korisnik">
<input type="submit" value="poalji">
<input type="reset" value="obrii">
</form>
Dropdown
<form action="">
<select name="boje">
<option value="plava">plava</option>
<option value="uta">uta</option>
<option value="zelena">zelena</option>
<option value="crvena">crvena</option>
</select>
</form>
Formulari, forme predstavljaju odlian alat za sakupljanje informacija od posetilaca web sajta.
Formulari dozvoljavaju korisnicima da poalju komentare i pitanja, zatrae neku informaciju, prijave
se za Newsletter, popune Online aplikaciju ili unesu informacije za plaanje kako bi kupili neki
proizvod.
Sami po sebi formulari ne pruaju nikakvu funkcionalnost, ve samo neku vrstu ablona za
prikupljanje informacija. Kada korisnik popuni formular prikazan na sajtu, prikupljeni podaci se
prosleuju skripti na drugoj strani koja e obaviti sav posao.
Koncept funkcionisanja formulara

Videemo na primeru. Strana kontakt.html sadri formular na kome korisnik unosi svoje podatke i
poruku. Poto potvrdi formu, forma poziva kontakt_slanje.php stranu, na kojoj se nalazi skripta i
koja prikupljene podatke obrauje i alje e-mailom na podeenu adresu. Ovo je samo jedan od
primera, skripta moe poslati e-mail, upisati/proitati podatke iz baze ili uraditi neto tree to je
definisano.
Svaka forma sadri action atribut koji definie kome e se proslediti podaci, kojoj strani i skripti na
njoj. U naem primeru je to bila strana kontakt_slanje.php.
Atribut method je takoe obavezan i on definie na koji nain e podaci biti prosleeni. Postoje dve
opcije:
GET metod - Podaci iz fome se ovom opcijom alju na server kroz URL. Informacije koje se
prosleuju na ovaj nain su transparente i podlone napadima hakera. Poto URL moe da
ima maksimum 8.192 karaktera, ovaj metod nije podesan za due formulare. Takoe, moe
doi do transliteracije ili transkripcije i neki karakteri se mogu promeniti ili izgubiti.
POST metod - Ovaj metod pakuje podatke formulara unutar HTTP zahteva. Podaci nisu
ifrovani i stoga su (iako sigurniji nego u GET metodu) ipak podloni napadima hakera, tako
da, ako sakupljamo personalne informacije kao to su korisnika imena, lozinke ili brojevi
kreditnih kartica, moramo osigurati bezbednu konekciju do sigurnog servera.
U ovom kursu se neemo baviti skriptama koje procesuiraju i obrauju podatke iz formulara, jer je
to posebna oblast i spada u domen programiranja.
Kreiranje formulara
Da bismo kreirali formular u Dreamweaveru, postaviemo kursor na mesto gde elimo da ga
unesemo. Izabraemo Insert > Form > Form iz padajuih menija. Drugi nain je preko Insert
panela, izborom kategorije Form i klikom na Form dugme.
Kreiranje osnove formulara

Ukoliko je tom prilikom otvoren Design prikaz, Dreamweaver e uneti crvenu isprekidanu liniju u
obliku pravougaonika, a u Code prikazu sledei kod:
<form id="form1" name="form1" method="post" action="">
</form>
Ukoliko smo formu dodali dok je otvoren Code prikaz, pre samog postavljanja na stranu, pojavie se
sledei dijalog:
Podeavanja forme prilikom dodavanja u Code prikazu
U ovom dijalogu moemo uneti razna podeavanja pre postavljanja. Veinu opcija odavde moemo
nai u Properties Inspectoru, kada je forma selektovana u Design prikazu.
Ako ve nismo, otvoriemo Design prikaz i izabrati nau formu klikom unutar nje, unutar crvene
isprekidane linije. Properties Inspector e postati kao na slici:
Podeavanja forme
Form ID - U ovom polju unosimo jedinstveno ime formulara. Preko ID vrednosti moemo
stilizovati formu, ali ID koristimo i kod programiranja skripti.
Action - U ovom polju unosimo ima skripte/stranice koja e procesirati formular. Moemo
runo uneti ili locirati skriptu klikom na folder ikonicu desno od polja.
Target - Omoguava da odredite bude drugi prozor ili frame u odnosu na tekui. U tom
drugom okviru se prikazuje HTML strana koja se dobija nakon obrade podataka.
Method - Ovde biramo kojim metodom aljemo serveru prikupljene podatke iz formulara.
o Default - Ova opcija koristi difoltna podeavanja itaa da bi poslala informacije sa
formulara. Default metod je obino, ali ne i uvek, GET metod. Preporuuje se
postavljanje neke od druge dve vrednosti.
o GET - Podaci iz formulara se alju GET metodom, kako smo pojasnili ranije.
o POST - Podaci iz formulara se alju POST metodom, kako smo pojasnili ranije.
Enctype - Ovo polje je opciono i po default podeavanju je prazno. Kada imamo File upload
polje u formularu, izabraemo Multipart/form-data tip.
Class
Definie
klasu
formulara.
Unos elemenata forme

Osim prve opcije Form, Insert panel u Form kategoriji nudi mnoto opcija.
Insert panel, Forms kategorija

Text Field polje
Klikom na opciju Text Field opciju dodajemo input tekstualno polje (sve ove opcije moemo nai i u
padajuem meniju Insert > Forms).
Input podeavanja
Ovaj dijalog koji vidite na slici iznad e biti prikazan uvek kada izaberemo neko input polje u
formularima, bilo da se radi o Text Field, Textarea, Checkbox i tako dalje.
ID unosimo id vrednost polja
Label Postavljamo tekst koji e biti vidljiv van polja i koji e dati korisniku informaciju/uputstva za
polje.
Style Biramo nain postavljanja label opcije.
Attach label tag using for attribute Postavlja labelu u posebnom tagu i povezuje sa poljem
putem for atributa. Preporuen nain jer moemo razdvojiti fiziki delove (labelu i polje) a da
pri tom ostanu povezani.
Wrap with label tag Postavlja label tag oko polja. Tekst labele ide neposredno pre polja.
No label tag - Tekst labele postavlja neposredno pre polja. Ne postavlja tag.
Position Postavlja labelu pre ili posle polja.

Access key Opciono polje. Koristimo ukoliko elimo da definiemo tastaturnu preicu za polje. Na
Windows sistemu i Internet Exploreru potrebno je pritisnuti Alt + accesskey, u FireFoxu Alt + Shift +
accesskey. Na veini Mac browsera je Cmd + accesskey.
Tab index Opciono polje. Koristimo ga ukoliko elimo korigovati default tab redosled koji kreira
browser. Unoenjem brojeva za razliita polja u formi moemo definisati redosled. Pritiskom tastera
Tab, korisnikov fokus e prei na polje sa narednom vrednou. Moemo unositi 1,2,3,4.. ili
10,20,30,40.. Brojevi ne moraju biti zaredom, bitno je da su razliiti i vei od 0.
Ukoliko unesemo vrednosti kao sa slike iznad, dobiemo polje u formi koje e u dizajn prikazu i
browseru izgledati ovako:
Forma i jedno polje sa labelom u dizajn prikazu
Isti elementi u browseru

U Code prikazu, HTML kod e izgledati poput sledeeg:
<form action="kontakt_slanje.php" method="post" name="formaKontakt" id="formaKontakt">
<label for="ime">Vae ime:</label>
<input type="text" name="ime" id="ime" />
</form>
Primetiemo da je u kodu tag naeg polja <input>, a da je type atribut postavljen na text. U
formama razliiti tipovi polja koriste isti tag, ali razliit type atribut, kako emo videti u nastavku.
Kada selektujemo nae input polje, Properties Inspector e prikazati mogua podeavanja:
Properties Inspector za input polje
TextField ID vrednost koju smo uneli u dijalogu prilikom kreiranja polja.

Char width Definiemo broj karaktera u polju. Preporuujem da izbegavate ovo polje i da
definiete putem CSS-a.
Max Chars - Definiemo maksimalan broj karaktera u polju.
Disabled Moemo iskljuiti (Disable) polje i nainiti ga nedostupnim, ali vidljivim.
Read-only Postavlja polje na read-only stanje. Sva interaktivnost je dostupna, ali se ne
moe nita upisati u polje.
Init val Postavlja default vrednost.
Class Definie klasu nad poljem.
Type Biramo tip polja.
o Single line Ovo polje je postavljeno poto smo uneli Text Field na poetku, obino
tekstualno polje.
o Multi line Konvertuje obino tekstualno polje u tekstualno polje sa vie redova.
Ukoliko postavimo ovu vrednost ranije pomenuta Max Char vrednost postaje Num
Lines, gde moemo podesiti broj redova. U tom sluaju, u kodu, <input> tag se
pretvara u <textarea>
o Password Potpuno isto kao obino Single line tekstualno polje, osim to u browseru
prikazuje take ili zvezdice prilikom upisa, kako bi sakrilo ifru. Atribut type postaje
password umesto text.
Hidden polje
Hidden polje je, kao i prethodno, <input> tag. Koristimo ga kad elimo da postavimo neku vrednost,
a ona ne bi trebalo da bude vidljiva. Moemo uneti u startu ili se moe uitati i pomou skripti. Na
primer, moemo uitati iz baze id broj kupca koji je trenutno prijavljen na sajtu, i taj broj proslediti
kroz formular:
<input type="hidden" name="hdnCustId"
value="<?php echo $strCustomerId; ?>"/>
Text Area polje

Ovo polje je potpuno isto kao Text Field, sa tom razlikom da moe sadrati vie redova teksta.
Klikom na ovu opciju ista su podeavanja kao za Text Field.
Checkbox
Izborom ove opcije kreiramo takoe <input> tag, samo to je atribut type postavljen na checkbox.
Ne postoji mogunost unosa vrednosti, ve polje moe imati samo dve vrednosti - checked ili
unchecked. Sledi prikaz u kodu i u browseru:
<input type="checkbox" name="obavestenja" id="obavestenja" />
<label for="obavestenja">Da li elite da primate obavetenja emailom?</label>
Checkbox i labela u browseru

Po default vrednosti, labela se smeta iza polja kako bi sama kontrola bila levo, a tekst u nastavku
desno. U Properties Inspectoru moemo definisati default stanje (oznaeno ili ne) i koju vrednost
prosleuje formular.
Checkbox group
Izborom ove opcije pozivamo dijalog u kome moemo odmah kreirati vie checkbox polja.
Checkbox Group dijalog
Name - Unosimo naziv grupe od koga e u nizu biti kreirane ID vrednosti za polja.
Checkboxes U ovom sredinjem delu kreiramo polja unosom Label vrednosti (za labele
koje se prikazuju korisniku) iValue vrednosti (koje korisnik ne vidi, ali se prosleuju kroz
formular). Takoe, opcijama +/- dodajemo/briemo polja, a strelicama gore/dole ureujemo
redosled.
Lay out using Biramo da li e polja u grupi biti rasporeena pomou line break vrednosti ili
pomou tabele.
Radio Button i Radio Group

Radio elementi su potpuno isti kao checkbox, sa jednom bitnom razlikom. Ukoliko se nalaze vie u
grupi (i imaju isti name atribut), mogue je izabrati samo jedno polje. Ukoliko se izabere drugo,
prethodno se iskljuuje, to nije sluaj kod checkbox.
Select (List/Menu)
Ova opcija nam dozvoljava da kreiramo padajui meni ili listu za izbor. Poetni dijalog je isti kao za
input polja, ali kreira <select> tag u koji se smeta po jedan <option> tag za svaku ponuenu
vrednost.
Podeavanja Select polja u Properties Inspectoru

Type moemo izabrati tip polja, da li e biti u obliku padajueg menija ili liste. Ukoliko
izaberemo List, moemo definisati visinu u polju Height, kao i dozvoliti selektovanje vie
opcija istovremeno kroz Allow multiple.
List Values.. Veoma bitna opcija, jer klikom na dugme otvaramo dijalog u kome definiemo
mogue vrednosti.
Podeavanja dozvoljenih vrednosti

Kod izgleda poput sledeeg:
<select name="pol" id="pol">
<option value="zenski">enski</option>
<option value="muski" selected="selected">Muki</option>
</select>
Jump menu
Ova opcija je vrlo slina prethodnoj, sa tom razlikom da nam omoguava da se oizvri akcija posle
selekcije.
Image Field
Ponaa se vrlo slino kao Submit dugme, o emu emo priati uskoro. Razlika je u tome to se moe
postaviti slika umesto standardnog ili stilizovanog dugmeta.
File Field
Opcija koja kreira polje za postavljanje/upload fajlova. Takoe je <input> tag, ali sa atributom type
podeenim na file.
File Field polje u Design prikazu
Iako neraskidiva celina (jedan input tag), vizuelno je predstavljeno iz dva dela. Vidimo polje slino
obinom tekst input polju i dugme browse, kojim korisnik poziva dijalog za izbor fajla. Prilino je
teko stilizovati ovo polje, a tekst Browse.. ne moemo promeniti.
Button
Kreira dugme forme. Postoje tri tipa:
Submit Prosleuje sve podatke forme skripti koju smo definisali putem action atributa
forme, na nain koji smo definisali putem method atributa forme (GET/POST). Drugim reima,
korisnik unosi podatke, ali tek kada izabere submit opciju, formular ini ono za ta je
namenjen, tj. prosleuje podatke dalje.
Reset Resetuje sva polja u formi u kojoj se nalazi to ponekad moe prilino iznervirati
korisnika ako je sluajno izabrao ovu opciju umesto submit. Koristiti sa oprezom.
None Postavlja dugme koje samo po sebi nema nikakvu funkcionalnost. Obino se postavlja
JavaScript koji e izriti neku radnju poto se dugme aktivira.
Value vrednost u Properties Inspectoru definie vidljiv tekst.
Podeavanja za selektovano dugme u Properties Inspectoru

Label
Postavlja labelu, ali ne vezuje za odreeno polje putem for atributa, kako smo pomenuli ranije.
Postavlja kod:
<label>Nova labela</label>
Fieldset
Pomou Fieldset opcije moemo grupisati odreena polja. Na primer, moemo imati u formularu
grupe za opte informacije, informacije o plaanju i tako dalje. Kreira <fieldset> tag u koji
smetamo sva polja koja elimo da grupiemo, i <legend> na samom poetku grupe, a koji sadri
naziv. Sam naziv pluta na liniji koja okruuje grupu. Kod izgleda poput sledeeg:
<fieldset><legend>Opte informacije</legend>
.....
</fieldset>
U browseru, fieldset koji okruuje dva tekstualna polja izgleda poput slike:
Fieldset i dva text field polja

Spry validacija
Poslednjih sedam opcija se odnosi na Spry validaciju. Pojavljuju nam se dva nova termina koja do
sada nismo upoznali spry i validacija.
Spry opcijama emo se baviti u nekoj od narednih lekcija, za sada je bitno da znamo da je to
JavaScript koji e nam DW sam kreirati po potrebi.
Validacija (u ovom kontekstu) je proces u kome se proverava da li je forma pravilno popunjena od
strane korisnika. Na primer, moemo proveriti da li je korisnik uneo obavezna polja, da li je potvrdio
checkbox u kome se slae sa pravilima korienja, da li je uneo e-mail adresu u pravilnoj formi i
tako dalje. Validacija moe biti client-side ili server-side. Client side znai da se vri u browseru
korisnika I, tek ako je sve ok, prosleuje skripti na dalju obradu. Server side validacija prosleuje
formu, odnosno njene podatke odmah skripti, koja tek onda validira formu.
Ovih poslednjih sedam opcija su ponovljena polja o kojima smo priali, ali uz dodatak validacije. Sve
su client-side. Moemo uneti, na primer, Text Field polje i podesiti da prihvata samo datume u obliku
dd/mm/gggg (dan/mesec/godina).
KAKO
DODATI STIL
XML-U
SPOLJANJI STILSKI FAJLOVI

probajte ovo u svom brauzeru
HTML ima link elemenat za linkovanje ka spoljanjim stilskim fajlovima, ali
nemaju svi formati zasnovani na XML-u takav elemenat. Ako ne postoji
odgovarajui elemenat, moete i dalje da prikljuite spoljanji stilski fajl
pomou xml-stylesheet instrukcije za procesiranje ovako:
<?xml-stylesheet href="my-style.css" type="text/css"?>
... ostatak dokumenta ovde...
Ova instrukcija za procesiranje (PI) mora doi pre prvog elementa

dokumenta.type="text/css" nije obavezan, ali pomae brauzeru: ako ne podrava
CSS, zna da nee morati da uita taj fajl.
Kao
i
sa link elementom
HTML-a,
mogu
postojati
viestruke xmlstylesheet instrukcije za procesiranje i one mogu imati atribute za obeleavanje
tipa, medijuma i naslova.
Evo veeg primera. Pretpostavimo da imamo tri stilska fajla, jedan koji
postavlja osnovni prezentacioni tip svakog elementa (liniski, blok, elemenat
liste, itd.) i druga dva koji postavljaju boje i margine. Dva poslednja su
alternative jedan drugom, i itaoc dokumenta moe izabrati koji oe da koristi.
Osim kad se dokumenat tampa, u kojem sluaju mi elimo da koristimo samo
poslednji stil. Ovde je uobiajen stilski fajl:
/* common.css */
INSTRUMENT { display: inline }
ARTICLE, HEADLINE, AUTHOR, PARA { display: block }
Ovo je jedan od moguih stilova, u fajlu nazvanom "modern.css":

/* modern.css */
ARTICLE { font-family: sans-serif; background: white; color: black }
AUTHOR { margin: 1em; color: red }
HEADLINE { text-align: right; margin-bottom: 2em }
PARA { line-height: 1.5; margin-left: 15% }
INSTRUMENT { color: blue }
A ovo je drugi, nazvan "classic.css":

/* classic.css */
ARTICLE { font-family: serif; background: white; color: #003 }
AUTHOR { font-size: large; margin: 1em 0 }
HEADLINE { font-size: x-large; margin-bottom: 1em }
PARA { text-indent: 1em; text-align: justify }
INSTRUMENT { font-style: italic }
XML dokumenat sa ova tri stilska fajla linkovana ka njemu izgleda ovako:
<?xml-stylesheet href="common.css" type="text/css"?>
<?xml-stylesheet href="modern.css" title="Modern" media="screen"
type="text/css"?>
<?xml-stylesheet href="classic.css" alternate="yes"
title="Classic" media="screen, print" type="text/css"?>
<ARTICLE>
<HEADLINE>Fredrick the Great meets Bach</HEADLINE>
<AUTHOR>Johan Nikolaus Forkel</AUTHOR>
<PARA>
Jedno vee, ba dok je spreman uzimao svoju
<INSTRUMENT>flautu</INSTRUMENT> i kad su njegovi muziari su bili okupljeni,
oficir mu je doneo listu nepoznatih lica koja su bila stigla.
</PARA>
</ARTICLE>
Za vie detalja, pogledajte W3C Preporuku Prikljuivanje Stilskih Fajlova XML

dokumentima.
UGRAENI STILSKI FAJLOVI

probajte u svom brauzeru
HTML ima style elemenat koji dozvoljava stilsim fajlovima da budu ugraeni
direktno u HTML fajl, bez potrebe za spoljnim fajlom. U nekim sluajevima to je
lake, naroito kada je stilski fajl veoma specifian datom dokumentu.
Veina formata zasnovanih na XML-u nee imati takav elemenat, ali iste PI
koje linkuju ka spoljnim stilskim fajlovima mogu da se iskoriste da linkuju ka
stilskim fajlovima koji su ugraeni u sam dokumenat. Od Februara 2006, i
dalje postoje tehniki problemi sa ovime, i ne postoji formalna
specifikacija. Na primer:
<?xml-stylesheet href="#style" type="text/css"?>
<ARTICLE>
<EXTRAS id="style">
INSTRUMENT { display: inline }
ARTICLE, HEADLINE, AUTHOR, PARA { display: block }
EXTRAS { display: none }
</EXTRAS>
<HEADLINE>Frederik Veliki susree Baha</HEADLINE>
...
</ARTICLE>
U ovom sluaju type="text/css" atribut mora postojati, inae brauzer (ili neki drugi
program) mora da pogaa stilski jezik. xml-stylesheet PI sada pokazuje ne ka
spoljanjem stilskom fajlu, nego ka elementu unutar samog dokumenta. Taj
elemenat je identifikovan sa id atributom koji slui kao meta linka. (U zavisnosti
od konkretnog XML formata, id atribut se moe zvati drugaije; u nekim
formatima moda i nee postojati odgovarajui atribut.)
Nereeni problemi
W3C Preporuka Prikljuivanje Stilskih Fajlova XML dokumentima ne definie sluaj
ugraenih stilskih fajlova, mada to deluje kao razumno tumaenje da se omogue URL
fragmenti (poevi od #). U ovom momentu, poetkom 2006-te, jo uvek postoje nereeni
problemi i ne postoji objavljena specifikacija. Problemi su sledei:
1.
Zato to ugraen stilski fajl nije uitan posebno sa servera, server ne moe da kae
brauzeru kojeg je formata stilski fajl. Zato, type atribut je neophodan u ovom sluaju. Ne
definisano je ta se dogaa ako je atribut izostavljen: dali je stilski fajl ignorisan? da li se
pretpostavlja da je u pitanju CSS? da li postoji neki algoritam koji odreuje jezik?
2.
U veini formata zasnovanih na XML-u, identifikator fragmenata identifikuje kompletan

elemenat, ne samo sadraj elementa. Ali stilski fajl koji poinje sa <ARTICLE> nije ispravan
CSS, tako da se ini da treba da postoji dodatno pravilo da identifikator fragmenata koji se
koristi u PI stilskog elementa pokazuje ka sadraju elementa, ne ka samom elementu.
3.
Slino, nije definisano ta se deava ako postoji pod elemenat unutar elementa ka
kome se pokazuje. Da li se stilski fajl sadri od svog sadraja u svim elementima koji su
ukljueni? Od sadraja samo prvog elementa? Ili je ovo greka i ceo elemenat se ignorie?
4.
U gornjem primeru, URL je pokazivao ka samom dokumentu. injenica da je brauzer u

stanju da pogleda taj URL ukazuje da on zna kako da parsira XML i verovatno je sposoban da
nae ukazani stilski elemenat. Ali sada razmotrite URL koji pokazuje ka
fragmentu spoljanjeg dokumenta. Da bi uspeno uitao stilski fajl, brauzer mora prvo da
uita i parsira spoljanji dokumenat i da izdvoji i parsira stilski fajl. Ali type atribut samo daje
tip na jednom od dva, i stoga brauzer ne moe znati dali je u stanju da koristi stilski fajl. Nije
ak ni definisano dali type atribut daje tip spoljanjeg dokumenta ili stilskog fajla ukljuenog
u njega.
5.
PI stilskog fajla je najkorisniji sa Generikim XML-om, npr., sa XML-om u formatu koji

brauzer ne poznaju. Zahvaljujui stilskim fajlovima, barem e biti u stalju da pokee neto.
Dobro poznati formati, kao to su SVG, SMIL ili XHTML, imaju svoja pravila za prezentaciju
koja idu dalje od onoga to su stilski fajlovi u stanju da specificiraju. Ali postoje i druge stvari
koje brauzer takoe ne zna kada se dokumenat tretira kao Generiki XML: konkretno, ne zna
koji atributi su ID atributi. Postoji W3C Preporuka za atribut pod nazivom xml:id i ako
dokumenat sadri atribut sa tim imenom, veoma je verovatno da e URL fragmenat da
pokazuje ka jednom od tih. Ali ako ne postoje takvi atributi, brauzer mora pokuati na druge
naine da ustanovi koji atributi su ID-ovi. Ako dokumenat ima DOCTYPE na vrhu i brauzer je
u stanju da uita DTD ka kome on pokazuje, taj DTD e specificirati atribut. Ali brauzer
moda nee biti u stanju da proita DTD-ove ili moda nee postojati DOCTYPE.
6.
ID fragmenta je samo jedan nain da se pokae ka elementu u dokumentu. Druga W3C

Preporuka definieXPointers za identifikaciju elemenata u dokumentu bez potrebe za ID
atributima. Ali razumevanje XPointers trenutno nije obavezno za brauzere koji koriste PI
stilskih fajlova, i samim tim nije jasno dali brauzer moe da interpretira XPointers, dali mogu,
ili dali treba da ih ignoriu.
LINIJSKI STILOVI
HTML takoe dozvoljava stilovima da vudu direktno prikaeni individualnim
elementima uz pomo style atributa. Veina dokument formata zanovanih na
XML-u nee imati takav atribut, mada neki dozvoljavaju karakteristike
(modules) iz HTML da se koriste unutar dokumenta.
CLASS ATRIBUTI
atribut koji vam omoguava da kreirate podklase elemenata u HTML

takoe nije verovatno da e te ga nai u veini dokumenata zasnovanih na XML
formatu. Naravno, CSS vam doputa da izaberete elemente zasnovane na bilo
kom atributu, ne samo class, ali sintaksa nije tako ugodna.
Evo primera. Ako postoji class atribut i format dokumenta definie da to radi
kao u HTML-u, mi moemo koristiti notaciju sa takom. (Stoga, ovaj konkretan
primer nee raditi jer <doc> nije format koji brauzeri znaju kao neto to
ima class)
class
<?xml-stylesheet href="#s1" type="text/css"?>

<doc>
<s id="s1">
s { display: none }
p { display: block }
p.note { color: red }
</s>
<p>Neki tekst... </p>
<p class="note">Poruka... </p>
</doc>
Ako format dokumenta ne specificira da

koristite due selektore sa "[ ]":
class
stvara podklasu, onda vi treba da

<doc>
<s id="s1">
s { display: none }
p[class~=note] { color: red }
</s>
<p class="note">Poruka... </p>
</doc>
Ako ne postoji atribut class, ali ima neto drugo to moemo da koristimo,
atribut selektor "[ ]" i dalje vai:
<doc>
<s id="s1">
s { display: none }
p[warning="yes"] { color: red }

</s>
<p warning="yes">Poruka... </p>
</doc>

Amittai Aviram - HTML Tutorijal

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Amittai Aviram - HTML Tutorijal

Uploaded by

Copyright:

Available Formats

Amittai Aviram -

Koncept HTML u "Nutshell"

Zaustavite kopiranje (iznad ove reenice).

Elementi koji sadre blok nivo

Da bi se stvorila nenaruena lista, jednostavno koristite <ol> i </ol>. tagove umesto

Ako imate produeno citiranje, moete ga staviti u blockquote element okruujui ga

Prazni (Standalone) Elementi

Slike: <img /> (inline)

Rekao je Jednostavni Simon burekdiji,

Inline Container Elementi

Monkove preference o lovu

Document Type Declaration

"Kako usluiti svet ?"

Sredstva za dalje informisanje

http://safari.oreilly.com/main.asp?bookname=htmlpr2. Informavcije o HTML depne reference, drugo izdanje, by Jennifer Niederst.

Newsgroup comp.infosystems.www.authoring.html, povezani za va default newsreader program ako je tako nameteno.

HTML je jezik za opisivanje web strana

HTML - Hyper Text Markup Language

Markup language je skup markup tagova

Tag je kljuna re okruena sa < i >, npr. <html>

Tagovi su najee u paru, npr. <b> i </b>

Ne razlikuju se velika i mala slova preporuka je mala

Web browser ita HTML dokument i prikazuje ga kao web stranu

Ime HTML dokumenta se zavrava sa .htm ili .html

Za pregled u browser-u VIEW -> SOURCE / PAGE SOURCE

HTML element je sve od start taga do end taga

Neki HTML elementi nemaju sadraj i zatvaraju se u start tagu

Veina HTML elemenata mogu da i maju dodatne atribute

Mogu se ugnjedavati (!)

Atributi obezbeuju dodatne informacije o elementu

Uvek se navode u start tagu

Piu se u obliku imeatributa="vrednostatributa"

Koriste se tagovi <h1> do <h6>

Vanost pravilne upotrebe naslova

Koriste se tagovi <p> i <br />

<p>prvi red<br />drugi red</p>

Koristi se tag <a>

<a href="http://skola.kraguljac.com/">Klikni ovde</a>

Target atribut odreuje gde se otvara link

<a href="http://skola.kraguljac.com/" target="_blank">Klikni ovde</a>

Name atribut odreuje imenovano sidro u HTML dokumentu

<a href="#mesto">Klikni ovde</a>

Koristi se tag <img>

<img src="/slika.jpg" />

Alt atribut odreuje alternativni tekst za sliku

<img src="/slika.gif" alt="Opis slike" />

Podeavanje irine / visine

Atributi width i height

Koristi se tag <hr />

Pie se u obliku

Koriste se tagovi za formatiranje (Formatting Tags):

<b> - podebljani (bold) tekst

<big> - vea slova

<em> - naglaen tekst

<i> - kurziv (italic) tekst

<small> - manja slova

<strong> - jaa sloba, podebljani tekst

<ins> - umetnuti tekst

<del> - obrisani tekst

<code> - raunarski kod

<kbd> - tekst sa tastature

<samp> - primer raunarskog koda

<tt> - telegrafski (teletype) tekst

<pre> - preformatirani tekst

Da bi tabela ouvala pravilnu strukturu u prazne elije treba staviti