HTML

1.
Uvod u HTML
1.1. Šta je HTML fajl?
HTML je skraćenica za Hyper Text Markup Language (Hipertekstualni markerski jezik)
HTML fajl je tekstualni fajl koji sadrži tagove za markiranje
Tagovi za markiranje kažu Web browser-u kako da prikaže stranicu
HTML fajl mora da ima .htm ili .html ekstenziju
HTML fajl može da se kreira pomoću jednostavnog tekst editora (npr. Notepad)
1.2. Jednostavan primer

Pokrenite Notepad. Otkucajte sledeći tekst:
Primer 1.1
<html>
<head>
<title>Naslov stranice</title>
</head>
<body>
Ovo je moja prva stranica. <b>Ovaj tekst je bold</b>
</body>
</html>
Sačuvajte tekst kao "mypage.htm". Pokrenite Internet Explorer. U File meniju izaberite komandu Open. U
dijalogu koji se pojavio izaberite Browse i pronađite fajl koji ste upravo kreirali. Selektujte ga i kliknite na
dugme Open. Kliknite dugme Open. Stranica je otvorena.
1.3. Objašnjenje primera

Prvi tag u vašem HTML dokumentu je <html>. Ovaj tag govori vašem browser-u da je ovo početak
HTML dokumenta. Poslednji tag u vašem dokumentu je </html>. Ovaj tag govori vašem browser-u da
je ovo kraj HTML dokumenta.
Tekst između taga <head> i taga </head> je informacija o zaglavlju. Informacija o zaglavlju se ne
prikazuje u prozoru browser-a.
Tekst između tagova <title> i </title> je naslov vašeg dokumenta. Naslov se prikazuje u liniji
naslova browser-a.
Tekst između tagova <body> i </body> je tekst koji će se prikazati u vašem browser-u.
Tekst između tagova <b> i </b> će biti prikazan podebljanim slovima (bold).
1.4. Ekstenzija HTM ili HTML?

Kad sačuvate HTML fajl, možete da koristite .htm ili .html ekstenziju. U našem primeru smo koristili
.htm. Ovo je loša navika iz prošlosti kada je softver dozvoljavao samo korišćenje ekstenzija od tri slova.
Sa savremenim softverom je bezbedno korišćenje ekstenzije .html.
HTML 1
1.5. Primedba o HTML editorima:
Vi možete da jednostavno pišete HTML fajlove korišćenje WYSIWYG (what you see is what you get –
ono što vidiš je ono što dobijaš) editora kao što je FrontPage, Claris Home Page ili Adobe PageMill
umesto pisanja tagova u jednostavnom tekst editoru.
Ali, ako želite da zaista naučite Web dizajn, strogo preporučujemo da za početak učenja HTML-a koristite
jednostavni tekst editor.
2. HTML elementi
HTML dokumenti su tekstualni fajlovi koji su sastavljeni od HTML elemenata.
HTML elementi se definisu koristeći HTML tagove.
2.1. HTML tagovi

HTML tagovi se koriste da se obeleže HTML elementi.
HTML tagovi su oivičeni karakterima < i > (angle brackets).
HTML tagovi se obično pojavljuju u parovima (npr. <b> i </b>).
Prvi tag je početni tag, drugi je završni tag.
Tekst između početnog i završnog taga je sadržaj elementa.
HTML tagovi nisu case sensitive, <b> ima isto značenje kao <B>
2.2. HTML Elementi

Posmatramo prethodni primer (Error! Reference source not found..
Ovo je jedan HTML element:
<b>Ovaj tekst je bold</b>
HTML element počinje početnim tagom: <b>. Sadržaj HTML elementa je: Ovaj tekst je bold.
HTML element se završava završnim tagom: </b>.
Svrha taga <b> je da definiše HTML element koji treba da se prikaže bold.
Ovo je takođe HTML element:
<body>
Ovo je moja prva stranica. <b>Ovaj tekst je bold</b>
</body>
Ovaj HTML element počinje početnim tagom <body>, i završava se završnim tagom </body>.
Svrha taga <body> je da definiše HTML element koji sadrži telo HTML dokumenta.
2.3. Atributi tagova

Tagovi mogu da imaju atribute. Atributi mogu da obezbede dodatne informacije o HTML elementima.
Element body se definiše pomoću taga <body>. Pomoću atributa bgcolor može se definisati da boja
pozadine bude crvena, na sledeći način: <body bgcolor="red">.
Element table (tabela) se definiše pomoću taga <table>. Pomoću atributa border, može se zadati
da tabela nema ivice, na sledeći način: <table border="0">
Atributi uvek dolaze u parovima ime/vrednost, na sledeći način: ime="vrednost".
Atributi se uvek dodaju početnom tagu HTML elementa.
HTML 2
2.4. Stil navodnika, "red" or 'red'?
Vrednosti atributa uvek moraju da se javljaju pod navodnicima. Obično su to “ “ navodnici, ali je i ’ ’
dozvoljeno.
U nekim retkim situacijama, kao što je kad vrednost atributa već sadrži navodnike “ “ , Neophodno je da
se koriste navodnici ’ ’:
name='John "ShotGun" Nelson'
3. Osnovni HTML tagovi

Najvažniji tagovu u HTML-u su tagovi koji definišu naslove, paragrafe i novi red.
3.1. Naslovi
Naslovi se definisu pomoću tagova <h1> do <h6>. <h1> definiše najkrupniji naslov. <h6> definiše
najsitniji naslov.
<h1> Ovo je naslov </h1>
HTML automatski dodaje dodatni prazan red pre i posle naslova.
3.2. Paragrafi
Paragrafi se definišu pomoću taga <p>.
<p>Ovo je paragraf.</p>
<p>Ovo je jos jedan paragraf</p>
HTML automatski dodaje dodatan prazan red pre i posle paragrafa.
3.3. Novi red

Tag <br> se koristi kad želimo novi red, ali ne i novi paragraf.
<p>Ovo <br> je pare<br>graf sa novim redovima</p>
Tag <br> je prazan tag. On nema završni tag.
3.4. Komentari u HTML-u

Tag za komentare se koristi da bi se umetnuli komentari u HTML kod. Browser ignoriše komentare.
Komentari se koriste da bi se objasnio kod, da bi kasnije mogao da se edituje.
<!—- Ovo je komentar -->
3.5. Korisni saveti
HTML 3
Kad pišete HTML tekst, nikad niste sigurni kako će da bude prikazan u nekom drugom Browser-u. Neki
ljudi imaju male displeje, a neki velike. Tekst se reformatira i svaki put kad korisnik promeni veličinu
prozora. Nikada ne formatirajte tekst dodavanjem razmaka i praznih linija.
HTML uvek odseca razmake u vašem tekstu. Uvek ignoriše sve razmake, osim prvog. U HTML-u se novi
red računa kao jedno prazno mesto, tako da će i veći broj praznih linija da bude ignorisan.
Korišćenje praznih paragrafa <p> da se umetne prazna linija i loša navika. Umesto toga, koristite tag
<br>. (Ali, nemojte da koristite tag <br> za kreiranje lista, jer za te potrebe postoji poseban tag).
Možda ste primetili da paregrafi mogu da se pišu bez završnog taga. Ne oslanjajte se na to. Naredna
verzija HTML-a neće da dozvoljava elemente bez završnih tagova.
HTML automatski dodaje prazne linije pre i posle nekih elemenata, kao što su paragrafi i naslovi.
Za razdvajanje delova teksta mogu da se koriste i horizontalne linije (<hr> tag).
3.6. Primeri
Primer 3.1 Osnovno ponašanje elemenata paragrafa.
<html>
<body>
<p>
Ovaj paragraf
sadrzi puno linija
u izvornom kodu,
Ali ih browser
ignorise.
</p>
<p>
Ovaj paragraf sadrzi puno razmaka
u izvornom kodu,
ali ih browser
ignorise.
</p>
<p>
Broj linija u paragrafu zavisi od velicine prozora vaseg browser/a. Ako promenite
velicinu prozora browser-a, broj linija ovog paragrafa ce se promeniti.
</p>
</body>
</html>
Primer 3.2 Koriščenje taga <br>,

<html>
<body>
<p>
Da bi ubacili<br>novi red<br>u<br>paragraf,<br>koristite br tag.
</p>
HTML 4
</body>
</html>
Primer 3.3 Problemi kod formatiranja HTML-a

<html>
<body>
<p>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</p>
<p>Primetite da browser jednostavno ignorise vase formatiranje!</p>
</body>
</html>
Primer 3.4 Naslovi

<html>
<body>
<h1>Ovo je naslov 1</h1>
<p>Koristite h tagove samo za naslove. Ne koristite ih za podebljavanje teksta. Za to
postoji drugi tag.</p>
</body>
</html>
Primer 3.5 centriranje naslova

<html>
<body>
<h1 align="center">Ovo je naslov 1</h1>
<p>Naslov je centriran. Naslov je centriran. Naslov je centriran. Naslov je centriran.
Naslov je centriran.</p>
</body>
</html>
Primer 3.6 Ubacivanje horizontalne linije

<html>
<body>
HTML 5
<p>hr tag definise horizontalnu liniju:</p>
<hr>
<p>ovo je paragraf</p>
<hr>
<hr>
</body>
</html>
Primer 3.7 Sakriveni komentari

<html>
<body>

<p>Ovo je regularan paragraf</p>
</body>
</html>
Primer 3.8 Dodavanje boje pozadini

<html>
<body bgcolor="yellow">
<h2>Vidite: Zuta pozadina!</h2>
</body>
</html>
4. HTML formatiranje teksta

4.1. Tagovi za formatiranje teksta
Tag Opis
<b> Definiše bold (podebljan) tekst
<big> Definiše big (krupan) tekst
<em> Definiše emphasized (naglašen) tekst
<i> Definiše italic (iskošen) tekst
<small> Definiše small (sitan) tekst
<strong> Definiše strong tekst
<sub> Definiše subscripted tekst (indekse)
<sup> Definiše superscripted tekst (eksponente)
<ins> Definiše inserted (umetnut) tekst
<del> Definiše deleted (obrisan) tekst
HTML 6
4.2. "Computer Output" tagovi
Tag Opis
<code> Definiše definise kompjuterski kod
<kbd> Definiše tekst sa tastature
<samp> Definiše primer compjuterskog koda
<tt> Definiše teletype tekst
<var> Definiše promenljivu
<pre> Definiše preformatiran tekst
4.3. Tagovi za citate, navođenje i definicije

Tag Opis
<abbr> Definiše skraćenicu
<acronym> Definiše acronym (mnemoničku skraćenicu)
<address> Definiše element adrese
<bdo> Definiše smer teksta (za arapsko pismo)
<blockquote> Definiše dugo navođenje
<q> Definiše kratko navođenje
<cite> Definiše citat
<dfn> Definiše definiciju
4.4. Primeri
Primer 4.1 Formatiranje teksta
<html>
<body>
<b>Ovaj tekst je bold</b>
<br>
<strong>
Ovaj tekst je strong
</strong>
<br>
<big>
Ovaj tekst je big
</big>
<br>
<em>
Ovaj tekst je emphasized
</em>
<br>
<i>
Ovaj tekst je italic
</i>
HTML 7
<br>
<small>
This text is small
</small>
<br>
Ovaj tekst sadrzi <sub>
subscript
</sub>
<br>
Ovaj tekst sadrzi <sup>
superscript
</sup>
</body>
</html>
Primer 4.2 Kontrolisanje formatiranja paragrafa pomoću pre taga

<html>
<body>
<pre>
Ovo je
preformatiran tekst.
Na ovaj nacin se cuvaju
razmaci i prelazak u novi red.
</pre>
<p>tag pre je dobar za prikazivanje kompjuterskog koda:</p>
<pre>
for i = 1 to 10
print i
next i
</pre>
</body>
</html>
Primer 4.3 Computer output

<html>
<body>
<code>Computer code</code>
<br>
<kbd>Ulaz sa tastature</kbd>
<br>
<tt>Teletype text</tt>
<br>
HTML 8
<samp>Primer</samp>
<br>
<var>Compjuterska promenljiva</var>
<br>
<p>
<b>Note:</b> Ovi tagovi se cesto koriste za prikazivanje kompjuterskog koda.
</p>
</body>
</html>
Primer 4.4 Skraćenice i mnemonici

<html>
<body>
<abbr title="United Nations">UN</abbr>
<br>
<acronym title="World Wide Web">WWW</acronym>
<p>Atribut title se koristi da bi se prikazao pun naziv kad se strelica postavi preko
skracenice ili mnemonika.</p>
<p>U IE 5. ovo radi samo za mnemonik.</p>
<p>U Netscape 6.2 ovo radi za oba elementa.</p>
</body>
</html>
Primer 4.5 Navodjenje

<html>
<body>
Ovo je dugo navodjenje:
<blockquote>
Ovo je dugo navodjenje.Ovo je dugo navodjenje.Ovo je dugo navodjenje.Ovo je dugo
navodjenje.Ovo je dugo navodjenje.
</blockquote>
Ovo je kratko navodjenje:<q>
Ovo je kratko navodjenje
</q>
<p>
Kad se koristi dugo navodjenje, browser umece novi red i margine. Kratko navodjenje se ne
formatira posebno.
</p>
</body>
</html>
HTML 9
5. HTML znakovni entiteti
5.1. Znakovni entiteti
Neki znakovi, kao što je znak <, imaju posebno značenje u HTML-u, i zbog toga ne mogu da se koriste u
tekstu. Da bi prikazali znak < u HTML-u, moramo da koristimo znakovni entitet.
Znakovni entitet ima tri dela: znak &, ime entiteta ili znak # i broj entiteta, i konačno znak ; .
Da bi u HTML-u prikazali znak < pišemo: < ili <
Prednost korišćenja imena umesto broja je u tome što se ime lakše pamti. Mana je da svi browser-i ne
podržavaju najnovija imena za entitete, dok skoro svi podržavaju brojeve.
Svi entiteti su case sensitive.
5.2. Razmak koji se ne ignoriše

Najčešći znakovni entitet u HTML-u je razmak koji se ne ignoriše (non-breaking space).
Normalno, HTML izbacuje višak razmaka iz vašeg dokumenta. Ako napišete 10 razmaka, izbaciće 9. Da
bi dodali dodatni razmak, koristite znakovni entitet .
5.3. Najčešći znakovni entiteti:

Rezultat Opis Ime entiteta Broj entiteta
razmak
< manje < <
> veće > >
& ampersand & &
" navodnik " "
' apostrof ' (ne radi u IE) '
6. HTML linkovi
HTML koristi hyperlink-ove da bi se dokument povezao sa drugim dokumentima na Web-u.
6.1. Početni primeri

Primer 6.1 Kreiranje linka u HTML dokumentu
<html>
<body>
<p>
<a href="lastpage.htm">
Ovaj tekst</a> je link na stranu koja se nalazi na istoj Web lokaciji.
</p>
<p>
<a href="http://www.microsoft.com/">
Ovaj tekst</a> je link na stranu na World Wide Web-u.
HTML 10
</p>
</body>
</html>
Primer 6.2 Korišćenje slike kao linka

<html>
<body>
<p>
Mozete da koristite i sliku kao link<a href="lastpage.htm">
<img border="0" src="buttonnext.gif" width="65" height="38">
</a>
</p>
</body>
</html>
6.2. Tag anchor i atribut href

HTML koristi tag <a> (anchor, veza) da bi kreirao link ka drugom dokumentu.
Veza može da ukazuje na bilo koji resurs na Web-u: HTML stranu, sliku, zvučni fajl, film....
Sintaksa za kreiranje veze:
<a href="url">Tekst koji se prikazuje</a>
Tag <a> se koristi za kreiranje veze, pomoću atributa href se zadaje adresa dokumenta sa kojim treba da
se poveže a reči između otvorenog i zatvorenog taga se prikazuju kao hyperlink.
Veza koja definiše link sa našom stranicom:
<a href="http://es.elfak.ni.ac.yu/iw/">IW stranica!</a>
Prethodna linija izgleda ovako u browser-u:
IW stranica!
6.3. Atribut target

Pomoću atributa target možete da definišete gde će linkovani dokument da bude otvoren.Sledeća linija će
otvoriti dokument u novom prozoru browser-a:
<a href=" http://es.elfak.ni.ac.yu/iw/"
target="_blank"> IW stranica!</a>
6.4. Tag anchor i atribut name

Atribut name se koristi za kreiranje imenovane veze. Korišćenjem imenovanog atributa možemo da
kreiramo linkove koji skaču direktno na označeni deo strane, umesto da skrolujemo do njega. Sledeća
sintaksa se koristi za imenovanu vezu:
<a name="labela">Tekst koji se prikazuje</a>
HTML 11
Atribut name se koristi za kreiranje imenovane veze. Ime veze može da bude bilo koji tekst. Sledeća linija
definiše imenovanu vezu:
<a name="saveti">Sekcija sa korisnim savetima</a>
Primetite da se imenovana veza ne prikazuje na specijalan način. Da bi se linkovali direktno na sekciju

saveti, na kraj URL-a dodajeme znak # i ime veze, na sledeći način:
<a href=" http://es.elfak.ni.ac.yu/iw/#saveti">
Skoči na sekciju korisni saveti</a>
Hiperlink na sekciju korisni saveti koja se nalazi u istom html dokumentu bi izgledao ovako:
<a href="#saveti">Skoči na sekciju sa pametnim savetima</a>
6.5. Korisni saveti

Uvek dodajte kosu crtu na kraju reference. Ako vaš link izgleda ovako:
href="http://www.w3schools.com/html", generisaćete dva HTTP zahteva serveru, zbog toga što će server
da doda kosu crtu i da kreira novi zahtev koji izgleda ovako: href="http://www.w3schools.com/html/"
Imenovane veze (named anchors) se često koristi za kreiranja sadržaja na početku velikog dokumenta.
Svakom poglavlju u dokumentu se zada imenovana veza, a linkovi na te veze se stave na početak
dokumenta.
Ako browser ne može da nađe imenovanu vezu koji ste naveli, vraća se na vrh stranice. Pri tom ne nastaje
greška.
6.6. Još primera
Primer 6.3 Otvaranje stranice u novom prozoru

<html>
<body>
<a href="lastpage.htm" target="_blank">Last Page</a>
<p>
Ako atribut target postavite na vrednost "_blank",
link ce se otvoriti u novom prozoru.
</p>
</body>
</html>
Primer 6.4 Korišćenje linka da bi se skočilo na neki deo dokumenta

<html>
<body>
<p>
<a href="#C4">Takodje pogledajte Chapter 4.</a>
</p>
<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>
HTML 12
<h2>Chapter 2</h2>
<h2>Chapter 3</h2>
<h2><a name="C4">Chapter 4</a></h2>
<h2>Chapter 5</h2>
<h2>Chapter 6</h2>
<h2>Chapter 7</h2>
</body>
</html>
Primer 6.5 Izlazak iz frejma

<html>
<body>
<p>Zaglavljeni u frejmu?</p>
<a href="http://es.elfak.ni.ac.yu/iw/iw.htm"
target="_top">Klikni ovde!</a>
</body>
</html>
Primer 6.6 Povezivanje mail poruke (radi samo ako je mail instaliran)
<html>
<body>
<p>
Ovo je mail link:
<a href="mailto:neko@microsoft.com?subject=Zdravo%20ponovo">
Posalji Mail</a>
</p>
<p>
<b>Primedba:</b> Razmaci medju recima se zamenjuju sa %20 da bi <b>bili sigurni</b> da ce
browser da vas tekst prikaze ispravno</p>
</body>
</html>
Primer 6.7 Primer komplikovanijeg povezivanja mail poruke

<html>
<body>
HTML 13
<p>
Ovo je drugi mail link:
<a
href="mailto:neko@microsoft.com?cc=nekodrugi@microsoft.com&bcc=ijosneko@microsoft.com&sub
ject=Letnja%20zurka&body=Vi%20ste%20pozvani%20na%20veliku%20letnju%20zurku!">Posalji
postu!</a>
</p>
<p>
<b>Primedba:</b> Razmaci izmedju reci treba da budu zamenjeni sa %20 da bi <b>bili
sigurni</b> da ce browser da pravilno prikaze tekst.
</p>
</body>
</html>
7. HTML okviri
Uz pomoć okvira moguć je prikaz više Web stranica u jednom prozoru.
7.1. Primeri
Primer 7.1 vertikalna podela sa tri razlicita dokumenta

<html>
<frameset cols="25%,50%,25%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
<frame src="frame_c.htm">
</frameset>
</html>
Primer 7.2 Horizontalna podela sa tri različita dokumenta

<html>
<frameset rows="25%,50%,25%">
</frameset>
</html>
Primer 7.3 Korišćenje <noframes> taga.

<html>
<frameset cols="25%,50%,25%">
HTML 14
<noframes>
<body>Vas browser ne podrzava rad sa okvirima</body>
</noframes>
</frameset>
</html>
7.2. Okviri
Uz pomoć okvira moguć je prikaz više Web stranica u jednom prozoru. Svaki HTML document se zove
okvir i nezavisan je od drugih okvira.
Mane korišćenja okvira su:
• potrebno je voditi računa o više HTML documenata
• teško je otštampati celu Web stranicu
7.3. Tag frameset

Tag <frameset> definiše kako se prozor deli u okvire.
Svaki frameset definiše skup vrsta ili kolona.
Vrednosti atributa rows/columns zadaju deo prozora koji vrsta/kolona zauzima.
7.4. Tag frame

Tag <frame> definiše koji HTML dokument treba da se stavi u okvir.
U narednom primeru imamo okvire u dve kolone. Prva kolona je podešena na 25% od širine prozora
browser-a. Druga kolona je podešena na 75% od širine prozora browser-a. HTML dokument
"frame_a.htm" je stavljen u prvu kolonu, a HTML dokument "frame_b.htm" je stavljen u drugu kolonu:
<frameset cols="25%,75%">
</frameset>
7.5. Korisni saveti

Ako okvir ima vidljive ivice, korisnik može da mu promeni dimenzije prevlačenjem ivice. Da bi ovo
sprečili, možete da dodate atribut noresize="noresize" tagu <frame> .
Dodajte tag <noframes> za browser-e koji ne podržavaju okvire.
7.6. Još primera
Primer 7.4 Dokument sa tri okvira, sa definisanim vrstama i kolonama

<html>
<frameset rows="50%,50%">
HTML 15
</frameset>
</frameset>
</html>
Primer 7.5 Korišćenje atributa noresize

<html>
<frameset rows="50%,50%">
<frame noresize="noresize" src="frame_a.htm">
<frame noresize="noresize" src="frame_b.htm">
<frame noresize="noresize" src="frame_c.htm">
</frameset>
</frameset>
</html>
Primer 7.6 kreiranje okvira za navigaciju.

(Okvir za navigaciju sadrži listu linkova čiji je cilj drugi okvir. Fajl koji se zove "tryhtml_contents.htm"
sadrži tri linka. Odgovarajući kod za ovo je: <a href ="frame_a.htm" target ="showframe">Frame
a</a><br> <a href ="frame_b.htm" target ="showframe">Frame b</a><br> <a href ="frame_c.htm"
target ="showframe">Frame c</a> Drugi okvir će pokazati izabran dokument).
<html>
<frameset cols="120,*">
<frame src="tryhtml_contents.htm">
<frame src="frame_a.htm"
name="showframe">
</frameset>
</html>
Primer 7.7 Kreiranje inline okvira

<html>
<body>
<iframe src="http://es.elfak.ni.ac.yu/iw/iw.htm"></iframe>
<p>Neki stariji browser-i ne podrzavaju iframe.</p>
<p>Ako ne podrzavaju, iframe nece da bude vidljiv.</p>
</body>
</html>
Primer 7.8 Skok na specificiranu sekciju. Jedan od njih za izvor ima specificiranu sekciju u fajlu.
Specificirana sekcija se kreira pomoću <a name="C10"> u fajlu "link.htm".
<html>
HTML 16
<frame src="link.htm#C10">
</frameset>
</html>
Primer 7.9 Skok na specificiranu sekciju sa navigacijom. Okvir za navigaciju (content.htm) sadrži
listu linkova na sekcije unutar drugog okvira (link.htm). HTML kod fajla content.htm izgleda
ovako: <a href ="link.htm" target ="showframe">Link without Anchor</a><br><a href
="link.htm#C10" target ="showframe">Link with Anchor</a>.
<html>
<frameset cols="180,*">
<frame src="content.htm">
<frame src="link.htm" name="showframe">
</frameset>
</html>
8. HTML tabele
8.1. Primeri
Primer 8.1 Kreiranje tabele

<html>
<body>
<p>
Svaka tabela pocinje tagom table.
Svaka vrsta pocinje tagom tr.
Svaki podatak pocinje tagom td.
</p>
<h4>Jedna kolona:</h4>
<table border="1">
<tr>
<td>100</td>
</tr>
</table>
<h4>Jedna vrsta i tri kolone:</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
HTML 17
</table>
<h4>Dve vrste i tri kolone:</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>
Primer 8.2 Različiti okviri tabela

<html>
<body>
<h4>Sa normalnim okvirom:</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>Sa debelim okvirom:</h4>
<table border="8">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
HTML 18
</table>
<h4>Sa veoma debelim okvirom:</h4>
<table border="15">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
8.2. Tabele
Tabele se definišu pomoću taga <table>. Tabela je podeljena u vrste (sa tagom <tr>), a svaka vrsta je
podeljena na ćelije sa podacima (sa tagom <td>). Ćelija sa podacima može da sadrži tekst, slike, liste,
paragrafe, okvire, horizontalne linije, tabele...
Primer:
<table border="1">
<tr>
<td>vrsta 1, celija 1</td>
</tr>
<tr>
<td>wrsta 2, celija 2</td>
</tr>
</table>
Izgleda ovako u browser-u:

vrsta 1, celija 1 vrsta 1, celija 2
8.3. Atributi tabela i okvira

Ako ne navedete atribut border tabela će biti prikazana bez okvira. Ovo može da bude korisno, ali
najčešće je potrebno da se vide okviri.
Da bi se tabela prikazala sa okvirim, potrebno je koristiti atribut border:
<table border="1">
<tr>
<td>Vrsta 1, celija 1</td>
HTML 19
<td>Vrsta 1, celija 2</td>
</tr>
</table>
8.4. Naslovi u tabeli

Naslov tabele de definiše pomoću taga <th>.
<table border="1">
<tr>
<th>Naslov</th>
<th>Jos jedan naslov</th>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
Kako to izgleda u browser-u:

Naslov Jos jedan naslov
8.5. Prazna ćelija u tabeli

Ćelije bez sadržaja se u većini browser-a ne prikazuju dobro.
<table border="1">
<tr>
<td> vrsta 1, celija 1</td>
</tr>
<tr>
<td></td>
</tr>
</table>
U browser-u se okvir oko prazne ćelije ne prikazuje.

Da bi ovo izbegli, dodajte razmak u praznu ćeliju ( ). Tada će okvir ćelije biti vidljiv.
HTML 20
<table border="1">
<tr>
</tr>
<tr>
<td> </td>
</tr>
</table>

vrsta 2, celija 1
8.6. Primeri
Primer 8.3 Tabela bez okvira
<html>
<body>
<h4>Ova tabela nema okvire:</h4>
<table>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
<h4>Jos jedna tabela bez okvira:</h4>
<table border="0">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
HTML 21
<td>600</td>
</tr>
</table>
</body>
</html>
Primer 8.4 Prikaz okvira tabele

<html>
<body>
<h4>Naslovi tabele:</h4>
<table border="1">
<tr>
<th>Name</th>
<th>Telephone</th>
<th>Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h4>Vertikalni naslovi:</h4>
<table border="1">
<tr>
<th>First Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th>Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<th>Telephone:</th>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>
Primer 8.5 Korišćenje ( )

HTML 22
<html>
<body>
<table border="1">
<tr>
<td>Some text</td>
<td>Some text</td>
</tr>
<tr>
<td></td>
<td>Some text</td>
</tr>
</table>
<p>
Kao sto mozete da vidite, jedna od celija nema okvir. Ovo je zbog toga sto je prazna. Ako
jednostavno umetnete razmak, nista se nece promeniti.
Trik je u umetanju ( ).
</p>
</body>
</html>
Primer 8.6 Tabela sa naslovima

<html>
<body>
<h4>
Ova tabela ima naslov i debele okvire:
</h4>
<table border="6">
<caption>Moj naslov</caption>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>
HTML 23
Primer 8.7 Ćelija koja se proteže na više od jedne vrste/kolone
<html>
<body>
<h4>Celija koja se proteze na dve kolone:</h4>
<table border="1">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h4>Celija koja se proteze na dve vrste:</h4>
<table border="1">
<tr>
<th>First Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>
Primer 8.8 tagovi unutar tabele

<html>
<body>
<table border="1">
<tr>
<td>
<p>Ovo je paragraf</p>
<p>Ovo je jos jedan paragraf</p>
</td>
<td>Ova celija sadrzi tabelu:
HTML 24
<table border="1">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>Ova celija sadrzi listu
<ul>
<li>jabuka</li>
<li>banana</li>
<li>ananas</li>
</ul>
</td>
<td>ZDRAVO</td>
</tr>
</table>
</body>
</html>
Primer 8.9 Popunjavanje tabele

<html>
<body>
<h4>Bez popunjavanja celije:</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>Sa popunjavanjem celije:</h4>
<table border="1"
HTML 25
cellpadding="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
Primer 8.10 Razmak između ćelija

<html>
<body>
<h4>Bez razmaka izmedju celija:</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>Sa razmakom izmedju celija:</h4>
<table border="1"
cellspacing="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
Primer 8.11 Dodavanje pozadine tabeli

HTML 26
<html>
<body>
<h4>Boja u pozadini:</h4>
<table border="1"
bgcolor="red">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>Slika u pozadini:</h4>
<table border="1"
background="bgdesert.jpg">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
Primer 8.12 Dodavanje pozadine ćeliji

<html>
<body>
<h4>Pozadina celije:</h4>
<table border="1">
<tr>
<td bgcolor="red">First</td>
<td>Row</td>
</tr>
<tr>
<td
background="bgdesert.jpg">
Second</td>
HTML 27
<td>Row</td>
</tr>
</table>
</body>
</html>
Primer 8.13 Poravnanje sadržaja u ćeliji

<html>
<body>
<table width="400" border="1">
<tr>
<th align="left">Money spent on....</th>
<th align="right">January</th>
<th align="right">February</th>
</tr>
<tr>
<td align="left">Clothes</td>
<td align="right">$241.10</td>
</tr>
<tr>
<td align="left">Make-Up</td>
</tr>
<tr>
<td align="left">Food</td>
</tr>
<tr>
<th align="left">Sum</th>
<th align="right">$1001.50</th>
<th align="right">$744.65</th>
</tr>
</table>
</body>
</html>
Primer 8.14 Atributi okvira

<html>
<body>
HTML 28
<p>
Ako ne vidite okvire oko tabele u ovom primeru, to znaci da je vas browser star i da ih
ne podrzava</p>
<h4>Sa frame="border":</h4>
<table frame="border">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>Sa frame="box":</h4>
<table frame="box">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>Sa frame="void":</h4>
<table frame="void">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>Sa frame="above":</h4>
<table frame="above">
<tr>
<td>First</td>
<td>Row</td>
</tr>
HTML 29
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>Sa frame="below":</h4>
<table frame="below">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>Sa frame="hsides":</h4>
<table frame="hsides">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>Sa frame="vsides":</h4>
<table frame="vsides">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>Sa frame="lhs":</h4>
<table frame="lhs">
<tr>
HTML 30
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>Sa frame="rhs":</h4>
<table frame="rhs">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
9. HTML liste
HTML podržava numerisane, nenumerisane i liste definicija.
9.1. Primeri
Primer 9.1 Nenumerisana lista lista
<html>
<body>
<h4>Nenumerisana lista:</h4>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
Primer 9.2 Numerisana lista

<html>
HTML 31
<body>
<h4>Numerisana lista:</h4>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
9.2. Nenumerisane liste

Nenumerisane liste su liste stavki. Lista stavki se obeležava znacima za nabrajanje(bullets) (obično
tačkama).
Nenumerisana lista počinje tagom <ul>. Svaka stavka počinje tagom <li>.
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
Primer izgleda ovako u browser-u:
• Coffee
• Milk
U stavku možete da stavite paragrafe, novi red, slike, linkove, druge liste...
9.3. Numerisane liste

Numerisana lista je takođe lista stavki. Stavke su obeležene brojevima.
Numerisana lista počinje tagom <ol>. Svaka stavka počinje tagom <li>.
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
1. Coffee
2. Milk
U stavku možete da stavite paragrafe, novi red, slike, linkove, druge liste...
9.4. Lista definicija

Lista definicija ne sadrži stavke. Ovo je lista termina i objašnjenja termina.
Lista definicija počinje tagom <dl>. Svaki termin počinje tagomEach <dt>. Svako objašnjenje počinje
tagom <dd>.
HTML 32
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

Coffee
Black hot drink
Milk
White cold drink
U objašnjenje možete da stavite paragrafe, novi red, slike, linkove, druge liste...
9.5. Još primera

Primer 9.3 Različite vrste numerisanih lista
<html>
<body>
<h4>Numerisana lista:</h4>
<ol>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Lista sa slovima:</h4>
<ol type="A">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Lista sa malim slovima:</h4>
<ol type="a">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Lista sa rimskim brojevima:</h4>
<ol type="I">
HTML 33
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Lista sa malim rimskim brojevima:</h4>
<ol type="i">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
</body>
</html>
Primer 9.4 Različite vrste nenumerisanih lista lista

<html>
<body>
<h4>Nenumerisana lista sa diskovima:</h4>
<ul type="disc">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
<h4>Nenumerisana lista sa krugovima:</h4>
<ul type="circle">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
<h4>Nenumerisana lista sa kvadratima:</h4>
<ul type="square">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
</body>
</html>
Primer 9.5 Ugnježdene liste

HTML 34
<html>
<body>
<h4>Ugnjezdena lista:</h4>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body> </html>
Primer 9.6 Ugnježdene liste 2

<html>
<body>
<h4>Ugnjezdena lista:</h4>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea
<ul>
<li>China</li>
<li>Africa</li>
</ul>
</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>
Primer 9.7 Liste definicija

<html>
<body>
<h4>Lista definicija:</h4>
<dl>
<dt>Coffee</dt>
HTML 35
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
</body>
</html>
10. HTML forme i ulazi

HTML forme se koriste da bi se izabrale različite vrste ulaza.
10.1. Primeri
Primer 10.1 Tekst polje

<html>
<body>
<form>
Ime:
<input type="text" name="ime">
<br>
Prezime:
<input type="text" name="prezime">
</form>
</body>
</html>
Primer 10.2 Polje za šifru

<html>
<body>
<form>
Korisnicko ime:
<input type="text" name="korisnik">
<br>
Sifra:
<input type="password" name="sifra">
</form>
<p>
Primetite: karakteri se u polju za sifru prikzuju kao zvezdice.
</p>
</body>
</html>
HTML 36
10.2. Forme
Forma je oblast koja može da sadrži elemente forme.
Elementi forme su elementi koji dozvoljavaju korisniku da unese informaciju (tekst polja, tekst oblasti,
padajući meniji, radio dugmad, checkbox...) u formu.
Forma se definiše pomoću taga <form>.
<form>
<input>
<input>
</form>
10.3. Ulazi (input)

Najčešće korišćeni tag za forme je tag <input>. Tip ulaza je definisan pomoću atributa type. Najčešće
korišćeni tipovi ulaza su prikazani u sledećem tesktu.
Tekst polja
Tekst polje se koristi kad želite da korisnik u formu unese slova, brojeve...
<form>
Ime:
<input type="text" name="ime">
<br>
prezime:
<input type="text" name="prezime">
</form>

First name:
Last name:
Primetite da forma nije vidljiva. Takođe primetite da je u većini browser-a širina tekst polja po difoltu 20
znakova.
Radio dugmad
Radio dugmad se koriste kad želite da korisnik izabere jednu od ograničenog broja opcija.
<form>
<input type="radio" name="pol" value="muski"> Muski
<br>
<input type="radio" name="pol" value="zenski"> Zenski
</form>

Male
Female
Primetite da može da se izabere samo jedna opcija.
HTML 37
Checkboxes
Checkbox-ovi se koriste kad želite da korisnik izabere jednu, ili više od ograničenog broja opcija.
<form>
<input type="checkbox" name="motor">
Ja imam motor
<br>
<input type="checkbox" name="automobil">
Ja imam automobil
</form>

I have a bike
I have a car
1.6. Atribut action i dugme Submit

Kad korisnik pritisne dugme Submit, sadržaj forme se šalje drugom fajlu. Atribut forme action definiše
ime fajla kome se taj sadržaj šalje. Fajl definisan u atributu action obično radi nešto sa primljenim ulazom.
<form name="input" action="html_form_action.asp"
method="get">
Username:
<input type="text" name="user">
<input type="submit" value="Submit">
</form>

Submit
Username:
Ako ukucate neke karaktere u tekst polje i pritisnete dugome Submit, poslaćete ulaz na stranicu koja se
zove "html_form_action.asp". Ta strana može da prikaže primljeni ulaz.
10.4. Još primera

Primer 10.3 Checkboxes
<html>
<body>
<form>
I have a bike:
<input type="checkbox" name="Bike">
<br>
I have a car:
<input type="checkbox" name="Car">
</form>
</body>
</html>
HTML 38
Primer 10.4 Radio dugmad
<html>
<body>
<form>
Male:
<input type="radio" checked="checked"
name="Sex" value="male">
<br>
Female:
<input type="radio"
name="Sex" value="female">
</form>
<p>
When a user clicks on a radio-button, the button becomes checked, and all other buttons
with the same name become unchecked
</p>
</body>
</html>
Primer 10.5 Padajuće liste

<html>
<body>
<form>
<select name="cars">
<option value="volvo">Volvo
<option value="saab">Saab
<option value="fiat">Fiat
<option value="audi">Audi
</select>
</form>
</body>
</html>
Primer 10.6 Padajuće liste 2

<html>
<body>
<form>
<select name="cars">
<option value="volvo">Volvo
<option value="saab">Saab
<option value="fiat" selected="selected">Fiat
<option value="audi">Audi
</select>
HTML 39
</form>
</body>
</html>
Primer 10.7 Tekst polje

<html>
<body>
<textarea rows=“10“ cols=“30“>
Macka se igra u basti.
</textarea>
</body>
</html>
Primer 10.8 Kreiranje dugmeta

<html>
<body>
<form>
<input type="button" value="Hello world!">
</form>
</body>
</html>
Primer 10.9 Skupovi polja (fieldset) oko podataka

<html>
<body>
<fieldset>
<legend>
Health information:
</legend>
<form>
Height <input type="text" size="3">
Weight <input type="text" size="3">
</form>
</fieldset>
<p>
If there is no border around the input form, your browser is too old.
</p>
</body>
</html>
10.5. Primeri formi

Primer 10.10 Forma sa ulaznim poljima i Submit dugmetom
<html>
HTML 40
<body>
<form name="input" action="html_form_action.asp" method="get">
Type your first name:
<input type="text" name="FirstName" value="Mickey" size="20">
<br>Type your last name:
<input type="text" name="LastName" value="Mouse" size="20">
<br>
</form>
<p>
If you click the "Submit" button, you will send your input to a new page called
html_form_action.asp.
</p>
</body>
</html>
Primer 10.11 Forma sa checkbox-ovima

<html>
<body>
I have a bike:
<input type="checkbox" name="Bike" checked="checked"><br>
I have a car:
<input type="checkbox" name="Car">
<br>
</form>
<p>
If you click the "Submit" button, you send your input to a new page called
</p>
</body>
</html>
Primer 10.12 Forma koja sadrži radio dugmad

<html>
<body>
Male:
<input type="radio" name="Sex" value="Male" checked="checked">
<br>
Female:
<input type="radio" name="Sex" value="Female">
HTML 41
<br>
<input type ="submit" value ="Submit">
</form>
<p>
If you click the "Submit" button, you will send your input to a new page called
</p>
</body>
</html>
Primer 10.13 Slanje e-mail –a iz forme

<html>
<body>
<form action="MAILTO:someone@w3schools.com" method="post" enctype="text/plain">
<h3>This form sends an e-mail to W3Schools.</h3>
Name:<br>
<input type="text" name="name"
value="yourname" size="20">
<br>
Mail:<br>
<input type="text" name="mail"
value="yourmail" size="20">
<br>
Comment:<br>
<input type="text" name="comment"
value="yourcomment" size="40">
<br><br>
<input type="submit" value="Send">
<input type="reset" value="Reset">
</form>
</body>
</html>
10.6. Tagovi za forme

Tag Opis
<form> Definiše formu za korisnički ulaz
<input> Definiše ulazno polje
<textarea> Definiše tekst polje (ulaznhu kontrolu sa više linija testa)
<label> Definiše labelu kontrole
<fieldset> Definiše fieldset
<legend> Definiše naslov za fieldset
<select> Definiše listu koja može da se selektuje (padajuću listu)
<optgroup> Definiše grupu opcija
HTML 42
<option> Definiše opciju u padajućoj listi
<button> Definiše dugme a push button
11. HTML Images

Pomoću HTML-a možete da prikažete slike u dokumentu.
1.7. Primeri
Primer 11.1 Ubacivanje slike
<html>
<body>
<p>
An image:
<img src="constr4.gif"
width="144" height="50">
</p>
<p>
A moving image:
<img src="hackanm.gif"
</p>
<p>
Note that the syntax of inserting a moving image is no different from that of a non-
moving image.
</p>
</body>
</html>
Primer 11.2 Ubacivanje slike sa druge lokacije

<html>
<body>
<p>
An image from another folder:
<img src="/images/netscape.gif"
</p>
<p>
An image from W3Schools:
<img src="http://www.w3schools.com/images/ie.gif" width="73" height="68">
</p>
</body>
</html>
HTML 43
1.8. Tag image i atribut src
Slike se u HTML-u definišu pomoću taga <img>.
Tag <img> je prazan, što znači samo sadrži atribute i nema završni tag.
Da bi sliku prikazali na strani, potrebno je da koristite atribut src. Vrednost atributa src je URL slike
koju želite da prikažete na strani. Sintaksa za definisanje slike:
<img src="url">
URL ukazuje na lokaciju gde se nalazi slika. Slika "boat.gif" koja se nalazi u direktorijumu images
na"www.w3schools.com" ima URL: http://www.w3schools.com/images/boat.gif.
Browser stavlja sliku na mesto gde se u dokumentu pojavio tag img. Ako ste sliku stavili između dva
paragrafa, browser prikazuje prvi paragraf, pa sliku, pa drugi paragraf.
1.9. Atribut alt

Atribut alt se koristi za definisanje alternativnog teksta za sliku.Vrednost atributa je tekst koji definiše
autor:
<img src="boat.gif" alt="Big Boat">
Ukoliko browser ne može da prikaže ili učita sliku, tekst kaže korisniku sta je trebalo da se nađe na tom
mestu. Dobra praksa je da za svaku sliku definišete alt atribut, da bi omogućili korišćenje vaše stranice i
korisnicima čiji browser-i ne mogu da prikažu slike.
1.10. Korisni saveti

Ako vaš HTML fajl sadrži 10 slika, 11 za prikazivanje stranice je potrebno da se skine 11 fajlova. To
zahteva vreme, tako da je savet: koristite slike pažljivo
1.11. Još primera

Primer 11.3 Slika za pozadinu
<html>
<body background="background.jpg">
<h3>Look: A background image!</h3>
<p>Both gif and jpg files can be used as HTML backgrounds.</p>
<p>If the image is smaller than the page, the image will repeat itself.</p>
</body>
</html>
Primer 11.4 Poravnanje slika

<html>
<body>
<p>
An image
align="bottom" width="48" height="48">
in the text
HTML 44
</p>
<p>
An image
<img src ="hackanm.gif"
align="middle" width="48" height="48">
in the text
</p>
<p>
An image
align="top" width="48" height="48">
in the text
</p>
<p>Note that bottom alignment is the default alignment</p>
<p>
An image
in the text
</p>
<p>
An image before the text
</p>
<p>
An image after the text
</p>
</body>
</html>
Primer 11.5 Plivajuća slika

<html>
<body>
<p>
align ="left" width="48" height="48">
A paragraph with an image. The align attribute of the image is set to "left". The image
will float to the left of this text.
</p>
HTML 45
<p>
align ="right" width="48" height="48">
A paragraph with an image. The align attribute of the image is set to "right". The image
will float to the right of this text.
</p>
</body>
</html>
Primer 11.6 Promena veličine slike

<html>
<body>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
You can make a picture larger or smaller changing the values in the "height" and "width"
attributes of the
img tag.
</p>
</body>
</html>
Primer 11.7 Prikazivanje alternativnog teksta za sliku

<html>
<body>
<img src="goleft.gif" alt="Go Left" width="32" height="32">
<p>
Text-only browsers cannot display images and will only display the text that is specified
in the "alt" attribute for the image. Here, the "alt"-text is "Go Left".</p>
<p>
Note that if you hold the mouse pointer over the image, most browsers will display the
"alt"-text.
</p>
</body>
HTML 46
</html>
Primer 11.8 Korišćenje slike kao linka

<html>
<body>
<p>
You can also use an image as a link:
<a href="lastpage.htm">
<img border="0" src="buttonnext.gif" width="65" height="38">
</a>
</p>
</body>
</html>
Primer 11.9 Slika kao mapa

<html>
<body>
<p>
Click on one of the planets to watch it closer:
</p>
<img src="planets.gif"
width="145" height="126"
usemap="#planetmap">
<map id="planetmap" name="planetmap">
<area shape="rect"
coords="0,0,82,126"
alt="Sun"
href="sun.htm">
<area shape="circle"
coords="90,58,3"
alt="Mercury"
href="mercur.htm">
<area shape="circle"
coords="124,58,8"
alt="Venus"
href="venus.htm">
</map>
<p>
<b>Note:</b> We use both an <b>id</b> and a <b>name</b> attribute in the map tag
because some versions of Netscape don't understand the id attribute.</p>
</body>
</html>
HTML 47
Primer 11.10 Kako da pretvorite sliku u mapu
<html>
<body>
<p>
Move the mouse over the image, and look at the status bar to see how the
coordinates change.
</p>
<p>
<a href="tryhtml_ismap.htm">
<img src="planets.gif"
ismap width="146" height="126">
</a>
</p>
</body>
</html>
1.12. Tagovi za slike

Tag Opis
<img> Definiše sliku
<map> Definiše mapu
<area> Definiše oblast u okviru mape na koju možete da kliknete
12. HTML pozadine

Dobra pozadina može da učini da vaša strana izgleda sjajno..
1.13. Primeri
Primer 12.1 Dobar izbor boje teksta i pozadine
<html>
<body bgcolor="#d0d0d0">
<p>
This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This
is a paragraph.
</p>
<p>
This is another paragraph. This is another paragraph. This is another paragraph. This is
another paragraph.
</p>
</body>
</html>
Primer 12.2 Loš izbor boja teksta i pozadine
HTML 48
<html>
<body bgcolor="#ffffff" text="yellow">
<p>
This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This
is a paragraph.
</p>
<p>
This is another paragraph. This is another paragraph. This is another paragraph. This is
another paragraph.
</p>
</body>
</html>
1.14. Pozadine
Tag <body> ima dva atributa pomoću kojih možete da definišete pozadinu. Pozadina može da bude boja
ili slika.
Bgcolor
Atribut bgcolor definiše boju pozadine za HTML stranu. Vrednost ovog atributa može da bude
heksadecimalni broj, RGB vrednost ili ime boje:
<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">
Sve tri linije postavljaju boju pozadine na crnu.
Background
Atribut background definiše sliku za pozadinu HTML strane. Vrednost ovog atributa je URL slike koju
želimo da koristimo. Ako je slika manja od prozora browser-a, slika se ponavlja dok ne ispuni ceo prozor.
<body background="clouds.gif">
<body background="http://www.w3schools.com/clouds.gif">
URL može da bude relativan (kao u prvoj liniji) ili apsolutan (kao u drugoj liniji).
Primedba: Ako želite da koristite sliku za pozadinu, trebalo bi da razmislite o sledećem:
• Da li će slika da previše poveća vreme učitavanja strane?
• Da li će slika za pozadinu da se uklopi sa drugim slikama na strani?
• Da li će slika da se uklopi sa bojom teksta?
• Da li će slika da izgleda dobro kad se bude ponavljala na strani?
• Da li će slika da odvuče pažnju sa teksta?
1.15. Još primera

Primer 12.3 Dobra slika za pozadinu
<html>
<body background="background.jpg">
<h3>Image Background</h3>
HTML 49
</body>
</html>
Primer 12.4 Dobra slika za pozadinu 2

<html>
<body background="paper.gif">
</body>
</html>
Primer 12.5 Loša slika za pozadinu

<html>
<body background="rock.jpg">
</body>
</html>
13. HTML slike

Slike se prikazuju kombinujući crvene (RED), zelene (GREEN) i plave (BLUE) svetlosne izvore.
1.16. Vrednosti boja

Boje se definišu heksadecimalnom notacijom, koristeći kombinaciju crvene, zelene i plave boje (RGB).
Najniža vrednost koja može da se da boji je 0 (hex #00). Najviša vrednost je (hex #FF).
1.17. Imena boja

Većina browsera podržava imena boja.
Primedba: Only W3C HTML 4.0 standard podržava samo 16 imena boja(aqua, black, blue, fuchsia,
gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white i yellow). Za ostale boje morate da
koristite Color HEX vrednost.
1.18. Web bezbedne boje

Do pre nekoliko godina, kada je većina računara mogla da prikaže samo 256 različitih boja, Web standard
je predložio listu od 216 Web bezbednih boja (Web Safe Colors) Razlog je bio taj što su Windows i Mac
operativni sistemi koristili 40 različitih rezervisanih sistemskih boja (svaki po oko 20 boja).
Ovo više nije tako važno, pošto je većina računara sposobna da prikaže milione različitih boja, ali vi
odlučite.
HTML 50

HTML

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

HTML

Uploaded by

Copyright:

Available Formats

1.

1.2. Jednostavan primer

1.3. Objašnjenje primera

1.4. Ekstenzija HTM ili HTML?

2.1. HTML tagovi

2.2. HTML Elementi

2.3. Atributi tagova

3. Osnovni HTML tagovi

HTML automatski dodaje dodatni prazan red pre i posle naslova.

HTML automatski dodaje dodatan prazan red pre i posle paragrafa.

3.3. Novi red

Tag <br> je prazan tag. On nema završni tag.

3.4. Komentari u HTML-u

3.5. Korisni saveti

Primer 3.2 Koriščenje taga <br>,

Primer 3.3 Problemi kod formatiranja HTML-a

Primer 3.4 Naslovi

Primer 3.5 centriranje naslova

Primer 3.6 Ubacivanje horizontalne linije

Primer 3.7 Sakriveni komentari

Primer 3.8 Dodavanje boje pozadini

4. HTML formatiranje teksta

4.3. Tagovi za citate, navođenje i definicije

Primer 4.2 Kontrolisanje formatiranja paragrafa pomoću pre taga

Primer 4.3 Computer output

Primer 4.4 Skraćenice i mnemonici

Primer 4.5 Navodjenje

5.2. Razmak koji se ne ignoriše

5.3. Najčešći znakovni entiteti:

6.1. Početni primeri

Primer 6.2 Korišćenje slike kao linka

6.2. Tag anchor i atribut href

Prethodna linija izgleda ovako u browser-u:

6.3. Atribut target

6.4. Tag anchor i atribut name

Primetite da se imenovana veza ne prikazuje na specijalan način. Da bi se linkovali direktno na sekciju

6.5. Korisni saveti

6.6. Još primera

Primer 6.3 Otvaranje stranice u novom prozoru

Primer 6.4 Korišćenje linka da bi se skočilo na neki deo dokumenta

Primer 6.5 Izlazak iz frejma

Primer 6.7 Primer komplikovanijeg povezivanja mail poruke

Primer 7.1 vertikalna podela sa tri razlicita dokumenta

Primer 7.2 Horizontalna podela sa tri različita dokumenta

Primer 7.3 Korišćenje <noframes> taga.

7.3. Tag frameset

7.4. Tag frame

7.5. Korisni saveti

7.6. Još primera

Primer 7.4 Dokument sa tri okvira, sa definisanim vrstama i kolonama

Primer 7.5 Korišćenje atributa noresize

Primer 7.6 kreiranje okvira za navigaciju.

Primer 7.7 Kreiranje inline okvira

Primer 8.1 Kreiranje tabele

Primer 8.2 Različiti okviri tabela

Izgleda ovako u browser-u:

8.3. Atributi tabela i okvira

8.4. Naslovi u tabeli

Kako to izgleda u browser-u:

8.5. Prazna ćelija u tabeli

U browser-u se okvir oko prazne ćelije ne prikazuje.

Kako to izgleda u browser-u:

Primer 8.4 Prikaz okvira tabele

Primer 8.5 Korišćenje (&nbsp;)

Primer 8.5 Korišćenje ( )