Šta je HTML?

Osnove HTML
Šta to beše HTML?
Internet, kao svetsku mreža računara, možete koristiti na više načina. Jedan od najpopularnijih
načina upotrebe je pregledanje Internet stranica, proces popularno nazvan surfovanje Internetom. Svaka
Internet stranica je hipertekstualan (Hypertext) dokumenat. Hipertekst se sastoji od meñusobno povezanih
delova teksta (ili drugih objekata) tako da čitalac (korisnik) interaktivno odreñuje redosled čitanja
(pregledanja). To praktično znači da dokumente na Internetu ne morate da čitate sekvencijalno kao
knjigu, već se možete šetati kroz dokumenat, ili dokumente po želji. Možda bi bila najbolja analogija sa
knjigom koja sadrži puno fusnota, gde čitalac kad naiñe na nepoznat termin označen fusnotom, on preñe
na proučavanje fusnote na dnu stranice ili u na kraju knjige (endnote, index pojmova), i po završetku se
vraća na mesto čitanja gde se nalazi nepoznat termin, pa dalje nastavlja čitanje redom, tj. sekvencijalno.
Kad su u pitanju Internet dokumenti, sekvencijalno čitanje uopšte nije neophodno. Korisnik se
kreće kroz Internet dokumente koristeći veze (linkove), pomoću kojih skače na različite delove
dokumenta ili posebne dokumente, u skladu sa svojim interesovanjima i potrebama. Kretanje kroz takve
dokumente naziva se navigacija a ne čitanje. Veze (eng. Links) se nazivaju još i hipervezama
(Hyperlinks). Ove veze ugrañujemo u Internet dokumenat, pogañate, uz pomoć HTML-a. Meñusobno
povezani dokumenti na Internet-u ne sadrže samo tekstove već i različite sadržaje kao što su slike, zvuci,
animacije, video materijale, pa se Internet može nazvati i hipermedijalnim sistemom. Sve ove medije i
njihov meñusoban odnos opisujemo i ugrañujemo u Internet stranicu, opet uz pomoć HTML-a. Dakle,
osnovni jezik za kreiranje strukture i sadržaja, kao i formatiranje sadržaja stranica na Internetu jeste
HTML.
Priča o nastanku HTML-a stara je koliko i sam Internet. Sa razvojem Interneta razvijao se i
HTML, a jedan od najvećih ’krivaca’ za to je firma Netscape, koja je na samom početku na svoju ruku
uvodila nestandardna proširenja u HTML jezik. Naravno, ni ostali proizvoñači browser-a nisu puno
zaostajali za Netscape-om, pa je za taj period razvoja Interneta vezana i priča o takmičenju proizvoñača
browser-a u uvoñenju nestandardnih proširenja u iste, poznata pod imenom ’Rat Browser-a’. Da bi se
izbegli dalji ’ratovi’ meñu gigantima softverske industrije, proširenjima, standardima i novim verzijama
HTML-a bavi se posebno zvanično telo zvano W3C komitet. Dakle, HTML je živ jezik koji se razvija!
HTML nije programski jezik u onom smislu u kom su to C++ ili Visual Basic, jer ne sadrži
komande, tipove podataka, operatore, promenljive i slične stvari. HTML je više jezik za opis Internet
dokumenata. Pomoću njega možete menjati boju i veličinu teksta, boju pozadine, umetnuti sliku i zvuk na
Internet stranicu, ali ne možete izračunati koliko je 2+2. U svojoj suštini HTML dokumenat je običan
tekstualni dokumenat sa ekstenzijom .htm ili .html, tako da se može kreirati i u bilo kom od tekst editora,
kao što su Notepad, WordPad, MS Word. Iako je izrada HTML stranica vrlo jednostavna, postoje pravila
koja morate znati i poštovati ih pri izradi HTML dokumenata. Svaki HTML dokument sastoji se od
deklaracija, elemenata i atributa elemenata. O deklaracijama reći ćemo više u nekoj od sledećih lekcija, a
sada ćemo se posvetiti elementima i atributima.
Elementi HTML-a
Elementima formiramo strukturu i opisujemo izgled delova sadržaja HTML dokumenata.
Elementi mogu da se nalaze bilo gde u okviru HTML dokumenta. Svaki elemenat sastoji se iz tri dela:
početni tag, sadržaj i završni tag. Tag je specijalna sekvenca znakova – takozvani marker (’Markup’) koji
je ograñen znacima ‘<‘ i ‘>‘. Završni tag razlikujemo od početnog po znaku ‘/’ posle znaka ‘<‘. Svaki
HTML dokument poseduje bar jedan elemenat najvišeg nivoa – HTML tag. Na primer da biste napravili
najjednostavniji HTML dokumenat, dovoljno je da pokrenete Notepad, unesete početni '<html>' i završni
HTML tag,'</html>'. Snimite ovaj dokumenat kao 'prva.html'. Ovde je važno da pri snimanju izaberete u
listi Save as type vrednost All Files a da za ime zadate 'prva.html'. Nakon što zatvorite Notepad videćete
Vaš 'prva' sa prepoznatljivom ikonicom Internet dokumenta, slično kao na slici 6. Možete i da snimite
'prva' kao običan tekstualni dokumenat pa da ga nakon snimanja preimenujete u 'prva.html'. Dvoklikom
na ikonicu dokumenta prva.html otvoriće se Internet Explorer (ili bilo koji drugi Internet browser koji je
podrazumevan na vašem računaru; mi ćemo u daljem tekstu pretpostavljati da je to Internet Explorer) koji
će Vam prikazati potpuno praznu stranicu. Ništa lakše od pravljenja Internet stranica, zar ne?
IV godina Društveno-jezički smer
1
Osnove HTML
[prva.html-code]
<html>
</html>
Struktura HTML dokumenta
Da bi ova stranica ipak bila prava HTML stranica fali joj sadržaj. Tag <html> je okvir u kom se
nalaze svi ostali tagovi. HTML dokument uvek počinje tagom <html>, a završava se tagom </html>.
Postoje još dva HTML elementa koji su visokog nivoa, odmah uz html tag. To su head i body tagovi.
Ovim elementima opisuje se zaglavlje i telo HTML dokumenta.
HEAD
U zaglavlju se definišu razni podaci koji učestvuju u komunikaciji Internet čitača i Internet
servera, odnosno informacije o samom dokumentu (naslov, opis, ključne reči, ime autora, itd.); mada je
upotreba ovog taga opciona preporučujemo da ga uvek navedete. Browser ne prikazuje informacije koje
se nalaze izmeñu tagova < head > i </ head >, osim sadržaja taga <title>. Sadržaj taga <title> je naslov
HTML dokumenta koji će se pojaviti u naslovnoj liniji web browser-a.
BODY
Sve ono što vidimo u prozoru browser-a, tj. sadržaj stranice i HTML elementi za formatiranje
(opis) tog sadržaja, nalazi se u telu dokumenta koje uokviruje <body> tag. U HTML dokumentu sme da
postoji samo jedan par tagova <body></body>. Ovaj element specificira glavni sadržaj dokumenta.
Početni tag <body> ima atribute koji omogućavaju da se specificiraju karakteristike koje va\e na nivou
dokumenta (boja pozadine ili slika, boja teksta, boja posećenih i neposećenih linkova, itd.)
Komentar u HTML kodu
Komentari u HTML kodu se navode u sledećem obliku:
<!- Ovo je tekst komentara –>
Komentar počinje sekvencom znakova <!- (izmeñu ovih znakova ne sme da postoji ni jedan
razmak), a završava se sekvencom znakova -> (izmeñu ova dva znaka može doći i razmak). Sve što se
nalazi izmeñu ove dve sekvence znakova Web browser će ignorisati.
Ispod se nalazi jedan primer pravilno struktuiranog html dokumenta.
[struktura.html-code]
<html>
<head>
<title>Naslov</title>
</head>
<body>
Tekst dokumenta.
</body>
</html>
U HTML-u ne postoji razlika izmeñu malih i velikih slova za elemente u tagovima tako npr.
<body>, <Body>, i <BODY> predstavljaju iste elemente. Preporučujemo da elemente HTML-a pišete
malim slovima. Takoñe sve suvišne znakove razmaka (space), tabulator i znake za novi red u Internet
dokumentu Internet čitač ignoriše, ali njihovo postojanje utiče na veličinu Internet dokumenata. Stoga
preporučujemo da ih izbegavate, jer popularnost i posećenost Vaših stranica, osim izgleda i sadržaja
zavisi u velikoj meri i od brzine učitavanja istih.
Neki elementi dopuštaju da se izuzme završni tag, na primer elemenat br. Elemenat br služi za
prelom reda u HTML-u (kao kad pritisnete Shift+ENTER u programu za obradu teksta). Elemenat br ne
zahteva završni tag u obliku . Još jedan primer HTML elementa koji dozvoljava da se izuzme
završni tag je img elemenat, namenjen uključivanju slika na Internet stranicu.
IV godina Društveno-jezički smer
2
Osnove HTML
Atributi elemenata HTML-a
Elementi mogu da sadrže atribute kojima se opisuju specifični parametri elementa kao što su
dužina, visina, lokacija objekta sa koje se elemenat učitava i slično. Atributi se uvek uključuju u početni
tag, nikako u završni. Atribut se sastoji iz ključa i njemu dodeljene vrednosti i to se zapisuje na sledeći
način: Naziv_Atributa="Vrednost_Atributa". Vrednost atributa ukoliko postoji je ograničena dvostrukim
ili jednostrukim navodnicima (uobičajeno je da se navode dvostruki kako bi u okviru njih mogli postaviti
i jednostruke ako se ukaže potreba za tim).
Na primer, img elemenat poseduje src atribut koji obezbeñuje lokaciju slike sa koje se slika
učitava i atribut alt koji obezbeñuje alternativni tekst koji će biti prikazan na mestu predviñenom za
prikazivanje slike ukoliko učitavanje slike na HTML stranicu ne uspe iz bilo kog razloga. Sintaksa img
elementa je sledeća:
<img src="Lokacija\ImeSlike" alt="Alternativni_Tekst">.
Na primer:
<img src="Slike\SlikaLeviBaner.jpg" alt="Levi_Baner">
gde je "Slike\" lokacija slike, a ’SlikaLeviBaner.jpg’ je ime slike koja se učitava.
Pošto je pitanje ispravnog navoñenja lokacije objekata koje uključujete u HTML stranicu od
suštinske važnosti za njeno ispravno funkcionisanje, reći ćemo nešto više o adresiranju. Šta praktično
znači izraz "\Slike\"? Znači da se fascikla ’Slike’ koja sadrži sliku ’SlikaLeviBaner.jpg’ nalazi na istoj
lokaciji (u istoj fascikli, na istom disku...) na kojoj se nalazi i HTML stranica u čijem kodu se nalazi gore
pomenuti img tag. Pomenuti način adresiranja zove se relativno adresiranje.
Postoji i apsolutno adresiranje, odnosno navoñenje pune adrese od korenskog direktorijuma, roota. Recimo da se i fascikla ’Slike’ i HTML stranica koja sadrži gornji img tag nalaze na C disku ili na sajtu
cnti.info. Apsolutne adrese u src atributu imgtag-a bi u tom slučaju izgledale ovako
<img src="C:\Slike\SlikaLeviBaner.jpg." alt="Levi baner">
odnosno
<img src="http://www.cnti.info/Slike/SlikaLeviBaner.jpg."
alt="Levi baner">
Prednost relativnog adresiranja je u tome što Vi bez bojazni možete premeštati HTML stranicu i
fasciklu ’Slike’ gde god želite, sve će funkcionisati sjajno dok god su stranica i fascikla ’Slike’ na istoj
lokaciji. Ako koristite apsolutne adrese, tada pri svakom premeštanju morate menjati direktno u HTML
kodu sve adrese. To je u redu ako učitavate samo jednu sliku na stranicu, ali šta ako ih je više? Iako
programi kao Dreamweaver, što ćemo videti kasnije, imaju rutinu koja će pokušati da Vas spase greške
ako premeštate fajlove koji su linkovani (slike u našem primeru) i da zameni stare nevažeće linkove
novima, greške su uvek moguće.
Povedite računa o tome gde smeštate slike i slične objekte koje uključujete u HTML kod, jer se
vrlo lako može desiti da se isti objekti ne prikažu ispravno na HTML stranici ako ste nešto zabrljali sa
adresama. O adresama biće opet reči u nekom od sledećih tekstova, kad budemo govorili o postavljanju
Internet prezentacije na Web server.
Vaša prva prava Internet stranica
Pre nego preñemo na izradu same HTML stranice, potrebno je da napomenemo da je svrha ovog
primera da ukaže na jednostavnost izrade stranica uz pomoć HTML-a. Radićemo u lokalu, na Vašem
računaru tako da ćemo koristiti apsolutne adrese u ovom primeru. Napravimo nekoliko fascikli u koje
ćemo smestiti stranicu i sve objekte koju ćemo ugraditi u nju. Na C disku napravite novu fasciklu i dajte
joj ime ’Radna’. U fascikli ’Radna’ napravite novu fasciklu ’Slike’. Pronañite jednu lepu sliku na Vašem
disku i iskopirajte je u fasciklu ’Slike’, pa je zatim preimenujte u ’SlikaLeviBaner’. U našem primeru
slika je tipa jpg, ali Vi ne morate slediti naš primer, možete iskoristiti sliku bilo kog tipa, recimo png ili
gif . Naravno, tada morate i svuda gde se u HTML kodu pojavljuje ime ’SlikaLeviBaner.jpg’ zameniti ga
sa ’SlikaLeviBaner.png’ ili ’SlikaLeviBaner.gif’, u zavisnosti od tipa slike koju ste iskopirali.
Vreme je da konačno napravimo Vašu prvu pravu Internet stranicu. Svi programeri i informatičari
sigurno su u životu nebrojeno puta napravili aplikaciju „Zdravo svete“ počinjući da uče neki programski
jezik, pa zašto bismo mi bili izuzetak? Dakle, napravićemo Internet stranicu na kojoj piše 'Zdravo HTML
svete!'. Otvorite novi Notepad dokumenat i ukucajte u njemu:
IV godina Društveno-jezički smer
3
Osnove HTML
[zdravosvete.html-code]
<html>
<head>
<title>Moja prva Internet stranica</title>
</head>
<body bgcolor="#FFFFFF">
Zdravo HTML svete! 
<img src ="C:\Radna\Slike\SlikaLeviBaner.jpg" alt ="Levi_Baner"
width ="150" height ="480" hspace ="30" vspace ="10" border ="2"
align ="left">
</body>
</html>
Pri snimanju dajte ime dokumentu, recimo ’zdravosvete.html’, i smestite ga u fasciklu ’Radna’.
Pokrenite ovu stranicu dvoklikom na ikonicu dokumenta zdravosvete.html. Uočite da ova stranica ima
naslov ’Moja prva Internet stranica’ zahvaljujući tagu title koji se smešta u okviru head taga.
Kao što je već jednom napomenuto body tag sadrži atribute za kontrolu i format prikaza koji se odnose na
telo dokumenta. Jedan od njih je bgcolor - pomoću koga se navodimo boju pozadine. Boju zadajete kao
heksadecimalan broj prema RGB (RedGreenBlue - CrvenaZelenaPlava) kolornoj šemi, kojoj prethodi
znak #. Prva dva heksadecimalna broja se odnose na crvenu, druga dva na zelenu i zadnja dva na plavu
(npr. Crvena boja je #FF0000, Bela #FFFFFF, crna #000000,...).
Hyperlink (Hiper veza)
Neformalna definicija Hyperlink-a: hyperlink je referenca ili navigacioni elemenat u dokumentu
ka drugoj sekciji istog ili drugog dokumenta koji može biti na istom ili drugom domenu.
Često hyperlink skraćujemo na link. Hypertext (u značenju više od teksta) je oblik teksta koji
egzistira na Web-u koji je funkcionalno bogatiji od običnog tekstualnog dokumenta jer omogućava
korisniku da istražuje druge Hiper tekstove, odnosno Web stranice povezanih sa prvom stranicom
specifičnim rečima ili slikama. Veza izmeñu prve stranice i drugih se ostvaruje upravo hiperlinkovima
definisanim na specifičnim rečima, slikama,... Hiperlink nije ništa drugo do adresa zapisana u odreñenom
obliku.
Kada kreiramo hiperlink, odredište ove adrese je zapisano u konkretnom formatu, koji se još
skraćeno naziva URL (Uniform Resource Locator). URL sadrži u sebi adresu web servera (lista
poddomena sve do internet domena najvišeg nivoa), putanju do stranice (fajla) i sam naziv fajla (web
stranice). URL takoñe identifikuje protokol koji upravlja datim tipom resursa (fajlova), kao što su HTTP
ili FTP.
Na primer, posmatrajmo adresu http://www.sremac.edu.rs/forumi/phpBBInf/Index.php
• http:// je oznaka Hyper Text Transfer Protocol-a
• www.sremac.edu.rs je adresa servera, www je poddomen domena cnti, a oba su poddomeni
domena info
• /forumi/phpBBInf/ je putanja do fajla (web stranice)
• Index.php je ime fajla (web stranice)
Apsolutni i relativni hiprelinkovi
Hiperlinkove možemo razvrstati na relativne i apsolutne. Apsolutni hiperlinkovi (URL-ovi) sadrže
potpune adrese, uključujući tip protokola, naziv web servera, putanju do fajla i naziv fajla. Relativnom
URL-u nedostaje jedan ili više delova potpune adrese. Nedostajući delovi adrese se formiraju u odnosu na
tekuću stranicu na kojoj se nalazi sam URL. Na primer, ukoliko nedostaju tip protokola i web server, web
čitač će iskoristiti, protokol i naziv domena sa trenutne stranice.
• http://www.sremac.edu.rs/forumi/phpBBInf/index.php je apsolutna adresa
• /forumi/phpBBInf/index.php je primer relativne adresa u odnosu na neku tekuću stranicu
Uobičajena je praksa da se unutar stranica na Web-u koriste relativni URL-ovi koji sadrže samo
delimičnu putanju i naziv fajla.
Koncentrišimo se samo na adrese. Uzmimo da postoji sledeća hijerarhija fascikli na našem serveru
www.sremac.edu.rs, odnosno u korenskom direktorijumu www.
IV godina Društveno-jezički smer
4
Osnove HTML
Recimo da u fascikli Docs postoji dokumenat Index.htm. Recimo da u fascikli jpg postoji slika
logo.jpg. Ako se obraćate apsolutnom adresom slici logo.jpg ona glasi ovako
http://www.sremac.edu.rs/Primer/Slike/jpg/logo.jpg . Ovakvom adresom možemo se obratiti dokumentu
logo.jpg sa bilo koje stranice na Web-u. Ako se obraćate dokumentu Index.htm koji se nalazi u fascikli
Docs apsolutnom adresom ona će glasiti ovako http://www.sremac.edu.rs/Primer/Docs/index.htm .
Dakle, kad koristite apsolutne adrese one uvek navode punu putanju od korenske fascikle do
ciljnog fajla. U slučaju Web-a korenska fascikla se zamenjuje prvo oznakom protokola http:// a zatim i
imenom web servera/domenom Error! Hyperlink reference not valid.i na nju se dodaje putanja do fajla
sa imenom fajla na kraju.
Kada apsolutno adresiranje nije dobro? Ako premestite sajt na novi server svuda u svim
dokumentima treba promeniti prvi deo (domenski deo) adrese. Na primer ako selite www.cnti.co.yu na
adresu www.sremac.edu.rs onda je neophodno svuda u apsolutnim linkovima na svim stranicama morate
zameniti ove dve vrednosti. Ovo se relativno lako radi sa programima poput dreamweaver-a, ali ne dajte
se zavarati u pitanju je posao koji nije naivan i vrlo lako se može pogrešiti. Druga potencijalno
problematična osobina asolutnih adresa je njihova dužina koja raste sa usložnjavanjem hijerarhije i što je
adresa duža lakše je pogrešiti odnosno teže je baratati njome.
Ako želimo da referenciramo sliku logo.jpg na stranici index.htm to možemo da uradimo
referenciranjem apsolutne i relativne adrese. Videli smo da apsolutna adresa u sebe uključuje punu
putanju do fajla http://www.sremac.edu.rs/Primer/Slike/jpg/logo.jpg. Na bilo kojem fajlu u okviru
cnti.info domena pa i na celom Web-u da upotrebite u HTML kodu ovu adresu slika logo.jpg biće
ispravno referencirana. Ukoliko fajlove sajta premestimo na neki drugi server, recimo
www.sremac.co.rs gornji
link
neće
raditi
sve
dok ga
ne
zamenimo
ispravnim
(http://www.sremac.co.rs/Primer/Slike/jpg/logo.jpg).
Kako se pravi relativna adresa?
Probleme apsolutnih adresa zaobilazimo upotrebom relativnih adresa. Relativna adresa se pravi
tako što navodimo putanju od tekućeg fajla sa kojeg referenciramo do prvog zajedničkog pretka sa
fajlom na koji se referenciramo, a zatim navodimo putanju od zajedničkog pretka do fajla na koji se
referenciramo. U našem primeru, da bi referencirali sa Index.htm dokumenat logo.jpg ispravna relativna
adresa bi bila sledeća ../Slike/jpg/logo.jpg. Podsetimo da je u fascikli Docs dokumenat Index.htm, a u
fascikli jpg slika logo.jpg.
Dakle, sekvenca znakova ../ ima značenje nivo više, i već na tom nivou u našem primeru smo
stigli do prvog zajedničkog pretka naša dva fajla (fascikla Primer):
• onog koji referencira (Index.htm) i
• onog na koji se referencira (logo.jpg).
Zamislite da se fizički krećete kroz hijerarhiju: izlazimo iz fascikle Docs i nalazimo se u fascikli
Primer. Odatle prosto putujemo do dokumenta logo.jpg kroz fasciklu Slike i fasciklu jpg.
Prednost relativnog adresiranja je u tome što možete premeštati fasciklu Primer sa njenim
sadržajem koliko god hoćete, gornji relativni link će ispravno raditi dokle god se ne naruši postojeća
hijerarhija.
Napominjemo ovde da čak i prosto preimenovanje fascikle jpg narušava konzistentnost svih adresa
koje se referenciraju na sadržaj fascikle jpg pre njenog preimenovanja. Jednostavno rečeno, nemojte
menjati imena fascikli nakon što ste se linkovali na njihov sadržaj. Ovo pravilo važi iz apsolutne i za
relativne adrese ravnopravno. Ovde postoji i izuzetak, kad je u pitanju domen, sve kombinacije su
dozvoljene. Na primer, www.sremac.edu.rs i www.sremac.EDU.RS i www.SREMAC.edu.rs su iste
adrese. Uočite, ponovo napominjemo, da u nastavku putanje nakon domena nije svejedno da li su mala ili
velika slova. Da bi adresa bila ispravna moraju se identično navesti imena fascikli u putanji do odredišnog
fajla. U tom smislu adrese
• ../Slike/jpg/logo.jpg
• ../Slike/Jpg/logo.jpg
IV godina Društveno-jezički smer
5
Osnove HTML
nikako nisu iste, i na to treba obratiti pažnju od samog starta. Ovakve greške su jako teško uočljive, sa
adresama treba baratati oprezno.
Podsetimo se i proširimo svoja znanja:
HTML -je skraćeno od Hyper Text Markup Language.
HTML dokument je obična tekstualna datoteka sa tekstom i tagovima. HTML je case insensitive,
ne pravi se razlika izmeñu malih i velikih slova u HTML elementima (BODY = Body = body). Preporuka
je da koristimo mala slova.
Sadržaj dokumenta opisujemo tagovima, odn tagove koristimo da definišemo izgled dokumenta.
Svaki tag ima otvarajući tag: <ime_elementa>. Većina ih ima i zatvarajući tag: </ime_elementa>. Oni
tagovi koji nemaju zatvarajući elementa zovu se prazni tagovi. Prazan tag izgleda ovako:
<ime_elementa> a sreće se i u obliku <ime_elementa/>. Potonji zapis je praktičniji.
Da rezimiramo, tag je specijalni tekst tkz. "markup"-marker koji je ograñen sa "<" i ">". A
završni tag uključuje i znak "/" posle znaka "<". Znači sve što se nalazi u tagovima HTML dokumenta
Web čitač prihvata kao komande koje tumači a sve ostalo predstavlja klasičan tekst u ekranu Web čitača.
Elementi/tagovi ne smeju da se preklapaju tj. ukoliko se početni tag em elementa pojavljuje zajedno sa
tagom p elementa, tada završni tag em elementa mora takoñe pojaviti sa p elementom. Na primer,
neispravno bi bilo sledeće: neki tekst . U velikom broju slučajeva browser će ovo
sažvakati, ali je pitanje na šta će ličiti prikaz stranice koja sadrži gornji primer. Ispravno je sledeće
neki tekst.
U okviru otvarajućeg taga može postojati osim imena HTML elementa, i odreñeni broj atributa.
Atributi su parovi naziva atributa i vrednosti koji definišu osobine tog elementa. Atributi se uvek
uključuju u početni tag nikad u završni a sintaksa je sledeća: NazivAtributa = "VrednostAtributa".
Vrednost atributa ukoliko postoji je ograničena jednostrukim ili dvostrukim navodnicima. Uobičajeno je
da se navode dvostruki kako bi u okviru njih mogli postaviti i jednostruki. Kod atributa treba biti oprezan
sa mešanjem malih i velikih slova, jer vrednost atribut može biti i adresa, a one su osetljive na promenu
slova (case-sensitiv).
Pri prikazivanju stranica browser-i se oslanjaju na informacije date u tagovima. Praznine se
ignorišu u okviru HTML-a. Više praznina se svodi na jednu (enteri, razmaci, tabovi).
Primer atributa <body bgcolor="#FFFFFF">. Ovaj atribut kaže da će pozdinska boja ove stranice biti
bela.
Struktura HTML dokumenta
•
•
Sledeći tagovi opisuju osnovnu strukturu HTML dokumenta: html, head i body.
Tag <html> je okvir u kom se nalaze svi ostali tagovi. HTML dokument uvek počinje tagom
<html>, a završava se tagom </html>.
Tag <head> uokviruje zaglavlje u kom se nalaze informacije o samom dokumentu (naslov, opis,
ključne reči, ime autora,...); opcion je. Završni tag je </head>. Browser ne prikazuje informacije
koje se nalaze izmeñu tagova <head> i </head>, osim sadržaja taga <title> Sadržaj taga <title>
je naslov HTML dokumenta koji će se pojaviti u naslovnoj liniji web čitača. Zaglavlje služi da
prosleñuje razne informacije Web čitaču, da definiše Web dokument a ne utiče na prikaz HTML
dokumenta. U okviru HEAD elementa navode se Web čitaču sem naslova dokumenta i razne
informacije kao što je uključivanje eksternih stilova, script funkcije, informacije o samom Web
dokumentu, tj. meta informacije.
HEAD može da sadrži sledeće HTML elemente
o base- Osnovna adresa dokumenta
o link - Povezivanje dokumenata
o script - Navoñenje klijentskog skript - programskog koda koji Web čitač razume
o style - Definisanje stilova za prikaz
o title - Naslov dokumenta
o meta - Meta informacije, informacije o samom Web dokumentu, recimo karakter skup
dokumenta, ime autora, ključne reči...
IV godina Društveno-jezički smer
6
Osnove HTML
• Sve ono što vidimo u prozoru browser-a, tj. sadržaj stranice, nalazi se u telu dokumenta koje
uokviruje element <body>. U HTML dokumentu sme da postoji samo jedan par tagova
<body></body> izmeñu kojih se nalazi glavni sadržaj dokumenta. Početni tag <body> ima
atribute koji omogućavaju da se specificiraju karakteristike dokumenta (boja pozadine ili slika,
boja teksta, boja posećenih i neposećenih linkova, ...).
• <!- Ovo je komentar u HTML-u–> Komentare U HTML-u započinjemo sekvencom znakova <!(bez praznina izmeñu), a završavamo sekvencom znakova ->. Ono što se nalazi u komentaru,
browser-i potpuno ignorišu.
• Ispod se nalazi primer jedne potpuno funkcionalne HTML stranice koja će po učitavanju u
browser u njegovoj naslovnoj liniji imati ispisan tekst Hello World!, kao sadržaj stranice imaće
tekst Zdravo živahni svete! Skup karaktera upotrebljenih na ovoj stranici je sličan Unicode-u i
označava se sa utf-8 u okviru meta taga i omogućiće da se sva naša slova na ovoj html stranici
ispravno prikažu.
Primer01.html
<html>
<head>
<title>Hello World!</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"
/>
</head>
<body>
<!- Ispod se nalazi sadržaj dokumenta ->
Prvi primer HTML-a!
</body>
</html>
Obrada teksta
Pasusi teksta (paragrafi) se navode izmeñu tagova. Svi tagovi počinju u novom redu. Iza
završnog taga, prelazi se u novi red, sa dodatnim praznim prostorom izmeñu. Ukoliko treba ubaciti
praznu liniju bez dodavanja praznog prostora, koristi se tag . U okviru početnog taga može se
navesti atribut align, koji odreñuje horizontalno poravnanje paragrafa; vrednost ovog atributa može biti
jedna od sledećih: left, center, right i justify. Ukoliko se navede samo početni tag , podrazumeva se
da je sledeći element u novom redu. Završni tag je opcioni ali vam preporučujemo da ga koristite.
Primer02.html
<html>
<head>
<title>Pasusi</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"
/>
</head>
<body>
Ovo je 1. pasus.
Ovo je 2. pasus.
 
Ovo je 3. pasus ispred kog je bio jedan prazan red.
Ovo je pasus koji je desno poravnat.
Ovo je pasus koji je centriran.
</body>
</html>
Naslovi se mogu istaći korišćenjem elemenata h1, h2, h3 i h4. Tag h1 uokviruje naslov prvog
reda, koji je, prirodno, najveći, a h4 uokviruje naslov šestog reda koji je najmanji. Svaki od ovih
elemenata počinje u novom redu, a browser-i dodaju još malo praznog mesta pre zaglavlja. U okviru
zaglavlja se može navesti atribut align, koji odreñuje horizontalno poravnanje zaglavlja; vrednost ovog
atributa može biti jedna od sledećih: left, center, right.
IV godina Društveno-jezički smer
7
Osnove HTML
Primer03.html
<html>
<head>
<title>Naslovi</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"
/>
</head>
<body>
<h1>Ovo je veličina slova u zaglavlju H1</h1>
<h2>Ovo je veličina slova u zaglavlju H2</h2>
<h3>Ovo je veličina slova u zaglavlju H3</h3>
<h4>Ovo je veličina slova u zaglavlju H4</h4>
</body>
</html>
•
Za grubo razdvajanje teksta koristi se prazan tag <hr>. On dodaje jednu horizontalnu liniju
(horizontal ruler) ispred i iza koje postoji prazan red. Moguće je podesiti visinu korišćenjem
atributa size="n" (n je broj piksela), širinu pomoću atributa width="n" i poravnanje pomoću
atributa align (moguće vrednosti su left, right, center).
• Tag blockquote se često koristi za citate. Puno se koristio za uvlačenje dužih blokova teksta u
odnosu na ostatak teksta što treba izbegavati.
• Tag cite se koristi takoñe za citate i ispisuje tekst italikom.
• Tag code služi za ispis programskog koda odnosno formula kao što su matematičke formule.
• Tag pre (preformatted) obezbeñuje prikaz teksta “onako kako je unet” (svi enteri, tab-ovi i
razmaci se prikazuju kako su uneti).
Primer04.html
<html>
<head>
<title>Rad sa tekstom </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"
/>
</head>
<body>
Ovo je tekst koji je levo poravnat.
<blockquote>Ovo je deo teksta koji ce biti uvučen u odnosu na
prethodni pasus.</blockquote>
 
Ovo je 3. pasus ispred kog je bio jedan prazan red, a iza koga
će biti naveden citat.
 
<cite>Ovo ćemo posmatrati kao citat.</cite>
</body>
</html>
Ukoliko treba promeniti sam izgled teksta, koriste se sledeći elementi:
• b - za podebljan tekst, boldiranje, preporučuje se za upotrebu na jednom znaku, strong , isto kao i
b samo za više teksta
• i - za iskošen (italik) tekst, mogu se u svrhu iskošenja iskoristiti i em, def, var, cite
• u - za podvučen tekst, treba izbegavati jer je uobičajeno da je podvučen tekst link
• big - daje veći font za 1 od zadatog, small - daje manji font za 1 od zadatog,
• blink - daje tekst koji treperi, nije podržan os svih browser-a, recimo u firefox-u radi, u IE ne
radi..
Tag omogućava da se menja boja, veličina i vrsta fonta; sav tekst izmeñu početnog i
završnog taga biće prikazan sa specificiranim karakteristikama. Atributi u okviru početnog taga 
su:
• face – naziv fonta,
• color - menjanje boje (navodi se ime boje ili heksadecimalni broj koji predstavlja tu boju na RGB
skali),
• size - menjanje veličine,
• weight - debljina slova.
IV godina Društveno-jezički smer
8
Osnove HTML
Primer05.html
<html>
<head>
<title>Formatiranje teksta</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"
/>
</head>
<body>
Sledeći tekst ce prikazati upotrebu atributa za menjanje
karakteristika teksta:
Ovo je podebljan tekst.
Ovo je iskošen tekst.
Ovo je podvučen tekst.
Ovo su slova uobičajene velicine, <big>a ovo su slova za jedan
veća od uobičajenih.</big>
Ovo su slova uobičajene velicine, a ovo su slova za
manja veća od uobičajenih.
Ovo je tekst crvene boje, slova su
veličine 10.
</body>
</html>
Liste
Postoje dve vrste lista: unordered (neoznačena, neureñena) lista i ordered (nabrajanje, ureñena)
lista.
Neoznačena lista predstavlja spisak elemenata ispred kojih se nalazi bullet ili oznaka liste.
Neoznačena lista počinje tagom <ul> (Unordered List). Elementi liste se označavaju tagom <li> (List
Item).
Ako se umesto taga <ul> koristi element <ol>, dobija se brojna lista (Ordered List), odnosno
spisak elemenata sa rednim brojevima. Početni broj ureñene liste se može zadati atributom start.
Primer06.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<title>Uredjena lista</title>
</head>
<body>
Primer ureñene liste:
<ol>
<li>Azijske države:</li>
<li>Evropske države</li>
</ol>
Primer neureñene liste:
<ul>
<li>Srbija </li>
<li>Francuska</li>
<li>Nemačka </li>
</ul>
Primer kombinacije ureñene i neureñene liste. Svaka stavka
ureñene liste ima kao podlistu neureñenu listu. Ureñena lista
počinje rednim brojem 3 što je obezbeñeno atributom start i njemu
dodeljenom vrednošću 3. Ukoliko se ovaj atribut ne navede lista
počinje brojem jedan. Stavka Mongolija je boldirana, a stavka
Srbija je boldirana i italik. 
<ol start="3">
<li>Azijske države:
<ul>
<li>Kina</li>
<li>Mongolija</li>
IV godina Društveno-jezički smer
9
Osnove HTML
<li>Singapur</li>
</ul>
</li>
<li>Evropske države:
<ul>
<li>Srbija </li>
<li>Francuska</li>
<li>Nemačka </li>
</ul>
</li>
</ol>
</body>
</html>
Rad sa slikama....
Primer dobre prakse je da sve slike grupišemo u jednu fasciklu, nazovimo je Slike i smestimo je u
fascikli Primeri. Ukoliko ste pratili preporuke, to je na adresi c:\wamp\www\Primeri. Puna putanja do
naše fascikle Slike tada glasi c:\wamp\www\Primeri\Slike\.
U fascikli Slike smestite jednu sliku i nazovite je SlikaLeviBaner.jpg. Napravimo malu analizu
o adresama na ovom konkretnom primeru pre nego opišemo tag img.
• Apsolutna adresa ove slike SlikaLeviBaner.jpg iz fascikle Slike glasi ovako:
http://localhost/Primeri/Slike/SlikaLeviBaner.jpg.
• Relativna adresa slike SlikaLeviBaner.jpg zavisi od lokacije dokumenta u kome se
referenciramo na ovu sliku. U ovom našem konkretnom slučaju, mi ćemo pozivati ovu sliku iz
dokumenta Primer07.html koji se nalazi u fascikli Primeri, dakle na istoj lokaciji na kojoj se
nalazi i fascikla Slike pa relativna adresa glasi ovako Slike/SlikaLeviBaner.jpg. Podsetimo se:
browser je zapravo interpretator HTML koda. Učitava ga liniju po liniju i interpretirajući HTML
tagove formatira web stranu. Kada bi browser naleteo na prethodnu relativnu adresu, u slobodnoj
intrepretaciji, on bi je pročitao kao:
pogledaj u fascikli Slike koja se nalazi pored Primer07.html dokumenta da li u njoj ima slika po
imenu SlikaLeviBaner.jpg
Vratimo se tagu img kojim definišemo sliku koja će se pojaviti u HTML dokumentu. Atribut src
(source-izvor) sadrži ime slike koja treba da se nañe u dokumentu, odnosno putanju do te slike dok
atribut alt (alternate text -Alternativni tekst) sadrži tekst koji će biti ispisan na mestu slike, ukoliko se ona
iz nekog razloga nije uspešno učitala na web stranicu. Dimenzije slike se zadaju preko atributa height visina i width - širina. Slika može biti poravnata u odnosu na ostatak teksta u dokumentu, a željena
vrednost se daje u artibutu align koji može uzeti vrednosti left, right, centerodnosno levo, desno i
centrirano u zadatom redosledu. Debljina ivice slike se zadaje u atributom border (okvir). Napravite
Primer07.html i snimite ga u fasciklu Primeri koristeći sledeći HTML kod:
Primer07.html
<html>
<head>
<title>Slike</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
</head>
<body>
 <img src="F:\Web\html\slika.gif" alt="Snoopy" width="147"
height="56" border="1" />
 Iznad se nalazi slika koja se neće prikazati, sem u slučaju da
posedujete F disk, na F disku prisutne fsciklu Web u njoj fasciklu
html u kojoj se konačno nalazi slika.gif. Ukoliko se ispostavi da
posedujete F disk sa identičnom putanjom sa navedenom slikom,
molim Vas da se javite, trebalo bi da u tom slučaju uplatimo
zajedno jedan loto tiket. 
IV godina Društveno-jezički smer
10
Osnove HTML
Pošto browser nije uspeo da nañe sliku, slika ne može biti
učitana pa će se umesto slike prikazati u okvir predviñenih
dimenzija (147x56) ovičen linijom debljine 1 i u njemu ispisan
alternativni tekst (Snoopy). 
<img src="Slike/SlikaLeviBaner.jpg" alt="LogoRelativnaAdresa"
width="400" height="100" align="left" />
Ako ste uradili sve kako je navedeno gore, iznad ovog teksta
pojaviće se Vaša slika SlikaLeviBaner.jpg veličine 400x100
poravnata uz levu ivicu prozora. Ovaj tekst bi trebao da se
nastavlja sa desne strane slike.
<img src="http://localhost/Primeri/Slike/SlikaLeviBaner.jpg"
alt="LogoApsolutnaAdresa" width="400" height="100" align="right"
border="3" />
 Ako ste uradili sve kako je navedeno gore, iznad ovog teksta
pojaviće se Vaša slika SlikaLeviBaner.jpg veličine 400x100
poravnata uz desnu ivicu prozora sa okvirom debljine 3. Ovaj tekst
bi trebao da se prethodi slici sa njene leve strane.
</body>
</html>
Linkovi
Linkovi predstavljaju jednu od bitnih razlika izmeñu teksta i hiperteksta jer omogućavaju da se
krećemo kroz stranice nesekvencijalno već prema želji. U žargonu obično se kaže posetiti link, a ako to
prevedemo u jezik pokreta i akcija to znači kliknuti mišem na ponuñeni link da bismo prešli na željeni
resurs na koji link "cilja". Linkovi mogu da ukazuju na:
• drugi dokument,
• drugi deo unutar istog ili drugog dokumenta,
• bilo koji resurs (nije obavezno HTML datoteka ili deo u okviru ove datoteke). Na primer to može
bit arhiva (.zip,.rar), .pdf, .doc, .xls, .php dokumenti odnosno bilo koji resurs koji je dozvoljen na
datom domenu.
Odredišni objekat se identifikuje uz pomoć mehanizma URI (Uniform Resource Identifiers). URL
(Uniform Resource Locator) je podskup URI, i služi za lociranje nekog resursa na Internetu, i sledećeg je
oblika: protokol://računar:port/putanja/datoteka
Pošto smo u nekoliko navrata pričali o adresama, o apsolutnim i realtivnim adresama nećemo ponovo
ovde govoriti.U Primeru08.html navedenom ispod možete videti kako se prave linkovi. Početni tag sadrži
slovo a (anchor) i href atribut koji je obavezan i čija je vrednost apsolutna ili relativna adresa nekog
resursa. Nakon početnog taga ide takozvano telo linka, odnosno objekat za koji se vezuje link. Najčešće je
to tekst ili slika. Na kraju ide obavezno zatvarajući </a> tag.
Primer08.html
<html>
<head>
<title>Linkovi</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
</head>
<body>
<h1>Linkovi</h1>
 Ovaj primer sadrži <a href="Primer07.html">link ka stranici
Primer07</a>, u pitanju je relativna putanja na prethodni primer.

 Ovaj primer sadrži <a href="http://www.google.com">link ka
stranici Google Search </a>, sa apsolutnom adresom početne
stranice Google-a. 
</body>
</html>
Imenovana sidra su mesta u dokumentu na koja možete "skočiti" kad kliknete neki link sidra. Vrlo
čest primer je sidra link koji ste sigurno koristili na Web-u, imenuje se obično sa Top ili Vrh, pa kad
kliknete na njega browser Vas prebaci na početak stranice. Sidra su zgodna kod "dugačkih " web stranica,
IV godina Društveno-jezički smer
11
Osnove HTML
jer pomoću njih možete "skakati" po dokumentu, što će korisnici izuzetno ceniti na vašim stranicama sa
puno materijala. Skrolovati mišem kroz "dugačke" stranice zna biti vrlo naporno.
Sidra se prave na sledeći način: Prvo se izabere mesto u dokumentu za koje želimo da bude
"mesto doskoka" uslovno rečeno. Na tom mestu dodajemo početni tag koji sadrži slovo a (anchor) i
umesto href atributa sadrži atribut name. Vrednost name atributa treba da imenom da asocira na mesto
"doskoka" u dokumentu, na primer vrh_stranice, dno_stranice,.... zatim ide standardno telo linka,
odnosno sidra, i na kraju zatvarajući </a> tag. Ovako se postavljaju sidra. Ali kako se koriste ova
postavljena sidra? Jednostavno se negde u dokumentu na mestu sa kojeg želimo skok na sidro postavi
jedan link sa atributom href čija je vrednost ime sidra na koje treba skočiti predvoñeno sa tarabom.
Primer09.html
<html>
<head>
<title>Imenovan sidra </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
</head>
<body >
<h1>Označavanje delova dokumenata</h1>

<a name="vrh_stranice">Ovaj pasus obeležen je imenom
vrh_stranice, odnosno za njega je vezano sidro
vrh_stranice. Ceo ovaj pasus je telo sidra. </a>
Ovo je <a href="#dno_stranice">link</a> ka sidru koje se nalazi na
dnu ove stranice. 
Neki pasus - tekst
Neki pasus - tekst
... Da bi bilo očiglednije kako rade sidra, treba iskopirati na
ovom mestu bar 30tak redova.
Neki pasus - tekst
Ovde to nije urañeno samo zbog prostora, ali vi kad budete pravili
ovaj primer uradite to.
Neki pasus - tekst
Neki pasus - tekst
<a name="dno_stranice">Ovaj tekst je obeležen je imenom
dno_stranice, odnosno za njega je vezano sidro
dno_stranice.</a>
Ovo je <a href="#vrh_stranice">link</a> ka sidru vrh_stranice koje
se nalazi na vrhu stranice. Kad ga kliknete trebalo bi da Vas
browser pomeri na mesto u dokumentu gde se nalazi ovo sidro, tj.
na vrh stranice...
</body>
</html>
Tabele
Tabele se sastoje od vrsta i kolona. U HTML-u tabela se sastoji od redova koji su podeljeni na
polja, a prva polja svih redova čine prvu kolonu, druga polja drugu kolonu, itd. Za kreiranje tabele
potrebna su tri taga:
• table - za tabelu,
• tr - za red,
• td - za polje.
Pomoću taga th definišu se zaglavlja vrsta ili kolona. U okviru početnog taga <table>, moguće je
definisati poravnanje tabele u dokumentu (atribut align, koji može imati vrednosti left ili right), debljinu
ivice tabele (atribut border) i boju pozadine (atribut bgcolor), s’tim što svaka ćelija tabele može imati i
svoju boju. Za svaku ćeliju se može definisati koliko će obuhvatiti kolona ili vrsta, pomoću atributa
colspan i rowspan. Atribut cellspacing definiše rastojanje izmeñu ćelija u tabeli, a atribut cellpadding
definiše rastojanje od ivice do sadržaja ćelije.
Tag <tr> (Table Row) definiše vrste u tabeli. Tag <tr> sadrži tagove <th> (Table Heading), koji
IV godina Društveno-jezički smer
12
Osnove HTML
odreñuju zaglavlje tabele, i tagove <td> (Table Data) koji predstavljaju ćelije u tabeli. U tagu <tr> mogu
se nalaziti sledeći atributi:
1. align - horizontalno poravnanje tabele (center, left, right),
2. valign - vertikalno poravnanje sadržaja u ćeliji (basline, bottom, middle, top),
3. bgcolor - boja pozadine.
Element caption definiše naslov tabele. Tag <caption> se koristi unutar taga <table>, a ne unutar
tagova <td> ili <tr>. Atribut align specificira mesto naslova u odnosu na tabelu, a moguće vrednosti su
mu bottom (naslov će biti ispod tabele) i top (naslov će biti iznad tabele).
Primer10.html
<html>
<head>
<title>Tabela</title>
</head>
<body>
<table border="1" cellpadding="8" cellspacing="4"
bgcolor="yellow">
<tr>
<th> English </th>
<th> Spanish </th>
<th> German </th>
</tr>
<tr>
<td>one</td><td>uno</td><td>ein</td>
</tr>
<tr>
<td>two</td><td>dos</td><td>zwei</td>
</tr>
<tr>
<td>three</td><td>tres</td><td>drei</td>
</tr>
<caption align="bottom"> tabela 1: brojanje na raznim
jezicima</caption>
</table>
</body>
</html>
IV godina Društveno-jezički smer
13

Download Report