1 HTML

HTML
World Wide Web

WWW je osmiljen u CERN-u, poetkom 90-tih godina
prolog veka
Klijent-server arhitektura
Klijenti su itai (browser)

Serveri su web serveri
HTTP protokol protokol za komunikaciju izmeu web
itaa i servera
Klijent trai neki resurs od servera

Server isporuuje resurs klijentu
Resurs moe biti

HTML datoteka
slika
film
itd.
Za WWW nije neophodan internet i web server

moemo da uitamo HTML datoteku sa diska u ita
HTTP protokol
HTTP
klijen
t
HTTP
klijen
t
GET /docs.html HTTP/1.0

User-Agent: Mozilla/4.0 (compatible; MSIE 5.01; Windows NT 5.0)
Accept-Cookies: yes
Host: pipin.tmd.ns.ac.yu
...
HTTP
server
HTTP
server
HTTP/1.0 200 OK
Content-Type: text/html
<HTML>
<HEAD>
...
ta je HTML?
HTML je skraenica od Hyper Text Markup
Language
markap jezik koji opisuje stranice koje imaju
strukturu i izgled
markap jezik oznaava tekst

dodatnim
oznakama (tagovima)
Tekstualna datoteka
sastoji se iz markap tagova
tagovi
definiu strukturu HTML dokumenta

objanjavaju itau kako da prikae stranicu
ekstenzija je html ili htm

svi whitespace-ovi (razmak, tab, enter) se svode
na jedan
Primer
<html>
<head>
<title>Naslov</title>
</head>
<body>
<p>Moj prvi HTML dokument.
<b>Ovaj tekst je
podebljan.</b></p>
</body>
</html>
HTML tagovi
Oznaavaju HTML elemente
HTML element se sastoji iz
poetnog (otvarajueg) taga <tag>
sadraja
zatvarajueg taga </tag>
Tag poinje znakom <
Tag se zavrava znakom >
Vrste:
sloeni (imaju i otvarajui i zatvarajui tag)
prazni (prosti) tagovi, gde nema zatvarajueg taga i
sadraja
primer: <br />
Tagovi ne smeju da se preklapaju
Primer
Jednostavan element
<b>This text is bold</b>

Element koji sadri drugi
<body>
This is my first homepage.<b>This
text is bold</b>. This text is not
bold.
</body>
HTML tagovi
Nisu osetljivi na mala i velika slova
Preporuka je da se piu malim slovima
Potrebno za XHTML (HTML sledee
generacije)
Osnovni tagovi
<html>
obuhvata ceo HTML dokument
<head>
zaglavlje HTML dokumenta
<body>
telo HTML dokumenta
Osnovni tagovi
Tag <html> je okvir u kom se nalaze svi
ostali tagovi
HTML dokument uvek poinje tagom <html>, a
zavrava se tagom </html>.
Tag <head> uokviruje zaglavlje u kom se
nalaze informacije o samom dokumentu

(naslov, opis, kljune rei, ime autora, itd.);
opcion je.
Sve ono to vidimo u prozoru browser-a, tj.
sadraj stranice, nalazi se u telu dokumenta
koje uokviruje element <body>
u dokumentu sme da postoji samo jedan par
tagova <body></body>.
Tag <head>
Browser ne prikazuje informacije koje se
nalaze izmeu tagova <head> i </head>,

osim sadraja taga <title>.
Sadraj taga <title> je naslov HTML
dokumenta koji e se pojaviti u naslovnoj
liniji web itaa.
Tag <body>
Ovaj element specificira glavni sadraj
dokumenta
Poetni tag <body> moe da ima atribute
koji omoguavaju da se specificiraju
karakteristike dokumenta:
boja pozadine ili slika, boja teksta, boja
poseenih i neposeenih linkova,

akcije koje se izvravaju kada se dokument uita,
ili ako se ne uita iz nekog razloga, itd.),
ali je bolje da se ove karakteristike podeavaju
CSS-om.
Osnovni tagovi
<h1> <h6>
naslovi
<p>
paragraf
<br />
line break
<hr />
horizontal ruler horizntalna crta

Primer
<html>
<head>
<title></title>
</head>
<body>
<h1>Naslov</h1>
<p>Ovo je paragraf.</p>
<h2>Podnaslov</h2>
<h1>Drugi naslov</h1>
</body>
</html>
Primer
Atributi
Atributi obezbeuju dodatnu informaciju za
tagove
Tagovi mogu da imaju atribute
Atributi su oblika ime=vrednost
Atributi se uvek stavljaju u poetni tag
Primer:
<img src=slika.gif/>
Tagovi za formatiranje teksta

<b>
bold, podebljano
<i>
italic, iskoeno
<u>
underline, podvueno
<sub>
subscript, dole
<sup>
superscript, gore
Primer
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html;charset=utf-8" />
</head>
<body>
<h2><u>Formatiranje teksta</u></h2>
<p><b>podebljano</b></p>
<p><i>iskoseno</i></p>
<p><u>podvuceno</u></p>
<p>X<sub>indeks</sub></p>
<p>X<sup>eksponent</sup></p>
</body>
</html>
Primer

<big>
vea slova
<small>
manja slova
<em>
emphasized, naglaeno
<strong>
naglaeno
Primer
<html>
<head>
</head>
<body>
<h2><u>Tagovi za formatiranje teksta</u></h2>
<p><strong>naglaeno</strong></p>
<p><em>naglaeno</em></p>
<p><big>vea slova</big></p>
<p><small>manja slova</small></p>
</body>
</html>
Primer

<ins>
inserted, podvuen tekst
<del>
deleted, obrisan, precrtan tekst
Primer
<html>
<head>
</head>
<body>
<h2><u>Tagovi za formatiranje teksta</u></h2>
<p><ins>inserted, podvuen tekst</ins></p>
<p><del>precrtan tekst</del></p>
</body>
</html>
Primer
Kompjuterski tagovi
<code>
za kratke delove koda, unutar reenice
<pre>
preformatted, sav sadraj ovog taga se prikazuje u
originalnom obliku, sa svim whitespace-ovima
pogodan za listinge
<var>
za varijable u programu
<tt>
teletype text, teleprinter
<samp>
sample, uzorak
<kbd>
keyboard, za prikaz unosa sa tastature
Primer
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"
/>
</head>
<body>
<h2><u>Kompjuterski tagovi </u></h2>
<p>Ovo je obian tekst dok je <code>ovo neki kod</code></p>
<pre>preformatted text</pre>
<p><var>varijable u programu</var></p>
<p><tt>teletype text, teleprinter</tt></p>
<p><samp>sample, uzorak</samp></p>
<p><kbd>keyboard, za prikaz unosa sa tastature</kbd></p>
</body>
</html>
Primer
Skraenice, citati, definicije

<abbr title="objanjenje">tekst</abbr>
abbreviation, skraenica
<acronym
title="objanjenje">tekst<acronym>
akronim (WWW-World WideWeb)
<address>
za definisanje adrese
<bdo dir="rtl">
smer ispisa teksta (sa leva na desno i obrnuto>
atribut dir (direction smer): rtl, ltr
Primer
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
<h2><u>Skraenice, citati, definicije</u></h2>
<abbr title="objanjenje pojma">abbreviation, skraenica</abbr>
<p><acronym title="World Wide Web">WWW</acronym></p>
<address>adresa</address>
<p><bdo dir="ltr">smer ispisa teksta (sa leva na desno i
obrnuto)</bdo></p>
<p><bdo dir="rtl">smer ispisa teksta (sa leva na desno i
obrnuto)</bdo></p>
</p>
</body>
</html>
Primer
Skraenice, citati, definicije

<blockquote>
dui citat
<q>
krai citat
<cite>
citat
<dfn>
za definicije u tekstu
Primer
<html>
<head>
</head>
<body>
<h2><u>Skraenice, citati, definicije</u></h2>
<p>Ovo je obian tekst dok
<blockquote>ovde nesto citiramo - duzi citat</blockquote>
</p>
<q>ovde nesto citiramo - krai citat</q>
</p>
<cite>ovde nesto citiramo.</cite>
</p>
<dfn>ovde nesto definisemo - definicija.</dfn>
</p>
</body>
</html>
Primer
Specijalni karakteri
Character entity
Karakteri koji su rezervisani za tagove (<, >, &,
itd.)
Non-breaking Space
razmaci koji se ne saimaju u jedan

vie obinih razmaka se prikazuju kao jedan

Karakteri
specijalni karakteri (, , itd.)
naa slova (, , itd.)
irilica (, , itd.)
ostalo, po Unicode standardu
Specijalni karakteri
Specijalni karakteri navode se u
sledeem formatu:
&oznaka_karaktera;
Primeri:
&
<
>

Proizvoljan Unicode karakter moe se
navesti kao:
&#xhex_kod;
Unicode
Organizacija koja definie standard po pitanju kodiranja slova u
raunarima
Jedno slovo/karakter je u Unicode standardu trenutno 20-bitno
zove se code point
Tri reprezentacije:
UTF-8 (http://tools.ietf.org/html/rfc3629)
jedan bajt za karakter sa vrednou od U+0000 do U+007F

dva bajta za karakter sa vrednou od U+0080 do U+07FF
tri bajta za karaktere u opsegu od U+0800 do U+FFFF
etiri bajta za karaktere u opsegu od U+10000 do U+10FFFF
UTF-16
svaki code point se prikazuje code unit-ima, koji su 16-bitni
ako je code point u rasponu od U+0000 do U+FFFF, onda je on smeten u
basic multilingual plane i prikazuje se jednim code unit-om (samo 16 bita)

preostali Unicode karakteri su smeteni u opseg U+10000 do U+10FFFF, a
repezentovani su sa dva code unit-a
ovakvi karakteri se zovu supplementary characters

algoritam za konverziju supplementary code point-a u dva code unit-a se moe
nai na:
http://en.wikipedia.org/wiki/UTF-16
UTF-32
etiri bajta po slovu
Unicode
Unicode
Unicode
Primer
<html>
<head>
<title>Specijalni
karakteri</title>
</head>
<body>
<h1>Specijalni karakteri</h1>
<p>
Specijalni karakteri navode
se u sledeem formatu:<br>
<pre>&oznaka_karaktera;</pre>
</p>
<p>
Znak ampersand (&) ima
specijalno znaenje i predstavlja
poetak navoenja specijalnog
karaktera. Kada treba ugraditi
ba ovaj znak u tekst to se ini
sekvencom &
</p>
<p>
Znaci manje (<) i vee
(>) navode se kao <
odnosno >
</p>
<p>
Iako se viestruki white space
karakteri ignoriu u HTML
dokumentu, moe se naglasiti da se
vie blank karaktera ponovi oznakom
za <i>non-breaking
space</i>,  
</p>
<p>
Proizvoljan Unicode karakter moe
se navesti kao:
<pre>&#xhex_kod;</pre>
Na primer, irilino slovo Ж
navodi se kao Ж
</p>
</body>
</html>
Primer
Hiperlinkovi (linkovi)
Za prelaz na drugi dokument ili deo
dokumenta
<a> tag (anchor) se koristi za linkove
Atribut href se koristi za definiciju
odredita
Primer:
<a
href="http://www.google.com">Google</a>
Hiperlinkovi (linkovi)
Atribut href sadri URL (Uniformed Resource
Locator) do odredita.
Format URL-a:
protokol://raunar:port/putanja/datoteka
Oblici URL-a:
http://www.ns.ac.yu/stara/index.html
http://www.ns.ac.yu/stara/
http://www.ns.ac.yu/
file:///D:/Prj/Aca/index.html
ftp://ftp1.freebsd.org/pub/FreeBSD/
mailto:someone@microsoft.com?
cc=someoneelse@microsoft.com&bcc=andsomeoneel
se2@microsoft.com&subject=Summer
%20Party&body=You%20are%20invited%20to%20a
%20big%20summer%20party!
Link na deo stranice

Link moe da ukazuje na deo stranice
Deo stranice se imenuje <a> tagom, ali uz
upotrebu name atributa:

<a name="prvi">Ovaj tekst je obeleen
<b>prvi</b>.</a>
imenom
Link na deo stranice:

Ovo je <a href="#prvi">link</a> na prvi deo.
ili
Ovo je <a
href="http://www.server.com/stranica.html#prvi">link
</a> na prvi deo.
Liste
Tri vrste lista:
nabrojive (ordered)
neureene (unordered) i
definicione (definition)
Stavke nabrojive liste poinju rednim
brojem (slovom, i sl.)

Stavke neureene liste poinju bullet-om.
Stavke definicione liste su zapravo pojmovi
sa objanjenjem.
Nabrojive liste
Poinje tagom <ol>
Stavke se navode izmeu <li> i </li> tagova
Zavrava se tagom </ol>
Atribut start definie (poetnu) vrednost broja
ispred prve stavke.

Atribut type definie tip ("A", "a", "i", itd.)
Primer:
<ol start=3">
<li>Voce</li>
<li>Povre</li>
</ol>
Primer
<html>
<head>
</head>
<body>
<h2><u>Nabrojive liste </u></h2>
<h4>Nabrajanje u ovoj listi poinje od broja 3</h4>
<ol start="3">
<li>Voe</li>
<li>Povre</li>
</ol>
<h4>dok u ovoj poinje od broja 1 - kod ove liste nije zadat atribut "start" pa nabrajanje poinje brojem 1</h4>
<ol>
<li>Prva stavka</li>
<li>Druga stavka</li>
</ol>
<h4>kod ove liste definisan je atribut "type" sa vrednosu "A" - u listi se za nabrajanje nee koristiti brojevi nego velika slova</h4>
<ol type="A">
</ol>
<h4>type="i"</h4>
<ol type="i">
</ol>
<h4>type="I" i start="6"</h4>
<ol type="I" start=6>
</ol>
<h4>type="a" i start="5"</h4>
<ol type="a" start=5>
</ol>
</body>
</html>
Primer
Neureene liste
Poinje tagom <ul>
Stavke se navode izmeu <li> i </li>
tagova
Zavrava se tagom </ul>
Atribut type definie tip bullet-a (disc,
square, circle, itd.).
Primer:
<ul type="square">
<li>Voce</li>
<li>Povre</li>
</ul>
Primer
<html>
<head>
</head>
<body>
<h2><u>Neureene liste</u></h2>
<h4>Atribut "type" ima vrednost "square"</h4>
<ul type="square">
<li>Voe</li>
<li>Povre</li>
</ul>
<h4>Atribut "type" ima vrednost "circle"</h4>
<ul type="circle">
<li>Voe</li>
<li>Povre</li>
</ul>
<h4>Atribut "type" ima vrednost "disc"</h4>
<ul type="disc">
<li>Voe</li>
<li>Povre</li>
</ul>
</body>
</html>
Primer
Definicione liste
Poinje tagom <dl>
Stavke su parovi <dt> (definition-list term
pojam) i <dd> (definition-list description opis)

tagova sa vrednostima i odgovarajuim
zatvarajuim tagovima
Zavrava se tagom </dl>
Primer:
<dl>
<dt>Crna kafa</dt>
<dd>Vrue pie</dd>
<dt>Koka kola</dt>
<dd>Hladno pie</dd>
</dl>
Primer
<html>
<head>
</head>
<body>
<h2><u>Definicione liste</u></h2>
<h4>Primer definicione liste sa dve stavke i dve definicije</h4>
<dl>
<dt>Crna kafa</dt>
<dd>Vrue pie</dd>
<dt>Koka kola</dt>
<dd>Hladno pie</dd>
</dl>
</body>
</html>
Primer
Slike
Tag <img> slui za prikaz slike
Atribut src je obavezan i ukazuje na sliku.
Opcioni atributi:
alt alternativni tekst, koji se prikazuje ako se
slika ne uita
title tekst koji se prikazuje kada se pree
miem preko slike
width, height irina i visina slike
korisno je uneti informaciju o visini i irini slike u img tag
Primer:
<img src="slika.gif" alt="Perina slika" title="Perina
slika"/>
<img src="http://www.w3schools.com/images/ie.gif"/>
Primer
<html>
<head>
</head>
<body>
<h2><u>Slike</u></h2>
<h4>Primer slike u okviru stranice</h4>
<img src="sl33_slike_primer.gif" alt="World Wide Web" />
<h4>Ukoliko je lokacija slike netana, ita e prikazati "alt" tekst (u ovom
sluaju "World Wide Web").</h4>
<img src="sl33_slike_primer.gifs" alt="World Wide Web" />
<h4>Uvoenjem atributa "height" i "width" moemo menjati dimenzije slike</h4>
<img height="150" width="160" src="sl33_slike_primer.gif" alt="World Wide
Web" />
<img height="150" width="70" src="sl33_slike_primer.gif" alt="World Wide Web" />
<img height="50" width="160" src="sl33_slike_primer.gif" alt="World Wide Web" />
</body>
</html>
Primer
Slika kao mapa linkova

Atribut usemap u img tagu odreuje putanju do
opisa zona (do <map> taga).
mapa ne mora da bude u istoj HTML datoteci
Tag <map> definie geometrijske zone na slici koje
e predstavljati linkove.
Podtag <area> definie konretnu geometrijsku zonu
Atributi su:
shape vrsta geometrijskog oblika (circle, rect, poly)

coords lista koordinata (x, pa y vrednost) za zadatu vrstu
geometrijskog oblika
ako je krug (circle), daju se x i y koordinata i poluprenik

ako je pravougaonik (rect), daju se x i y koordinata godnjeg levog i
donjeg desnog ugla
ako je mnogougao (poly), daje se niz x i y koordinata, koji ini niz
taaka koje ine konturu (zatvorenu)
href URL do stranice na koju se ide klikom po zoni

alt alternativni prikaz
Primer
<html>
<head>
</head>
<body>
<p>
Delovi slike predstavljaju linkove. Pronaite ih.
</p>
<p>
<img src="pic.gif" height="300" width="400" usemap="#mapa" />
</p>
<map name="mapa">
<area shape="poly" alt="poligon" coords="395,145, 322,91, 393,32
href="primer01.html">
<area shape="rect" alt="pravougaonik" coords="51,119, 135,191
<area shape="circle" alt="krug" coords="277,165,76"
</map>
</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.
Pomou taga <th> definiu se zaglavlja
vrsta ili kolona.
Tabele
U okviru poetnog taga <table>, mogue
je definisati poravnanje tabele u

dokumentu (atribut align, koji moe imati
vrednosti left ili right), debljinu ivice
tabele (atribut border) i boju pozadine
(atribut bgcolor)
svaka elija tabele moe imati i svoju boju
za ovo je bolje koristiti CSS
Tabele
Atribut cellspacing definie rastojanje
izmeu ivice tabele i ivice elije u tabeli.

Atribut cellpadding definie rastojanje od
ivice elije do sadraja elije.

Za svaku eliju se moe definisati koliko e
obuhvatiti kolona ili vrsta, pomou atributa

colspan i rowspan.
Tabele
Prostiranje preko dve kolone:
<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>
Tabele
Prostiranje preko dve vrste:
<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>
Tabele
Tag <tr> (Table Row) definie vrste u tabeli.
Tag <tr> sadri tagove <th> (Table Heading),
koji odreuju zaglavlje tabele, i tagove <td>

(Table Data) koji predstavljaju elije u tabeli.
U tagu <tr> mogu se nalaziti sledei atributi:
align - poravnanje tabele (center, left, right),
valign - poravnanje sadraja u eliji (baseline,
bottom, middle, top),

bgcolor - boja pozadine
za ovo je bolje koristiti CSS
Tabele
Ako je potrebno ostaviti praznu eliju,
trebalo bi ostaviti da bi bilo ispravno

prikazano
<td> </td>
Element caption definie 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 mogue vrednosti su
mu bottom (naslov e biti ispod tabele),
top (naslov e biti iznad tabele), center,
right i left.
Primer1
<html>
<head>
</head>
<body>
<h2><u>Tabele</u></h2>
<h4>Primer jednostavne tabele</h4>
<table width="200" border="1">
<tr>
<td>1</td>
<td>A</td>
<td>X</td>
</tr>
<tr>
<td>2</td>
<td>B</td>
<td>Y</td>
</tr>
<tr>
<td>3</td>
<td>C</td>
<td>Z</td>
</tr>
</table>
<h4>Primer jednostavne tabele sa

zaglavljima kolona</h4>
<tr>
<th scope="col">Zaglavlje</th>
</tr>
<tr>
<td>elija 1 </td>
<td>elija 2 </td>
<td>elija 3 </td>
</tr>
</table>
</body>
</html>
Primer1
Primer2
<html>
<head>
</head>
<body>
<h4>Primer jednostavne tabele - atribut "border" ima
vrednost "2", "bgcolor" ima vrednost #CCCCCC</h4>
<table bgcolor="#CCCCCC" width="200" border="2">
<tr>
<td>1</td>
<td>A</td>
<td>X</td>
</tr>
<tr>
<td>2</td>
<td>B</td>
<td>Y</td>
</tr>
<tr>
<td>3</td>
<td>C</td>
<td>Z</td>
</tr>
</table>
<h4>Primer jednostavne tabele - atribut "align" ima

vrednost "center"</h4>
<table align="center" width="200" border="1">
<tr>
<td>1</td>
<td>A</td>
<td>X</td>
</tr>
<tr>
<td>2</td>
<td>B</td>
<td>Y</td>
</tr>
<tr>
<td>3</td>
<td>C</td>
<td>Z</td>
</tr>
</table>
Primer2
<h4>Primer jednostavne tabele sa zaglavljima kolona
ima vrednost "right"</h4>
<table align="right" width="200" border="1">
<tr>
</tr>
<tr>
<td>elija 1 </td>
<td>elija 2 </td>
<td>elija 3 </td>
</tr>
</table>
</body>
</html>
- atribut "align"
Primer2
Primer3
<html>
<head>
</head>
<body>
<h4>Primer jednostavne tabele sa poveanim
razmakom izmeu elija - "cellspacing" je
"10"</h4>
<table width="200" border="1" cellspacing="10">
<tr>
<td>1</td>
<td>A</td>
<td>X</td>
</tr>
<tr>
<td>2</td>
<td>B</td>
<td>Y</td>
</tr>
<tr>
<td>3</td>
<td>C</td>
<td>Z</td>
</tr>
</table>
<h4>Primer jednostavne tabele sa poveanim

razmakom izmeu ivice elija i sadraja
elija - "cellpadding" je "10"</h4>
<table width="200" border="1"
cellpadding="10">
<tr>
<td>1</td>
<td>A</td>
<td>X</td>
</tr>
<tr>
<td>2</td>
<td>B</td>
<td>Y</td>
</tr>
<tr>
<td>3</td>
<td>C</td>
<td>Z</td>
</tr>
</table>
</body>
</html>
Primer3
Primer4
<html>
<head>
</head>
<body>
<h4>Primer jednostavne tabele sa naslovom iznad
tabele</h4>
<caption>Naslov koji je iznad tabele</caption>
<tr>
<td>1</td>
<td>A</td>
<td>X</td>
</tr>
<tr>
<td>2</td>
<td>B</td>
<td>Y</td>
</tr>
<tr>
<td>3</td>
<td>C</td>
<td>Z</td>
</tr>
</table>
<h4>Primer jednostavne tabele sa naslovom

ispod tabele</h4>
<caption align="bottom">Naslov koji je
ispod tabele</caption>
<tr>
<td>1</td>
<td>A</td>
<td>X</td>
</tr>
<tr>
<td>2</td>
<td>B</td>
<td>Y</td>
</tr>
<tr>
<td>3</td>
<td>C</td>
<td>Z</td>
</tr>
</table>
</body>
</html>
Primer4
Forme
Forma slui za unos podataka od strane
korisnika
Forma je prostor koji sadri elemente forme
Elementi forme omoguavaju korisniku da
unese neke informacije (tekstualna polja, polja
za unos teksta, padajui meniji, check-boksovi,
itd)
Forma je definisana tagom <form>
U okviru njega je najee korien tag
<input>
Forme
Tag <form> definie formu.
atribut method definie nain prenosa parametara unetih u formi,
atribut action definie stranicu na koju e se prei po zavretku unosa.
atribut accept-charset definie kodnu stranu po kojoj e biti kodiran uneti tekst
Tag <input> definie elemente forme.
Tip unosa je definisan atributom type.
Vrednosti atributa type mogu biti:
text tekstualno polje,
password polje za unos ifre,
radio radio buttons (atribut name mora da se poklapa da bi pripadali istoj grupi),
checkbox,
submit akcija koja treba da se izvri,
reset resetuje sve vrednosti polja na poetne,
image slika koja funkcionie kao dugme.
file za upload fajla,
button obino dugme; nema funkciju bez skript jezika.
hidden skriveno polje.
Tag <select> combo box/list box u kom se nalaze vrednosti definisane u tagu option;
razlika je u atributu size.

Tag <textarea> definie vielinijsko tekstualno polje.
Tag <fieldset> definie okvir oko elemenata koji su u okviru njega
podtag <legend> sadri tekst koji se ispisuje na okviru
Primer
<html>
<head>
<title>Forme</title>
</head>
<body >
<h1>Forme</h1>
<p>
Forma predstavlja deo dokumenta
koji sadri polja za unos podataka.
Postoji vie tipova ovakvih polja.
</p>
<form action="primer06-2.html"
method="get">
<p>
<fieldset>
<legend>Jednolinijska tekstualna
polja</legend>
Jednolinijsko tekstualno polje:
<input type="text" name="polje1">
<br><br>
Polje za unos lozinki:
<input type="password" name="polje2">
<br><br>
</fieldset>
Checkbox:
<input type="checkbox" name="polje3">
remind me <br><br>
Radio:
<input type="radio" name="polje4"
checked> Male
<input type="radio" name="polje4">
Female <br><br>
Primer
Vielinijsko polje: <br>
<textarea name="polje5" rows="10"
cols="30">Sadraj polja
</textarea> <br><br>
Combo box:
<select name="polje6">
<option value="1">Prva stavka</option>
<option value="2">Druga stavka</option>
<option value="3">Trea stavka</option>
</select> <br><br>
List box: <br>
<select name="polje7" size="3">
<option value="1">Prva stavka</option>
<option value="2" selected>Druga
stavka</option>
<option value="3">Trea stavka</option>
</select> <br><br>
Skriveno polje:
<input type="hidden" name="polje8"
value="vrednost"> <br><br>
Polje za upload fajla: <br>

<input type="file" name="polje9">
<br><br>
Dugme:
<input type="button" name="polje10"
value=" Dugme "> <br><br>
Reset dugme:
<input type="reset" name="polje11"
value=" Reset "> <br><br>
Submit dugme:
<input type="submit" name="polje12"
value=" Submit "> <br><br>
Slika-dugme:
<input type="image" name="polje13"
src="submit.gif"> <br><br>
</p>
</form>
</body>
</html>
Primer
Frejmovi
Uz pomo frejmova, mogue je prikazati vie od
jedne web stranice u istom prozoru browser-a.

Svaka stranica je frejm za sebe i one su
meusobno nezavisne.
Tag <frameset> definie kako da se podeli
prozor uz pomo atributa cols (za vertikalnu
podelu) ili rows (za horizontalnu podelu), u kojima
se navode procenti ili vrednost u pikselima.
Tag <frame> definie koji e HTML dokument biti
u kom frejmu.
Atribut src definie URL do html stranice koja e biti
prikazana u frejmu.
Atribut name definie naziv frejma. Koristi se za
definisanje odreditnog frejma za linkove (atribut
target).
Atribut target
Hiperlink moe da sadri atribut target
definie kako e se otvoriti zadati link
Vrednosti:
naziv frejma u kojem e se otovriti
_blank stranica e se otvoriti u novom prozoru
_self stranica e se otvoriti u istom frejmu gde
je i link
_parent stranica e se otvoriti u roditeljskom
frejmu
_top stranica e se otvoriti u punom prozoru
(izai e iz frejma)
Frejmovi
Vertikalna podela
<html>
<frameset cols="25%,50%,25%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
<frame src="frame_c.htm">
</frameset>
</html>
Frejmovi
Horizontalna podela
<html>
<frameset rows="25%,50%,25%">
</frameset>
</html>
Primer
<html>
<frameset rows="50%,50%">
<frameset cols="25%,75%">
</frameset>
</frameset>
</html>
Primer
<html>
<head>
<title>Frejmovi</title>
</head>
<frameset rows="20%,80%">
<frame name="zaglavlje" src="primer041.html">
<frame name="glavni" src="primer04-2.html">
</frameset>
</html>
Primer
primer04-1.html
primer04-2.html
<html>
<head>
<title>Zaglavlje</title>
</head>
<body bgcolor="silver" link="blue"
alink="red" vlink="blue">
<h3>Zaglavlje</h3>
<p>
<a href="primer04-2.html"
target="glavni">Prva stranica</a>

<a href="primer04-3.html"
target="glavni">Druga stranica</a>
</p>
</body>
</html>
<html>
<head>
<title>Glavni frejm</title>
</head>
<body bgcolor="yellow"
link="blue" alink="red"
vlink="blue">
<h3>Prva stranica</h3>
<p>
Ovo je prva stranica.
</p>
</body>
</html>
Primer
iframe
Inline frame frejm na proizvoljnoj
poziciji unutar stranice

Atributi:
src naziv HTML datoteke koja e biti
prikazana u ovom prozoru

width, height irina i visina
scrolling da li da prikae skrolere (yes, no,
auto)
align poravnanje
(left,right,top,middle,bottom)
Primer
<html>
<body>
<iframe src=http://www.ftn.ns.ac.yu"></iframe>
<p>Some older browsers don't support iframes.</p>
<p>If they don't, the iframe will not be
visible.</p>
</body>
</html>
Dodatni atributi body taga

Atribut bgcolor boji pozadinu stranice.
Atribut background definie putanju do
pozadinske slike.
Primer:
<body bgcolor="#d0d0d0">
<body background="background.jpg">
Boje
Boje se zadaju imenom ili RGB vrednostima
Meta tagovi
Definiu dodatne informacije koje se ne
prikazuju.
Dodatne informacije se definiu kao parovi
(naziv, vrednost), tj. atributi name i content
<meta> taga
koriste se za obezbeivanje informacija pretraivaima
interneta (yahoo, google, itd.): author, description,

keywords;
informacije za druge namene (proizvoljne vrednosti).
Atribut http-equiv definie podatke koji opisuju
stranicu (upravljaju itaem)
http-equiv moe biti: Content-Type, Refresh, Cache-
Control, Pragma, itd.

a, vrednosti (content): text/html, 5, no-cache, itd.
Primer
<html>
<head>
<title>META tagovi</title>
<meta name="author" content="John Smith">
<meta name="description" content="This is a page that
demonstrates various META tags.">
<meta name="keywords" content="HTML, META tags, description">
</head>
<body>
<h1>META tagovi (1/2)</h1>
<p>(pogledajte izvorni kod dokumenta)</p>
</body>
</html>
Primer
Primer
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Refresh" content="5">
<meta http-equiv="Cache-Control" content="no-cache">
</head>
<body>
<p>Malo unicode teksta:</p>
<p>Latinica </p>
<p></p>
</body>
</html>
Primer
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Refresh" content="5">
<meta http-equiv="Cache-Control" content="no-cache">
</head>
<body>
<p>Malo unicode teksta:</p>
<p>Latinica </p>
<p></p>
</body>
</html>
Primer

1 HTML

Uploaded by

Document Information

Original Title

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

1 HTML

Uploaded by

Copyright:

Available Formats

HTML

World Wide Web

Klijenti su itai (browser)

HTTP protokol protokol za komunikaciju izmeu web

Klijent trai neki resurs od servera

Resurs moe biti

Za WWW nije neophodan internet i web server

GET /docs.html HTTP/1.0

markap jezik koji opisuje stranice koje imaju

markap jezik oznaava tekst

definiu strukturu HTML dokumenta

ekstenzija je html ili htm

Tagovi ne smeju da se preklapaju

<b>This text is bold</b>

HTML dokument uvek poinje tagom <html>, a

zavrava se tagom </html>.

Tag <head> uokviruje zaglavlje u kom se

nalaze informacije o samom dokumentu

nalaze izmeu tagova <head> i </head>,

poseenih i neposeenih linkova,

Tagovi za formatiranje teksta

Tagovi za formatiranje teksta

Tagovi za formatiranje teksta

Skraenice, citati, definicije

Skraenice, citati, definicije

razmaci koji se ne saimaju u jedan

Proizvoljan Unicode karakter moe se

jedan bajt za karakter sa vrednou od U+0000 do U+007F

basic multilingual plane i prikazuje se jednim code unit-om (samo 16 bita)

ovakvi karakteri se zovu supplementary characters

Link na deo stranice

upotrebu name atributa:

Link na deo stranice:

Stavke nabrojive liste poinju rednim

brojem (slovom, i sl.)

ispred prve stavke.

pojam) i <dd> (definition-list description opis)

korisno je uneti informaciju o visini i irini slike u img tag

Slika kao mapa linkova

opisa zona (do <map> taga).

mapa ne mora da bude u istoj HTML datoteci

Tag <map> definie geometrijske zone na slici koje

shape vrsta geometrijskog oblika (circle, rect, poly)

ako je krug (circle), daju se x i y koordinata i poluprenik

href URL do stranice na koju se ide klikom po zoni

koji su podeljeni na polja, a prva polja

Pomou taga <th> definiu se zaglavlja

vrsta ili kolona.

je definisati poravnanje tabele u

izmeu ivice tabele i ivice elije u tabeli.

ivice elije do sadraja elije.

obuhvatiti kolona ili vrsta, pomou atributa

koji odreuju zaglavlje tabele, i tagove <td>

bottom, middle, top),

trebalo bi ostaviti &nbsp; da bi bilo ispravno

Element caption definie naslov tabele.

<table>, a ne unutar tagova <td> ili <tr>.

<h4>Primer jednostavne tabele sa

<h4>Primer jednostavne tabele - atribut "align" ima

<h4>Primer jednostavne tabele sa poveanim

<h4>Primer jednostavne tabele sa naslovom

razlika je u atributu size.

trebalo bi ostaviti da bi bilo ispravno