AS 3-HTML CSS

Aplikativni softver Fakultet za informatiku i menadment Univerzitet Singidunum Singidunum www.fim.singidunum.ac.yu

HyperText Markup Language HTML 2008/2009. Violeta Tomaevi Literatura  Boko Boko 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 omoguava izvravanje 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


2

HTML

ta je HTML? HTML je platformski neutralan jezik koji omoguava izvravanje 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


3

HTML

Hipertekst Hipertekst Hipertekst je tip dokumenta koji se generie primenom primenom HTML-a. 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)

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

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 (W eb browsers), na primer Netscape Navigator ili Internet Explorer 

4


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

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.

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

Koriste se za opisivanje jednostavnih elemenata logike strukture.

Sloeni tagovi

Y

Tagovi sa atributima

Y

Opisuju izgled dela teksta Y.

Opisuju atribute koji pruaju dodatne informacije o delu teksta Y.


Struktura HTML stranice Minimalna struktura HTML dokumenta <!-naziv stranice-->

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.

Primer komentara u okviru stranice. Komentar se ne prikazuje u prozoru itaa.

7


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 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:

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


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:

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 logike celine u tekstu. Paragraf je odvojen od

prethodnog teksta razmakom izmeu redova, a odeljak novim redom b ez razmaka. Tag za definisanje novog paragrafa je:

Paragraf [
]

[ ] znai opciono

Tag za definisanje odeljka je:

Odeljak
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

levo
centrirano
desno

Izgled na HTML stranici levo centrirano desno


Font (1) Font definie izgled slova kojima e biti ispisan tekst na stranici.

Tag za definisanje fonta je:

Tekst 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

Tekst Izgled na HTML stranici Tekst

12


Font (2) HTML omoguava pisanje podebljanim slovima (bold, strong), kurzivom (italic), kao i podvlaenje i precrtavanje teksta: Bold

Tekst

Strong

Tekst

Italic

Underline

Tekst Tekst

Strike

~~Tekst~~

HTML takoe omoguava pisanje indeksa i ekponenata: H2O 23=8

H₂O 2³=8

13


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: 

- prelazak u novi red



Tekst - ispisivanje teksta u jednom redu uz

skrolovanje, ukoliko je tekst dui od reda 

- 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


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

(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 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



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
Stavke
, dok se za definisanje stavki koristi tag
.

Opti oblik definisanja nenumerisane liste je: < UL>
prva stavka
druga stavka ....
poslednja stavka Primer koda

jabuke
banane
maline


 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

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
.

Opti oblik definisanja numerisane liste je:

prva stavka
druga stavka ....
poslednja stavka
Primer koda

jabuke
banane
maline


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

jabuke
banane
maline


I. jabuke II. banane III. maline


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
Stavke
, dok se za definisanje stavki koriste tagovi
za pojam i
za definiciju pojma. Opti oblik definicione liste je:

prvi pojam
definicija prvog pojma
drugi pojam
definicija drugog pojma ....
poslednji pojam
definicija poslednjeg pojma

22


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

Ugnjedavanje lista Ugnjedavanje lista opisuje sluaj kada se kao stavka neke liste pojavljuje

takoe neka lista. Primer koda

Vrste voca su:

jabuke
banane
maline

Vrste povrca su:

sargarepa
kupus






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

}

Svi primeri daju isti rezultat!


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

Dobra praksa je definisanje i boje pozadine (za sluaj da slika ne moe da se uita)

27


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


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


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: «

30

Aplikativni softver

31

HTML

Linkovi (2) Sluaj: 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

Primer

Jezici Jezik HTML

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: tekst na polaznoj poziciji 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 Veza do druge stranice

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 Veza do druge stranice Veza do druge stranice

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

Veza do Univerziteta Singidunum odlazak na zadatu stranicu Adresiranje


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: IMG tag za sliku

Primer

36


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:

Opis tabele
Tabela se definie tako to se redom opisuju njene vrste. Tag za definisanje vrsta tabele je:

Opis vrste Vrsta tabela se definie tako to se redom opisuju pojedinane elije u vrsti. Tag za definisanje pojedinanih elija je:

Opis elije

37


Tabele (2) Tag za definisanje naslova tabele je: Naslov tabele 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


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


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


Tabele (5) Opta struktura tabele u HTML-u
naslov tabele
sadraj prve elije zaglavlja tabele sadraj poslednje elije zaglavlja tabele

sadraj prve elije prvog reda sadraj poslednje elije prvog reda

sadraj prve elije poslednjeg reda sadraj poslednje elije poslednjeg reda

41


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 vie 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

cetvrtak

hemija

petak

srpski

Raspored casova

ponedeljak utorak sreda cetvrtak petak

1. cas srpski istorija fizicko hemija srpski


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


Forme (2) Tag za definisanje forme je:

Definicije elemenata forme
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

... ...

46


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 ad rese + 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


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


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:

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


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

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

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):

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


Forme (8) Tag za definisanje tekstualnih polja iji sadraj nije vidljiv korisniku:

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

52


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:

Tekst 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

53

Aplikativni Aplika tivni softver HTML

Forme (10) Grafik i prikaz ovog Polje za potvrdu slui za potvrivanje neke informacije. Grafiki 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:

> pri emu atribut type ima vrednost checkbox. Vie polja za potvrdu moe da bude grupisano, grupis ano, 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?   

x x

jabuke kruske sljive

Koje voce volite?

buke> jabuke jabuke

kruske

ive> sljive< sljive
/LI>

54


55

HTML

Forme (11) opci ja. 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 sel ektuje opciju opisanu pridruenim 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 moe se specificirati spec ificirati korienjem atributa checked. Primer Imate

li r acunar?



da



ne

Imate li racunar?

cunar> da

cunar> ne


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 i jem 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 lis ta sa svim preostalim mogunostima. Tag za definisanje padajue liste je:

57


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:

pri emu atribut type ima vrednost hidden. Ovako definisanoj promenljivoj, ostatak aplikacije moe pristupiti preko imena (kao i svim drugim elementima forme). Primer

58


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


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: na nivou 1 potrebna je samo jedna linija koda (h1 {background-color:#00ff00}).
Softver
3. Boja pozadine naslova na nivou 1 se
Sistemski softver
moe izmeniti promenom samo
Hardver
jednog parametra (h1 {background-color:#ff0000}).

61


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


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

63

Aplikativni softver

64

HTML

CSS (6) Primer HTML stranica Primer poziva .css fajla
Softver

Sistemski softver

Hardver
test.css h1 {background-color:#00ff00}

Posledice su iste kao i u sluaju definisanja CSS elemenata primenom taga style u okviru HTML stranice.


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


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 Link prikazan crnom bojom Link prikazan zutom bojom

66

Aplikativni softver

67

HTML

CSS (9) Najee korieni atributi u CSS elementima Atribut border-color border-style border-width background-color backgroung-image color hover list-style-type

Opis

Definie boju ivice oko selektovanog elementa. Definie stil ivice oko selektovanog elementa. Mogui stilovi su: double, groove, inset, none, outset, ridge, solid. Definie irinu ivice oko selektovanog elementa. Definie boju pozadine datog elementa. Osim boja, vrednost ovog atributa moe biti i transparent. Definie sliku kao pozadinu datog elementa. Vrednost atributa je URL eljene slike. Definie boju datog elementa. Definie karakteristike linka u trenutku kada kursor mia prelazi preko njega. Definie nain prikazivanja stavke nenumerisne ili numerisane liste.

sadraj prve elije zaglavlja tabele	sadraj poslednje elije zaglavlja tabele
sadraj prve elije prvog reda	sadraj poslednje elije prvog reda
sadraj prve elije poslednjeg reda	sadraj poslednje elije poslednjeg reda

	Raspored casova
ponedeljak	utorak	sreda	cetvrtak	petak
1. cas	srpski	istorija	fizicko	hemija	srpski

AS 3-HTML CSS

Recommend Documents

Naslov H1

Naslov H2

Naslov H3

Softver

Sistemski softver

Hardver

Softver

Sistemski softver

Hardver