HTML

HTML
Programiranje Internet aplikacija dr Nenad Jovanovid FTN, 2009.god.

1
ta je HTML?
HTML - HyperText Markup Language Nije programski jezik ve je markerski jezik HTML koristi tagove da generie dokument tipa hipertekst, odnosno da opie web stranu HTML stranice imaju ekstenziju .html ili .htm, nalaze se na serveru
2
Hipertekst
... je, tekst koji sadre veze ili linkove ka drugim dokumentima ili na samog sebe. Hipertekst je skup stranica , meusobno povezanih linkovima koje su umetnute u stranice. Za razliku od obinog teksta, koji se ita linearno (sleva na desno, odozgo nanie), hipertekst se ita pratei hiperveze u tekstu, dakle, ne nuno na linearan nain.
3
Opisivanje dokumenata
Jezici koji omoguavaju da se precizno opie izgled i sadraj jednog teksta Od posebnog su znaaja:
SGML (Standard General Markup Language), TeX i LaTeX, PostScript, RTF (Rich Text Format), ...
Jezici za opis hiperteksta

Najznaajniji jezici ove vrste su:
SGML, HTML (HyperText MarkupLanguage), XHTML (Expandable HTML) i XML (Extensible Markup Language)
HTML i alati
Za generisanje HTML stranice potreban je najobiniji tekst editor
Na primer Notepad
Mogu se koristiti i specijalni alati, na primer Front Page Stranica se moe videti u okviru Web browser-a
Internet Explorer Google Chroma Mozilla FireFox
6
Pojam Taga
HTML komande se piu u vidu tagova. HTML tag je kljuna re u uglastim zagradama Jedan tag je ustvari komanda koja govori browseru ta i kako da prikae sadraj stranice.
Tag
Tagovi se piu unutar oznaka "<" i "> npr: <a> HTML tagovi dolaze u paru <a> i </a> Prvi tag je start tag, a drugi end tag Veina tagova ima i poetni i zavrni tag. Zavrni tag se dobija dodavanjem znaka "/ i oznaava mesto na kom prestaje dejstvo poetnog taga.
8
Tag
HTML tagovi nisu CASE SENSITIVE <P> ima isto znaenje kao i <p>
Vrste tagova
Prosti tagovi za opisivanje jednostavnih elemenata logike strukture. Oblika su: <X> Sloeni tagovi su zagrade oblika <X> y </X> kojima je opisan izgled dela teksta y. Moguce je koristiti atribute u okviru taga <X A1=a A2=b ...> y </X> koji pruaju dodatne informacije
10
Tag <html>
Ovaj tag se nalazi na poetku svakog HTML dokumenta Govori browseru da je fajl koji je upravo poeo da uitava HTML dokument </html> Ovaj tag govori browseru da je to kraj HTML dokumenta.
11
Struktura HTML stranice

Minimalna struktura HTML-dokumenta obuhvata tagove: <HTML>, </HTML> - HTML tekst; <HEAD>, </HEAD> - zaglavlja, sadri meta-definicije HTML-dokumenta; <TITLE>, </TITLE> - naziv HTML dokumenta i <BODY>, </BODY> - telo HTML dokumenta.
12
Struktura HTML stranice

Svaki HTML dokument se sastoji od dva dela:
zaglavlja (head) i tela (body).
Zaglavlje se odvaja tagovima <head> i </head> Telo se odvaja tagovima : <body> i </body>.
13
Zaglavlje
Sve ono to se napie u zaglavlju dokumenta nee se prikazati u prozoru browsera ve obino slui samo da prui neke informacije o stranici.
14
Telo
Sve ono to je napisano izmeu tagova <body> i </body> predstavlja telo dokumenta i pojavie se kao sadraj prezentacije u prozoru browsera.
15
Izgled stranice
<html> <head> <title> ovde je naziv prezentacije </title> </head> <body> ovde se unosi sve ono sto zelite da se vidi u prezentaciji </body> </html>
16
Komentar
Dodatna opcija omogudava da se obelei komentar u HTML obeleenom tekstu koji se nede videti u vizuelizaciji dokumenta. Na primer: 
17
Korak 01
<html>


</body>
</html>
18
HTML atributi
HTML elementi mogu imati atribute Atributi definiu dodatne informacije o elementima Atributi se uvek specificiraju u start tagu Opti oblik atributa: ime_atributa = vrednost
19
HTML i slike
U HTML-u slike su definisane tagom <img> Za prikaz slike koristi se atribut src <img src="slika.gif"/>
20
DIV
HTML <div> tag je sekcija (oblast ) unutar koje je mogude pisati neki sadraj. Unutar<div> taga moete pisati takoe drugi <div> tag, ili neki drugi HTML tag. Koridenjem<div> tagova mogude je lake organizovati prikazivanje sadraja stranice. <div>tagovima mogude je dodeliti id ili klasu i zadati im stil.
21
Korak 02
 <div align="center"> <img src="slike/logo.gif"/> </div>
22
Paragraf
<p align="left">levo <p align="center">centrirano <p align="right">desno
23
CLASS atributi
Atribut CLASS se koristi za povezivanje elementa sa definisanim stilom. Najede se koristiti kada imamamo stil definiran u CSS-u. Ako u nekom CSS stilu imamo definisan stil za klasu pasus. Tada u HTML fajlu napiemo <p class="pasus>
24
&nbsp
nbsp (non-breaking space) - predstavlja prazno mesto
25
br
<br> - prelazak u novi red (line break)
26
Headeri
Naslovi (headers) se kodiraju prema relativnoj dubini ciframa od 1 do 6. Opti oblik naslova je: <Hn> Naslov nivoa n </Hn> gde n uzima vrednosti od 1 do 6.
27
Headeri
<H1> Naslov H1 </H1> <H2> Naslov H2 </H2> <H3> Naslov H3 </H3>
28
Primer 1- Naslovi
<html> <head> <title> naziv prezentacije </title> </head> <body> <H1> Naslov H1 </H1> <H2> Naslov H2 </H2> <H3> Naslov H3 </H3> </body> </html>
29
Primer 2
<html> <head> <title> naziv prezentacije </title> </head> <body> <p align="left">levo <p align="center">centrirano <p align="right">desno </body> </html>
30
Primer 3: HTML linije

<p align="left">levo <hr /> <p align="center">centrirano <hr /> <p align="right">desno
31
Primer 4: Font
<font face="Comic Sans MS"> Ovaj tekst je u fontu "Comic Sans MS" . </font> <font color="#ff0000"> Ovaj tekst je crven, </font> <font size=5"> a ovaj velicine 5. </font>
32
Korak 03
 <div class="center"> <div class="center_content"> <H1> ISTORIJAT</H1> <p><br /> <br /> INTERGALAKTIK-TRADE je osnovan 01.01.2001 godine kao deonicarsko drustvo sa ogranicenom odgovornoscu.... </p> </div> </div>
33
Linkovi
HTML veze se nazivaju linkovi ili hiperveze One omogudavaju prelazak sa jednog mesta na stranici na drugo mesto unutar same stranice ili na neku drugu stranicu
34
Linkovi
HTML link se definie tagom <a> Na primer
<p><a href=adresa odredista">pocetna pozicija</a></p>
35
Link na stranicu koja se nalazi na istom serveru

Kod ove vrste linkova koristi se tag <A> sa atributom href i nazivom stranice na koju elimo da skoimo
<p><a href= page1.htm">Link na stranicu 1</a></p>
36
Apsolutne putanje
Odredina stranica u optem sluaju ne mora da se i fiziki nalazi u istom direktorijumu gde i polazna stranica. Postoje dva reenja ovog problema, a to je rad sa apsolutnim i relativnim putanjama Koridenje apsolutnih putanja podrazumeva navoenje pune putanje do odredine stranice, na primer:
href=c:\Aplikacije\Poslovne\Klijent\Prva.htm
37
Relativne putanje
Koridenje relativnih putanja je mnogo podesnije, jer se zasniva na kretanju u odnosu na direktorijum stranice sa polaznom pozicijom Neka direktorijum A sadri stranice a1 i a2, B stranicu b3, a C stranicu c4
38
Relativne putanje
Za stranicu a1, relativna adresa stranice a2 je a2.htm; relativna adresa stranice b3 je B/b3.htm; relativna adresa stranice c4 je B/C/c4.htm; Za stranicu b3, relativna adresa stranice a1 je ../a1.htm (simbol .. oznaava direktorijum iznad direktorijuma gde se nalazi stranica sa polaznom pozicijom); relativna adresa stranice c4 je C/c4.htm; Za stranicu c4, relativna adresa stranice a2 je ../../a2.htm; relativna adresa stranice b3 je ../b3.htm.
39
Primer: Main.htm
<html> <body> <h1>This is my Main Page</h1> <p>This is some text.</p> <p><a href="page1.htm">Ovo je link do stranice1</a></p> <p><a href="page2.htm"> Ovo je link do stranice 2</a></p> </body> </html>
40
Page1.htm
<html> <body> <h1>Stranica 1</h1> <p>Neki tekst.</p> </body> </html>
41
Page2.htm
<html> <body> <h1>Stranica 2</h1> <p>Neki tekst.</p> </body> </html>
42
Link na stranicu koja se ne nalazi na istom serveru
U ovom sluaju je potrebno navesti celu web adresu te stranice. Opti oblik adrese koja se pojavljuje kao vrednost href atributa je:
scheme://server.domen [:port]/putanja/ imeDokumenta
<a href="http://www.ftn.pr.ac.rs/"> Link ka Tehnickom fakultetu </a>
43
Atribut target
Atribut target definie gde de dati dokumenat biti otvoren <a href="http://www.w3schools.com/" target="_blank">Visit W3Schools!</a> Prethodni primer pokazuje da de se dati dokumenat otvoriti u novom prozoru
44
Atribut name
Omogudava link na istu stranicu Za ovu vrstu linkova prvo se napravi oznaka na mestu na stranici gde se nalazi krajnja pozicijia. Oznaka se dobija pomodu atributa name u <A> tagu: <a name=labela> Pozicija 1</a> na polaznoj poziciji navodi se tag sa imenom krajnje pozicije: <a href="#labela">Skok na poziciju 1</a>
45
Primer
<HTML> <HEAD><TITLE> Link u okviru iste stranice</TITLE></HEAD> <H2>Tenis </H2> <BR> <A HREF="#nole"> Novak Djokovic </A> <BR> <A HREF="#ana"> Ana Ivanovic </A> <BR> <A HREF="#jelena"> Jelena Jankovic</A> <BR> <H3> <A name="nole"> Novak Djokovic</A> </H3> <p>................<BR> ................</p> <H3> <A name="ana"> Ana Ivanovic </A> </H3> <p>................<BR> ................</p> <H3> <A name="jelena"> Jelena Jankovic </A> </H3> <p>................<BR> ................</p> </BODY> </HTML> 46
Link na sekciju iz neke druge stranice

Ako se eli da se uspostavi veza sa nekom drugom stranicom, ali ne sa poetkom te stranice, ved nekim drugim delom, potrebno je koristiti i prvu i drugu vrstu linkova. Definie mesto odakle se eli nastaviti sa pregledom pomodu atribut href u <A> tagu sa navoenjem imena stranice, ali se dodaje deo #sekcija, da bi se pozicioniralo na sekciju <a href=NekiLink.html #sekcija"> tekst polazne pozicije </a>
47
Link na e-mail
<a href="mailto: pera@ftn.rs"> Posaljite e-mail poruku! </a>
Pored adrese na koju se eli poslati poruka mogu se podesiti jo neki parametri, kao to su naslov ili tekst poruke
<a href="mailto: pera@ftn.rs ?subject=Naslov poruke &body=Napisite vas komentar"> Posaljite e-mail! </a>
48
Primer
<html> <body> <h1>Stranica sa koje je moguce poslati mail</h1> <p>Neki tekst.</p>
<a href="mailto: pera@ftn.rs ?subject=Naslov poruke &body=Napisite vas komentar"> Posaljite e-mail! </a>
</body> </html>
49
Liste
Liste u jeziku HTML slue za navoenje, popisivanje odreenih delova teksta Liste mogu biti
nenumerisane, numerisane neureene liste.
50
Nenumerisane liste
Nenumerisane liste koriste <ul> tag (unordered list) Svaka stavka se unosi tagom <li> <ul> <li>Kafa</li> <li>Mleko</li> <li>Secer</li> </ul>
51
Nenumerisane liste
Da se promeni okruglo dugme moe se regulisati odgovarajuim atributom. Atribut je type moe uzeti vrednosti:
circle - okruglo dugme disc - ispunjeno okruglo dugme square - kvadratno dugme
52
Primer
<ul type=" circle "> <li>ponedeljak <li>utorak <li>sreda <li>cetvrtak <li>petak </ul>
53
Numerisane liste
Numerisane liste koriste <ol> tag <ol> <li>Kafa</li> <li>Mleko</li> <li>Secer</li> </ol>
54
Numerisane liste
Atribut type:
A - velika slova a - mala slova I - rimski brojevi i - mali rimski brojevi
55
Primer
<ul type=" I"> <li>ponedeljak <li>utorak <li>sreda <li>cetvrtak <li>petak </ul>
56
Definicione liste
Je lista stavki, sa definicijom svake stavke Ovaj oblik liste se dobija sa <dl> tagom. Svaka stavka ovakve liste se sastoji iz dva dela:
termina koji se definie i njegove definicije.
Termini poinju <dt> tagom, Opis temina poinje <dd> tagom. Termini se poravnavaju uz levu marginu a njihove definicije se pojavljuju u novom redu i pomerene su za odreen broj mesta.
57
Primer 1
<html> <body> <dl> <dt>Kafa</dt> <dd>Crno toplo pice</dd> <dd>Espreso</dd> <dd>Kapucino</dd> <dt>Mleko</dt> <dd>Belo hladno pice</dd> </dl> </body> </html>
58
Ugnezdena lista
<html> <body> <h4>Ugnezdena lista h4> <ul> <li>Kafa</li> <li>aj <ul> <li>Crni aj</li> <li>Zeleni aj</li> </ul> </li> <li>Mleko</li> </ul> </body> </html>
59
Korak 04
 <div class="right> <div class="featuredservices_container"> <h4>PREGLED ROBE</h4> <br /> <div class="featuredservices_nav"> <ul> <li><a href="ambalaza_a.htm">Ambalaza</a></li> <li><a href="konfekcija_a.htm">Konfekcija</a></li> <li><a href="ostalo_a.htm">Ostalo</a></li> </ul> </div> </div>
62
<div class="relatedlinks_container"> <h4>GALERIJA</h4> <br /> <div class="relatedlinks_nav"> <ul> <li><a title="poliet" href="slike1.htm">Ambalaza</a> </li> <li><a title="papir" href="slike2.htm">KOnfekcija</a> </li> <li><a title="ostalo" href="slike3.htm">Ostalo</a> </li> </ul> </div> </div>
63
<div class="relatedlinks_container"> <h4>LINKOVI</h4> <br /> <div class="relatedlinks_nav"> <ul> <li><a title="home" href="index1.htm">HOME</a> </li> <li><a title="drzava" href="linkovi1.htm">Drzavne institucije</a> </li> <li><a title="tvpret" href="linkovi2.htm">Banke</a> </li> <li><a title="firme" href="linkovi3.htm">Firme</a> </li> </ul> </div> </div>
64
Tagovi za formatitanje teksta

Tag <b> <big> <em> <i> <small> <strong> <sub> <sup> <ins> <del> <s> <strike> <u> Description Defines bold text Defines big text Defines emphasized text Defines italic text Defines small text Defines strong text Defines subscripted text Defines superscripted text Defines inserted text Defines deleted text Deprecated. Use <del> instead Deprecated. Use <del> instead Deprecated. Use styles instead
65
Primer
<HTML> <HEAD><TITLE> Link u okviru iste stranice</TITLE></HEAD> <H2>Tenis </H2> <BODY> <b> Ovo je bold tekst <BR> <big> Ovo je big tekst <BR> <em> Ovo je amphasized tekst <BR> <i> Ovo je italic tekst <BR> <small> Ovo je small tekst <BR> <strong> Ovo je strong tekst <BR> <sub> Ovo je subscript tekst <BR> <sup> Ovo je superscript tekst </BODY> </HTML>
66
Slika kao link

Slika u HTML dokumentu moe predstavljati i polazni vor u hipervezi. Dolazna adresa se tada navodi kao kod obinog linka, a umesto teksta koji se moe aktivirati navodi se tag IMG.
<A HREF="URL dolazne datoteke"> "tag IMG za eljenu sliku"</A> <a href=page1.htm"><img src=slika.gif"></a>
67
Pozadina
<body bgcolor="#ffff00" text="#008000"> ili <body bgcolor="#ffff00" text="green"> ili <body bgcolor="yellow" text="#008000"> ili <body bgcolor="yellow" text="green"> <body background="pozadina1.jpg"> <body background="pozadina1.jpg" bgcolor="#0000ff">
68
HTML Tabele
Tabele se definiu tagom <table> Tabele se dele na redove pomodu taga <tr> Redovi se dele na delije pomodu taga <td> Delije mogu da sadre tekst, slike, liste, paragrafe, forme...
69
Primer 1
<html> <body> <table border="1"> <tr> <td>red 1, celija 1</td> <td>red 1, celija 2</td> </tr> <tr> <td>red 2, celija 1</td> <td>red 2, celija 2</td> </tr> </table> </body> </html>
70
Zaglavlja u tabeli
Zaglavlja se u tabeli definiu tagom <th>
71
Primer 2
<html> <body> <TABLE> <CAPTION> sadrzaj naslova tabele </CAPTION> <TR> <TH> sadrzaj prve celija headera </TH> <TH> sadrzaj poslednje celije headera </TH> </TR> <TR> <TD> sadrzaj prve celije prvog reda </TD> <TD> sadraj poslednje celije prvog reda </TD> </TR> <TR> <TD> sadraj prve celije poslednjeg reda </TD> <TD> sadraj poslednje celije poslednjeg reda </TD> </TR> </TABLE> </body> </html>
72
Primer 3
<html> <body> <table border="2" width="100%"> <tr> <th width="33%"><font face="Verdana" size="2">Ime :</font></th> <th width="33%"><font face="Verdana" size="2">Prezime :</font></th> <th width="33% "><font face="Verdana" size="2">Zanimanje :</font></th> </tr> <tr> <td><font face="Verdana" size="2">Petar</font></td> <td><font face="Verdana" size="2">Petrovic</font></td> <td><font face="Verdana" size="2">Prodavac</font></td> </tr> </table> </body> </html>
73
cellpadding i cellspacing
Pomodu cellpadding atributa definie se rastojanje izmeu sadraja delije i njene granine linije. Pomodu cellspacing atributa se moe odrediti rastojanje izmeu pojedinih delija tabele. <table border="2" cellpadding="30 cellspacing="10">
74
colspan i rowspan
HTML doputa mogudnost da se pojedine delije tabele proteu du vie redova ili kolona tabele. Ovakav efekat se moe postidi pomodu atributa colspan i rowspan, koji se ubacuju u <td> ili <th> tag one delije koja se eli posebno da formatira. Vrednost ovih atributa se zadaje brojem kolona ili redova tabele du kojih treba da se prostire data delija.
75
Primer
76
<html> <body> <table border="3" width = "77%"> <tr> <td width = "66%" colspan="2"> Prva </td> <td width = "33%" colspan="2"> Druga </td> </tr> <tr> <td width = "33%" rowspan = "2">Treca</td> <td width = "66%" colspan="2"> Cetvrta</td> </tr> <tr> <td width = "33%" > Peta</td> <td width = "33%" > Sesta</td> </tr> </table> </body> </html>
77
Korak 06
Kreirati HTML dokument ambalaza.htm Isto kao index.htm Promeniti centralni deo
78
Korak 06
 <div class="center"> <div class="center_content"> <table width="475" border="2" align="left" cellpadding="0" cellspacing="0" > <tr> <td width="45" "><div align="center">Sifra</div></td> <td width="250" > <div align="center">NAZIV PROIZVODA </div></td> <td width="150" ><div align="center">Dimenzije</div></td> <td width="30" ><div align="center">t/p</div></td> </tr>
79
Korak 06
<tr> <td ><div align="center">101</div></td> <td ><div align="center">Kese za domacinstvo 1/30</a></div></td> <td ><div align="center">(170x250)x30 kom </div></td> <td ><div align="center">50</div></td> </tr> <tr> <td ><div align="center">102</div></td> <td ><div align="center">Kese za domacinstvo 2/30 </a></div></td> <td ><div align="center">(200x300)x30 kom </div></td> <td ><div align="center">50</div></td> </tr>
80
Korak 06
</table> </div> </div>
81
Zadatak 1
Napisati HTML kod sledede stranice:
82
83
Dodajemo tabelu
84
Prvi red tabele

Dodajemo jedan red, koji se sastoji od jedne delije width = 100%, odreuje relativnu veliinu delije
cellpadding definie rastojanje izmeu sadraja elije i njene granine linije
cellspacing odreuje rastojanje izmeu pojedinih elija tabele
colspain = 4, spaja etiri kolone u prvom redu width = 100%, odreuje relativnu veliinu elije
85
Drugi red tabele
86
U okviru ovog reda, dodaje se prva delija

rowspan = 2, spaja dva reda u prvoj koloni
li nova stavka liste
ol - Numerisana lista
87
Druga delija (25%)
88
Trea delija (30%) rowspain = 3, spaja tri reda u tredoj koloni
ul - Nenumerisana lista 89
etvrta celija (20%) rowspain = 2, spaja dva reda u etvrtoj koloni
90
Tredi red
non-breaking space
91
etvrti red
Dodaju se dve kolone u etvrtom redu colspain = 2, spaja dve kolone u etvrtom redu
92
HTML forme
Formu ini skup elemenata forme Elementi forme su elementi koji dozvoljavaju korisniku da unosi podatke Forma se definie pomodu tagova <form> . elementi . </form>
93
Atributi taga <form>

ACTION koji sadri adresu (URL) programa na serveru METHOD kojim je opisana metoda prenosa argumenata programa. Ovaj atribut moe imati vrednosti GET ili POSTM
94
Tag input
Najupotrebljavaniji tag u formi jeste tag <input> Tip ulaznog elementa se specificira pomodu atributa ovog taga
Polje za unos teksta Radio dugme Polje za potvrdu Dugme Padajuda lista
95
Polje za unos teksta

Atribut type mora da ima vrednost text <input type="text" name=ime polja" value=pocetni tekst" size="30"> Atribut name definie ime elementa pomodu koga drugi elementi aplikacije (JavaScript, serverski deo aplikacije) mogu da itaju ili da menjaju unetu vrednost Atribut value definie poetni tekst koji de se pojaviti u tekst polju Atribut size zadaje maksimalan broj karaktera koji se mogu uneti u okviru ovog elementa
96
Primer 1
<html> <body> <form> Unesi ime: <input type="text" name="ime" value="Petar" size="30"> <br /> Prezime: <input type="text" name="prezime" /> </form> </body> </html>
97
Radio dugme
Radio dugmad se definiu koridenjem taga <INPUT> i njegovog atributa type sa vrednodu radio
98
Primer 2
<html> <body> <form> <input type="radio" name="sex" /> DA <br /> <input type="radio" name="odgovor"/> NE </form> </body> </html>
99
Polje za potvrdu
Polje za potvrdu se definie tagom input sa vrednou atributa type checkbox
100
Primer 3
<html> <body> <form> Ja imam bicikl: <input type="checkbox" name="masina" value="Bicikl" /> <br /> Ja imam auto: <input type="checkbox" name="masina" value="Auto" /> <br /> Ja imam jahtu: <input type="checkbox" name="masina" value="Jahta" /> </form> </body> </html>
101
Padajuda lista
Padajuda lista se definie pomodu taga <select> i opcija <option> Tag <select> opisuje izbor izmeu moguih vrednosti navedenih u okviru taga <option> Atributi uz tag <select> su:
size kojim je opisan broj elementa u opcijama koje de biti prikazane multiple kojim se omogudava izbor vie opcija u istom trenutku
102
Primer 4
<html> <body> <form> <B><I>Moj omiljeni predmet je: </I></B> <select name="predmeti"> <option>Matematika</option> <option>Fizika</option> <option>Informatika</option> </select> </form> </body> </html>
103
Dugme
Type button definie dugme opteg tipa. Akciju se mora definisati u okviru samog taga. Najede je to Java Script funkcija koja izvrava odreene provere pre samog slanja podataka na server <input type="button" name="Proveri" onClick=funkcijaZaProveru()>
104
Type submit - definie dugme pomodu koga se podaci alju na server. <input type =submit" name="Posalji"> Type reset definie dugme koje postavlja sve vrednosti elemenata forme na predefinisane vrednosti < input type = reset" name=ponisti">
105
Primer 5
<html> <body> <form name="input" action="html_form_submit.asp method="get"> Korisnicko ime: <input type="text" name="user" /> <input type="submit" value="Submit" /> </form> </body> </html>
106
Tag < textarea> prikazuje tekst u odvojenom tekst prozoru sa scrollbarovima. Dimenzije prozora su odreene atributima rows (broj redova teksta) i cols (broj kolona). Atribut name dodeljuje simboliko ime podruju u kome se nalazi tekst. <textarea name=ime rows=n cols=m> ... neki tekst ... </textarea>
107
Boje
Svi elementi stranice rad sa bojama organizuju identino Boja se definie
pomodu preredefinisanog engleskog naziva boje (npr. "yellow" za utu boju) Ili preko heksadecimalne RGB vrednosti ispred koje obavezno treba staviti simbol # (npr. #ffff00)
108
Vrednosti boja
Color Color HEX #000000 #FF0000 #00FF00 #0000FF #FFFF00 #00FFFF #FF00FF #C0C0C0 Color RGB rgb(0,0,0) rgb(255,0,0) rgb(0,255,0) rgb(0,0,255) rgb(255,255,0) rgb(0,255,255) rgb(255,0,255) rgb(192,192,192)
#FFFFFF
rgb(255,255,255)
109
World Wide Web Consortium (W3C) je definisao imena za 16 boja za HTML i CSS:
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.
Za ostale boje mora se definisati keksadecimalna vrednost boje
110
Boja pozadine
Boja pozadine se odreuje atributom bgcolor u okviru <BODY> taga. U sluaju da se prilikom navoenja taga BODY izostave opisani atributi, ita im dodeljuje predefinisane vrednosti. <body bgcolor="#ffff00"> <body bgcolor="yellow">
111
Pored pozadine, moe se menjati i boja teksta, pomou atributa text

<body bgcolor="#ffff00 text="#008000"> ili <body bgcolor="#ffff00" text="green"> ili <body bgcolor="yellow" text="#008000"> ili <body bgcolor="yellow" text="green">
112
Pozadina u obliku slike se definie pomou atributa background u BODY tagu. Na primer, ako se eli da se kao pozadina stavi slika sl1.jpg" tada e odgovarajui tag izgledati: <body background=sl1.jpg"> Pri definisanju pozadine u obliku slike, dobra praksa je da se definie i bgcolor atribut.
<body background="pozadina1.jpg bgcolor="#0000ff">
113
Zadatak 2 line informacije
114
115
DIV tag definie sekciju unutar HTML dokumenta. Obino se koristi za grupisanje elemenata, da bi se isformatirali istim stilom
116
Prvi red tabele
117
Drugi red tabele
118
Tredi red tabele
119
etvrti red tabele
120
Peti red
121
esti red
122
Sedmi
123
Osmi
124
Deveti red
Skriveno polje. Nije vidljivo za korisnika. Koristi se za prenos informacija o stanju klijenta ili servera
125
Deseti red
126
Frejmovi
Sa frejmovima moemo da prikaemo vie od jednog HTML dokumenata i istom prozoru browser-a Svaki dokumenat se prikazuje u posebnom frejmu
127
Tag frameset
Tag frameset definie kako se prozor deli na frejmove Tag <FRAMESET> ima atribute:
COLS za vertikalnu podelu prozora i ROWS za horizontalnu podelu prozora
128
Tag frame
Tag frame definie koji HTML dokumenat se prikazuje u datom frejmu Tag frame ima atribute: SRC, preko koje se zadaje adresa dokumenta koji de biti prikazan u zoni tog taga i MARGINWIDTH i MARGINHEIGHT
129
Primer (index.htm)
<html> <body> <frameset cols="25%,75%"> <frame src="frame_a.htm"> <frame src="frame_b.htm"> </frameset> </body> </html>
130
Frame_a.htm
<html> <body> Frame A </body> </html>
131
Frame_b.htm
<html> <body> Frame B </body> </html>
132
Atributi taga frame

SRC: definie adresu dokumenta koji e se uitati u okviru frejma. BORDERCOLOR: Definie boju za ivicu frejma. FRAMEBORDER: Vrednost '1' ili 'yes' ovog atributa prikazuje granicu frejma, dok vrednost '0' ili 'no' ne prikazuje. MARGINWIDTH: Definie veliinu praznog prostor izmeu leve i desne strane frejma i njegovog sadraja izraen u pikselima. MARGINHEIGHT: Definie veliinu praznog prostor izmeu vrha i dna frejma i njegovog sadraja izraen u pikselima.
133
Atributi taga frame

NAME: Specificira ime frejma koje se moe koristiti u okviru drugih programskih modula, kao to su JavaScript ili VBScipt. NORESIZE: Aktivnom vrednou ovog atributa se spreava korisnik da menja zadatu veliinu frejma. Ovaj atribut se samo navodi bez ikakve vrednosti. SCROLLING: Vrednosti ovog atributa su 'YES', 'NO' i 'AUTO'. Ako je vrednost 'YES' scroll bar e se pojaviti bez obzira da li je potreban iline, 'NO' e spreiti
134
Primer
Korienjem frejmova i linkova moe se omoguiti promena jednog dela stranice, dok bi preostali deo stranice ostao nepromenjen. <FRAME SRC="Primer.html" name= Promenljiva> Kod definicije linka (koji se nalazi na drugom frejmu) se navede atribut target sa vrednou koja predstavlja ime frejma iji se sadraj menja <A href=http://www.google.com target= Promenljiva> Promena frejma </A>
135
main.htm
<html> <frameset cols="25%,75%"> <frame src="meni.htm"> <frame src ="pocetna.htm" name=Promenljiva"> </frameset> </html>
136
meni.htm
<html> <body> <table> <tr><td><a href ="http://www.blic.rs" target=Promenljiva">Blic</a></td></tr> <tr><td><a href ="http://www.pressonline.rs/" target=" Promenljiva ">Press </a></td></tr> <tr><td><a href ="http://www.novosti.rs" target =" Promenljiva ">Vecernje Novosti</a></td></tr> </table> </body> </html>
137
pocetna.htm
<html> <body> Ovo je stranica ciji ce se sadrzaj promeniti ako se aktiviraju linkovi iz menija </body> </html>
138
139
Zadatak
1. Napisati HTML kod stranice kontakt.htm koja je po horizontali podeljena na tri dela (koja su u odnosu 15%:70%:15). U prvom delu stranice od vrha prikazana je stranica A.htm. Drugi deo stranice od vrha je podeljen vertikalno na tri dela (koja su u odnosu 15%:70%:15%), u kojima se izvravaju stranice B.htm, forma.htm i C.htm. U tredem delu od vrha prikazana je stranica D.htm.
140
kontakt.htm
141
a.htm
142
Zadatak
143
Zadatak
144

HTML

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML

Uploaded by

Copyright:

Available Formats

HTML

Programiranje Internet aplikacija dr Nenad Jovanovid FTN, 2009.god.

Jezici za opis hiperteksta

Struktura HTML stranice

Struktura HTML stranice

Primer 3: HTML linije

Link na stranicu koja se nalazi na istom serveru

Link na stranicu koja se ne nalazi na istom serveru

<a href="http://www.ftn.pr.ac.rs/"> Link ka Tehnickom fakultetu </a>

Link na sekciju iz neke druge stranice

Tagovi za formatitanje teksta

Slika kao link

Prvi red tabele

cellspacing odreuje rastojanje izmeu pojedinih elija tabele

Drugi red tabele

U okviru ovog reda, dodaje se prva delija

li nova stavka liste

Druga delija (25%)

Trea delija (30%) rowspain = 3, spaja tri reda u tredoj koloni

etvrta celija (20%) rowspain = 2, spaja dva reda u etvrtoj koloni

Atributi taga <form>

Polje za unos teksta

Za ostale boje mora se definisati keksadecimalna vrednost boje

Pored pozadine, moe se menjati i boja teksta, pomou atributa text

Zadatak 2 line informacije

Prvi red tabele

Drugi red tabele

Tredi red tabele

etvrti red tabele

Atributi taga frame

Atributi taga frame

You might also like