HTML HTML

7/24/2019 HTML HTML

1/99

Web dizajn

HTML

7/24/2019 HTML HTML

2/99

2

World Wide Web

WWW je osmiljen u CERN-u, poe!om "#-i$ %odina prolo% &e!a 'lijen-ser&er ar$ie!ura

( 'lijeni su iai )bro*ser+( er&eri su *eb ser&eri

HTT proo!ol ( proo!ol za !omuni!a.iju izme/u *eb iaa i

ser&era( 'lijen ra0i ne!i resurs od ser&era( er&er isporuuje resurs !lijenu

Resurs mo0e bii( HTML daoe!a( sli!a( 1ilm( id

3a WWW nije neop$odan inerne i *eb ser&er( mo0emo da uiamo HTML daoe!u sa dis!a u ia

7/24/2019 HTML HTML

3/99

4

HTT proo!ol

HTTPklijent

HTTPserver

GET /docs.html HTTP/1.0User-Agent: Mozilla/4.0 com!ati"le# M$%E &.01# 'indo(s )T &.0*

Acce!t-+oo,ies: es

Host: !i!in.tmd.ns.ac....

HTTPklijen

t

HTTPserver

HTTP/1.0 00 +ontent-T!e: te2t/html

3HTM53HEA65...

7/24/2019 HTML HTML

4/99

5

6a je HTML7

HTML je s!ra8eni.a od H9per Te: Mar!upLan%ua%e( mar!ap jezi! !oji opisuje srani.e !oje imaju sru!uru

i iz%led

mar!ap jezi! oznaa&a e!s( dodanim ozna!ama )a%o&ima+

Te!sualna daoe!a( sasoji se iz mar!ap a%o&a

( a%o&i de1iniu sru!uru HTML do!umena objanja&aju iau !a!o da pri!a0e srani.u

( e!senzija je $ml ili $m( s&i *$iespa.e-o&i )razma!, ab, ener+ se s&ode na

jedan

7/24/2019 HTML HTML

5/99

;

rimer

3html53head5 3title5)aslo73/title5

3/head5

3"od5 3!5Mo8 !r7i HTM do,ment. 3"57a8

te,st 8e !ode"l8an.3/"53/!53/"od53/html5

7/24/2019 HTML HTML

6/99

a%?( sadr0aja

( za&araju8e% a%a >@a%? Ta% poinje zna!om < Ta% se za&ra&a zna!om > ArseB

( slo0eni )imaju i o&araju8i i za&araju8i a%+( prazni )prosi+ a%o&i, %de nema za&araju8e% a%a i sadr0aja

primerB3"r /5

Ta%o&i ne smeju da se pre!lapaju

7/24/2019 HTML HTML

7/99

rimer

Dednosa&an elemen3"5This te2t is "old3/"5

Elemen !oji sadr0i dru%i3"od5This is m 9irsthome!age.3"5This te2t is"old3/"5. This te2t is not "old.

3/"od5

7/24/2019 HTML HTML

8/99

HTML a%o&i

Nisu oselji&i na mala i &eli!a slo&a

reporu!a je da se piu malim slo&ima

orebno za FHTML )HTML slede8e%enera.ije+

7/24/2019 HTML HTML

9/99

"

=sno&ni a%o&i

>$ml?( obu$&aa .eo HTML do!umen

>$ead?( za%la&lje HTML do!umena >bod9?

( elo HTML do!umena

7/24/2019 HTML HTML

10/99

G#

=sno&ni a%o&i

Ta% je o!&ir u !om se nalaze s&i osalia%o&i( HTML do!umen u&e! poinje a%om >$ml?, a

za&ra&a se a%om >@$ml?

Ta% uo!&iruje za%la&lje u !om se nalazein1orma.ije o samom do!umenu )naslo&, opis,!ljune rei, ime auora, id+ op.ion je

&e ono o &idimo u prozoru bro*ser-a, j

sadr0aj srani.e, nalazi se u elu do!umena !ojeuo!&iruje elemen ( u do!umenu sme da posoji samo jedan par a%o&a

>bod9?>@bod9?

7/24/2019 HTML HTML

11/99

GG

Ta% >$ead?

Iro*ser ne pri!azuje in1orma.ije !oje senalaze izme/u a%o&a i ,osim sadr0aja a%a

adr0aj a%a je naslo& HTMLdo!umena !oji 8e se poja&ii u naslo&nojliniji *eb iaa

7/24/2019 HTML HTML

12/99

G2

Ta% >bod9?

=&aj elemen spe.i1i.ira %la&ni sadr0ajdo!umena

oeni a% mo0e da ima aribue !oji

omo%u8a&aju da se spe.i1i.iraju !ara!erisi!edo!umenaB( boja pozadine ili sli!a, boja e!sa, boja pose8eni$ i

nepose8eni$ lin!o&a,(

a!.ije !oje se iz&ra&aju !ada se do!umen uia, ilia!o se ne uia iz ne!o% razlo%a, id+,

ali je bolje da se o&e !ara!erisi!e podea&ajuC-om

7/24/2019 HTML HTML

13/99

G4

=sno&ni a%o&i

>$G? ( >$

7/24/2019 HTML HTML

14/99

G5

rimer

3html53head5 3title53/title53/head5

3"od5

3h15)aslo73/h15 3!57o 8e !aragra9.3/!5

3h5Podnaslo73/h5 3!57o 8e !aragra9.3/!5 3!57o 8e !aragra9.3/!5

3h156rgi naslo73/h15 3!57o 8e !aragra9.3/!53/"od53/html5

7/24/2019 HTML HTML

15/99

G;

rimer

7/24/2019 HTML HTML

16/99

Gb?( bold, podebljano

>i?

( iali., iskoeno >u?

( underline, pod&ueno

>sub?( subs.rip, dole

>sup?( supers.rip, %ore

7/24/2019 HTML HTML

18/99

G

rimer

3html53head53meta htt!-e=i7>+ontent-T!e> content>te2t/html#charsett9-

?> /53title5)aslo73/title53/head5

3"od5

3h535@ormatiran8e te,sta3/53/h53!53"5!ode"l8ano3/"53/!53!53i5is,oseno3/i53/!53!535!od7ceno3/53/!53!53s"5inde,s3/s"53/!53!53s!5e,s!onent3/s!53/!53/"od53/html5

7/24/2019 HTML HTML

19/99

G"

rimer

7/24/2019 HTML HTML

20/99

2#

Ta%o&i za 1ormairanje e!sa

>bi%?( &e8a slo&a

>small?( manja slo&a

>em?

( emp$asized, na%laeno >sron%?( na%laeno

7/24/2019 HTML HTML

21/99

2G

rimer

3html53head53meta htt!-e=i7>+ontent-T!e>

content>te2t/html#charsett9-?> /53title5)aslo73/title5

3/head5

3"od5

3h535Tago7i za 9ormatiran8e te,sta3/53/h53!53strong5naglaBeno3/strong53/!5

3!53em5naglaBeno3/em53/!53!53"ig57eCa slo7a3/"ig53/!53!53small5man8a slo7a3/small53/!53/"od53/html5

7/24/2019 HTML HTML

22/99

22

rimer

7/24/2019 HTML HTML

23/99

24

Ta%o&i za 1ormairanje e!sa

>ins?( insered, pod&uen e!s

>del?( deleed, obrisan, pre.ran e!s

7/24/2019 HTML HTML

24/99

25

rimer


content>te2t/html#charsett9-?> /53title5)aslo73/title5

3/head5

3"od5

3h535Tago7i za 9ormatiran8e te,sta3/53/h5

3!53ins5insertedD !od7en te,st3/ins53/!53!53del5!recrtan te,st3/del53/!53/"od53/html5

7/24/2019 HTML HTML

25/99

2;

rimer

7/24/2019 HTML HTML

26/99

2ltr>5smer is!isa te,sta sa le7a na desno i o"rnto*3/"do53/!53!53"do dir>rtl>5smer is!isa te,sta sa le7a na desno i o"rnto*3/"do53/!5

3/!53/"od53/html5

7/24/2019 HTML HTML

31/99

4G

rimer

7/24/2019 HTML HTML

32/99

42

!ra8eni.e, .iai, de1ini.ije

>blo.!Puoe?( du0i .ia

>P?( !ra8i .ia

>.ie?( .ia

>d1n?( za de1ini.ije u e!su

7/24/2019 HTML HTML

33/99

44

rimer3html53head53meta htt!-e=i7>+ontent-T!e> content>te2t/html#charsett9-?> /53title5)aslo73/title53/head5

3"od5

3h535$,raCeniceD citatiD de9inici8e3/53/h53!57o 8e o"ian te,st do,3"loc,=ote5o7de nesto citiramo - dzi citat3/"loc,=ote53/!53!57o 8e o"ian te,st do,3=5o7de nesto citiramo - ,raCi citat3/=53/!53!57o 8e o"ian te,st do,3cite5o7de nesto citiramo.3/cite5

3/!53!57o 8e o"ian te,st do,3d9n5o7de nesto de9inisemo - de9inici8a.3/d9n53/!53/"od53/html5

7/24/2019 HTML HTML

34/99

45

rimer

7/24/2019 HTML HTML

35/99

4;

pe.ijalni !ara!eri

C$ara.er eni9 'ara!eri !oji su rezer&isani za a%o&e )>, ?, Q, id+ Non-brea!in% pa.e

( razma.i !oji se ne sa0imaju u jedan

&ie obini$ razma!a se pri!azuju !ao jedan Qnbsp

'ara!eri( spe.ijalni !ara!eri ), S, id+

( naa slo&a ), /, id+( 8irili.a ), U, id+( osalo, po Unicodesandardu

7/24/2019 HTML HTML

36/99

4K!r7i>5lin,3/a5 na !r7i deo.

ili7o 8e 3a

hre9>htt!://(((.ser7er.com/stranica.htmlK!r7i>5lin,3/a5 na !r7i deo.

7/24/2019 HTML HTML

46/99

5ol? a&!e se na&ode izme/u >li? i >@li? a%o&a 3a&ra&a se a%om >@ol? Kribu startde1inie )poenu+ &rednos broja ispred

pr&e sa&!e Kribu typede1inie ip )OKO, OaO, OiO, id+ rimerB3ol start;>5

3li5Noce3/li5 3li5Po7rCe3/li53/ol5

rimer

7/24/2019 HTML HTML

48/99

5


3"od53h535)a"ro8i7e liste 3/53/h5

3h45)a"ra8an8e o7o8 listi !oin8e od "ro8a 3/h453ol start>>5

3li5NoCe3/li5 3li5Po7rCe3/li53/ol53h45do, o7o8 !oin8e od "ro8a 1 - ,od o7e liste ni8e zadat atri"t >start> !a na"ra8an8e !oin8e "ro8em 13/h453ol5

3li5Pr7a sta7,a3/li5

3li56rga sta7,a3/li53/ol53h45,od o7e liste de9inisan 8e atri"t >t!e> sa 7rednosC >A> - listi se za na"ra8an8e neCe ,oristiti "ro8e7i nego

7eli,a slo7a3/h453ol t!e>A>5

3li5Pr7a sta7,a3/li5 3li56rga sta7,a3/li53/ol53h45t!e>i>3/h453ol t!e>i>5

3li5Pr7a sta7,a3/li5 3li56rga sta7,a3/li5

3/ol53h45t!e>%> i start>L>3/h453ol t!e>%> startL5

3li5Pr7a sta7,a3/li5 3li56rga sta7,a3/li53/ol53h45t!e>a> i start>&>3/h453ol t!e>a> start&5

3li5Pr7a sta7,a3/li5 3li56rga sta7,a3/li53/ol53/"od5

3/html5

rimer

7/24/2019 HTML HTML

49/99

5"

rimer

7/24/2019 HTML HTML

50/99

;#

Neure/ene lise

oinje a%om >ul? a&!e se na&ode izme/u >li? i >@li? a%o&a 3a&ra&a se a%om >@ul?

Kribu typede1inie ip bulle-a )dis., sPuare,.ir.le, id+ rimerB3l t!e>s=are>5

3li5Noce3/li5 3li5Po7rCe3/li53/l5

7/24/2019 HTML HTML

51/99

;G


3"od53h535)ereIene liste3/53/h5

3h45Atri"t >t!e> ima 7rednost >s=are>3/h453l t!e>s=are>5

3li5NoCe3/li5 3li5Po7rCe3/li53/l53h45Atri"t >t!e> ima 7rednost >circle>3/h453l t!e>circle>5

3li5NoCe3/li5 3li5Po7rCe3/li53/l53h45Atri"t >t!e> ima 7rednost >disc>3/h453l t!e>disc>5

3li5NoCe3/li5 3li5Po7rCe3/li53/l53/"od53/html5

7/24/2019 HTML HTML

52/99

;2

rimer

7/24/2019 HTML HTML

53/99

;4

[e1ini.ione lise

oinje a%om >dl? a&!e su paro&i >d? )definition-list term( pojam+ i

>dd? )definition-list description( opis+ a%o&a sa&rednosima i od%o&araju8im za&araju8im a%o&ima

3a&ra&a se a%om >@dl? rimerB3dl5

3dt5+rna ,a9a3/dt5 3dd5NrCe !iCe3/dd5 3dt5o,a ,ola3/dt5 3dd5Hladno !iCe3/dd53/dl5

7/24/2019 HTML HTML

54/99

;5

rimer

3html53head53meta htt!-e=i7>+ontent-T!e> content>te2t/html#charsett9-

?> /53title5)aslo73/title53/head5

3"od53h5356e9inicione liste3/53/h5

3h45Primer de9inicione liste sa d7e sta7,e i d7e de9inici8e3/h453dl5

3dt5+rna ,a9a3/dt5

3dd5NrCe !iCe3/dd5 3dt5o,a ,ola3/dt5 3dd5Hladno !iCe3/dd5

3/dl53/"od53/html5

7/24/2019 HTML HTML

55/99

;;

rimer

7/24/2019 HTML HTML

56/99

;im%? slu0i za pri!az sli!e Kribu srcje oba&ezan i u!azuje na sli!u =p.ioni aribuiB

(alt( alernai&ni e!s, !oji se pri!azuje a!o se sli!a neuia

(title( e!s !oji se pri!azuje !ada se pre/e miempre!o sli!e

(width, height( irina i &isina sli!e

!orisni je unei in1orma.iju o &isini i irini sli!e u im% a% rimerB3img src>sli,a.gi9> alt>Perina sli,a> title>Perina

sli,a>/53img src>htt!://(((.(schools.com/images/ie.gi9>/5

7/24/2019 HTML HTML

57/99

;

rimer

3html53head53meta htt!-e=i7>+ontent-T!e> content>te2t/html#charsett9-?> /53title5)aslo73/title53/head5

3"od5

3h535$li,e3/53/h5

3h45Primer sli,e o,7ir stranice3/h453img src>slsli,e!rimer.gi9> alt>'orld 'ide 'e"> /53h45U,oli,o 8e lo,aci8a sli,e netanaD ita Ce !ri,azati >alt> te,st

o7om sla8 >'orld 'ide 'e">*.3/h453img src>slsli,e!rimer.gi9s> alt>'orld 'ide 'e"> /53h45U7oIen8em atri"ta >height> i >(idth> moJemo men8ati dimenzi8e

sli,e3/h453img height>1&0> (idth>1L0> src>slsli,e!rimer.gi9> alt>'orld 'ide'e"> /5

3img height>1&0> (idth>O0> src>slsli,e!rimer.gi9> alt>'orld 'ide'e"> /5

3img height>&0> (idth>1L0> src>slsli,e!rimer.gi9> alt>'orld 'ide'e"> /5

3/"od5

3/html5

rimer

7/24/2019 HTML HTML

58/99

;

rimer

7/24/2019 HTML HTML

59/99

;"

li!a !ao mapa lin!o&a

Kribu usemap u im% a%u odre/uje puanju do opisazona )do a%a+( mapa ne mora da bude u isoj HTML daoe.i

Ta% de1inie %eomerijs!e zone na sli.i !oje 8epredsa&ljai lin!o&e

oda% >area? de1inie !onrenu %eomerijs!u zonu( Kribui suB

shape( &rsa %eomerijs!o% obli!a ).ir.le, re., pol9+ coords( lisa !oordinaa ):, pa 9 &rednos+ za zadau &rsu

%eomerijs!o% obli!a

( a!o je !ru% ).ir.le+, daju se : i 9 !oordinaa i polupreni!( a!o je pra&ou%aoni! )re.+, daju se : i 9 !oordinaa %odnje% le&o% idonje% desno% u%la

( a!o je mno%ou%ao )pol9+, daje se niz : i 9 !oordinaa, !oji ini nizaa!a !oje ine !onuru )za&orenu+

href( XRL do srani.e na !oju se ide !li!om po zoni alt( alernai&ni pri!az

7/24/2019 HTML HTML

60/99

7/24/2019 HTML HTML

61/99

able? - za abelu,( >r? - za red,

( >d?- za polje omo8u a%a >$?de1iniu se za%la&lja &rsa ili!olona

7/24/2019 HTML HTML

62/99

able?, mo%u8eje de1inisai pora&nanje abele udo!umenu )aribu align, !oji mo0e imai

&rednosi leftili right+, debljinu i&i.e abele)aribu border+ i boju pozadine )aribubgcolor+

( s&a!a 8elija abele mo0e imai i s&oju boju( za o&o je bolje !orisii C

7/24/2019 HTML HTML

63/99

7/24/2019 HTML HTML

64/99

1>53tr5 3th5)ame3/th5

3th cols!an>>5Tele!hone3/th53/tr53tr5 3td5Qill Gates3/td5

3td5&&& OO ?&43/td5 3td5&&& OO ?&&3/td53/tr53/ta"le5

7/24/2019 HTML HTML

65/99

1>53tr5 3th5@irst )ame:3/th5

3td5Qill Gates3/td53/tr53tr5 3th ro(s!an>>5Tele!hone:3/th5 3td5&&& OO ?&43/td53/tr53tr5 3td5&&& OO ?&&3/td53/tr5

3/ta"le5

7/24/2019 HTML HTML

66/99

r? )Table Ro*+ de1inie &rse u abeli Ta% >r? sadr0i a%o&e >$? )Table Headin%+, !oji

odre/uju za%la&lje abele, i a%o&e >d?)Table

[aa+!oji predsa&ljaju 8elije u abeli X a%u >r? mo%u se nalazii slede8i aribuiB

(align- pora&nanje abele )center, left, right+,

(valign- pora&nanje sadr0aja u 8eliji )baseline,bottom, middle, top+,

(bgcolor- boja pozadine

( za o&o je bolje !orisii C

7/24/2019 HTML HTML

67/99

7/24/2019 HTML HTML

68/99

+ontent-T!e>

content>te2t/html#charsett9-?> /53title5)aslo73/title53/head5

3"od53h535Ta"ele3/53/h5

3h45Primer 8ednosta7ne ta"ele3/h453ta"le (idth>00> "order>1>5 3tr5 3td513/td5 3td5A3/td5 3td53/td5 3/tr5 3tr5

3td53/td5 3td5Q3/td5 3td5R3/td5 3/tr5 3tr5 3td53/td5 3td5+3/td5 3td53/td5 3/tr5

3/ta"le5

3h45Primer 8ednosta7ne ta"ele sazagla7l8ima ,olona3/h45

3ta"le (idth>00> "order>1>5 3tr5 3th sco!e>col>5agla7l8e3/th5 3th sco!e>col>5agla7l8e3/th5 3th sco!e>col>5agla7l8e3/th5 3/tr5

3tr5 3td5Seli8a 1 3/td5 3td5Seli8a 3/td5 3td5Seli8a 3/td5 3/tr53/ta"le5

3/"od53/html5

7/24/2019 HTML HTML

69/99

7/24/2019 HTML HTML

70/99

#

rimer2


content>te2t/html#charsett9-?> /53title5)aslo73/title53/head5

3"od53h535Ta"ele3/53/h53h45Primer 8ednosta7ne ta"ele - atri"t >"order>

ima 7rednost >>D >"gcolor> ima 7rednost

K++++++3/h453ta"le "gcolor>K++++++> (idth>00> "order>>5 3tr5 3td513/td5 3td5A3/td5 3td53/td5 3/tr5 3tr5 3td53/td5 3td5Q3/td5

3td5R3/td5 3/tr5 3tr5 3td53/td5 3td5+3/td5 3td53/td5 3/tr5

3/ta"le5

3h45Primer 8ednosta7ne ta"ele - atri"t >align> ima7rednost >center>3/h453ta"le align>center> (idth>00> "order>1>5 3tr5 3td513/td5 3td5A3/td5 3td53/td5 3/tr5 3tr5 3td53/td5 3td5Q3/td5

3td5R3/td5 3/tr5 3tr5 3td53/td5 3td5+3/td5 3td53/td5 3/tr5

3/ta"le5

7/24/2019 HTML HTML

71/99

G

rimer2

3h45Primer 8ednosta7ne ta"ele sa zagla7l8ima ,olona - atri"t F=ot#alignF=ot# ima7rednost F=ot#rightF=ot#3/h453ta"le align>right> (idth>00> "order>1>5 3tr5 3th sco!e>col>5agla7l8e3/th5 3th sco!e>col>5agla7l8e3/th5 3th sco!e>col>5agla7l8e3/th5 3/tr5 3tr5

3td5Seli8a 1 3/td5 3td5Seli8a 3/td5 3td5Seli8a 3/td5 3/tr53/ta"le53/"od53/html5

7/24/2019 HTML HTML

72/99

2

rimer2

7/24/2019 HTML HTML

73/99

4

rimer43html5

3head53meta htt!-e=i7>+ontent-T!e>content>te2t/html#charsett9-?> /5

3title5)aslo73/title53/head5

3"od53h535Ta"ele3/53/h53h45Primer 8ednosta7ne ta"ele sa !o7eCanim

razma,om izmeI Celi8a - >cells!acing>8e >10>3/h45

3ta"le (idth>00> "order>1>cells!acing>10>5

3tr5 3td513/td5 3td5A3/td5 3td53/td5 3/tr5 3tr5

3td53/td5 3td5Q3/td5 3td5R3/td5 3/tr5 3tr5 3td53/td5 3td5+3/td5 3td53/td5 3/tr5

3/ta"le5

3h45Primer 8ednosta7ne ta"ele sa !o7eCanimrazma,om izmeI i7ice Celi8a i sadrJa8aCeli8a - >cell!adding> 8e >10>3/h45

3ta"le (idth>00> "order>1>cell!adding>10>5

3tr5 3td513/td5 3td5A3/td5 3td53/td5

3/tr5 3tr5 3td53/td5 3td5Q3/td5 3td5R3/td5 3/tr5 3tr5 3td53/td5 3td5+3/td5

3td53/td5 3/tr53/ta"le53/"od53/html5

7/24/2019 HTML HTML

74/99

5

rimer4

7/24/2019 HTML HTML

75/99

;

rimer53html53head5

3meta htt!-e=i7>+ontent-T!e>content>te2t/html#charsett9-?> /5

3title5)aslo73/title53/head5

3"od53h535Ta"ele3/53/h53h45Primer 8ednosta7ne ta"ele sa naslo7om

iznad ta"ele3/h45

3ta"le (idth>00> "order>1>5 3ca!tion5)aslo7 ,o8i 8e iznad

ta"ele3/ca!tion5 3tr5 3td513/td5 3td5A3/td5 3td53/td5 3/tr5 3tr5 3td53/td5 3td5Q3/td5 3td5R3/td5 3/tr5 3tr5 3td53/td5 3td5+3/td5 3td53/td5

3/tr53/ta"le5

3h45Primer 8ednosta7ne ta"ele sa naslo7omis!od ta"ele3/h45

3ta"le (idth>00> "order>1>5 3ca!tion align>"ottom>5)aslo7 ,o8i 8e

is!od ta"ele3/ca!tion5 3tr5 3td513/td5 3td5A3/td5 3td53/td5

3/tr5 3tr5 3td53/td5 3td5Q3/td5 3td5R3/td5 3/tr5 3tr5 3td53/td5 3td5+3/td5 3td53/td5 3/tr53/ta"le53/"od53/html5

7/24/2019 HTML HTML

76/99

e:area?de1inie &ielinijs!o e!sualno polje Ta% >1ieldse? de1inie o!&ir o!o elemenaa !oji su u o!&iru nje%a

( poda% >le%end? sadr0i e!s !oji se ispisuje na o!&iru

7/24/2019 HTML HTML

79/99

"

rimer

3html5 3head5 3title5@orme3/title5 3/head5 3"od 5

3h15@orme3/h15 3!5 @orma !redsta7l8a deo do,menta

,o8i sadrJi !ol8a za nos !odata,a. Posto8i 7iBe ti!o7a o7a,7ih !ol8a. 3/!539orm action>!rimer0L-.html>

method>get>5

3!5

39ieldset53legend5ednolini8s,a te,stalna

!ol8a3/legend5ednolini8s,o te,stalno !ol8e:

3in!t t!e>te2t> name>!ol8e1>5

3"r53"r5

Pol8e za nos lozin,i:3in!t t!e>!ass(ord> name>!ol8e>5

3"r53"r53/9ieldset5+hec,"o2:

3in!t t!e>chec,"o2> name>!ol8e>5

remind me 3"r53"r5

adio:3in!t t!e>radio> name>!ol8e4>

chec,ed5 Male Fn"s!#Fn"s!#3in!t t!e>radio> name>!ol8e4>5

@emale 3"r53"r5

rimer

7/24/2019 HTML HTML

80/99

#

rimerNiBelini8s,o !ol8e: 3"r53te2tarea name>!ol8e&> ro(s>10>

cols>0>5$adrJa8 !ol8a3/te2tarea5 3"r53"r5

+om"o "o2:3select name>!ol8eL>5 3o!tion 7ale>1>5Pr7a

sta7,a3/o!tion5 3o!tion 7ale>>56rga

sta7,a3/o!tion5

3o!tion 7ale>>5TreCasta7,a3/o!tion5

3/select5 3"r53"r5

ist "o2: 3"r53select name>!ol8eO> size>>5 3o!tion 7ale>1>5Pr7a

sta7,a3/o!tion5

3o!tion 7ale>> selected56rgasta7,a3/o!tion5 3o!tion 7ale>>5TreCa

sta7,a3/o!tion53/select5 3"r53"r5

$,ri7eno !ol8e:3in!t t!e>hidden> name>!ol8e?>

7ale>7rednost>5 3"r53"r5

Pol8e za !load 9a8la: 3"r5

3in!t t!e>9ile> name>!ol8e>53"r53"r5

6gme: 3in!t t!e>"tton>

name>!ol8e10> 7ale> 6gme >53"r53"r5

eset dgme: 3in!t t!e>reset> name>!ol8e11>7ale> eset >5 3"r53"r5

$"mit dgme: 3in!t t!e>s"mit>

name>!ol8e1> 7ale> $"mit >53"r53"r5

$li,a-dgme: 3in!t t!e>image> name>!ol8e1>

src>s"mit.gi9>5 3"r53"r5 3/!5 3/9orm5 3/"od5

3/html5

rimer

7/24/2019 HTML HTML

81/99

G

Y j i

7/24/2019 HTML HTML

82/99

2

Yrejmo&i

Xz pomo8 1rejmo&a, mo%u8e je pri!azai &ie od jedne*eb srani.e u isom prozoru bro*ser-a

&a!a srani.a je 1rejm za sebe i one su me/usobnoneza&isne

Ta% de1inie !a!o da se podeli prozor uzpomo8 aribua cols )za &eri!alnu podelu+ilirows )za$orizonalnu podelu+, u !ojima se na&ode pro.eni ili&rednos u pi!selima

Ta% de1inie !oji 8e HTML do!umen bii u !om1rejmu( Kribu srcde1inie XRL do $ml srani.e !oja 8e bii pri!azana

u 1rejmu( Kribu namede1inie nazi& 1rejma 'orisi se za de1inisanje

odredino% 1rejma za lin!o&e )aribu target+

K ib t t

7/24/2019 HTML HTML

83/99

4

Kribu target

Hiperlin! mo0e da sadr0i aribu ar%e( de1inie !a!o 8e se o&orii zadai lin!

ArednosiB

( nazi& 1rejma u !ojem 8e se oo&rii(Vblan! ( srani.a 8e se o&orii u no&om prozoru

(Vsel1 ( srani.a 8e se o&orii u isom 1rejmu %de je ilin!

(Vparen ( srani.a 8e se o&orii u rodieljs!om 1rejmu(Vop ( srani.a 8e se o&orii u punom prozoru )iza8i

8e iz 1rejma+

Y j i

7/24/2019 HTML HTML

84/99

5

Yrejmo&i

Aeri!alna podela3html5

39rameset cols>&VD&0VD&V>5

39rame src>9ramea.htm>5

39rame src>9rame".htm>539rame src>9ramec.htm>5

3/9rameset5

3/html5

Y j i

7/24/2019 HTML HTML

85/99

;

Yrejmo&i

Horizonalna podela3html5

39rameset ro(s>&VD&0VD&V>5

39rame src>9ramea.htm>5

39rame src>9rame".htm>539rame src>9ramec.htm>5

3/9rameset5

3/html5

i

7/24/2019 HTML HTML

86/99

&0VD&0V>539rame src>9ramea.htm>539rameset cols>&VDO&V>539rame src>9rame".htm>5

39rame src>9ramec.htm>53/9rameset5

3/9rameset53/html5

i

7/24/2019 HTML HTML

87/99

rimer

3html5 3head5 3title5@re8mo7i3/title5 3/head5

39rameset ro(s>0VD?0V>5 39rame name>zagla7l8e> src>!rimer04-1.html>5 39rame name>gla7ni> src>!rimer04-.html>5 3/9rameset53/html5

i

7/24/2019 HTML HTML

88/99

rimer

!rimer04-1.html

3html5 3head5 3title5agla7l8e3/title5 3/head5 3"od "gcolor>sil7er> lin,>"le>

alin,>red> 7lin,>"le>5

3h5agla7l8e3/h5 3!5 3a hre9>!rimer04-.html>

target>gla7ni>5Pr7a stranica3/a5Fn"s!#Fn"s!#Fn"s!#Fn"s!#Fn"s!#Fn"s!#Fn"s!# 3a hre9>!rimer04-.html>

target>gla7ni>56rga stranica3/a5 3/!5 3/"od5

3/html5

!rimer04-.html

3html5

3head5 3title5Gla7ni 9re8m3/title5 3/head5

3"od "gcolor>ello(>lin,>"le> alin,>red>7lin,>"le>5

3h5Pr7a stranica3/h5

3!5 7o 8e !r7a stranica.

3/!5

3/"od5

3/html5

i

7/24/2019 HTML HTML

89/99

"

rimer

i1

7/24/2019 HTML HTML

90/99

"#

i1rame

_nline 1rame ( 1rejm na proiz&oljnoj pozi.ijiunuar srani.e

KribuiB

( sr. ( nazi& HTML daoe!e !oja 8e bii pri!azana uo&om prozoru

( *id$, $ei%$ ( irina i &isina

( s.rollin% ( da li da pri!a0e s!rolere )9es, no, auo+

( ali%n ( pora&nanje )le1,ri%$,op,middle,boom+

i

7/24/2019 HTML HTML

91/99

"G

rimer

3html53"od5

3i9rame src;htt!://(((.9tn.ns.ac.>53/i9rame5

3!5$ome older "ro(sers donWt s!!ort i9rames.3/!5

3!5%9 the donWtD the i9rame (ill not "e7isi"le.3/!5

3/"od5

3/html5

[ d i ib i bod

7/24/2019 HTML HTML

92/99

"2

[odani aribui body a%a

Kribu bgcolor boji pozadinu srani.e Kribu background de1inie puanju do

pozadins!e sli!e

rimerB3"od "gcolor>Kd0d0d0>5

3"od "ac,grond>"ac,grond.8!g>5

Ioje

7/24/2019 HTML HTML

93/99

"4

Ioje

Ioje se zadaju imenom ili R`I&rednosima

Mea a%o&i

7/24/2019 HTML HTML

94/99

"5

Mea a%o&i

[e1iniu dodane in1orma.ije !oje se ne pri!azuju [odane in1orma.ije se de1iniu !ao paro&i )nazi&,

&rednos+, j aribui namei content>mea? a%a( !orise se za obezbe/i&anje in1orma.ija prera0i&aima inernea

)9a$oo, %oo%le, id+B au$or, des.ripion, !e9*ords( in1orma.ije za dru%e namene )proiz&oljne &rednosi+

Kribu http-equivde1inie poda!e !oji opisuju srani.u)upra&ljaju iaem+( $p-ePui& mo0e biiB Conen-T9pe, Re1res$, Ca.$e-Conrol,

ra%ma, id( a, &rednosi ).onen+B e:@$ml, ;, no-.a.$e, id

rimer

7/24/2019 HTML HTML

95/99

";

rimer

3html5

3head5 3title5META tago7i3/title5 3meta name>athor> content>ohn $mith>5 3meta name>descri!tion> content>This is a !age that

demonstrates 7arios META tags.>5 3meta name>,e(ords> content>HTMD META tagsD descri!tion>5 3/head5

3"od5 3h15META tago7i 1/*3/h15

3!5!ogleda8te iz7orni ,od do,menta*3/!5

3/"od5

3/html5

rimer

7/24/2019 HTML HTML

96/99

"+ontent-T!e> content>te2t/html#

charsetUT@-?>5 3meta htt!-e=i7>e9resh> content>&>5 3meta htt!-e=i7>+ache-+ontrol> content>no-cache>5

3/head5

3"od5 3h15META tago7i /*3/h15

3!5Malo nicode te,sta:3/!5

3!5atinica C3/!5

3!5bf3/!5 3/"od5

3/html5

rimer

7/24/2019 HTML HTML

99/99

rimer

HTML HTML

Documents

Transcript of HTML HTML