Você está na página 1de 71

HTML 5

Objetivo:

Apresentar as principais caractersticas do HTML 5.

Definio:

HTML (Hyperte t Mar!"p Lan#"a#e$ % "&a 'in#"a#e& para p"b'icao de conte(do (te to) vdeo) a(dio e etc$ na *eb.

+ec"rsos:

,oo#'e -.ro&e e /otepad00

HTML 5

1ro#ra&a:

2ntrod"o HTML 5 34sico) 5'e&entos) Atrib"tos Headin#s) 1ar4#rafos 6or&atao) Lin!s) Head) 2&a#ens Tabe'as) Listas) 3'ocos) Layo"t) 6or&"'4rios -ores) -anvas) 78,) Dra#9Drop) 8deo :"dio) *eb 7tora#e) ,eo'ocation 2ntrod"o ao -77;) 2ntrod"o ao <ava7cript

+efer=ncias

.ttp:99notepad>p'"s>p'"s.or#9 .ttps:99???.#oo#'e.co&9int'9pt>3+9c.ro&e9bro?ser9 .ttp:99???.?;c.br .ttp:99va'idator.?;.or# .ttp:99diveinto.t&'5.co&.br9 .ttp:99beta..t&'5test.co&9 .ttp:99.t&'5>s.o?case.co&9 .ttp:99&oderni@r.co&9

5vo'"o

HTML (ABBA$ HTML0 (ABB;$ HTML C (ABB5$ HTML ; HTML ;.C (ABBD$ HTML E.FA (ABBB$ GHTML A.F (CFFF$ GHTML C.F (CFFB$ > descontin"ado HTML 5 (CFAC$ > .ttp:99???.?;.or#9T+9.t&'59

HTML 5

HTML 5

HTML) -77 e <ava7cript Desenvo'vi&ento &od"'ar Acessibi'idade na *eb si#nifica I"e pessoas co& defici=ncias pode& perceber) entender) nave#ar e intera#ir a'%& de poder contrib"ir para a ?eb.

Acessibi'idade na *eb (para todosH$

Deficientes vis"ais) &otores e a"ditivos Disp'ay red"@idos Defici=ncia te&por4ria 2ncio de aprendi@ado 2dade avanada

HTML 5

Acessibi'idade

*-A, C.F

J "&a reco&endao *;- de AA de de@e&bro de CFFK .ttp:99???.i'earn.co&.br9T+9*-A,CF9 .ttp:99???.&obi'ep.onee&"'ator.co&9

HTML 5

Moderni@r

O &oderni@r % "&a bib'ioteca de deteco I"e '.e per&ite verificar o s"porte da &aioria das caractersticas do HTML 5 e -77;

if (Moderni@r.dra#anddrop$ L 99 3ro?ser s"pports HTML5 DnD. M e'se L 99 6a''bac! to a 'ibrary so'"tion. M

HTML 5 DO-TN15

HTML5

OHDO-TN15 .t&'P

HTML E.FA

OHDO-TN15 HTML 1Q3L2- R>99*;-99DTD HTML E.FA Transitiona'995/R R.ttp:99???.?;.or#9T+9.t&'E9'oose.dtdRP

HTML 5

5str"t"ra 34sica

OHDO-TN15 HTMLP O.t&' 'an#SRpt>brRP O.eadP O&eta c.arsetSRQT6>KRP O'in! re'SRsty'es.eetR typeSRte t9cssR .refSResti'o.cssRP Otit'ePO9tit'eP O9.eadP ObodyP O9bodyPO9.t&'P

HTML 5

5'e&ento

OpPA"'a de HTML 5.O9pP

Atrib"tos

Oa .refSR???.fainor.co&.brRP6ainorO9aP

HTML 5

Headin#s

O.APA"'aO9.AP O.CPA"'aO9.CP O.;PA"'aO9.;P O.EPA"'aO9.EP O.5PA"'aO9.5P O.TPA"'aO9.TP

HTML 5

1ar4#rafos

OpP2sso % "& par4#rafo.O9pP OpPO"tro par4#rafo.O9pP

-o&ent4rios

OH>> -o&ent4rio e& HTML 5 >>P

HTML 5

Lin.a .ori@onta'

OpPT.is is a para#rap..O9pP O.rP OpPT.is is a para#rap..O9pP O.rP OpPT.is is a para#rap..O9pP

HTML 5

U"ebra de 'in.a

OpP5sse %ObrP"& par4#rafoObrPco& I"ebra de 'in.aO9pP

Lin!s

Oa .refSR"r'RPte to do 'in!O9aP

HTML 5

5'e&ento H5AD

O.eadP Otit'ePTt"'o do doc"&entoO9tit'eP O9.eadP

HTML 5

5'e&ento 'in!

O.eadP O'in! re'SRsty'es.eetR typeSRte t9cssR .refSR&ysty'e.cssRP O9.eadP

HTML 5

5'e&ento sty'e

O.eadP Osty'e typeSRte t9cssRP body Lbac!#ro"nd>co'or:ye''o?M p Lco'or:b'"eM O9sty'eP O9.eadP

HTML 5

5'e&ento &eta

O&eta na&eSR!ey?ordsR contentSRHTML) -77) GML) GHTML) <ava7criptRP O&eta na&eSRdescriptionR contentSR6ree *eb t"toria's on HTML and -77RP O&eta na&eSRa"t.orR contentSRHe#e +efsnesRP O&eta .ttp>eI"ivSRrefres.R contentSR;FRP

-77

2n'ine sty'es 2nterna' sty'e s.eet 5 terna' sty'e s.eet

-77

2n'ine sty'es

OHDO-TN15 .t&'P O.t&'P Obody sty'eSRbac!#ro"nd>co'or:ye''o?VRP O.C sty'eSRbac!#ro"nd>co'or:redVRPTe to AO9.CP Op sty'eSRbac!#ro"nd>co'or:#reenVRPTe to CO9pP O9bodyP O9.t&'P

-77

2n'ine sty'es

OHDO-TN15 .t&'P O.t&'P ObodyP O.A sty'eSRfont>fa&i'y:verdanaVRPTe to AO9.AP Op sty'eSRfont>fa&i'y:aria'Vco'or:redVfont> si@e:CFp VRPTe to CO9pP O9bodyP O9.t&'P

-77

2n'ine sty'es

OHDO-TN15 .t&'P O.t&'P ObodyP O.A sty'eSRte t>a'i#n:centerVRPTe to AO9.AP O9bodyP O9.t&'P

-77

2nterna' sty'e s.eet

O.eadP Osty'e typeSRte t9cssRP body Lbac!#ro"nd>co'or:ye''o?VM p Lco'or:b'"eVM O9sty'eP O9.eadP

-77

5 terna' sty'e s.eet

O.eadP O'in! re'SRsty'es.eetR typeSRte t9cssR .refSR&ysty'e.cssRP O9.eadP

HTML 5

2&a#e&

Oi&# srcSR"r'R a'tSRso&eWte tRP

Tabe'a

Otab'eP OtrPOtdPro? A) ce'' AO9tdPOtdPro? A) ce'' CO9tdPO9trP OtrPOtdPro? C) ce'' AO9tdPOtdPro? C) ce'' CO9tdPO9trP O9tab'eP

HTML 5

Listas

O"'P O'iP-offeeO9'iP O'iPMi'!O9'iP O9"'P

Listas Ordenadas

Oo'P O'iP-offeeO9'iP O'iPMi'!O9'iP O9o'P

HTML 5

5'e&entos HTML pode& ser a#r"pados co& a ta# OdivP

5'e&entos de b'oco:

O.AP) OpP) O"'P) Otab'eP Oi&#P) OaP) OtdP

5'e&entos in'ine:

Layo"t
OHDO-TN15 .t&'P O.t&'PObodyP Odiv idSRcontainerR sty'eSR?idt.:5FFp RP Odiv idSR.eaderR sty'eSRbac!#ro"nd>co'or:X66A5FFVRP O.A sty'eSR&ar#in>botto&:FVRPTt"'o da 14#inaO9.APO9divP Odiv idSR&en"R sty'eSRbac!#ro"nd> co'or:X66DDFFV.ei#.t:CFFp V?idt.:AFFp Vf'oat:'eftVRP Men"ObrPHTMLObrP-77ObrP<ava7criptO9divP Odiv idSRcontentR sty'eSRbac!#ro"nd> co'or:X555555V.ei#.t:CFFp V?idt.:EFFp Vf'oat:'eftVRP -onte(do vai aI"i....O9divP Odiv idSRfooterR sty'eSRbac!#ro"nd>co'or:X66A5FFVc'ear:bot.Vte t>a'i#n:centerVRP -opyri#.t Y y@.co&O9divPO9divPO9bodyPO9.t&'P

HTML 5

6or&"'4rios

Ofor&P /o&e: Oinp"t typeSRte tR na&eSRfirstna&eRPObr 9P 7obreno&e: Oinp"t typeSRte tR na&eSR'astna&eRP O9for&P

HTML 5

6or&"'4rios

Ofor&P 7en.a: Oinp"t typeSRpass?ordR na&eSRp?dRP O9for&P

HTML 5

6or&"'4rios

Ofor&P Oinp"t typeSRradioR na&eSRse R va'"eSR&a'eRPMa'eObrP Oinp"t typeSRradioR na&eSRse R va'"eSRfe&a'eRP6e&a'e O9for&P

HTML 5

6or&"'4rios

Ofor&P Oinp"t typeSRc.ec!bo R na&eSRveic"'oR va'"eSRMotoRP MotoObrP Oinp"t typeSRc.ec!bo R na&eSRveic"'oR va'"eSR-arRP-arro O9for&P

HTML 5

6or&"'4rios

Ofor& na&eSRinp"tR actionSRaction.aspR &et.odSR#etRP /o&e: Oinp"t typeSRte tR na&eSR"serRP Oinp"t typeSRs"b&itR va'"eSR7"b&itRP O9for&P

HTML 5

-ores

Op sty'eSRbac!#ro"nd>co'or:ye''o?RP Atrib"indo "&a cor O9pP

<avascript

7cript

OHDO-TN15 .t&'P O.t&'P ObodyP OscriptP doc"&ent.?rite(RHe''o *or'dHR$ var iV for (iSAV iOSAFV i00$ doc"&ent.?rite(Rva'or de iSR0i0RObr 9PR$V iSAFV

<avascript

7cript
doc"&ent.?rite(R8a'or &aior I"e 5R$V

if (iP5$ e'se doc"&ent.?rite(R8a'or &enor I"e 5R$V O9scriptP O9bodyP O9.t&'P

<avascript

7cript

OHDO-TN15 .t&'P O.t&'P ObodyP O.AP5 e&p'o <ava7criptO9.AP Op idSRde&oRP <ava7cript pode rea#ir a eventosH -'iI"e no boto. O9pP OscriptP

<avascript
f"nction &y6"nction($ L doc"&ent.#et5'e&ent3y2d(Rde&oR$.innerHTMLS RHe''o <ava7criptHRV M O9scriptP Ob"tton typeSRb"ttonR onc'ic!SR&y6"nction($RP -'iI"e aI"iHO9b"ttonP O9bodyP O9.t&'P

HTML 5

-Zdi#o especiais

OHDO-TN15 .t&'P O.t&'P ObodyP OpP[XADEVO9pP O9bodyP O9.t&'P

HTML 5

+ed"o da necessidade de p'"#ins e ternosV 5'e&ento OcanvasP para desen.o CDV 5'e&ento OvideoP e Oa"dioP 5'e&entos &ais se&\nticos 7"porte para ar&a@ena&ento 'oca' /ovos contro'es para for&"'4rio 78, ,eoLocation

HTML 5

-anvas

1ossibi'ita "&a &aneira f4ci' de criar #r4ficos) co&posi]es de fotos e ani&a]es "ti'i@ando <avascript -riao de jo#os
.ttp:99.t&'5de&os.co&9canvas

Ocanvas idSRt"toria'R ?idt.SR;FFR .ei#.tSR;FFRP O9canvasP

HTML 5
OHDO-TN15 .t&'P O.t&'P ObodyP Ocanvas idSR&y-anvasR ?idt.SRCFFR .ei#.tSRAFFR sty'eSRborder:Ap so'id Xc;c;c;VRP O nave#ador no s"porta a ta# canvas O9canvasP

HTML 5
OscriptP var cSdoc"&ent.#et5'e&ent3y2d(R&y-anvasR$V var ct Sc.#et-onte t(RCdR$V ct .fi''7ty'eSRX66FFFFRV ct .fi''+ect(F)F)A5F)D5$V O9scriptP O9bodyP O9.t&'P

HTML 5
OscriptP var cSdoc"&ent.#et5'e&ent3y2d(R&y-anvasR$V var ct Sc.#et-onte t(RCdR$V ct .&oveTo(F)F$V ct .'ineTo(CFF)AFF$V ct .stro!e($V O9scriptP

HTML 5

78,

J "&a 'in#"a#e& GML I"e pode ser incorporada co& faci'idade e& HTML 5 J "&a 'in#"a#e& de &arcao de #r4ficos vetoriais
.ttp:99.t&'5de&os.co&9sv#>c'oc!

D:^HTML 5^e e&p'os^sv#..t&'

HTML 5
Osv# ?idt.SREFFR .ei#.tSREFFRP OH>> Q& ret\n#"'o: >>P Orect SRAFR ySRAFR ?idt.SRA5FR .ei#.tSR5FR stro!eSRXFFFFFFR stro!e>?idt.SR5R fi''SRX66FFFFR 9P OH>> Q& po'#ono: >>P Opo'y#on fi''SRredR stro!eSRb'"eR stro!e>?idt.SRAFR pointsSRC5F)D5 CDB)ATA ;TB)ATA CBD)CA5 ;C;);FA C5F)C5F ADD);FA CF;)CA5 A;A)ATA CCA)ATAR 9P

HTML 5
OH>> Q& crc"'o >>P Ocirc'e c SRDFR cySRCEFR rSRTFR stro!eSRXFF66FFR stro!e>?idt.SR5R fi''SRX666666R 9P O9sv#P

HTML 5

-anvas

Modificado atrav%s de script apenas O dese&pen.o % &e'.or co& s"perfcie &enor e9o" &aior n(&ero de objetos Modificado atrav%s de script e -77 O dese&pen.o % &e'.or co& n(&ero &enor de objetos e9o" s"perfcie &aior

78,

HTML 5

Mat.ML

Lin#"a#e& de &arcao) baseada e& GML) para representar fZr&"'as &ate&4ticas.

HTML 5

*eb,L

1er&ite a pro#ra&ao de ap'ica]es #r4ficas ;D e& HTML 5 "ti'i@ando o nave#ador

.ttp:99?eb#'sa&p'es.#oo#'ecode.co&9.#9fis.tan!9fis.tan!..t&'

HTML 5

Dra# and drop

J "&a &arcao adiciona' para dec'arar I"e I"a'I"er tipo de e'e&ento possa ser arrastado e& "&a p4#ina
.ttp:99.t&'5de&os.co&9dra#

HTML 5

,eo'ocation

-en4rios de "ti'i@ao da A12 de 'oca'i@ao #eo#r4fica


7ite de co&pras pode fornecer esti&ativas i&ediatas dos c"stos de envioV 7ite de conte(do pode& deter&inar faci'&ente o idio&a e o dia'etos de cons"'tas de pesI"isa 7ites de notcias pode& inc'"ir &anc.etes persona'i@adas 'ocais e o c'i&a e& s"a pri&eira p4#ina 7ites de vendas de in#ressos para esporte e entreteni&ento pode& pro&over f"t"ros jo#os e s.o?s na 4rea

HTML 5

,eo'ocation

-o&o a 'oca'i@ao #eo#r4fica f"nciona_


,17 A>,17 *ifi 5ndereo 21

HTML 5

,eo'ocation

OHDO-TN15 .t&'P O.t&'P ObodyP Op idSRde&oRP-'ic! t.e b"tton to #et yo"r coordinates:O9pP Ob"tton onc'ic!SR#etLocation($RPTry 2tO9b"ttonP

HTML 5

,eo'ocation

OscriptP var Sdoc"&ent.#et5'e&ent3y2d(Rde&oR$V f"nction #etLocation($ L if (navi#ator.#eo'ocation$ L navi#ator.#eo'ocation.#et-"rrent1osition(s.o?1osition$V M e'se L .innerHTMLSR,eo'ocation is not s"pported by t.is bro?ser.RVM M

HTML 5

,eo'ocation

f"nction s.o?1osition(position$ L .innerHTMLSRLatit"de: R 0 position.coords.'atit"de 0 RObrPLon#it"de: R 0 position.coords.'on#it"deV M O9scriptP O9bodyP O9.t&'P


.ttp:99.t&'5de&os.co&9#eo

HTML 5

8deo

Ta# OvideoP Atrib"tos:


a"dioSR&"tedR a"top'ay contro's .ei#.t 'oop src ?idt.

HTML 5
OHDO-TN15 .t&'P O.t&'P ObodyP Ovideo ?idt.SR;CFR .ei#.tSRCEFR contro'sP Oso"rce srcSR&ovie.&pER typeSRvideo9&pERP Oso"rce srcSR&ovie.o##R typeSRvideo9o##RP No"r bro?ser does not s"pport t.e video ta#. O9videoP O9bodyP O9.t&'P
D:^HTML 5^e e&p'os^video..t&'

HTML 5

7"porte para a(dio


Ta# Oa"dioP Atrib"tos:


a"top'ay contro's 'oop src

HTML 5
Oa"dio contro'sP Oso"rce srcSR.orse.o##R typeSRa"dio9o##RP Oso"rce srcSR.orse.&p;R typeSRa"dio9&pe#RP 7e" nave#ador no te& s"porte para o e'e&ento a"dio. O9a"dioP
D:^HTML 5^e e&p'os^a"dio..t&'

HTML 5

6or&"'4rios

co'or date e&ai' n"&ber ran#e searc. te' ti&e "r'


D:^HTML 5^e e&p'os^for&"'ario-asa&entode1adrao..t&' D:^HTML 5^e e&p'os^e e&p'oEE..t&'

D:^HTML 5^e e&p'os^e e&p'oE5..t&'

HTML 5
OHDO-TN15 .t&'P O.t&'P ObodyP Ofor& actionSRde&oWfor&.aspRP 7e'ect yo"r favorite co'or: Oinp"t typeSRco'orR na&eSRfavco'orRPObrP Oinp"t typeSRs"b&itRP O9for&P O9bodyP O9.t&'P

HTML 5
OHDO-TN15 .t&'P O.t&'P ObodyP Ofor& actionSRde&oWfor&.aspRP 3irt.day: Oinp"t typeSRdateR na&eSRbdayRP Oinp"t typeSRs"b&itRP O9for&P O9bodyP O9.t&'P

HTML 5
OHDO-TN15 .t&'P O.t&'P ObodyP Ofor& actionSRde&oWfor&.aspRP 5>&ai': Oinp"t typeSRe&ai'R na&eSRe&ai'RP Oinp"t typeSRs"b&itRP O9for&P OpPObP/ote:O9bP typeSRe&ai'R is not s"pported in 2nternet 5 p'orer B and ear'ier versions.O9pP O9bodyPO9.t&'P

HTML 5
OHDO-TN15 .t&'P O.t&'P ObodyP Ofor& actionSRde&oWfor&.aspRP U"antity (bet?een A and 5$: Oinp"t typeSRn"&berR na&eSRI"antityR &inSRAR &a SR5RP Oinp"t typeSRs"b&itRP O9for&P OpPObP/ote:O9bP typeSRn"&berR is not s"pported in 2nternet 5 p'orer B and ear'ier versions.O9pP O9bodyPO9.t&'P

HTML 5

/ovos e'e&entos se&\nticos


O.eaderP OnavP OsectionP Oartic'eP OasideP OfooterP

HTML 5

HTML 5

/ovos e'e&entos se&\nticos


Ofi#captionP Ofi#"reP

5st"dar...

Desi#n responsivo

7ites I"e se adapta& ao dispositivo do "s"4rio

HTML 5

Obri#adoH