HTML Predavanje 2021

Velja Milanović 8/26/2021
Velja Milanović 26.8.2021.
1
OSNOVE HTML-a
Velja Milanović
2
Šta je HTML?
• HTML (HyperText Markup Language) je veoma jednostavan jezik koji služi za
izvršavanje programa na daljinu.
• Ovaj jezik predstavlja standard za Internet dokumente.
Velja Milanović 1
3
Hipertekst
• tekst koji sadrži veze ili linkove ka drugim dokumentima ili na samog sebe.
• hipertekst je skup stranica u obliku datoteka, međusobno povezanih linkovima
koji su umetnuti u stranice.
• Za razliku od običnog teksta, koji se čita linearno (sleva na desno, odozgo
naniže), hipertekst se čita prateći hiper-veze u tekstu.
4
.html
• HTML stranice imaju ekstenziju .html ili .htm, a nalaze se u određenom
direktorijumu servera vezanog na Internet, što ih čini dostupnim na web-u.
Velja Milanović 2
5 Najznačajniji jezici za opis hiperteksta su:
• SGML,
• HTML (skr. od HyperText Markup Language), pojednostavljena verzija SGML-a,
• XHTML (skr. od Expandable HTML) i
• XML (skr. od Extensible Markup Language, "kompromis" između preterane
složenosti SGML-a i jednostavnosti HTML-a;)
6
Pojam tag-ova
• HTML komande se pišu u vidu tzv. TAG-ova. Jedan tag je ustvari komanda koja
govori browseru šta i kako da uradi tj. na koji način da prikaze sadržaj stranice.
• HTML tagovi su "case insensitive"
Velja Milanović 3
7 Tagovi - nastavak
• <html> tag se nalazi na početku svakog HTML dokumenta i govori

browseru da je fajl koji je upravo počeo da učitava HTML dokument i da
kao takvog treba i da ga prikaže.
• Na kraj HTML dokumenta se stavlja završni HTML tag:</html>.

• Ovaj tag govori browseru da je to kraj HTML dokumenta.
8
Početni i završni tag
Većina tagova ima i početni izavršni tag. Završni

tag se dobija dodavanjem znaka "/" i označava
mesto na kom prestaje dejstvo početnog taga.
Velja Milanović 4
Velja Milanović
Vrste tagova
26.8.2021.
9
prosti tagovi za opisivanje jednostavnih elemenata logičke
strukture. Oblika su: <X>
složeni tagovi su zagrade oblika <X> y </X> kojima je opisan
izgled dela teksta y.
atributi složenih obeležja oblika: <X A1=a A2=b ...> y </X>
koji pružaju dodatne informacije, obično o grafičkom izgledu, dela
teksta y
10 Struktura HTML stranice
Minimalna struktura HTML-dokumenta obuhvata tagove:

• <HTML>, </HTML> - zagrade HTML-teksta;
• <HEAD>, </HEAD> - zagrade zaglavlja, sadrži meta-definicije HTML-
dokumenta;
• <TITLE>, </TITLE> - zagrade za naziv HTML-dokumenta i
• <BODY>, </BODY> - zagrade teksta obeleženog dokumenta.
Velja Milanović 5
11 Head deo
• Svaki HTML dokument se sastoji od dva dela: zaglavlja (engl. head) i tela (engl.
body).
• Zaglavlje se odvaja tagovima <head> i </head> a telo dokumenta tagovima:
<body> i </body>.
• Sve ono sto se napiše u zaglavlju dokumenta neće se prikazati u prozoru
browsera već obicno služi samo da pruži neke informacije o stranici.
12 BODY deo
• Sve ono što je napisano izmedju tagova <body> i </body> predstavlja telo
dokumenta pojaviće se kao sadržaj prezentacije u prozoru browsera.
Velja Milanović 6
Velja Milanović
Primer 26.8.2021.
13
<!DOCTYPE html>
<html>
<head>
<title>ovde je naziv prezentacije</title>
</head>
<body>
ovde se unosi sve ono sto zelite da se vidi u prezentaciji
</body>
</html>
14 Komentar
Dodatna opcija omogućava da se obeleži komentar u HTML-obeleženom

tekstu koji se neće videti u vizuelizaciji dokumenta.

Velja Milanović 7
15
Headeri
• Naslovi (engl. headers) se kodiraju prema relativnoj dubini ciframa od 1 do 6. Tag
za naslovima opšti oblik:
<Hn> Naslov nivoa n </Hn>
gde n uzima vrednosti od 1 do 6
16 Odeljak
• Odeljak (engl. division) se opisuje zagradama <DIV> ... </DIV>.

• Ovaj tag može imati atribut za pozicioniranje ALIGN sa vrednostima CENTER,
RIGHT ili LEFT.
Velja Milanović 8
17
Paragraf
• Pasus (engl. paragraph) se obeležava zagradama <P> ... </P>.
• Ukoliko u ravnom tekstu sledi pasus za pasusom, tag </P> se može izostaviti.
• Ovaj tag može imati atribut za pozicioniranje ALIGN sa istim vrednostima kao
tag <DIV>.
18
Novi red
• Novi red (engl. break) se obeležava tagom <BR>.
• Ovo je prosti tag: ne postoji kraj taga </BR>.
Velja Milanović 9
19
Horizontalna (razdvojna) linija
• Razdvojna linija (engl. rule) se obeležava tagom <HR> sa opcionim atributom
NOSHADE
• Ovo je prosti tag: ne postoji kraj taga </HR>.
• Primer
<HR SIZE=4 WIDTH="50%">
SIZE – debljina linije

Primer 1
20
<!DOCTYPE html>
<HTML>
<HEAD><TITLE>Ovo je naslov</TITLE></HEAD>
<BODY>
TEKST KOJI SE PRIKAZUJE
</BODY>
</HTML>
Velja Milanović 10

Primer 2
21 <!DOCTYPE html>
<HTML>
<HEAD><TITLE>Naslovi</TITLE></HEAD>
<BODY>
<H1> Naslov H1 </H1>
</BODY>
</HTML>
Velja Milanović
Primer 3 26.8.2021.
22 <!DOCTYPE html>
<html>
<head>
<TITLE> HTML Primer</TITLE>
</head>
<body>
<H1>HTML Uvod</H1>
<P>Ovo je primer prvog paragrafa.Koji se radi na prvom casu.
</P>
<P>Drugi paragraf.</P>
<P ALIGN=CENTER>
Ovo je centrirani paragraf
</P>
</body>
</html>
Velja Milanović 11
Primer 4
23
<HTML>
<HEAD><TITLE>Primeri osnovnih tagova</TITLE></HEAD>
<BODY>
<H2><P ALIGN=CENTER> HTML</P> </H2>
<HR>
<P ALIGN=LEFT>HTML (HyperText Markup Language) je veoma
jednostavan jezik cije osnove svako moze da se brzo savlada. U
okviru ovog kursa proucavaju se osnove HTML-a koje su dovoljne da
se naprave jednostavne ali sasvim zadovoljavajuce prezentacije.
</P>
24
Primer 4 - nastavak
<HR>
<P ALIGN=RIGHT>
Svaki put kada krstareci internetom naletite na neku zanimljivu
stranicu , a ne znate kako je napravljena, njen izvorni HTML kod
mozete pogledati ako u liniji menija odaberete: View -> Source.
</P>
<HR>
Velja Milanović 12
Velja Milanović
Primer 4 - nastavak 26.8.2021.
25 <P ALIGN=CENTER>HTML se koristi i u okviru<BR>

ASP stranica<BR>
JSP stranica, <BR> Zajedno
sa JavaScriptom <BR> ili PHP jezikom <BR>
ili nekim drugim script jezikom</P>
<HR>
<P ALIGN=CENTER>HTMLje
<DIV ALIGN=LEFT>hiper-</DIV>
<DIV ALIGN=CENTER>tekst-</DIV>
<DIV ALIGN=RIGHT>Markup jezik.</DIV>
Kad savladate osnove HTML-a mozete preci na upoznavanje JavaScripta </P>
</BODY>
</HTML>
26
Liste
• Liste u jeziku HTML su navođenje, ispisivanje onih delova teksta, koji se ne
mogu svesti na prethodno opisane elemente logičke strukture (pasus, odeljak, i
sl).
• Razlikuju se tri vrste lista:
• Nenumerisane
• Numerisane
• Neuređene
Velja Milanović 13
27
Numerisane liste
• liste u kojima se stavke nabrajaju bez navođenja rednih brojeva
• Unose se pomoću <OL> taga
• Pojedinačne stavke liste se definišu pomoću <LI> taga
• <LI> tag je prost tag
28
Numerisane liste
• liste sa navodjenjem rednog broja
• Definiše se pomoću taga <OL>
• Opšta struktura ove liste izgleda ovako:
<OL>
<LI> Element 1 liste
.....
</OL>
Velja Milanović 14
29 Primer
Godisnja doba su:

<ol>
<li>prolece
<li>leto
<li>jesen
<li>zima
</ol>
30
Numerisane liste
• <OL> tag po default-u koristi arapske brojeve, ali se njegova vrednost može
promeniti pomoću atributa type
• Atribut type može imati sledeće vrednosti:
• A-velika slova
• a-mala slova
• I-rimski brojevi
• i-mali rimski brojevi
Velja Milanović 15
31
Primer
<ol type="I">
<li>prolece
<li>leto
<li>jesen
<li>zima
</ol>
32
Nenumerisane liste
• Opšta struktura za ovu vrstu lista je (UL – unordered list)
<UL>
.....
</UL>
Velja Milanović 16
33
Nenumerisane liste
• Da bi se promenio simbol ispred stavki koristi se atribut type, koji može imati
vrednosti:
• Circle-okruglo dugme
• Disc-ispunjeno okruglo dugme
• Square-kvadratno dugme
34
Primer
<ul type="square">
<li>prolece
<li>leto
<li>jesen
<li>zima
</ul>
Velja Milanović 17
35
Neuređene liste
• Dobijaju se pomoću <dl> taga
• Svaka stavka liste se sastoji iz dva dela:
• Termina koji želimo da definišemo i
• Njegove definicije
• Za termin se koristi <dt> tag

• Za definiciju se koristi <dd> tag
36
Opšta struktura neuređene liste
<DL>
<DT> odrednica 1<DD>opis odrednice 1
<DT> odrednica 2 <DD>opis odrednice 2
.....
</DL>
Velja Milanović 18
Velja Milanović
Lista unutar liste-primer 26.8.2021.
37
<UL>
<LI> A few New England states:
<UL>
<LI> Vermont
<LI> New Hampshire
<LI> Maine
</UL>
<LI> Two Midwestern states:
<UL>
<LI> Michigan
<LI> Indiana
</UL>
</UL>
Primer za vežbu
<!DOCTYPE html>
38 <HTML>
<HEAD>
<TITLE>Opisne liste</TITLE>
</HEAD>
<BODY>
<DL>
<DT>piko-
<DD> prefiks nekoj jedinici koji pokazuje milioniti deo milionitog dela te jedinice;
<DT>nano-
<DD> prefiks nekoj jedinici koji pokazuje milijarditi deo te jedinice;
<DT>mikro-
<DD>prefiks nekoj jedinici koji pokazuje milioniti deo te jedinice;
</DL>
</BODY>
</HTML>
Velja Milanović 19
39
Formatiranje teksta
Formatiranje teksta
40
<center> </center>
Tag <font> može imati atribute face, size i color
Atributom face definišemo tip fonta:
<font face="Comic Sans MS"> Tekst. </font>
<font face="Comic Sans MS,Arial,Courier">
Atributom size definišemo veličinu fonta:
<font face="Comic Sans MS" size="3">Comic Sans MS</font>
Velja Milanović 20
41
Formatiranje teksta
HTML razlikuje 7 veličina slova koje nose vrednosti od 1 do 7.
Podrazumevana veličina je 3
Atribut color omogućava definisanje boje teksta
<font color="#ff0000"> tekst. </font>
Formatiranje teksta
42
bold <b>bold</b>
strong <strong>strong</strong>
italic <i>italic</i>
underline <u>underline</u>
strike <strike>strike</strike>
H2O H<sub>2</sub>O
22=4 2<sup>2</sup>=4
Velja Milanović 21
43
Linkovi
44
Pojam linka
• Vezuje se za pojam hiper-veze
• Hiper-veza predstavlja mogućnost da se čitanje teksta iz čvora1 nastavi u čvoru2
• Definiše se pomoću taga anchor na sledeći način:
<A atribut> ... </A>.
Velja Milanović 22

Link
45
Polazni čvor označava u tekstu onu poziciju sa koje se prelazi na neki drugi
tekst i kodira se pomoću atributa HREF:
<A HREF= adresa čvora 2> pozicija u čvoru 1 sa koje se prelazi na
čvor 2 </A>
Dolazni čvor je ili adresa neke datoteke ili tag koja obeležava deo teksta.
Definiše se pomoću atributa NAME:
<A NAME= pozicija u čvoru 2> tekst u čvoru 2 na koji se
prelazi iz čvora 1 </A>
Atribut NAME nije obavezan. Ukoliko se on izostavi, navigator se pozicionira
na početak dokumenta u čvoru 2, a inače na naznačenu poziciju.
46
Vrste linkova
• Linkovi sa kojima se može pristupiti nekom drugom delu iste te stranice u kojoj se link
i nalazi
<A HREF="#adresa"> tekst na koji se može "kliknuti" </A>

<A NAME= "adresa"> dolazni tekst </A>
Velja Milanović 23
Vrste linkova
47
Drugu vrstu bi činili linkovi do neke druge stranice u okviru iste te prezentacije
To se postiže definisanjem taga <a> sa atributom href i nazivom HTML fajla do kojeg se želi da se
napravi veza.
<a href="Prosla.html"> Veza do stranice Prosla.html </a>
Kada se mišem klikne na tekst "Veza do stranice Prosla.html" u browseru će se prikazati stranica
Prosla.html.
48
Navodjenje putanje
• vrednost href atributa mora se postaviti celokupna putanja koji vodi do tog fajla
(npr. c:\Prezentacija\Primer\Prosla.html).
Velja Milanović 24
49
Vrste linkova
• Treću vrstu bi činili linkovi do stranice u nekoj sasvim drugoj prezentaciji koja
može biti postavljena na računaru koji se nalazi na nekom sasvim drugom
serveru
• potrebno je navesti celu web adresu te prezentacije
• Opšti oblik adrese koja se pojavljuje kao vrednost HREF atributa je
http://server.domen/putanja/imeDokumenta
http://www.etf.bg.ac.rs
50
Slanje poruke na mail adresu
< a href="mailto: bbbbb@ymail.com"> Posaljite e-mail poruku! </a>
Velja Milanović 25

Primer
51
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>Spoljne reference</TITLE>
</HEAD>
<BODY>
<p>Poziv strane o HTML-adresiranju:</p>
<a
href="http://www.w3.org/hypertext/WWW/Addressing/Addressing.html">
Adresiranje</a>
</BODY>
</HTML>
Velja Milanović
Primer 26.8.2021.
<!DOCTYPE html>
52 <HTML>
<HEAD><TITLE> Primer unutrasnjeg referisanja</TITLE></HEAD>
<H2>Osnovi programiranja </H2>
<OL>
<LI> <A HREF="#html"> Web i jezik HTML </A> ;
<LI> <A HREF="#algo"> Osnovni algoritmi</A>
<LI> <A HREF="#c"> Uvod u C</A>
</OL>
<H3> <A name="html"> Web i jezik HTML</A> </H3>
<p><BR></p><p><BR></p><p><BR></p>
<H3> <A name="algo"> Osnovni algoritmi </A> </H3>
<p><BR> BR></p><p><BR></p>
<H3> <A name="c"> Uvod u C </A> </H3>
<p><BR></p><p><BR> </p><p><BR></p>
</UL>
</BODY></HTML>
Velja Milanović 26
53 slike
• Slike (fotografije, crteži, skice,...) u digitalizovanom obliku, sačuvane u nekoj

datoteci, često su sastavni deo teksta.
• Od značaja je da navigator može protumačiti format u kome je slika sačuvana.
Najčešće se koriste formati JPEG i GIF.
54 slike
• Slike se u tekstu navode koristeći etiketu IMG (skr. od image) koja ima obavezni
atribut SRC (skr. od source). Oblik u kome se navodi ovaj tag je:
<IMG SRC="URL datoteke u kojoj je slika">
Velja Milanović 27
55 Atributi taga IMG
• tag IMG može imati različite atribute koji omogućavaju da se precizno opišu
položaj, dimenzije i odnos slike prema drugim delovima teksta.
• Atribut za poravnavanje slike u odnosu na margine ALIGN može imati vrednosti
• za vertikalno poravnavanje: TOP, MIDDLE, BOTTOM
• za horizontalno poravnjavanje: LEFT, CENTER, RIGHT
• Atributi za dimenzionisanje slike su WIDTH (širina) i HEIGHT (visina).

• Atributi koji opisuju položaj slike su HSPACE i VSPACE.
• Atribut koji opisuje širinu okvira slike BORDER.
Velja Milanović 28
Tag ALT predstavlja zamenu za sliku, kada posetilac sajta ne vidi slike (iz bilo kog razloga).
Neko može da koristi čist tekstualni browser; neko je možda isključio prikazivanje slika da bi
brže surfovao itd. U takvim slučajevima, atribut ALT može biti veoma važan.
<IMG SRC=“slika.jpg" WIDTH=124 HEIGHT=150 ALT=“Moja slika!">
58 Slike-veze
Slika u dokumentu može predstavljati i polazno sidro u hiper-vezi. Kažemo da je

takva slika slika-veza. Dolazna adresa se tada navodi kao kod hiper-veze, a
umesto teksta na koji se može "kliknuti" navodi se tag IMG.
<A HREF= URL dolazne datoteke > tag IMG slike na koju
se može "kliknuti" </A>
Velja Milanović 29
59 Tabele
Tabela je u HTML-u dvodimenziona matrica čiji se elementi nazivaju ćelije

(engl. cell). Ćelija može sadržavati raznovrsne informacije: brojeve, tekst,
boje, liste, hiper-veze, slike, itd. Tabela se sastavlja tako što se opisuju
redom njene vrste (redovi, engl. row) i sadržaj svake ćelije u redu.
60 Tabele
• Tabela se opisuje uz pomoć složene taga TABLE koja može sadržavati više
atributa:
• BORDER (ili okvir, ram) koji opisuje širinu spoljašnjeg okvira tabele;
• CELLSPACING koji opisuje širinu linije koja razdvaja dve ćelije;
• CELLPADDING koji opisuje prostor oko sadržaja ćelije;
• WIDTH koji opisuje ukupnu širinu tabele.
Velja Milanović 30
61 Tabele
Nadnaslov tabele se može zadati etiketom CAPTION koja se ispisuje iznad

tabele i može imati atribut ALIGN:
za vertikalno poravnavanje: TOP, T MIDDLE, BOTTOM
za horizontalno poravnavanje: LEFT, CENTER, RIGH
62 Tabele
Svaka vrsta u tabeli se opisuje između zagrada <TR> i </TR> (engl. table
row). tag TR može imati atribute:
za horizontalno poravnjavanje, atribut ALIGN sa vrednostima: LEFT,
CENTER, RIGHT
za vertikalno poravnavanje, atribut VALIGN sa vrednostima: TOP,
MIDDLE, BOTTOM
Velja Milanović 31
63 Tabele
• Pojedinačna ćelija se opisuje između zagrada <TD> i </TD>. tag TD, pored
atributa ALIGN i VALIGN, može imati i atribute:
• za horizontalno spajanje ćelija: ROWSPAN (spaja ćelije iste vrste) i
• za vertikalno spajanje ćelija: COLSPAN (spaja ćelije iste kolone) .
• tag <TH> ima ista svojstva kao tag <TD> s tom razlikom što obezbeđuje da
sadržaj ćelije bude automatski centriran i u crnom slogu (bold).
Velja Milanović
Tabele 26.8.2021.
64
<TABLE BORDER=1>
<TR>
<TD>Pera</TD>
</TR>
</TABLE></TABLE>
Tabela bez ivica:
<TABLE BORDER=0>
<TR>
<TD>Pera</TD>
</TR>
</TABLE>
Velja Milanović 32
Tabele
65
<TABLE BORDER=3 WIDTH=100%>
<TR>
<TD>Pera, Mika i Laza</TD>
</TR>
</TABLE>
<TABLE BORDER=3 WIDTH=50 HEIGHT=75>
<TR>
<TD>Pera</TD>
</TR>
</TABLE>
66 Tabele
• Horizontalni sadržaj ćelije se nalazi u centru:

<TR>
<TD ALIGN=CENTER>Pera</TD>
</TR>
</TABLE>
• Podrazumevana vrednost (obično je) ALIGN=LEFT.
Velja Milanović 33
67 Tabele
• Vertikalni položaj sadržaja ćelije.

<TR>
<TD ALIGN=LEFT VALIGN=TOP>Pera</TD>
</TR>
</TABLE>
• Podrazumevana vrednost (obično je) VALIGN=MIDDLE.
Tabele
68

<TR>
<TD WIDTH=60%>Pera</TD>
<TD WIDTH=20%>Laza</TD>
<TD WIDTH=20%>Mika</TD>
</TR>
</TABLE>
Velja Milanović 34

Tabele
69 <TABLE BORDER=3>
<TR>
<TD COLSPAN=2>Pera</TD>
<TD>Mika</TD>
</TR>
<TR>
<TD>Gaga</TD>
<TD>Sima</TD>
<TD>Đole</TD>
</TR>
</TABLE>
Ćelija Pera je širine 2.
70 Tabele
<TABLE BORDER=3>
<TR>
<TD COLSPAN=3 ALIGN=CENTER>Pera</TD>
</TR>
<TR>
<TD>Gaga</TD>
<TD>Sima</TD>
<TD>Đole</TD>
</TR>
</TABLE>
 Ćelija Pera je širine 3.
Velja Milanović 35
71
Izrada HTML dokumenata u kojima su
vidljiva slova srpske azbuke
U odeljku zaglavlja (<HEAD>) se definiše kodna strana koja se koristi za

prikaz grafičkih karaktera
Zadavanje kodne strane se vrši pomoću meta-zaglavlja META oblika:
<meta charset="UTF-8">
72 Colspan i rowspan
HTML dopušta mogućnost da se pojedine ćelije tabele protežu duž više

redova ili kolona tabele. Ovakav efekat se može postići pomoću atributa
colspan i rowspan, koji se ubacuju u <td> ili <th> tag one ćelije koja se
želi posebno da formatira. Vrednost ovih atributa se zadaje brojem
kolona ili redova tabele duž kojih treba da se prostire data ćelija.
Velja Milanović 36
Velja Milanović
Primer 26.8.2021.
<!DOCTYPE html>
73 <html>
<head> <meta charset="UTF-8"> </head>
<body>
<table border="2" width="100%">
<tr>
<th rowspan="2" colspan="2"><img src="space.gif"></th>
<th colspan="5"> Dani u nedelji :</th>
</tr>
<tr>
<th width="20%">ponedeljak</th>
<th width="20%">utorak</th>
<th width="20%">sreda</th>
<th width="20%">cetvrtak</th>
<th width="20%">petak</th>
</tr>
<tr>
<th rowspan="5">c<p>a<p>s<p>o<p>v<p>i</th>
<th>1.</th>
74 <td>srpski</td>
<td>istorija</td>
<td>fizicko</td>
<td>hemija</td>
<td>srpski</td>
</tr>
<tr>
<th>2.</th>
<td>matematika</td>
<td>srpski</td>
<td>fizicko</td>
<td>hemija</td>
<td>srpski</td>
</tr>
Velja Milanović 37
Velja Milanović <tr> 26.8.2021.
<th>3.</th>
75 <td>fizicko</td>
<td>matematika</td>
<td>istorija</td>
<td>biologija</td>
<td>engleski</td>
</tr>
<tr>
<th>4.</th>
<td>fizicko</td>
<td>matematika</td>
<td>fizika</td>
<td>informatika</td>
<td>engleski</td>
</tr>
76 <tr>
<th>5.</th>
<td>fizika</td>
<td>razredni</td>
<td>geografija</td>
<td>informatika</td>
<td>matematika</td>
</tr>
</table>
Velja Milanović 38
77
Space.gif
• U prvu ćeliju tabele je postavljena slika tipa gif pod nazivom space.gif. Ovo je
neophodno stoga što svaka ćelija tabele mora imati neki sadržaj, inace je browser
neće prikazati.
78
Boje u tabeli
• HTML dozvoljava da cela tabela kao i svaka ćelija posebno može da ima različitu
boju tagove: <table>, <td> ili <th>. Vrednost se zadaje heksadecimalnim kodom
boje ili njenim imenom, isto kao i kod boje pozadine stranice u <body> tagu.
• atribut bgcolor koji je zadat u <th> ili <td> tagu će se prikazati umesto
one boje koja se nalazi u <table> tagu.
• Takođe boja okvira tabele se može promeniti pomoću bordercolor atributa u

<table> tagu
Velja Milanović 39
Specijalni znakovi
79
Znak & znači početak nekog specijalnog znaka, dok ; označava kraj. Slova između
predstavljaju skraćenicu tog specijalnog znaka! Postoji veliki broj takvih znakova.
Evo nekoliko često korišćenih. Obavezno koristite mala slova!
(jedno prazno mesto)
< (< manje od)
> (> veće od)
& (&)
" (" navodnici)
( crtica)
80 Formulari
• Formulari se koriste za interakciju između korisnika i servera.
Korisnik popuni formular i onda ga šalјe.
• Postoje dva osnovna dela formulara:
o struktura ili lјuska
o skript za obrađivanje.
• Struktura se sastoji od polјa, oznaka i dugmadi koje posetilac vidi

na strani i popunjava.
Velja Milanović 40
81
• Скрипт за обрађивање узима информације и конвертује их у
формат који може да се чита или на други начин разуме.
• Формулар има три важна дела:
• елемент FORM
• елементе формулара
• дугме за слање.
• Елемент FORM се користи за приказивање формулара.

• Има почетни и завршни маркер.
82
• Елемент FORM има следеће атрибуте:
• ACTION
• METHOD
• NAME.
• Атрибут ACTION представља адресу локације којој ће бити

прослеђен садржај обрасца.
• Атрибут METHOD одређује који се протокол користи.
Могуће вредности су POST и GET.
• Атрибут NAME представља име обрасца.
Velja Milanović 41
<FORM ACTION=‘акција’ METHOD=POST>

Садржај формулара
</FORM>
84
• Највећи део елемената се представља елементом INPUT.
• Елемент INPUT представља поље чији се садржај може
мењати од стране корисника.
• Има само почетни маркер.
• Приказивање поља зависи од вредности атрибута TYPE.
Velja Milanović 42
85 • Ако је type=‘text’, тада се прави оквир за текст.

• Оквири за текст могу да садрже један ред обичног текста, тј.
било шта што посетилац жели да унесе.
Оквир за текст
• Лабела оквира за текст одређена је атрибутом NAME.

• Ширина поља (у карактерима) одређена је атрибутом SIZE.
86
• Максималан број карактера одређен је атрибутом
MAXLENGTH.
• Подразумевана величина је 20.
• Може се дефинисати подразумевана вредност оквира за текст
која ће бити послата ако посетилац не унесе нешто друго.
• Подразумевана вредност одређена је атрибутом VALUE.
value=“Србија”
Velja Milanović 43
87 • Могу се користити атрибути NAME, SIZE и MAXLENGTH.
<input type="password" name="code" size="8">
• Ако је type=‘radio’, тада се прави радио (опционо) дугме.

• Формулар може имати више поља, а само једно може бити потврђено
(изабрано).
• Атрибути могу бити NAME, VALUE и CHECKED.
88 Атрибут NAME идентификује податке који се шаљу скрипту, а такође и

повезује радио дугмад осигуравајући да само једно по скупу може бити
притиснуто.
<input type="radio" name="size" value="K">King

<input type="radio" name="size" value="Q">Queen
<input type="radio" name="size" value="T">Twin
<input type="radio" name="size" value="S">Single
Velja Milanović 44
89
• Атрибут VALUE представља текст који ће се послати на

сервер ако је одабрано радио дугме.
• Атрибут CHECKED омогућава да радио дугме буде активно
када се страна отвори. Нема вредност.
• Текст који идентификује радио дугме се наводи иза почетног
маркера елемента INPUT.
• Ако је type=‘checkbox’, тада се прави оквир за потврду.
90
• Образац може имати више поља и сва она могу бити
потврђена.
• Атрибути могу бити NAME, VALUE и CHECKED.
• Атрибут NAME идентификује податке који се шаљу скрипту
и такође повезује оквире за потврду.
• Атрибут VALUE дефинише вредност за сваки оквир.
• Атрибут CHECKED омогућава да оквир за потврду буде
одабрано када се страна отвори. Нема вредност.
Velja Milanović 45
91 <input type="checkbox" name="extras"

value="foot">Footboard
<input type="checkbox" name="extras"
value="drawers" checked="checked">
Drawers (for underneath)
value="casters">Casters
value="nosqueak">Squeak proofing</p>
92
• Ако је type=‘submit’, тада се прави дугме за слање.
• Атрибут може бити VALUE који представља текст који ће се
појавити на дугмету.
• Ако се атрибут VALUE, изостави тада се појављује текст
Submit Query.
Velja Milanović 46
93
• Ако је type=‘reset’, тада се прави дугме за поништавање
формулара.
• Атрибут може бити VALUE и представља текст који се
појављује на дугмету.
94
• Атрибут NAME представља име поља које се прослеђује.
• Атрибут ROWS представља висину подручја у редовима.
• Атрибут COLS представља ширину подручја у карактерима.
• Максималан број карактера који може да се унесе је 32700.
• Скрол траке ће се појавити када буде потребно.
Velja Milanović 47
95
• За прављење менија користи се елемент SELECT.

• Елемент има почетни и завршни маркер.
• Атрибути могу бити NAME, MULTIPLE и SIZE.
96
• Атрибут NAME представља име скупа алтернатива.
• Атрибут SIZE представља висину менија у редовима.
• Атрибут MULTIPLE дозвољава посетиоцу да изабере више од
једне опције менија (тастером Ctrl).
• За приказивање опција користи се елемент OPTION.
• Елемент има почетни и завршни маркер.
Velja Milanović 48
97
• Атрибути могу бити SELECTED, VALUE и DISABLED.
• Атрибут SELECTED оногућава да опција буде иницијално
селектована.
• Атрибут VALUE дефинише податке који ће се послати
серверу ако је опција одабрана.
98
Velja Milanović 49
99
100
• HTML omogućava da se naprave lepša dugmad za slanje.
• To se postiže elementom BUTTON.
• Element ima početni i završni marker.
• Atributi mogu biti NAME i TYPE.
• Atribut NAME predstavlјa ime dugmeta.
• Atribut TYPE predstavlјa tip dugmeta.
• Vrednosti mogu biti SUBMIT i RESET.
Velja Milanović 50
Velja Milanović
26.8.2021.
Дугме са сликом (за слање или поништавање) се прави следећим

101 кодом
<BUTTON TYPE=“SUBMIT” NAME=“SUBMIT” VALUE=“SUBMIT”>

<IMG SRC=“Адреса Слике”>
</BUTTON>
102
Priča vezana za forme nastavlјa se sa pričom vezanom za JavaScript.
Tada ćemo biti u mogućnosti da obrađujemo događaje nad formama

i elemente prosleđujemo drugim stranicama.
Velja Milanović 51

HTML Predavanje 2021

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 Predavanje 2021

Uploaded by

Copyright:

Available Formats

Velja Milanović 8/26/2021

Velja Milanović 26.8.2021.

Velja Milanović 26.8.2021.

Velja Milanović 26.8.2021.

Velja Milanović 26.8.2021.

Velja Milanović 26.8.2021.

5 Najznačajniji jezici za opis hiperteksta su:

Velja Milanović 26.8.2021.

Velja Milanović 26.8.2021.

• <html> tag se nalazi na početku svakog HTML dokumenta i govori

• Na kraj HTML dokumenta se stavlja završni HTML tag:</html>.

Velja Milanović 26.8.2021.

Većina tagova ima i početni izavršni tag. Završni

Velja Milanović 26.8.2021.

10 Struktura HTML stranice

Minimalna struktura HTML-dokumenta obuhvata tagove:

Velja Milanović 26.8.2021.

Velja Milanović 26.8.2021.

Velja Milanović 26.8.2021.

Dodatna opcija omogućava da se obeleži komentar u HTML-obeleženom

Velja Milanović 26.8.2021.

Velja Milanović 26.8.2021.

• Odeljak (engl. division) se opisuje zagradama <DIV> ... </DIV>.

Velja Milanović 26.8.2021.

Velja Milanović 26.8.2021.

Velja Milanović 26.8.2021.

Velja Milanović 26.8.2021.

Velja Milanović 26.8.2021.

Velja Milanović 26.8.2021.

Velja Milanović 26.8.2021.

25 <P ALIGN=CENTER>HTML se koristi i u okviru<BR>

Velja Milanović 26.8.2021.

Velja Milanović 26.8.2021.

Velja Milanović 26.8.2021.

Velja Milanović 26.8.2021.

Godisnja doba su:

Velja Milanović 26.8.2021.

Velja Milanović 26.8.2021.

Velja Milanović 26.8.2021.

Velja Milanović 26.8.2021.

Velja Milanović 26.8.2021.

Velja Milanović 26.8.2021.

• Za termin se koristi <dt> tag

Velja Milanović 26.8.2021.

Velja Milanović 26.8.2021.

Velja Milanović 26.8.2021.

Velja Milanović 26.8.2021.

Velja Milanović 26.8.2021.

<font color="#ff0000"> tekst. </font>

Velja Milanović 26.8.2021.

Velja Milanović 26.8.2021.

Velja Milanović 26.8.2021.

<A atribut> ... </A>.

Velja Milanović 26.8.2021.

Velja Milanović 26.8.2021.

<A HREF="#adresa"> tekst na koji se može "kliknuti" </A>

Velja Milanović 26.8.2021.

Velja Milanović 26.8.2021.

Velja Milanović 26.8.2021.

Velja Milanović 26.8.2021.

< a href="mailto: bbbbb@ymail.com"> Posaljite e-mail poruku! </a>

Velja Milanović 26.8.2021.

Velja Milanović 26.8.2021.