Razvoj aplikativnog softvera

Download Report

Transcript Razvoj aplikativnog softvera 

Aplikativni softver
Fakultet za informatiku i menadžment
Univerzitet Singidunum
www.fim.singidunum.ac.yu
HyperText Markup Language
HTML
2008/2009.
Violeta Tomašević
Literatura
• Boško Nikolić, Internet programiranje: HTML, CSS, JavaScript, Panevropski
univerzitet Apeiron za multidisciplinarne i virtuelne studije, Banja Luka, 2007.
Aplikativni softver
2
HTML
Šta je HTML?
HTML je platformski neutralan jezik koji omogućava izvršavanje programa na
daljinu. Danas ovaj jezik predstavlja standard za izradu Internet dokumenata.
Internet
Server
ime.html
ili
ime.htm
HTML stranica
Klijent
Klijent
Web
browser
Klijent
Web
browser
Web
browser
Aplikativni softver
3
HTML
Hipertekst
Hipertekst je tip dokumenta koji se generiše primenom HTML-a.
Hipertekst predstavlja skup stranica u obliku datoteka koje su međusobno
povezane vezama, tj. linkovima umetnutim u stranice.
Linkovi mogu da ukazuju na druge stranice, ili na druga mesta na istoj stranici.
Linkovi se aktiviraju klikom na miša nakon što je on pozicioniran na sam link.
Čitanje običnog teksta
(linearno)
Čitanje hiperteksta
(praćenje veza)
odozgo na dole
s leva na desno
link
link
link
Aplikativni softver
HTML
Alati i HTML
Za rad sa HTML dokumentima potrebni su:
 Alati za generisanje HTML stranice
 običan tekst editor, na primer Notepad koji se nalazi u
Start meniju pod Programs→Accessories, ili
 specijalni alati, na primer Front Page
 Alati za pristup HTML stranici
 Web čitači (Web browsers), na primer Netscape
Navigator ili Internet Explorer
4
Aplikativni softver
HTML
Tagovi
Tag je HTML komanda koja govori čitaču kako treba da prikaže sadržaj HTML
stranice.
Tagovi se pišu u okviru oznaka < i >. Većina tagova ima početni i završni tag.
Završni tag se dobija dodavanjem znaka / i označava mesto na kome prestaje
dejstvo početnog taga. HTML tagovi ne zavise od veličine slova kojim se pišu,
tj. mogu se pisati malim ili velikim slovima (case insensitive).
HTML tag
početni tag
<html>
Ovaj tag se nalazi na početku svakog HTML
dokumenta. On govori čitaču da je fajl koji je
počeo da učitava HTML dokument i da treba
kao takvog i da ga prikaže.
</html>
Ovaj tag se stavlja na kraj HTML dokumenta.
On govori čitaču da je to kraj HTML
dokumenta.
završni tag
HTML dokument
5
Aplikativni softver
6
HTML
Vrste tagova
Grupa
Oznaka
Objašnjenje
Prosti tagovi
<X>
Koriste se za opisivanje
jednostavnih elemenata
logičke strukture.
Složeni tagovi
<X> Y </X>
Tagovi sa
atributima
<X A1=a A2 = b …> Y </X>
Opisuju izgled dela teksta Y.
Opisuju atribute koji pružaju
dodatne informacije o delu
teksta Y.
Aplikativni softver
HTML
Struktura HTML stranice
Minimalna struktura HTML dokumenta
<html>
<head>
<title>
<!-naziv stranice-->
</title>
</head>
Ovim tagom se opisuje zaglavlje stranice koje
sadrži osnovne informacije o stranici: naziv,
korišćeni alat, stil stranice, itd. Ove
informacije se ne prikazuju u prozoru čitača.
Ovim tagom se definiše telo dokumenta, tj.
sadržaj koji se prezentira u prozoru čitača.
<body>
<!-izgled stranice-->
</body>
</html>
Primer komentara u okviru stranice.
Komentar se ne prikazuje u prozoru čitača.
7
Aplikativni softver
HTML
Formatiranje teksta
 Naslov
 Prikaz teksta
 Paragraf i odeljak
HTML
stranica
 Font
 Novi red
 Specijalni znaci
 Razdvojna linija
8
Aplikativni softver
9
HTML
Naslov
(header)
Naslovi u nekom tekstu se razlikuju po važnosti, što se prikazuje nivoima na
kojima se nalaze. U HTML-u, naslovi se mogu prikazati na 6 nivoa koji su
označeni brojevima od 1 do 6.
Opšti oblik taga za naslov je:
<Hn> Naslov na nivou n </Hn>
gde n predstavlja nivo na kome se naslov nalazi.
Primer koda
<H1> Naslov H1 </H1>
<H2> Naslov H2 </H2>
<H3> Naslov H3 </H3>
Izgled na HTML stranici
Naslov H1
Naslov H2
Naslov H3
Aplikativni softver
HTML
Prikaz teksta
Tekst na HTML stranici zavisi od veličine slova kojim je napisan u kodu (case
sensitive), za razliku od tagova koji nisu osetljivi na velika i mala slova. Znači,
tekst se prikazuje onako kako je napisan (ako se ne koriste tagovi za
formatiranje).
Ako se drugačije ne naglasi, tekst na HTML stanici je poravnat uz levu
marginu. Centriranje teksta se postiže primenom sledećih tagova:
<center> Tekst </center>
Primer koda
<center> Ovo je centriran tekst </center>
Izgled na HTML stranici
Ovo je centriran tekst
10
Aplikativni softver
11
HTML
Paragraf i odeljak
Paragraf i odeljak su osnovne logičke celine u tekstu. Paragraf je odvojen od
prethodnog teksta razmakom između redova, a odeljak novim redom bez razmaka.
Tag za definisanje novog paragrafa je:
<p> Paragraf [</p>]
[ ] znači opciono
Tag za definisanje odeljka je:
<div> Odeljak </div>
Poravnanje paragrafa ili odeljka se postiže align atributom u okviru ovih tagova,
koji može imati tri vrednosti: left, center i right.
Primer koda
<p align=“left”> levo
<p align=“center”> centrirano
<p align=“right”> desno
Izgled na HTML stranici
levo
centrirano
desno
Aplikativni softver
HTML
Font (1)
Font definiše izgled slova kojima će biti ispisan tekst na stranici.
Tag za definisanje fonta je:
<font> Tekst </font>
Ovaj tag može imati sledeće atribute: face, size i color.
Atribut face definiše tip fonta kojim će tekst biti ispisan. Da bi prikazani tekst bio u zadatom
fontu, taj font mora biti instaliran na računaru. Mogu se navesti i alternativni fontovi.
Atribut size definiše veličinu slova kojom će tekst biti ispisan. HTML razlikuje 7 veličina slova
označenih od 1 do 7. Podrazumevana vrednost je 3.
Atribut color definiše boju slova u okviru teksta.
Primer koda
<font face=“Verdana,Arial” size=“3” color=“#ff0000”> Tekst </font>
Izgled na HTML stranici
Tekst
12
Aplikativni softver
HTML
Font (2)
HTML omogućava pisanje podebljanim slovima (bold, strong), kurzivom (italic),
kao i podvlačenje i precrtavanje teksta:
Bold
<b>Tekst</b>
Strong
<strong>Tekst</strong>
Italic
<i>Tekst</i>
Underline
<u>Tekst</u>
Strike
<strike>Tekst</strike>
HTML takođe omogućava pisanje indeksa i ekponenata:
H2O
H<sub>2</sub>O
23=8
2<sup>3</sup>=8
13
Aplikativni softver
HTML
Novi red
Tekst u okviru HTML stranice koji je napisan u nekom editoru ne pojavljuje se
uvek na ekranu sa HTML stranicom u istom obliku u kome je napisan.
Naime, novi red napisan u tekst editoru neće se prikazati na HTML stranici,
već će ceo tekst biti ispisan u jednom redu.
Tagovi koji se koriste za prelom teksta:
 <br> - prelazak u novi red
 <nobr> Tekst </nobr> - ispisivanje teksta u jednom redu uz
skrolovanje, ukoliko je tekst duži od reda
 <wbr> - uslovni prelazak u novi red, samo ako je tekst predug za jedan
red; pogodan je za prelom dugačkih reči na kraju reda
14
Aplikativni softver
HTML
Specijalni znaci
Za prikazivanje specijanih znakova, koriste se odgovarajuće HTML naredbe.
One počinju znakom &, a završavaju se znakom ;.
HTML naredba
Izgled na HTML strani
&nbsp;
(blanko)
&lt;
<
&gt;
>
&amp;
&
Primer koda
<p> &nbsp; &nbsp; &nbsp;tekst
Izgled na HTML stranici
tekst
15
Aplikativni softver
16
HTML
Razdvojna linija
(rule)
Radvojna linija je horizontalna linija preko cele stranice kojom se želi
naglasiti neka nova celina.
Tag za definisanje razdvojne linije je:
<hr>
Ovaj tag može imati sledeće atribute: noshade, size, width, align i color.
Atribut noshade omogućva da linija ne bude osenčena, već potpuno crna. Atribut size
definiše debljinu linije u pikselima. Atribut width definiše dužinu linije u pikselima ili u
procentima širine stranice. Atribut align ima isto značenje kao istoimeni atribut
paragrafa. Atribut color definiše boju linije.
Primer koda
<hr noshade align=“center” size=“6” width=“50%” color=“#ff0000”>
Izgled na HTML stranici
Aplikativni softver
HTML
Liste
Liste omogućavaju definisanje većeg broja stavki u željenom
redosledu u okviru teksta HTML stranice.
Postoje tri vrste lista u HTML-u:
 Nenumerisane liste
 Numerisane liste
 Definicione liste
Za sve navedene vrste lista, neophodno je definisati elemente liste i
način prikazivanja pojedinih elemenata.
17
Aplikativni softver
18
HTML
Nenumerisane liste (1)
Nenumerisane liste su liste kod kojih se ispred stavki liste prikazuju
specijalni simboli. Za definisanje liste ove vrste koristi se tag <UL> Stavke
</UL>, dok se za definisanje stavki koristi tag <LI>.
Opšti oblik definisanja nenumerisane liste je:
< UL>
<LI> prva stavka
<LI> druga stavka
....
<LI> poslednja stavka
</UL>
Primer koda
<UL>
<LI> jabuke
<LI> banane
<LI> maline
</UL>
Izgled na HTML stranici
• jabuke
• banane
• maline
Aplikativni softver
19
HTML
Nenumerisane liste (2)
Simbol koji se prikazuje ispred stavki nenumerisane liste može se definisati
pomoću atributa type.
Atribut type može imati sledeće vrednosti:
circle, što odgovara krugu
disc, što odgovara punom krugu
sqaure, što odgovara kvadratu
Primer koda
<UL type=“square”>
<LI> jabuke
<LI> banane
<LI> maline
</UL>
Izgled na HTML stranici
 jabuke
 banane
 maline
Aplikativni softver
20
HTML
Numerisane liste (1)
Numerisane liste su liste kod kojih se ispred stavki liste prikazuju redni
brojevi ili slova. Za definisanje liste ove vrste koristi se tag <OL> Stavke
</OL>, dok se za definisanje stavki koristi tag <LI>.
Opšti oblik definisanja numerisane liste je:
<OL>
<LI> prva stavka
<LI> druga stavka
....
<LI> poslednja stavka
</OL>
Primer koda
<OL>
<LI> jabuke
<LI> banane
<LI> maline
</OL>
Izgled na HTML stranici
1. jabuke
2. banane
3. maline
Aplikativni softver
21
HTML
Numerisane liste (2)
Brojevi ili slova koji se prikazuju ispred stavki numerisane liste mogu se
definisati pomoću atributa type.
Atribut type može imati sledeće vrednosti:
A, što odgovara velikim slovima
a, što odgovara malim slovima
I, što odgovara velikim rimskim brojevima
i, što odgovara malim rimskim brojevima
Primer koda
<OL type=“I”>
<LI> jabuke
<LI> banane
<LI> maline
</OL>
Izgled na HTML stranici
I.
jabuke
II. banane
III. maline
Aplikativni softver
HTML
Definicione liste (1)
Definicione liste su liste kod kojih se svaka stavka sastoji iz dva dela: pojma
koji se definiše i njegove definicije. Pojam se ravna uz levu marginu, dok se
njegova definicija pojavljuje u novom redu, uvučena za određeni broj mesta.
Za definisanje liste ove vrste koristi se tag <DL> Stavke </DL>, dok se za
definisanje stavki koriste tagovi <DT> za pojam i <DD> za definiciju pojma.
Opšti oblik definicione liste je:
<DL>
<DT> prvi pojam <DD> definicija prvog pojma
<DT> drugi pojam <DD> definicija drugog pojma
....
<DT> poslednji pojam <DD> definicija poslednjeg pojma
</DL>
22
Aplikativni softver
HTML
Definicione liste (2)
Primer koda
<DL>
<DT>Prolece: <DD>traje od 21.marta do 21.juna.
<DT>Leto: <DD>traje od 21.juna do 21.septembra.
<DT>Jesen: <DD>traje od 21.septembra do 21.decembra.
<DT>Zima: <DD>traje od 21.decembra do 21.marta.
</DL>
Izgled na HTML stranici
Prolece:
traje od 21.marta do 21. juna.
Leto:
traje od 21.juna do 21. septembra.
Jesen:
traje od 21.septembra do 21. decembra.
Zima:
traje od 21.decembra do 21. marta.
23
Aplikativni softver
24
HTML
Ugnježdavanje lista
Ugnježdavanje lista opisuje slučaj kada se kao stavka neke liste pojavljuje
takođe neka lista.
Primer koda
<UL>
<LI> Vrste voca su:
<UL type=“circle”>
<LI> jabuke
<LI> banane
<LI> maline
</UL>
<LI> Vrste povrca su:
<OL>
<LI> sargarepa
<LI> kupus
</OL>
</UL>
Izgled na HTML stranici
•
•
Vrste voca su:
o jabuke
o banane
o maline
Vrste povrca su:
1. sargarepa
2. kupus
Aplikativni softver
25
HTML
Boje (1)
U dobro dizajniranim HTML stranicama, boje imaju značajnu ulogu. HTML
podržava brz i jednostavan rad sa paletom boja. Identičan pristup setovanju
boja važi za sve HTML elemente.
1. način
Setovanje boja
2. način
Korišćenjem predefinisanih engleskih naziva za
boje(“red”, “yellow”, “blue”, i sl.)
Korišćenjem heksadecimalne RGB vrednosti ispred
koje stoji simbol #
Opšti oblik RGB vrednosti je:
“#cczzpp”
gde su cc, zz i pp heksadecimalne vrednosti za
intenzitet crvene, zelene i plave boje. One pripadaju
opsegu 0-255(10) , tj. O-FF(16).
Aplikativni softver
26
HTML
Boje (2)
Globalne promene boja elemenata HTML stranice se postižu primenom taga
BODY.
U okviru taga BODY, za setovanje boja koriste se sledeći atributi:
bgcolor – definiše boju pozadine
text – definiše boju slova na stranici
background – definiše pozadinu u obliku slike
Primeri definisanja boje pozadine i boje slova
<body bgcolor=“#ffff00” text =“#008000”>
<body bgcolor=“#ffff00” text =“green”>
<body bgcolor=“yellow” text =“#008000”>
<body bgcolor=“yellow” text =“green”>
}
Svi primeri daju
isti rezultat!
Aplikativni softver
HTML
Boje (3)
Pozadina u vidu slike definiše se atributom background u okviru taga BODY.
Potrebno je izabrati sliku u elektronskom formatu i odrediti lokaciju na kojoj će
se slika nalaziti.
Pri izboru slike treba voditi računa o veličini fajla (zbog izvršavanja na
udaljenom računaru). Najpodesniji formati za sliku su JPEG (podržava 16
miliona boja uz efikasnu kompresiju) i GIF (256 boja, mogući transparentnost i
animacija).
Najjednostavnije rešenje za izbor lokacije je da se slika nalazi na istom
direktorijumu na kome se nalazi i aplikacija.
Primer
<body background=“pozadina.jpg”>
Dobra praksa je definisanje i boje pozadine (za slučaj da slika ne može da se učita)
<body background=“pozadina.jpg” bgcolor=“blue”>
27
Aplikativni softver
HTML
Slike (1)
Slike se mogu prikazati na proizvoljnom mestu HTML stranice primenom taga
IMG.
Tag IMG mora imati sledeći atribut:
src – definiše naziv i eventualno lokaciju grafičkog fajla
Osim ovog, tag IMG može imati i sledeće atribute:
align – služi za poravnanje slike u odnosu na margine
• za vertikalno poravnanje vrednosti atributa mogu biti top, middle, i bottom
• za horizontalno poravnanje vrednosti atributa mogu biti left, center i right
width i height – definišu širinu i visinu slike u pikselima ili procentima u odnosu
na stranicu; ako se definiše samo jedna dimenzija, druga se proporcionalno
menja
hspace i vspace – definiše prazan prostor oko slike u pikselima
border – definiše širinu okvira slike u pikselima
alt – omogućava da se na mestu neučitane slike prikaže odgovarajući komentar
28
Aplikativni softver
HTML
Slike (2)
Primer
<img src=“slika.gif” align =“top” hspace =“50” vspace =“15” border=“5“>
tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
Primer
<img src=“slika.gif” alt =“Slika”>
tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
Slika
tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
29
Aplikativni softver
30
HTML
Linkovi (1)
Linkovi ili hiperveze su veze koje se uspostavljaju između HTML stranica. Oni
omogućavaju jednostavan prelazak sa jednog mesta na drugo u okviru iste
stranice, ili prelazak na sasvim novu stranicu. Mesto odakle se prelazi naziva se
polazna pozicija, a mesto na koje se prelazi, krajnja pozicija.
Postoje sledeće vrste linkova:
 krajnja pozicija se nalazi na istoj stranici kao i polazna pozicija
 krajnja pozicija se nalazi na drugoj stranici
 druga stranica je u okviru iste aplikacije i nalazi se na istom serveru kao i
stranica sa polaznom pozicijom
 druga stranica ne pripada istoj aplikaciji i nalazi se na drugom serveru
Tag za definisanje linka je:
<A atribut> …
</A>
Aplikativni softver
31
HTML
Linkovi (2)
Slučaj: krajnja pozicija je na istoj stranici kao i polazna
Uspostavljanje linka:
definisati ime krajnje pozicije
<A NAME=“ime_krajnje_pozicije”> tekst na krajnjoj poziciji </A>
na polaznoj poziciji definisati referencu na krajnju poziciju
<A HREF=“#ime_krajnje_pozicije”> tekst na polaznoj poziciji </A>
Primer
<A href=“#htmlJezik”> Jezici </A>
<A name=“htmlJezik”> Jezik HTML </A>
Jezici
Jezik HTML
HTML stranica
Aplikativni softver
32
HTML
Linkovi (3)
Slučaj: krajnja pozicija je na drugoj stranici u istoj aplikaciji
(najjednostavniji i najčešće korišćeni slučaj jer omogućava kretanje kroz aplikaciju)
Uspostavljanje linka:
<A HREF=“ime_druge_stranice”> tekst na polaznoj poziciji </A>
Nakon klika mišem na tekst na polaznoj poziciji, čitač će prikazati stranicu pod
nazivom ime_druge_stranice i pozicioniraće se na njen vrh.
Primer
<A href=“Druga.html”> Veza do druge stranice </A>
Veza do druge stranice
Prva.html
Druga.html
Aplikativni softver
33
HTML
Linkovi (4)
Slučaj: krajnja pozicija je na drugoj stranici u istoj aplikaciji
(stranice nisu na istom direktorijumu na serveru)
Dva načina uspostavljanja linka:
 korišćenjem apsolutnih putanja, kada se u okviru HREF atributa navodi puna
putanja do druge stranice
 korišćenjem relativnih putanja, kada se u okviru atributa HREF navodi putanja
u odnosu na direktorijum na kome se nalazi polazna stranica
Primeri korišćenja apsolutnih putanja
<A href=“c:\Aplikacije\Poslovanje\Klijent\Druga.html”> Veza do druge stranice </A>
<A href=“http://singidunum.ac.yu/Str/Druga.html”> Veza do druge stranice </A>
Aplikativni softver
34
HTML
Linkovi (5)
Slučaj: krajnja pozicija je na drugoj stranici u istoj aplikaciji
(stranice nisu na istom direktorijumu na serveru)
Primer korišćenja relativnih putanja
Neka je sadržaj direktorijuma:
X – stranice 1.html i 2.html
Y – stranica 3.html
Z – stranica 4.html
Relativne putanje
Za stranicu 1:
 relativna adresa stranice 2 je “2.html”
 relativna adresa stranice 3 je “Y/3.html”
 relativna adresa stranice 4 je “Y/Z/4.html”
Za stranicu 4:
 relativna adresa stranice 2 je “../../2.html”
 relativna adresa stranice 3 je “../3.html”
Aplikativni softver
35
HTML
Linkovi (6)
Slučaj: krajnja pozicija je na drugoj stranici u drugoj aplikaciji
(druga aplikacija je na drugom serveru)
Uspostavljanje linka:
 u okviru HREF atributa navodi se puna web adresa prezentacije u kojoj se
nalazi druga stranica
scheme://server.domen[:port]/putanja/imeDokumenta
Primeri
odlazak na početnu stranicu prezentacije
<A href=“http://www.singidunum.ac.yu”> Veza do Univerziteta Singidunum </A>
odlazak na zadatu stranicu
<A href=“http://www.w3.org/hypertext/Addressing.html”> Adresiranje </A>
Aplikativni softver
HTML
Linkovi (7)
U HTML dokumentu, slika može predstavljati polaznu poziciju u
hipervezi. Krajnja adresa se tada navodi kao i ranije, a umesto teksta na
polaznoj poziciji navodi se tag IMG.
Opšti oblik linka je:
<A HREF=“URL krajnje stranice”> IMG tag za sliku </A>
Primer
<A href=“Primer.html”> <img src=“osam.gif”> </A>
36
Aplikativni softver
HTML
Tabele (1)
Tabele predstavljaju dvodimenzionalne matrice. Elementi tabele se nazivaju
ćelijama (cells). Ćelije mogu da sadrže raznovrsne informacije: brojeve, tekst,
boje, liste, linkove, slike, i dr.
Tag za definisanje tabele je:
<TABLE> Opis tabele </TABLE>
Tabela se definiše tako što se redom opisuju njene vrste.
Tag za definisanje vrsta tabele je:
<TR> Opis vrste </TR>
Vrsta tabela se definiše tako što se redom opisuju pojedinačne ćelije u vrsti.
Tag za definisanje pojedinačnih ćelija je:
<TD> Opis ćelije </TD>
37
Aplikativni softver
HTML
Tabele (2)
Tag za definisanje naslova tabele je:
<CAPTION> Naslov tabele </CAPTION >
Ovaj tag može imati sledeće atribute:
align – definiše horizontalno poravnanje; dozvoljene vrednosti ovog
atributa su left, center i right
valign – definiše vertikalno poravnanje; dozvoljene vrednosti ovog
atributa su top, middle i bottom
38
Aplikativni softver
HTML
Tabele (3)
Tag TABLE može da sadrži sledeće atribute:
border – definiše širinu spoljašnjeg okvira tabele u pikselima
bgcolor – definiše boju pozadine tabele
cellspacing – definiše širinu linije koje razdvaja dve ćelije
cellpadding – opisuje prostor oko sadržaja ćelije do njene granične linije
width – definiše ukupnu širinu tabele u pikselima ili % veličine prozora
height – definiše ukupnu visinu tabele u pikselima ili % veličine prozora
Tag TR može da sadrži sledeće atribute:
align – definiše horizontalno poravnanje; dozvoljene vrednosti ovog atributa su
left, center i right
valign – definiše vertikalno poravnanje; dozvoljene vrednosti ovog atributa su
top, middle i bottom
39
Aplikativni softver
HTML
Tabele (4)
Tag TD može da sadrži sledeće atribute:
align – definiše horizontalno poravnanje; dozvoljene vrednosti ovog atributa su
left, center i right
valign – definiše vertikalno poravnanje; dozvoljene vrednosti ovog atributa su
top, middle i bottom
bgcolor – definiše boju pozadine ćelije
rowspan – definiše horizontalno spajanje ćelija (unutar iste vrste)
colspan – definiše vertikalno spajanje ćelija (unutar iste kolone)
Vrednosti atributa rowspan i colspan se definišu brojem vrsta, odnosno kolona
duž kojih treba da se prostire spojena ćelija.
Tag TH ima ista svojstva kao i tag TD, s tom razlikom što je sadržaj ćelije
definisan unutar ovog taga automatski centriran i boldovan.
Tabela mora da sadrži bar jedan TD tag, a ne mora da sadrži TH tag.
40
Aplikativni softver
HTML
Tabele (5)
Opšta struktura tabele u HTML-u
<TABLE>
<CAPTION> naslov tabele </CAPTION>
<TR>
<TH> sadržaj prve ćelije zaglavlja tabele </TH>
<TH> sadržaj poslednje ćelije zaglavlja tabele </TH>
</TR>
<TR>
<TD> sadržaj prve ćelije prvog reda </TD>
<TD> sadržaj poslednje ćelije prvog reda </TD>
</TR>
<TR>
<TD> sadržaj prve ćelije poslednjeg reda </TD>
<TD> sadržaj poslednje ćelije poslednjeg reda </TD>
</TR>
</TABLE>
41
Aplikativni softver
HTML
Tabele (6)
Primer: generisanje tabele koja ima samo jednu vrstu
<table border="3" cellpadding="5" cellspacing="5">
<tr>
<td>hello</td> <td>hello3</td> <td>hello5</td>
</tr>
</table>
Primer: generisanje tabele koja ima samo jednu kolonu
<table border="3" cellpadding="5" cellspacing="5">
<tr><td>hello</td></tr>
<tr><td>hello3</td></tr>
<tr><td>hello5</td></tr>
</table>
42
Aplikativni softver
43
HTML
Tabele (7)
Primer: generisanje naslovljene tabele sa više vrsta i kolona
Spisak zaposlenih
Ime i prezime
Marko Peric
Sektor
racunovodstvo
Pozicija
rukovodilac
<table border=“2" width=“100%">
<caption> Spisak zaposlenih </caption>
<tr>
<th><font face=“Verdana” size=“2”> Ime i prezime </font></th>
<th><font face=“Verdana” size=“2”> Sektor </font></th>
<th><font face=“Verdana” size=“2”> Pozicija </font></th>
</tr>
<tr>
<td><font face=“Verdana” size=“2”> Marko Peric </font></td>
<td><font face=“Verdana” size=“2”> racunovodstvo </font></td>
<td><font face=“Verdana” size=“2”> rukovodilac </font></td>
</tr>
</table>
Aplikativni softver
44
HTML
Tabele (8)
Primer: generisanje tabele sa spojenim ćelijama
Raspored casova
ponedeljak
1. cas
srpski
utorak
istorija
sreda
fizicko
<table border=“2" width=“90%">
<tr>
<th rowspan=“2”><img src=”space.gif”></th>
<th colspan=“5”> Raspored casova </th>
</tr>
<tr>
<th width=“15%”>ponedeljak</th>
<th width=“15%”>utorak</th>
<th width=“15%”>sreda</th>
<th width=“15%”>cetvrtak</th>
<th width=“15%”>petak</th>
</tr>
cetvrtak
hemija
petak
srpski
<tr>
<th>1. cas</th>
<td>srpski</td>
<td>istorija</td>
<td>fizicko</td>
<td>hemija</td>
<td>srpski</td>
</tr>
</table>
Aplikativni softver
HTML
Forme (1)
Osim prikazivanja sadržaja neke stranice klijentu, HTML omogućava i prenos
podataka ka serveru odakle je stranica učitana. Na serverskoj strani se mogu
koristiti razne tehnologije za prihvatanje i obradu podataka, kao što su ASP,
PHP, JSP, servleti i dr.
Forme omogućavaju korisniku unos podataka na klijentskoj strani aplikacije.
Na taj način se uspostavlja komunikacija između korisnika i servera. Zavisno
od unetih podataka, server poziva određeni programski modul koji obrađuje
podatke, i nakon toga generiše novu HTML klijentsku stranicu.
Forme se koriste u širokom spektru aplikacija, kao što su:
 Upiti nad bazama podataka ili pretraživačima
 Identifikacija pristupa određenim servisima servera
 Elektronska trgovina
 Obaveštenja (prognoza vremena, putovanja i dr.)
45
Aplikativni softver
HTML
Forme (2)
Tag za definisanje forme je:
<FORM> Definicije elemenata forme </FORM>
Dva najvažnija atributa taga FORM su:
ACTION – sadrži URL adresu programa na serveru
METHOD – opisuje način prenosa argumenata programa; vrednosti ovog
atributa mogu biti get i post
Primer
<FORM action=“Primer.html” method=“post”>
...
<!------definicije elemenata forme------->
...
</FORM>
46
Aplikativni softver
HTML
Forme (3)
Metodi za slanje argumenata programa serveru:
 get metod – vrednosti parametara koje se šalju serveru navode se u okviru
adrese programa koji se poziva; ovim metodom se može proslediti samo
ograničen broj parametara, jer mora da važi:
dužina URL adrese + dužina parametara < 1KB
 post metod – vrednosti parametara se u okviru zaglavlja poruke šalju
serveru tako da nisu vidljive korisniku; nema ograničenja u pogledu broja
parametara
U praksi se češće koristi post metod, posebno za prenos podataka koji ne bi
trebalo da budu javni, kao što su korisničko ime, lozinka, matični broj, broj
kreditne kartice i sl.
Primer: slanje vrednosti parametra1 koja iznosi 88 programu
ServerskiProgramskiModul koji se poziva na serveru
http://server.com/ServerskiProgramskiModul?parametar1=88
47
Aplikativni softver
HTML
Forme (4)
Forma može da sadrži različite elemente. Korisnik unosi podatke u te
elemente, a zatim se uneti podaci prosleđuju serveru na obradu. Da bi se to
postiglo, svaki element forme treba da ima definisan:
 tip elementa – definiše se pomoću atributa type
 naziv elementa – definiše se pomoću atributa name
 vrednost elementa – definiše se pomoću atributa value
U okviru forme moguće je definisati sledeće elemente:







komandnu dugmad
tekstualna polja
tekstualne prozore
polja za potvrdu
radio dugmad
padajuću listu
skrivene promenljive
48
Aplikativni softver
HTML
Forme (5)
U okviru forme moguće je definisati više vrsta komandne dugmadi sa
različitim funkcijama.
Zajednički tag za definisanje komandne dugmadi je:
<INPUT atributi>
Atribut type definiše funkciju komandnog dugmeta. Najčešće korišćene
vrednosti ovog atributa su: button, submit i reset.
Vrednost button definiše dugme opšteg tipa. Pritiskom na dugme ovog tipa,
korisnik pokreće akciju koja se mora definisati u okviru samog taga INPUT.
Najčešće je to neka funkcija koja na klijentskoj strani obavlja neke provere pre
slanja podataka na server.
Primer
<INPUT type=“button” name =“Proveriti” onClick =“funkcijaZaProveru()”>
Na formi se pojavljuje dugme na kome piše ”Proveriti” i kada korisnik klikne mišem na
njega izvršava se funkcijaZaProveru() koja je definisana u okviru iste HTML stranice.
49
Aplikativni softver
HTML
Forme (6)
Vrednost submit definiše dugme za slanje podataka na server. Podaci se šalju
pomoću metoda koji je definisan u okviru FORM taga (atribut METHOD).
Primer
<INPUT type=“submit” name =“Poslati”>
Vrednost reset definiše dugme koje postavlja sve vrednosti elemenata forme
na predefinisane vrednosti. U ovom slučaju nije potrebno definisati novu
funkciju, jer se podrazumeva da će se izvršiti akcija poništavanja novounetih
vrednosti elemenata forme.
Primer
<INPUT type=“reset” name =“Ponistiti”>
50
Aplikativni softver
51
HTML
Forme (7)
Tekstualna polja su najčešće korišćeni elementi forme. Ona omogućavaju
korisniku da unese tekstualne podatke kao što su: ime, prezime, mesto
stanovanja i sl.
Tag za definisanje tekstualnih polja je (kao i kod komandnih dugmadi):
<INPUT atributi>
pri čemu atribut type ima vrednost text.
U vezi sa tekstualnim poljima, tag INPUT može da sadrži i sledeće atribute:
name – definiše ime tekstualnog polja koje mogu da koriste drugi elementi
aplikacije za pristup sadržaju polja (čitanje, menjanje vrednosti)
value – definiše inicijalni tekst u tesktualnom polju
size – definiše maksimalan broj karaktera koji se može uneti u polje
Primer
<INPUT type=“text” name =“ime_prezime” value =“Unesite ime i prezime“ size =“30”>
Aplikativni softver
HTML
Forme (8)
Tag za definisanje tekstualnih polja čiji sadržaj nije vidljiv korisniku:
<INPUT atributi>
pri čemu atribut type ima vrednost password.
Izgled ovog polja je isti kao i običnog tekstualnog polja, samo što je svaki uneti
karakter predstavljen u obliku *. Sam čitač pamti unete karaktere i ostatku
aplikacije prosleđuje tekst koji je korisnik zaista uneo (a ne zvezdice).
Primer
<INPUT type=“password” name =“kreditna_kartica” size =“20”>
52
Aplikativni softver
HTML
Forme (9)
Tekstualni prozor predstavlja polje u koje korisnik može da unese više linija
teksta (za razliku od tekstualnog polja gde se može uneti samo jedna linija
teksta).
Ukoliko tekst koji se unosi prevazilazi veličinu prozora po širini, na dnu prozora
se pojavljuje horizontalni scrollbar koji omogućava čitanje cele linije. Na sličan
način, ukoliko broj linija teksta prevazilazi visinu prozora, na desnoj strani
prozora pojavljuje se vertikalni scrollbar koji omogućava čitanje svih linija
teksta.
Tag za definisanje tekstualnog prozora je:
<TEXTAREA atributi> Tekst </TEXTAREA>
U okviru ovog taga mogu se koristiti sledeći atributi:
name – predstavlja ime tekstualnog prozora
rows – definiše broj vidljivih redova u prozoru
cols – definiše broj vidljivih karaktera u vrsti
<TEXTAREA name=“komentar” rows=“6” cols=“50” ></TEXTAREA>
53
Aplikativni softver
HTML
Forme (10)
Polje za potvrdu služi za potvrđivanje neke informacije. Grafički prikaz ovog
polja predstavlja kvadrat na koji korisnik može da klikne mišem i na taj način
potvrdi (upiše X) ili opovrgne (izbriše X) neko tvrđenje navedeno uz kvadrat.
Tag za definisanje polja za potvrdu je:
<INPUT atributi>
pri čemu atribut type ima vrednost checkbox.
Više polja za potvrdu može da bude grupisano, pri čemu se svako polje
potvrđuje za sebe nezavisno od drugih polja (u jednom trenutku može biti
potvrđeno jedno, nijedno ili više polja).
Primer
Koje voce volite?

jabuke
 x kruske
 x sljive
<I>Koje voce volite?</I><br>
<UL type=“square”>
<LI><INPUT type=“checkbox” name=Pjabuke> &nbsp; jabuke</LI>
<LI><INPUT type=“checkbox” name=Pkruske> &nbsp; kruske</LI>
<LI><INPUT type=“checkbox” name=Psljive> &nbsp; sljive</LI>
</UL>
54
Aplikativni softver
55
HTML
Forme (11)
Radio dugmad omogućavaju korisniku da odabere jednu od ponuđenih opcija.
Grafički prikaz ovog dugmeta predstavlja krug na koji korisnik može da klikne
mišem i na taj način selektuje opciju opisanu pridruženim tekstom. Selekcija jedne
od opcija podrazumeva deselekciju svih ostalih opcija.
Tag za definisanje radio dugmeta je:
<INPUT atributi>
pri čemu atribut type ima vrednost radio.
Selekcija nekog radio dugmeta može se specificirati korišćenjem atributa checked.
Primer
Imate li racunar?


da
ne
<I>Imate li racunar?</I><br>
<UL type=“square”>
<LI><INPUT type=“radio” name=racunar> &nbsp; da</LI>
<LI><INPUT type=“radio” name=racunar> &nbsp; ne</LI>
</UL>
Aplikativni softver
56
HTML
Forme (12)
Padajuća lista omogućava korisniku da izabere jednu od više mogućnosti.
Grafički prikaz padajuće liste predstavlja polje na čijem se desnom kraju nalazi
dugme označeno strelicom na dole. U polju se prikazuje izabrana vrednost, dok se
klikom mišem na dugme otvara padajuća lista sa svim preostalim mogućnostima.
Tag za definisanje padajuće liste je:
<SELECT atributi> Definicija opcija </SELECT>
Atributi u okviru ovog taga mogu biti name, koji predstavlja ime liste i size, koji
definiše broj mogućih opcija u listi.
Tag za definisanje mogućih opcija (unutar taga SELECT) je:
<OPTION atributi> Naziv opcije </OPTION>
Selekcija neke opcije može se specificirati u okviru taga OPTION korišćenjem
atributa selected.
Aplikativni softver
HTML
Forme (13)
Moj omiljeni grad je:
Pariz
Firenca
Tokio
Moskva
Primer koda
<B><I>Moj omiljeni grad je:</I></B>
<SELECT name=“gradovi”>
<OPTION>Pariz</OPTION>
<OPTION>Firenca</OPTION>
<OPTION>Tokio</OPTION>
<OPTION>Moskva</OPTION>
</SELECT>
57
Aplikativni softver
HTML
Forme (14)
Skrivene promenljive se koriste u slučaju kada je u okviru HTML stranice
potrebno zapamtiti određene vrednosti koje ne bi trebalo prikazati korisniku.
Tag za definisanje skrivene promenljive je:
<INPUT atributi>
pri čemu atribut type ima vrednost hidden.
Ovako definisanoj promenljivoj, ostatak aplikacije može pristupiti preko imena
(kao i svim drugim elementima forme).
Primer
<INPUT type=“hidden” name=“identifikacija” value=“08100-OEM-3897”>
58
Aplikativni softver
HTML
Cascading Style Sheets – CSS (1)
Cascading Style Sheets – CSS omogućava efikasno formatiranje HTML
stranica u okviru neke aplikacije.
Pogodnosti koje pruža CSS su:
 fleksibilno formatiranje jedne HTML stranice
 moguće je grupisanje elemenata stranice po formatima
 istovetan način formatiranja svih HTML stranica u aplikaciji
 omogućen je uniforman izgled svih stranica u aplikaciji
 jednostavna izmena formata HTML stranica
 format svih stranica se menja izmenom jedinstvenog skupa parametara
 znatno redukovana količina programskog koda koji se odnosi na
formatiranje stranica
 kod za formatiranje je zajednički za više stranica, tj. nema ponavljanja
koda
59
Aplikativni softver
60
HTML
CSS (2)
Da bi se omogućio CSS koncept formatiranja HTML stranica, uveden je pojam
CSS elementa koji definiše univezalne osobine pojedinih HTML elemenata na
stranicama.
CSS element se definiše na sledeći način:
objekat { atribut : vrednost [; atribut : vrednost] }, gde je
objekat – HTML element čije se osobine žele definisati
atribut – atribut objekta koji predstavlja HTML element
vrednost – vrednost atributa
Postoje dva načina
za definisanje CSS
elemenata
u okviru stranice
u posebnom dokumentu
Aplikativni softver
61
HTML
CSS (3)
Definisanje CSS elemenata u okviru stranice omogućava efikasno formatiranje
te stranice. U ovom slučaju, CSS elementi se definišu u okviru zaglavlja
primenom sledećeg taga:
<STYLE atributi>
pri čemu atribut type ima vrednost text/css.
Primer
<html>
<head>
<style type="text/css">
h1 {background-color:#00ff00}
</style>
</head>
<body>
<h1>Softver</h1>
<h2>Sistemski softver</h2>
<h1>Hardver</h1>
</body>
</html>
Posledice
1. Svi naslovi na nivou 1 (Softver i
Hardver) će imati pozadinu u zelenoj
boji.
2. Za definisanje pozadine svih naslova
na nivou 1 potrebna je samo jedna
linija koda
(h1 {background-color:#00ff00}).
3. Boja pozadine naslova na nivou 1 se
može izmeniti promenom samo
jednog parametra
(h1 {background-color:#ff0000}).
Aplikativni softver
HTML
CSS (4)
Prilikom definisanja CSS elementa:
1) ako se u okviru jednog objekta navodi više parova (atribut:vrednost), oni
moraju biti međusobno razdvojeni znakom ;
2) više objekata može da deli iste atribute sa istim vrednostima
Primer 1)
p{
text-align:center;
color:red;
font-family:arial
}
Objašnjenje: za objekat tipa paragraf
definisano je poravnanje teksta po sredini,
prikaz teksta u crvenoj boji i vrsta fonta
Arial.
Primer 2)
h1,h2,h3,h4,h5,h6
{
color:blue
}
Objašnjenje: na celoj stranici će naslovi
na svim nivoima biti ispisani plavom
bojom.
62
Aplikativni softver
HTML
CSS (5)
Definisanje CSS elemenata u okviru posebnog dokumenta omogućava
uniformnost na nivou cele aplikacije u smislu njenog izgleda, a takođe i izradu
organizovanijeg i efikasnijeg koda. Na ovaj način, pošto se osobine svih stranica
čuvaju na jednom mestu, znatno je pojednostavljeno njihovo modifikovanje.
Da bi se na ovaj način definisao izgled stranica, mora se uraditi sledeće:
 Napraviti novi dokument sa CSS elementima i snimiti ga sa ekstenzijom .css.
 Umesto CSS elemenata u okviru zaglavlja stranice, treba uneti referencu na
dokument sa CSS elementima korišćenjem atributa href u okviru taga link. U
okviru reference se navode putanja i ime dokumenta.
Primer
<head>
<link rel=“stylesheet” type=“text/css” href=“primer.css”>
</head>
63
Aplikativni softver
64
HTML
CSS (6)
Primer
HTML stranica
<html>
<head>
<title>Primer poziva .css fajla</title>
<link rel=“stylesheet” type=“text/css” href=“test.css”>
</head>
<body>
<h1>Softver</h1>
<h2>Sistemski softver</h2>
<h1>Hardver</h1>
</body>
</html>
test.css
h1 {background-color:#00ff00}
Posledice su iste kao i
u slučaju definisanja
CSS elemenata
primenom taga style u
okviru HTML stranice.
Aplikativni softver
HTML
CSS (7)
Ukoliko je to potrebno, jedan atribut u okviru CSS elementa može da ima i više
vrednosti. Različite vrednosti definišu drugačiji izgled elementa na različitim
mestima u okviru HTML stranice. Na primer, ako stranica ima pet paragrafa,
može se zahtevati da tri budu poravnata uz levu marginu, a dva centrirana.
Navedeni problem se rešava uvođenjem klasa objekata.
Klase objekata opisuju različite osobine istog objekta. Sve klase koje opisuju
jedan objekat, pripadaju tom objektu.
U okviru CSS elementa, klasa se definiše na sledeći način:
objekat.ime_klase { atribut : vrednost [; atribut : vrednost] }
Klasa određenog objekta se, u okviru odgovarajućeg taga, poziva na sledeći
način:
class=ime_klase
65
Aplikativni softver
HTML
CSS (8)
Primer:
Omogućiti da boja linka bude
različita u zavisnosti od konteksta
pozivanja.
Rešenje:
Definišu se dve klase objekta link:
jedna prikazuje link u crnoj, a druga
u žutoj boji. Zatim se, zavisno od
potrebe, poziva jedna ili druga
klasa.
Definisanje klasa objekta
a.crnilink {
font-family: Verdana, Arial, Helvetica;
font-size: 10px;
color: #000000
}
a.zutilink {
font-family: Verdana, Arial, Helvetica;
font-size: 10px;
color: #ffff00
}
Pozivi klasa objekta
<a href=“Primer.html” class=“crnilink”>Link prikazan crnom bojom</a>
<a href=“Primer.html” class=“zutilink”>Link prikazan zutom bojom</a>
66
Aplikativni softver
67
HTML
CSS (9)
Najčešće korišćeni atributi u CSS elementima
Atribut
Opis
border-color
Definiše boju ivice oko selektovanog elementa.
border-style
Definiše stil ivice oko selektovanog elementa. Mogući stilovi
su: double, groove, inset, none, outset, ridge, solid.
border-width
Definiše širinu ivice oko selektovanog elementa.
background-color
Definiše boju pozadine datog elementa. Osim boja,
vrednost ovog atributa može biti i transparent.
backgroung-image
Definiše sliku kao pozadinu datog elementa. Vrednost
atributa je URL željene slike.
color
Definiše boju datog elementa.
hover
Definiše karakteristike linka u trenutku kada kursor miša
prelazi preko njega.
list-style-type
Definiše način prikazivanja stavke nenumerisne ili
numerisane liste.
Aplikativni softver
68
HTML
CSS (10)
Najčešće korišćeni atributi u CSS elementima (nastavak)
Atribut
Opis
list-style-image
Definiše sliku kao oznaku stavke za sve tri vrste lista.
Vrednost atributa je URL željene slike.
font-family
Definiše tip fonta za izabrani element. Može se zadati i lista
fontova sortiranih po prioritetu i odvojenih zarezom.
font-size
Definiše veličinu fonta za dati element. Osim standardnih,
mogu se koristiti vrednosti larger i smaller da bi se
uspostavio relativan odnos u odnosu na veličinu slova
prethodnih elemenata.
font-style
Definiše način prikazivanja teksta za dati element.
Vrednosti mogu biti normal ili italic.
letter-spacing
Definiše razmak između karaktera. Početna vrednost je
default razdaljina, a vrednost ovog atributa definiše
pozitivna ili negativna odstupanja od početne vrednosti.
link
Definiše karakteristike linka.