Descripción: Al igual que Foundation o Bootstrap, Materialize CSS es un framework para el desarrollo frontend responsivo que nos proporciona una serie de componentes CSS y ficheros JavaScript para trabajar. Me...
CSS animations for the webFull description
Full description
infertilitas
CSS TutorialFull description
Descrição completa
Descripción completa
Deskripsi lengkap
sepsisDeskripsi lengkap
Curs CSS
Full description
Descripción completa
CSS ASSESSMENT QUESTIONS
Computer System ServicingFull description
Aplikativni softver Fakultet za informatiku i menadment Univerzitet Singidunum Singidunum www.fim.singidunum.ac.yu
HyperText Markup Language HTML 2008/2009. Violeta Tomaevi Literatura Boko Boko Nikol Nikoli, i, Internet programiranje: programiranje: HTML, CSS, C SS, JavaScript , Panevropski univerzitet Apeiron za multidisciplinarne multidiscipli narne i virtuelne studije, Banja Luka, 2007.
Aplikativni Aplika tivni softver
2
HTML
ta je HTML? HTML je platformski neutralan jezik koji omoguava izvravanje programa na HTML je daljinu. Danas ovaj jezik predstavlja standard za izradu i zradu Internet dokumenata. Internet Server
ime.html ime.html ili ime.htm ime.htm HTML stranica
Klijent Web browser
Klijent Web browser
Klijent Web browser
Aplikativni Aplika tivni softver
2
HTML
ta je HTML? HTML je platformski neutralan jezik koji omoguava izvravanje programa na HTML je daljinu. Danas ovaj jezik predstavlja standard za izradu i zradu Internet dokumenata. Internet Server
ime.html ime.html ili ime.htm ime.htm HTML stranica
Klijent Web browser
Klijent Web browser
Klijent Web browser
Aplikativni Aplika tivni softver
3
HTML
Hipertekst Hipertekst Hipertekst je tip dokumenta koji se generie primenom primenom HTML-a. HTML-a. Hipertekst predstavlja skup stranica u obliku datoteka koje su meusobno
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 mia nakon to je on pozicioniran na sam link. itanje obinog teksta (linearno)
itanje hiperteksta (praenje veza)
s leva na desno e l o d a n o g z o d o
link
link link
Aplikativni softver HTML
Alati i HTML Za rad sa HTML dokumentima potrebni su: Alati
za generisanje HTML stranice
obian tekst editor, na primer Notepad koji se nalazi u Start meniju pod ProgramsAccessories, ili specijalni alati, na primer Front Page
Alati
za pristup HTML stranici
Web itai (W eb browsers), na primer Netscape Navigator ili Internet Explorer
4
Aplikativni softver HTML
Tagovi Tag je HTML komanda koja govori itau kako treba da prikae sadraj HTML
stranice. Tagovi se piu u okviru oznaka < i >. Veina tagova ima poetni i zavrni tag. Zavrni tag se dobija dodavanjem znaka / i oznaava mesto na kome prestaje dejstvo poetnog taga. HTML tagovi ne zavise od veliine slova kojim se piu, tj. mogu se pisati malim ili velikim slovima (case insensitive).
HTML tag
poetni tag
Ovaj tag se nalazi na poetku svakog HTML dokumenta. On govori itau da je fajl koji je poeo da uitava HTML dokument i da treba kao takvog i da ga prikae.
Ovaj tag se stavlja na kraj HTML dokumenta. On govori itau da je to kraj HTML dokumenta.
zavrni tag
HTML dokument
5
Aplikativni softver
6
HTML
Vrste tagova Grupa
Oznaka
Objanjenje
Prosti tagovi
Koriste se za opisivanje jednostavnih elemenata logike strukture.
Sloeni tagovi
Y
Tagovi sa atributima
Y
Opisuju izgled dela teksta Y.
Opisuju atribute koji pruaju dodatne informacije o delu teksta Y.
Aplikativni softver HTML
Struktura HTML stranice Minimalna struktura HTML dokumenta
Ovim tagom se opisuje zaglavlje stranice koje sadri osnovne informacije o stranici: naziv, korieni alat, stil stranice, itd. Ove informacije se ne prikazuju u prozoru itaa.
Ovim tagom se definie telo dokumenta, tj. sadraj koji se prezentira u prozoru itaa.
Primer komentara u okviru stranice. Komentar se ne prikazuje u prozoru itaa.
7
Aplikativni softver HTML
Formatiranje teksta
HTML stranica
Naslov
Prikaz teksta
Paragraf i odeljak
Font
Novi red
Specijalni znaci
Razdvojna linija
8
Aplikativni softver
9
HTML
Naslov
(header)
Naslovi u nekom tekstu se razlikuju po vanosti, to se prikazuje nivoima na
kojima se nalaze. U HTML-u, naslovi se mogu prikazati na 6 nivoa koji su oznaeni brojevima od 1 do 6. Opti oblik taga za naslov je:
Naslov na nivou n gde n predstavlja nivo na kome se naslov nalazi. Primer koda
Naslov H1
Naslov H2
Naslov H3
Izgled na HTML stranici
Naslov H1 Naslov H2 Naslov H3
Aplikativni softver HTML
Prikaz teksta Tekst na HTML stranici zavisi od veliine slova kojim je napisan u kodu (case sensitive), za razliku od tagova koji nisu osetljivi na velika i mala slova. Znai,
tekst se prikazuje onako kako je napisan (ako se ne koriste tagovi za formatiranje). Ako se drugaije ne naglasi, tekst na HTML stanici je poravnat uz levu marginu. Centriranje teksta se postie primenom sledeih tagova:
Tekst
Primer koda
Ovo je centriran tekst
Izgled na HTML stranici
Ovo
je centriran tekst
10
Aplikativni softver
11
HTML
Paragraf i odeljak Paragraf i odeljak su osnovne logike celine u tekstu. Paragraf je odvojen od
prethodnog teksta razmakom izmeu redova, a odeljak novim redom b ez razmaka. Tag za definisanje novog paragrafa je:
Paragraf [
]
[ ] znai opciono
Tag za definisanje odeljka je:
Odeljak
Poravnanje paragrafa ili odeljka se postie align atributom u okviru ovih tagova, koji moe imati tri vrednosti: left, center i right. Primer koda
levo
centrirano
desno
Izgled na HTML stranici levo centrirano desno
Aplikativni softver HTML
Font (1) Font definie izgled slova kojima e biti ispisan tekst na stranici.
Tag za definisanje fonta je:
Tekst Ovaj tag moe imati sledee atribute: face, size i color . Atribut face definie tip fonta kojim e tekst biti ispisan. Da bi prikazani tekst bio u zadatom fontu, taj font mora biti instaliran na raunaru. Mogu se navesti i alternativni fontovi. Atribut size definie veliinu slova kojom e tekst biti ispisan. HTML razlikuje 7 veliina slova oznaenih od 1 do 7. Podrazumevana vrednost je 3. Atribut color definie boju slova u okviru teksta.
Primer koda
Tekst Izgled na HTML stranici Tekst
12
Aplikativni softver HTML
Font (2) HTML omoguava pisanje podebljanim slovima (bold, strong), kurzivom (italic), kao i podvlaenje i precrtavanje teksta: Bold
Tekst
Strong
Tekst
Italic
Underline
TekstTekst
Strike
Tekst
HTML takoe omoguava pisanje indeksa i ekponenata: H2O 23=8
H2O 23=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 nee se prikazati na HTML stranici, ve e ceo tekst biti ispisan u jednom redu. Tagovi koji se koriste za prelom teksta:
- prelazak u novi red
Tekst - ispisivanje teksta u jednom redu uz
skrolovanje, ukoliko je tekst dui od reda
- uslovni prelazak u novi red, samo ako je tekst predug za jedan
red; pogodan je za prelom dugakih rei na kraju reda
14
Aplikativni softver HTML
Specijalni znaci Za prikazivanje specijanih znakova, koriste se odgovarajue HTML naredbe. One poinju znakom &, a zavravaju se znakom ;.
HTML naredba
Izgled na HTML strani
(blanko)
< > &
< > &
Primer koda
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:
Ovaj tag moe imati sledee atribute: noshade, size, width, align i color . Atribut noshade omoguva da linija ne bude osenena, ve potpuno crna. Atribut size definie debljinu linije u pikselima. Atribut width definie duinu linije u pikselima ili u procentima irine stranice. Atribut align ima isto znaenje kao istoimeni atribut paragrafa. Atribut color definie boju linije.
Primer koda
Izgled na HTML stranici
Aplikativni softver HTML
Liste Liste omoguavaju definisanje veeg 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 nain 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
Stavke
, dok se za definisanje stavki koristi tag
.
Opti oblik definisanja nenumerisane liste je: < UL>
prva stavka
druga stavka ....
poslednja stavka Primer koda
jabuke
banane
maline
Izgled na HTML stranici
jabuke banane maline
Aplikativni softver
19
HTML
Nenumerisane liste (2) Simbol koji se prikazuje ispred stavki nenumerisane liste moe se definisati pomou atributa type. Atribut type moe imati sledee vrednosti: circle, to odgovara krugu disc, to odgovara punom krugu sqaure, to odgovara kvadratu
Primer koda
jabuke
banane
maline
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 Stavke , dok se za definisanje stavki koristi tag
.
Opti oblik definisanja numerisane liste je:
prva stavka
druga stavka ....
poslednja stavka
Primer koda
jabuke
banane
maline
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 pomou atributa type. Atribut type moe imati sledee 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
jabuke
banane
maline
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 definie i njegove definicije. Pojam se ravna uz levu marginu, dok se
njegova definicija pojavljuje u novom redu, uvuena za odreeni broj mesta. Za definisanje liste ove vrste koristi se tag
Stavke
, dok se za definisanje stavki koriste tagovi
za pojam i
za definiciju pojma. Opti oblik definicione liste je:
prvi pojam
definicija prvog pojma
drugi pojam
definicija drugog pojma ....
poslednji pojam
definicija poslednjeg pojma
22
Aplikativni softver HTML
Definicione liste (2) Primer koda
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.
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
Ugnjedavanje lista Ugnjedavanje lista opisuje sluaj kada se kao stavka neke liste pojavljuje
takoe neka lista. Primer koda
Vrste voca su:
jabuke
banane
maline
Vrste povrca su:
sargarepa
kupus
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 znaajnu ulogu. HTML podrava brz i jednostavan rad sa paletom boja. Identian pristup setovanju boja vai za sve HTML elemente. 1. nain
Setovanje boja 2. nain
Korienjem predefinisanih engleskih naziva za boje(³red´, ³yellow´, ³blue´, i sl.) Korienjem heksadecimalne RGB vrednosti ispred koje stoji simbol # Opti 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 postiu primenom taga
BODY. U okviru taga BODY, za setovanje boja koriste se sledei atributi: bgcolor ± definie boju pozadine text ± definie boju slova na stranici background ± definie pozadinu u obliku slike
Primeri definisanja boje pozadine i boje slova
}
Svi primeri daju isti rezultat!
Aplikativni softver HTML
Boje (3) Pozadina u vidu slike definie 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 rauna o veliini fajla (zbog izvravanja na udaljenom raunaru). Najpodesniji formati za sliku su JPEG (podrava 16 miliona boja uz efikasnu kompresiju) i GIF (256 boja, mogui transparentnost i animacija). Najjednostavnije reenje za izbor lokacije je da se slika nalazi na istom direktorijumu na kome se nalazi i aplikacija. Primer
Dobra praksa je definisanje i boje pozadine (za sluaj da slika ne moe da se uita)
27
Aplikativni softver HTML
Slike (1) Slike se mogu prikazati na proizvoljnom mestu HTML stranice primenom taga
IMG. Tag IMG mora imati sledei atribut: src ± definie naziv i eventualno lokaciju grafikog fajla
Osim ovog, tag IMG moe imati i sledee atribute: align ± slui 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 ± definiu irinu i visinu slike u pikselima ili procentima u odnosu
na stranicu; ako se definie samo jedna dimenzija, druga se proporcionalno menja hspace i vspace ± definie prazan prostor oko slike u pikselima border ± definie irinu okvira slike u pikselima alt ± omoguava da se na mestu neuitane slike prikae odgovarajui komentar
28
Aplikativni softver HTML
Slike (2) Primer
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
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 HTML
Linkovi (1) Linkovi ili hiperveze su veze koje se uspostavljaju izmeu HTML stranica. Oni
omoguavaju 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 sledee 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
Linkovi (2) Sluaj: krajnja pozicija je na istoj stranici kao i polazna Uspostavljanje linka: definisati ime krajnje pozicije tekst na krajnjoj poziciji na polaznoj poziciji definisati referencu na krajnju poziciju tekst na polaznoj poziciji
Linkovi (3) Sluaj: krajnja pozicija je na drugoj stranici u istoj aplikaciji (najjednostavniji i najee korieni sluaj jer omoguava kretanje kroz aplikaciju)
Uspostavljanje linka: tekst na polaznoj poziciji Nakon klika miem na tekst na polaznoj poziciji, ita e prikazati stranicu pod nazivom ime_druge_stranice i pozicionirae se na njen vrh. Primer Veza do druge stranice
Veza do druge stranice Prva.html
Druga.html
Aplikativni softver
33
HTML
Linkovi (4) Sluaj: krajnja pozicija je na drugoj stranici u istoj aplikaciji (stranice nisu na istom direktorijumu na serveru)
Dva naina uspostavljanja linka: korienjem apsolutnih putanja, kada se u okviru HREF atributa navodi puna putanja do druge stranice
korienjem relativnih putanja, kada se u okviru atributa HREF navodi putanja u odnosu na direktorijum na kome se nalazi polazna stranica
Linkovi (5) Sluaj: krajnja pozicija je na drugoj stranici u istoj aplikaciji (stranice nisu na istom direktorijumu na serveru)
Primer korienja relativnih putanja Neka je sadraj 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) Sluaj: 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
Linkovi (7) U HTML dokumentu, slika moe predstavljati polaznu poziciju u hipervezi. Krajnja adresa se tada navodi kao i ranije, a umesto teksta na polaznoj poziciji navodi se tag IMG. Opti oblik linka je: IMG tag za sliku
Primer
36
Aplikativni softver HTML
Tabele (1) Tabele predstavljaju dvodimenzionalne matrice. Elementi tabele se nazivaju elijama (cells). elije mogu da sadre raznovrsne informacije: brojeve, tekst,
boje, liste, linkove, slike, i dr. Tag za definisanje tabele je:
Opis tabele
Tabela se definie tako to se redom opisuju njene vrste. Tag za definisanje vrsta tabele je:
Opis vrste
Vrsta tabela se definie tako to se redom opisuju pojedinane elije u vrsti. Tag za definisanje pojedinanih elija je:
Opis elije
37
Aplikativni softver HTML
Tabele (2) Tag za definisanje naslova tabele je:
Naslov tabele
Ovaj tag moe imati sledee atribute: align ± definie horizontalno poravnanje; dozvoljene vrednosti ovog atributa su left, center i right valign ± definie vertikalno poravnanje; dozvoljene vrednosti ovog atributa su top, middle i bottom
38
Aplikativni softver HTML
Tabele (3) Tag TABLE moe da sadri sledee atribute: border ± definie irinu spoljanjeg okvira tabele u pikselima bgcolor ± definie boju pozadine tabele cellspacing ± definie irinu linije koje razdvaja dve elije cellpadding ± opisuje prostor oko sadraja elije do njene granine linije width ± definie ukupnu irinu tabele u pikselima ili % veliine prozora height ± definie ukupnu visinu tabele u pikselima ili % veliine prozora Tag TR moe da sadri sledee atribute: align ± definie horizontalno poravnanje; dozvoljene vrednosti ovog atributa su left, center i right valign ± definie vertikalno poravnanje; dozvoljene vrednosti ovog atributa su top, middle i bottom
39
Aplikativni softver HTML
Tabele (4) Tag TD moe da sadri sledee atribute: align ± definie horizontalno poravnanje; dozvoljene vrednosti ovog atributa su left, center i right valign ± definie vertikalno poravnanje; dozvoljene vrednosti ovog atributa su top, middle i bottom bgcolor ± definie boju pozadine elije rowspan ± definie horizontalno spajanje elija (unutar iste vrste) colspan ± definie vertikalno spajanje elija (unutar iste kolone)
Vrednosti atributa rowspan i colspan se definiu 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 sadraj elije
definisan unutar ovog taga automatski centriran i boldovan. Tabela mora da sadri bar jedan TD tag, a ne mora da sadri TH tag.
40
Aplikativni softver HTML
Tabele (5) Opta struktura tabele u HTML-u
naslov tabele
sadraj prve elije zaglavlja tabele
sadraj poslednje elije zaglavlja tabele
sadraj prve elije prvog reda
sadraj poslednje elije prvog reda
sadraj prve elije poslednjeg reda
sadraj poslednje elije poslednjeg reda
41
Aplikativni softver HTML
Tabele (6) Primer: generisanje tabele koja ima samo jednu vrstu
hello
hello3
hello5
Primer: generisanje tabele koja ima samo jednu kolonu
hello
hello3
hello5
42
Aplikativni softver
43
HTML
Tabele (7) Primer: generisanje naslovljene tabele sa vie vrsta i kolona Spisak zaposlenih Ime
i prezime
Marko
Peric
Sektor racunovodstvo
Pozicija rukovodilac
Spisak zaposlenih
Ime i prezime
Sektor
Pozicija
Marko Peric
racunovodstvo
rukovodilac
Aplikativni softver
44
HTML
Tabele (8) Primer: generisanje tabele sa spojenim elijama Raspored casova ponedeljak 1. cas
srpski
utorak
istorija
sreda
fizicko
Raspored casova
ponedeljak
utorak
sreda
cetvrtak
petak
cetvrtak
hemija
petak
srpski
1. cas
srpski
istorija
fizicko
hemija
srpski
Aplikativni softver HTML
Forme (1) Osim prikazivanja sadraja neke stranice klijentu, HTML omoguava i prenos podataka ka serveru odakle je stranica uitana. Na serverskoj strani se mogu koristiti razne tehnologije za prihvatanje i obradu podataka, kao to su ASP, PHP, JSP, servleti i dr. Forme omoguavaju korisniku unos podataka na klijentskoj strani aplikacije.
Na taj nain se uspostavlja komunikacija izmeu korisnika i servera. Zavisno od unetih podataka, server poziva odreeni programski modul koji obrauje podatke, i nakon toga generie novu HTML klijentsku stranicu. Forme se koriste u irokom spektru aplikacija, kao to su: Upiti nad bazama podataka ili pretraivaima Identifikacija pristupa odreenim servisima servera Elektronska trgovina Obavetenja (prognoza vremena, putovanja i dr.)
45
Aplikativni softver HTML
Forme (2) Tag za definisanje forme je:
Dva najvanija atributa taga FORM su: ACTION ± sadri URL adresu programa na serveru METHOD ± opisuje nain prenosa argumenata programa; vrednosti ovog atributa mogu biti get i post
Primer
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 moe proslediti samo ogranien broj parametara, jer mora da vai: du ina
URL ad rese + du ina parametara < 1KB
post metod ± vrednosti parametara se u okviru zaglavlja poruke alju
serveru tako da nisu vidljive korisniku; nema ogranienja u pogledu broja parametara U praksi se ee koristi post metod, posebno za prenos podataka koji ne bi trebalo da budu javni, kao to su korisniko ime, lozinka, matini 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 moe da sadri razliite elemente. Korisnik unosi podatke u te elemente, a zatim se uneti podaci prosleuju serveru na obradu. Da bi se to postiglo, svaki element forme treba da ima definisan: tip elementa ± definie se pomou atributa type naziv elementa ± definie se pomou atributa name vrednost elementa ± definie se pomou atributa value
U okviru forme mogue je definisati sledee elemente:
komandnu dugmad tekstualna polja tekstualne prozore polja za potvrdu radio dugmad padajuu listu skrivene promenljive
48
Aplikativni softver HTML
Forme (5) U okviru forme mogue je definisati vie vrsta komandne dugmadi sa razliitim funkcijama. Zajedniki tag za definisanje komandne dugmadi je:
Atribut type definie funkciju komandnog dugmeta. Najee koriene vrednosti ovog atributa su: button, submit i reset. Vrednost button definie dugme opteg tipa. Pritiskom na dugme ovog tipa, korisnik pokree akciju koja se mora definisati u okviru samog taga INPUT. Najee je to neka funkcija koja na klijentskoj strani obavlja neke provere pre slanja podataka na server. Primer Na formi se pojavljuje dugme na kome pie ´Proveriti´ i kada korisnik klikne miem na njega izvrava se funkcijaZaProveru() koja je definisana u okviru iste HTML stranice.
49
Aplikativni softver HTML
Forme (6) Vrednost submit definie dugme za slanje podataka na server. Podaci se alju pomou metoda koji je definisan u okviru FORM taga (atribut METHOD). Primer
Vrednost reset definie dugme koje postavlja sve vrednosti elemenata forme na predefinisane vrednosti. U ovom sluaju nije potrebno definisati novu funkciju, jer se podrazumeva da e se izvriti akcija ponitavanja novounetih vrednosti elemenata forme. Primer
50
Aplikativni softver
51
HTML
Forme (7) Tekstualna polja su najee korieni elementi forme. Ona omoguavaju
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):
pri emu atribut type ima vrednost text. U vezi sa tekstualnim poljima, tag INPUT moe da sadri i sledee atribute: name ± definie ime tekstualnog polja koje mogu da koriste drugi elementi
aplikacije za pristup sadraju polja (itanje, menjanje vrednosti) value ± definie inicijalni tekst u tesktualnom polju size ± definie maksimalan broj karaktera koji se moe uneti u polje Primer
Aplikativni softver HTML
Forme (8) Tag za definisanje tekstualnih polja iji sadraj nije vidljiv korisniku:
pri emu atribut type ima vrednost password. Izgled ovog polja je isti kao i obinog tekstualnog polja, samo to je svaki uneti karakter predstavljen u obliku *. Sam ita pamti unete karaktere i ostatku aplikacije prosleuje tekst koji je korisnik zaista uneo (a ne zvezdice).
Primer
52
Aplikativni softver HTML
Forme (9) Tekstualni prozor predstavlja polje u koje korisnik moe da unese vie linija
teksta (za razliku od tekstualnog polja gde se moe uneti samo jedna linija teksta). Ukoliko tekst koji se unosi prevazilazi veliinu prozora po irini, na dnu prozora se pojavljuje horizontalni scrollbar koji omoguava itanje cele linije. Na slian nain, ukoliko broj linija teksta prevazilazi visinu prozora, na desnoj strani prozora pojavljuje se vertikalni scrollbar koji omoguava itanje svih linija teksta. Tag za definisanje tekstualnog prozora je:
U okviru ovog taga mogu se koristiti sledei atributi: name ± predstavlja ime tekstualnog prozora rows ± definie broj vidljivih redova u prozoru cols ± definie broj vidljivih karaktera u vrsti
53
Aplikativni Aplika tivni softver HTML
Forme (10) Grafik i prikaz ovog Polje za potvrdu slui za potvrivanje neke informacije. Grafiki polja predstavlja kvadrat na koji korisnik moe da klikne miem i na taj nain potvrdi (upie X) ili opovrgne (izbrie X) neko tvrenje navedeno uz kvadrat. Tag za definisanje polja za potvrdu je:
> pri emu atribut type ima vrednost checkbox. Vie polja za potvrdu moe da bude grupisano, grupis ano, pri emu se svako polje potvruje za sebe nezavisno od drugih polja (u jednom trenutku moe biti potvreno jedno, nijedno ili vie polja). Primer Koje voce volite?
x x
jabuke kruske sljive
Koje voce volite?
buke> jabuke jabuke
kruske
ive> sljive< sljive
/LI>
54
Aplikativni Aplika tivni softver
55
HTML
Forme (11) opci ja. Radio dugmad omoguavaju korisniku da odabere jednu od ponuenih opcija. Grafiki prikaz ovog dugmeta predstavlja krug na koji korisnik moe da klikne miem i na taj nain selektuje sel ektuje opciju opisanu pridruenim tekstom. Selekcija jedne od opcija podrazumeva deselekciju svih ostalih opcija. Tag za definisanje radio dugmeta je:
> pri emu atribut type ima vrednost radio. Selekcija nekog radio dugmeta moe se specificirati spec ificirati korienjem atributa checked. Primer Imate
li r acunar?
da
ne
Imate li racunar?
cunar> da
cunar> ne
Aplikativni Aplika tivni softver
56
HTML
Forme (12) Padajua lista omoguava korisniku da izabere jednu od vie mogunosti.
Grafiki prikaz padajue liste predstavlja polje na ijem i jem se desnom kraju nalazi dugme oznaeno strelicom na dole. U polju se prikazuje izabrana vrednost, dok se klikom miem na dugme otvara padajua lista lis ta sa svim preostalim mogunostima. Tag za definisanje padajue liste je: