HTML PDF

!
"#$%
'()*(+,+-.) /+(+ + 012
34 !1,156(1 7 3$%#
rof. Cullherme alermo Coelho
gullherme[.unlcamp.br
1
!"#$%& ()
*!+,
S
l
4
0
1

-

r
o
g
r
a
m
a
o

p
a
r
a

a

W
e
b

-&./$0&
C que e P1ML?
ueclaraes <!uCC1?L>
LlemenLos P1ML,
ALrlbuLos de LlemenLos P1ML,
Alguns elemenLos P1ML,
!"#$%&' em P1ML,
LlemenLo ()*+,
xP1ML,
8efernclas.
2
S
l
4
0
1

-

r
o
g
r
a
m
a
o

p
a
r
a

a

W
e
b

8 9:; < =>?@A
3
S
l
4
0
1

-

r
o
g
r
a
m
a
o

p
a
r
a

a

W
e
b

1 23/ 4 *!+,5
P1ML: !#,-."-/& #".1%, $"23%"3-.
P1ML e uma llnguagem uullzada para %&'()&*&) pglnas web,
P1ML !"# e uma llnguagem de programao - e uma llnguagem
de $%&'%("#,
Llnguagens de marcao: formadas por um con[unLo de +,-' %&
/,)(,012,
P1ML se basela nas +,-' %& /,)(,012 para descrever pglnas
web.
A especlcao da llnguagem P1ML e manuda e aLuallzada pelo
4$.56 476- 4-8 9$2'$.:%; (W3C).
4
S
l
4
0
1

-

r
o
g
r
a
m
a
o

p
a
r
a

a

W
e
b

1 23/ 4 *!+,5
PlsLrlco:
3
S
l
4
0
1

-

r
o
g
r
a
m
a
o

p
a
r
a

a

W
e
b

)*&+"# -!#
P1ML 1991
P1ML+ 1993
P1ML 2.0 1993
P1ML 3.2 1997
P1ML 4.01 1999
xP1ML 2000
P1ML 3 2012
1 23/ 4 *!+,5
uocumenLos P1ML:
uescrevem pglnas web - Lambem so chamados de ,<372"' =-8,
ConLm &"3' de marcao P1ML e LexLo puro,
ossuem a exLenso ./0$" ou ./0$1".
Cs navegadores web so responsvels por:
Ler documenLos P1ML,
lnLerpreLar as &"3' de marcao, e
Lxlblr a pglna web assoclada,
navegadores no exlbem as &"3' de marcao ! eles as
uullzam para 34+&)5)&+,) o conLeudo de uma pglna.
6
S
l
4
0
1

-

r
o
g
r
a
m
a
o

p
a
r
a

a

W
e
b

!"#$ 6/ 780%89:& *!+,
So 2%1%3&%+ '/%3* cercadas por <" e >",
CeralmenLe so usadas em pares:
45.: <p> </p>
A prlmelra &"3 e chamada de &"3 6- 72>?7$ ou &"3 6- "8-.&%.",
45.: <p>,
A segunda &"3 e chamada &"3 6- -2?-..";-2&$ ou &"3 6-
@-?A";-2&$,
45.: </p>,
A &"3 de fechamenLo e precedlda de /",
7
S
l
4
0
1

-

r
o
g
r
a
m
a
o

p
a
r
a

a

W
e
b

;0$7/$0& /</7#=& 6/ 378 #>?$@8 *!+,
A declarao +B9CDE) dene o upo do documenLo,
C LexLo conudo enLre as &"3' <hLml> e </hLml> descreve a pglna,
C LexLo conudo enLre as &"3' <body> e </body> e a parLe vlslvel da pglna,
C LexLo conudo enLre as &"3' <p> e </p> e exlbldo como um pargrafo.
8
S
l
4
0
1

-

r
o
g
r
a
m
a
o

p
a
r
a

a

W
e
b

<!DOCTYPE html>
<html>
<body>
<p>Minha primeira pagina Web!</p>

</body>
</html>
;0$7/$0& /</7#=& 6/ 378 #>?$@8 *!+,
9
S
l
4
0
1

-

r
o
g
r
a
m
a
o

p
a
r
a

a

W
e
b

<!DOCTYPE html>
<html>
<body>

</body>
</html>
1 A3/ 4 @/%/BB>0$& #808 %0$80 #>?$@8B CDE5
um edlLor de LexLo slmples:
8loco de noLas (Wlndows), vl (Llnux)...
um navegador para vlsuallzar o resulLado,
LxlsLem edlLores mals compleLos para desenvolvlmenLo web,
que podem ser uullzados na crlao de pglnas P1ML:
*6$8- +.-";=-"F-.G H-&I-"2'G *,&"2" J&%67$...
C ldeal para aprender os fundamenLos de P1ML e uullzar
edlLores de LexLo (no Lo) slmples.
no e necessrlo um servldor web, [ que os navegadores
abrem arqulvos .hLml dlreLamenLe de dlreLrlos locals do
compuLador.
10
S
l
4
0
1

-

r
o
g
r
a
m
a
o

p
a
r
a

a

W
e
b

B;C@DEDFG;! HI!"#$%&'(
11
S
l
4
0
1

-

r
o
g
r
a
m
a
o

p
a
r
a

a

W
e
b

F/%=8089G/B HI%&'!()*J
A declarao <!+B9CDE)K a[uda o navegador a exlblr correLamenLe o
conLeudo de uma pglna,
LxlsLem muluplas verses de P1ML alnda vlgenLes na Web,
Cs navegadores s conseguem exlblr uma pglna de manelra LoLalmenLe correLa
se eles souberem exaLamenLe o upo e a verso de P1ML usada na codlcao.
uevem ser lnserldas no 6!7'6# do documenLo, %!0*+ da &"3 P1MLL
12
S
l
4
0
1

-

r
o
g
r
a
m
a
o

p
a
r
a

a

W
e
b

<!DOCTYPE html>
<html>
<body>

</body>
</html>
F/%=8089G/B HI%&'!()*J
ueclaraes mals comuns:
P1ML3:
P1ML 4.01:
xP1ML 1.0:
Mals lnformaes: hup://www.w3schools.com/Lags/Lag_docLype.asp
13
S
l
4
0
1

-

r
o
g
r
a
m
a
o

p
a
r
a

a

W
e
b

<!DOCTYPE html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
;@;?;J>8! =>?@
14
S
l
4
0
1

-

r
o
g
r
a
m
a
o

p
a
r
a

a

W
e
b

K$@.8</ 6/ 37 /=/7/@.& *!+,
um elemenLo P1ML e o que esL conudo *!0&* uma &"3 de
lnlclo e a respecuva &"3 de encerramenLo (lncluslve as &"3'),
SlnLaxe:
lnlcla-se com a &"3 de lnlclo / &"3 de aberLura,
Lncerra-se com a &"3 de encerramenLo / &"3 de fechamenLo,
1udo que esL conudo enLre as &"3' de aberLura e de fechamenLo
corresponde ao (24+&6%2 %2 &7&/&4+2,
Alguns elemenLos P1ML Lm conLeudo vazlo (so fechados na
prprla &"3 de aberLura),
45.: <br />: dene uma quebra de llnha.
13
S
l
4
0
1

-

r
o
g
r
a
m
a
o

p
a
r
a

a

W
e
b

K$@.8</ 6/ 37 /=/7/@.& *!+,
A malorla dos elemenLos P1ML pode conLer ,+)389+2':
16
S
l
4
0
1

-

r
o
g
r
a
m
a
o

p
a
r
a

a

W
e
b

8%9 :* ;!7'6# <#!0*=:# 8%9 :* >*'/%$*!0#
<p> lsLo e um pargrafo </p>
<br />
<a href=lnd.hLm"> lsLo e um 5721 <a/>
lsLo e um aLrlbuLo do elemenLo 5721.
D=/7/@.&B *!+, 8@$@L86&B
A malorla dos elemenLos P1ML pode ser ,434:,%, (2-'&-6),
ou se[a, pode conLer ouLros elemenLos P1ML,
uocumenLos P1ML '12 elemenLos P1ML anlnhados.
17
S
l
4
0
1

-

r
o
g
r
a
m
a
o

p
a
r
a

a

W
e
b

<!DOCTYPE html>
<html>
<body>

</body>
</html>
C documenLo P1ML aclma conLem 0&?+ elemenLos: quals so eles?
!"#$ 6/ M/%L87/@.&
L mulLo lmporLanLe no se esquecer das &"3' de fechamenLo!
Alguns elemenLos P1ML podem aLe ser exlbldos correLamenLe
sem a &"3 de encerramenLo:
45.: <p>lsLo e um pargrafo.
no se deve conar nesLe comporLamenLo, [ que mulLos
elemenLos P1ML podem levar a comporLamenLos lmprevlslvels
caso no conLenham a &"3 de fechamenLo.
Lm xP1ML, Lodos os elemenLos %&*&/ ser fechados.
@A9*+0"#: SLM8L use &"3' de fechamenLo.
18
S
l
4
0
1

-

r
o
g
r
a
m
a
o

p
a
r
a

a

W
e
b

N8#$.8=$O89:& 6/ !"#$ *!+,
C"3' P1ML podem ser escrlLas LanLo em leLras malusculas
quanLo em leLras mlnusculas,
45.:
BCDLsLe e um pargrafo.BECD
B2DLsLe e um pargrafo.BE2D
4$.56 476- 4-8 9$2'$.:%; (W3C):
8ecomenda o uso de leLras mlnusculas em P1ML4 e P1ML3,
Lxlge o uso de leLras mlnusculas em xP1ML.
19
S
l
4
0
1

-

r
o
g
r
a
m
a
o

p
a
r
a

a

W
e
b

D>E"K:>8! B; ;@;?;J>8! =>?@
20
S
l
4
0
1

-

r
o
g
r
a
m
a
o

p
a
r
a

a

W
e
b

P.0$Q3.&B 6/ /=/7/@.&B *!+,
LlemenLos P1ML podem possulr ,+)389+2':
rovm lnformaes adlclonals sobre um dado elemenLo,
Sempre so especlcados na &"3 de aberLura,
So denldos em pares do upo: !#$*FG3%1#&G,
45.H <a /&*IFJ/K2HEELLL.9##91*.'#$J>lsLo e um llnk</a>
ALrlbuLos padro para a malorla dos elemenLos P1ML:
21
S
l
4
0
1

-

r
o
g
r
a
m
a
o

p
a
r
a

a

W
e
b

-0&6MA0# )%1#& N*+'&6("#
'1%++ 2$;-M6-M?5"''- Lspeclca um 2$;-M6-M?5"''- para um elemenLo
6: 76 Lspeclca uma 76 unlca para um elemenLo
+0O1* 6-N27OP$M-':5$ Lspeclca um esulo para um elemenLo
P01* &-/&$M67?" Lspeclca lnformaes exLras para um elemenLo,
que sero exlbldas vla &$$5:, &-/&.
P.0$Q3.&B 6/ /=/7/@.&B *!+,
A especlcao P1ML4 deLermlna que os valores dos
aLrlbuLos sempre devem esLar enLre aspas,
na malorla das vezes pode-se uullzar LanLo aspas duplas quanLo
aspas slmples:
45.H <a href='hup://www.google.com'> lsLo e um llnk</a>
45.H <a href=hup://www.google.com>lsLo e um llnk</a>
Lm slLuaes em que o prprlo valor do aLrlbuLo conLem aspas,
aspas slmples devem ser uullzadas:
45.H name='ohn ShoLgun" nelson'
L %10%$*!0* &*'#$*!:Q3*1 usar aspas Lambem em P1ML3.
22
S
l
4
0
1

-

r
o
g
r
a
m
a
o

p
a
r
a

a

W
e
b

D@L:J! ;@;?;J>8! =>?@
23
S
l
4
0
1

-

r
o
g
r
a
m
a
o

p
a
r
a

a

W
e
b

;80>?08M&B
argrafos so denldos com a &"3 B2D,
navegadores auLomaucamenLe lnserem uma 16!/% 3%R6%
anLes e depols de cada pargrafo.
24
S
l
4
0
1

-

r
o
g
r
a
m
a
o

p
a
r
a

a

W
e
b

23/Q08B 6/ =$@L8
ara lnserlr uma quebra de llnha sem comear um novo
pargrafo, usa-se a &"3 P1ML BM& ED,
23
S
l
4
0
1

-

r
o
g
r
a
m
a
o

p
a
r
a

a

W
e
b

!R.3=&B S+,"-./#$T
So usados para denlr dlferenLes nlvels de Lulos em P1ML:
",-': (mxlmo 6 nlvels)
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h3></h3>
<h6></h6>
C"3' de Lulo servem para mosLrar a esLruLura de um
documenLo P1ML,
Mecanlsmos de busca que varrem documenLos P1ML usam
esLas &"3' para esLe m.
26
S
l
4
0
1

-

r
o
g
r
a
m
a
o

p
a
r
a

a

W
e
b

!R.3=&B S+,"-./#$T
no se deve usar as &"3' de Lulo para escrever LexLo em
negrlLo ou em fonLe malor!
LxlsLem &"3' aproprladas para lsso,
27
S
l
4
0
1

-

r
o
g
r
a
m
a
o

p
a
r
a

a

W
e
b

,$@L8B
A Lag <hr /> crla uma llnha horlzonLal em um documenLo
P1ML,
noLe que <hr /> e um &7&/&4+2 *,;32.
28
S
l
4
0
1

-

r
o
g
r
a
m
a
o

p
a
r
a

a

W
e
b

N&7/@.>0$&B
1ambem e posslvel lnserlr comenLrlos em cdlgos de
arqulvos P1ML, para faclllLar a sua compreenso,
Cs comenLrlos de um arqulvo P1ML so lgnorados pelo
navegador,
Lxemplo de comenLrlo:
BSTT ;+0# U A$ '#$*!0Q&6# TTD
noLe que a exclamao deve ser uullzada apenas aps o <" de
aberLura.
29
S
l
4
0
1

-

r
o
g
r
a
m
a
o

p
a
r
a

a

W
e
b

U&078.89:& 6/ !/<.&
P1ML usa uma serle de &"3' para formaLar o LexLo exlbldo em
uma pglna,
30
S
l
4
0
1

-

r
o
g
r
a
m
a
o

p
a
r
a

a

W
e
b

U&078.89:& 6/ !/<.&
CeralmenLe, B'+)24-D e .-26-.7Q"6$ como negrlLo e B&/D
como lLllco,
no enLanLo, exlsLem dlferenas concelLuals:
Ao uullzar B'+)24-D ou B&/D, lndlca-se que o LexLo deve ser
.-26-.7Q"6$ de uma forma que o usurlo o enLenda como
lmporLanLe,
Po[e esLas duas &"3' so lnLerpreLadas como negrlLo ou
lLllco,
nada lmpede que, no fuLuro, algum navegador as lmplemenLe
de forma dlferenLe.
31
S
l
4
0
1

-

r
o
g
r
a
m
a
o

p
a
r
a

a

W
e
b

U&078.89:& 6/ !/<.&
rlnclpals &"3' de formaLao:
32
S
l
4
0
1

-

r
o
g
r
a
m
a
o

p
a
r
a

a

W
e
b

",- N*+'&6("#
<b> 1exLo em negrlLo
<blg> 1exLo grande
<em> 1exLo enfauzado
<l> 1exLo em lLllco
<small> 1exLo pequeno
<sLrong> 1exLo forLe
<sub> 1exLo subscrlLo
<sup> 1exLo sobrescrlLo
<lns> 1exLo lnserldo"
<del> 1exLo apagado"
U&078.89:& 6/ !/<.&
Lm P1ML 4.01 exlsLem &"3' para formaLao de cores, upos
de fonLe do LexLo, eLc., mas Lals &"3' so conslderadas
6-,.-?"&-6 e no devem ser uullzadas,
ormaLao mals elaborada deve ser felLa uullzando-se CSS
(9"'?"6- J&#5- JA--&').
ara ouLras &"3' de formaLao, consulLe 1,2.
33
S
l
4
0
1

-

r
o
g
r
a
m
a
o

p
a
r
a

a

W
e
b

012,34./5$
(#,-.5721' (ou apenas 5721') esLo presenLes em praucamenLe
Lodas as pglnas web.
L aLraves dos 5721' que os usurlos navegam aLraves de
pglnas na lnLerneL.
Lm P1ML, um A#,-.5721 e uma 2%1%3&%, 9&A2# :* 2%1%3&%+ ou
6$%9*$ em que se pode cllcar" para ser dlreclonado para
ouLro documenLo ou ouLra seo do documenLo aLual.
Ao mover-se o cursor sobre um 5721 em uma pglna P1ML, a
seLa se Lransforma em uma pequena mo.
34
S
l
4
0
1

-

r
o
g
r
a
m
a
o

p
a
r
a

a

W
e
b

012,34./5$
Lm P1ML, A#,-.5721' so crlados aLraves da &"3 B%D, que pode
ser uullzada de duas formas:
ara crlar um 5721 para #A0&# :#'A$*!0#, lndlcado pelo aLrlbuLo
:)&<,
ara aponLar para um $%&'%:#& :*!0&# :* A$ :#'A$*!0#, com
o aLrlbuLo 4,/& (ou 3%, em P1ML3).
C aLrlbuLo 4,/& (3%) especlca o nome de uma ncora" denLro de
um documenLo P1ML,
ermlLe a crlao de um bookmark no documenLo P1ML,
LsLe bookmark e lnvlslvel para o usurlo.
33
S
l
4
0
1

-

r
o
g
r
a
m
a
o

p
a
r
a

a

W
e
b

012,34./5$
SlnLaxe de um 5721 P1ML:
B% /&*IFJA&1JD1exLo do LlnkBE%D
36
S
l
4
0
1

-

r
o
g
r
a
m
a
o

p
a
r
a

a

W
e
b

012,34./5$
VM+*&3%("#: o conLeudo de um elemenLo A#,-.5721 no
preclsa ser necessarlamenLe LexLo. 1ambem pode ser uma
lmagem ou qualquer ouLro elemenLo P1ML,
37
S
l
4
0
1

-

r
o
g
r
a
m
a
o

p
a
r
a

a

W
e
b

012,34./5$
Lxemplos de uso comblnado com 2";- (ou 76 em P1ML 3):
1. Crlar uma ncora em um documenLo P1ML:
B% !%$*FJ+*'W5JDSeo xBE%D
2. Crlar um llnk para a Seo x" denLro do mesmo documenLo
P1ML:
B% /&*IFJX+*'W5JDvlslLe a Seo x!BE%D
2. Crlar um llnk para a Seo x" denLro de ouLro documenLo
P1ML:
B% /&*IFJ/K2HEELLL.A!6'%$2.M&E*5./0$X+*'W5JDSeo xBE%D
38
S
l
4
0
1

-

r
o
g
r
a
m
a
o

p
a
r
a

a

W
e
b

V78?/@B
Lm P1ML, lmagens so lnserldas com a &"3 B6$9D:
B6$9D e uma &"3 vazla, ou se[a, possul apenas aLrlbuLos e no
possul &"3 de fechamenLo.
A exlblo da lmagem se basela no aLrlbuLo '.?" (source),
cu[o valor deve corresponder a u8L da lmagem.
SlnLaxe:
B6$9 +&'FJurlJ %10FJalgum_LexLoJED
url" deve aponLar para o local de armazenamenLo da
lmagem:
ode ser um dlreLrlo local no prprlo servldor web, ou
uma lmagem armazenada remoLamenLe.
39
S
l
4
0
1

-

r
o
g
r
a
m
a
o

p
a
r
a

a

W
e
b

V78?/@B
40
S
l
4
0
1

-

r
o
g
r
a
m
a
o

p
a
r
a

a

W
e
b

C aLrlbuLo %10" lndlca o LexLo que deve ser exlbldo no local da
lmagem, caso esLa no possa ser exlblda por alguma razo:
Conexo lenLa,
Lrro no aLrlbuLo +&'",
C usurlo uullza um lelLor de Lela,
V78?/@B
41
S
l
4
0
1

-

r
o
g
r
a
m
a
o

p
a
r
a

a

W
e
b

As dlmenses de uma lmagem em um documenLo P1ML
podem ser denldas aLraves dos aLrlbuLos /*69/0" (alLura) e
L6:0/" (largura):
Cs valores desLes aLrlbuLos devem ser dados em plxels,
L lmporLanLe denlr o Lamanho da lmagem, para que o
navegador reserve o espao necessrlo duranLe o carregamenLo
- lsso evlLa que o layouL mude duranLe o carregamenLo,
V78?/@B
42
S
l
4
0
1

-

r
o
g
r
a
m
a
o

p
a
r
a

a

W
e
b

V78?/@B
C uso de lmagens em um documenLo P1ML sempre deve ser
felLo com parclmnla:
MulLas lmagens podem delxar o carregamenLo do documenLo
lenLo e compromeLer a experlncla do usurlo,
Se um documenLo P1ML conuver 10 lmagens, so necessrlas 11
requlsles ao servldor.
Lx.: (como no fazer)
hup://www.Lexlles.com/underconsLrucuon/
8ecomenda-se que Lodas as lmagens de um documenLo P1ML
esLe[am no mesmo local que o documenLo e no em
servldores remoLos.
LvlLa-se a ocorrncla de llnks quebrados.
43
S
l
4
0
1

-

r
o
g
r
a
m
a
o

p
a
r
a

a

W
e
b

;M;ECNC"8 %
44
S
l
4
0
1

-

r
o
g
r
a
m
a
o

p
a
r
a

a

W
e
b

D</0%R%$& W
Crle um documenLo P1ML que exlba um lndlce com o nome
de '6!'# '6:%:*+. Aps a exlblo desLe lndlce, exlba lmagens
referenLes a esLas clnco cldades que, quando cllcadas, levem o
usurlo as pglnas do Wlkl1ravel correspondenLes.
C lndlce lnlclal, quando cllcado, deve levar o usurlo a poslo
correspondenLe da lmagem na prprla pglna.
43
S
l
4
0
1

-

r
o
g
r
a
m
a
o

p
a
r
a

a

W
e
b

D@L:J! ;@;?;J>8! =>?@ OC8J>PBQ
46
S
l
4
0
1

-

r
o
g
r
a
m
a
o

p
a
r
a

a

W
e
b

!8Q/=8B
Lm documenLos P1ML, Labelas so denldas com a &"3
<0%M1*>:
1abelas so dlvldldas em llnhas (.$=', com a &"3 B0&D),
Cada llnha e dlvldlda em celulas (&"3 B0:D, de &"85- 6"&"), que
armazenam os dados da Labela.
C conLeudo de uma &"3 B0:D pode ser LexLo, 5721', lmagens,
llsLas, formulrlos, ouLras Labelas, eLc.
47
S
l
4
0
1

-

r
o
g
r
a
m
a
o

p
a
r
a

a

W
e
b

!8Q/=8B
Caso no se[a especlcado o aLrlbuLo 8$.6-.", a Labela ser
exlblda sem bordas,
C valor do aLrlbuLo 8$.6-." corresponde ao Lamanho da borda
da Labela em plxels.
48
S
l
4
0
1

-

r
o
g
r
a
m
a
o

p
a
r
a

a

W
e
b

!8Q/=8B
ara denlr o cabealho de cada coluna da Labela, uullza-se a
&"3 B0/D (&"85- A-"6-.):
49
S
l
4
0
1

-

r
o
g
r
a
m
a
o

p
a
r
a

a

W
e
b

Legenda da Labela!
,$B.8B
P1ML prev a crlao de llsLas, sendo os dols upos mals
comuns as llsLas ordenadas (enumeradas) e as llsLas no-
ordenadas,
As llsLas !"#T#&:*!%:%+ so crladas com a &"3 BA1D
(%2$.6-.-6 57'&), e cada elemenLo da llsLa e ldenucado pela
&"3 B16D (57'& 7&-;),
as llsLas #&:*!%:%+ so crladas com a &"3 B#1D ($.6-.-6
57'&), sendo cada elemenLo da llsLa Lambem ldenucado pela
&"3 B16D,
Cs elemenLos de llsLas P1ML podem conLer, alem de LexLo,
quebras de llnhas, lmagens, llnks, ouLras llsLas, eLc.
30
S
l
4
0
1

-

r
o
g
r
a
m
a
o

p
a
r
a

a

W
e
b

,$B.8B
31
S
l
4
0
1

-

r
o
g
r
a
m
a
o

p
a
r
a

a

W
e
b

$U087/B
7R.";-' permlLem a exlblo de pglnas web denLro de
pglnas web.
7R.";-' so denldos por:
B6I&%$* +&'FJYZ[JDBE6I&%$*D
A u8L" aponLa para o local da pglna que se dese[a exlblr.
ode-se uullzar os aLrlbuLos =3%+:" e :&3-:+" para denlr o
Lamanho do 7R.";-:
Lm plxels (P1ML 4.01 e P1ML 3),
32
S
l
4
0
1

-

r
o
g
r
a
m
a
o

p
a
r
a

a

W
e
b

$U087/B
33
S
l
4
0
1

-

r
o
g
r
a
m
a
o

p
a
r
a

a

W
e
b

$U087/B
lrames Lambem podem ser usados para exlblr o conLeudo de
llnks:
ara lsso, o aLrlbuLo +,)-&+" da &"3 B%D deve se referlr ao
aLrlbuLo 4,/&" do 7R.";-,
34
S
l
4
0
1

-

r
o
g
r
a
m
a
o

p
a
r
a

a

W
e
b

;M;ECNC"8 3
33
S
l
4
0
1

-

r
o
g
r
a
m
a
o

p
a
r
a

a

W
e
b

D</0%R%$& (
8eplLa o Lxerclclo 1 com as segulnLes modlcaes,
C lndlce deve passar a ser &A%;82"75' das clnco cldades vlslLadas
(use as lmagens orlglnals). As clnco lmagens nos &A%;82"75'
devem esLar dlsposLas em uma unlca llnha, e no podem Ler mals
de 200 plxels de largura (use uma Labela para denlr a
dlsposlo)
lnslra um 7R.";- aps o lndlce,
uando o usurlo cllcar no &A%;82"75 de uma cldade, no ndlce
da pglna, a respecuva pglna do Wlkl1ravel deve ser exlblda no
7R.";- lnserldo.
36
S
l
4
0
1

-

r
o
g
r
a
m
a
o

p
a
r
a

a

W
e
b

*+%",$- ;? =>?@
37
S
l
4
0
1

-

r
o
g
r
a
m
a
o

p
a
r
a

a

W
e
b

7"189:$ /7 *!+,
C 5"#$%& de uma pglna Web e mulLo lmporLanLe, uma vez que a
aparncla de um slLe e seu prlnclpal carLo de vlslLas",
CeralmenLe, o conLeudo de um webslLe e dlsposLo em muluplas
colunas, para que seu conLeudo Lenha uma formaLao semelhanLe
a apresenLada por [ornals e revlsLas.
Muluplas colunas so crladas com as &"3'S
B0%M1*D: forma mals slmples,
B:63D: so elemenLos que permlLem "3.%,". ouLros elemenLos
ermlLem a crlao de :636+\*+ ou +*(\*+ em um documenLo P1ML,
no caso de denlo de layouLs, agrupam ouLros elemenLos P1ML que
so formaLados vla CSS.
ormaLao adlclonal geralmenLe e felLa vla CSS.
38
S
l
4
0
1

-

r
o
g
r
a
m
a
o

p
a
r
a

a

W
e
b

7"189:$ 3B8@6& H.8Q=/J
39
S
l
4
0
1

-

r
o
g
r
a
m
a
o

p
a
r
a

a

W
e
b

7"189:$ 3B8@6& H.8Q=/J
60
S
l
4
0
1

-

r
o
g
r
a
m
a
o

p
a
r
a

a

W
e
b

7"189:$ 3B8@6& H6$XJ
61
S
l
4
0
1

-

r
o
g
r
a
m
a
o

p
a
r
a

a

W
e
b

7"189:$ 3B8@6& H6$XJ
62
S
l
4
0
1

-

r
o
g
r
a
m
a
o

p
a
r
a

a

W
e
b

;M;ECNC"8 R
63
S
l
4
0
1

-

r
o
g
r
a
m
a
o

p
a
r
a

a

W
e
b

D</0%R%$& Y
8efaa o exerclclo 2 organlzando os campos em um 5"#$%&
com:
uma barra superlor de Lulo,
C lndlce em uma barra laLeral (modlque a Labela para que os
&A%;82"75' quem dlsposLos verucalmenLe agora),
L o 7R.";- em um campo a dlrelLa do lndlce.
uullze elemenLos :63.
64
S
l
4
0
1

-

r
o
g
r
a
m
a
o

p
a
r
a

a

W
e
b

;@;?;J>8! =;DB
63
S
l
4
0
1

-

r
o
g
r
a
m
a
o

p
a
r
a

a

W
e
b

D=/7/@.& ;+,"-<
C elemenLo A-"6 (&"3 B/*%:D) e um conLlner para Lodos os
elemenLos de cabealho,
ueve esLar poslclonado anLes do corpo do documenLo (anLes
da &"3 BM#:OD).
66
S
l
4
0
1

-

r
o
g
r
a
m
a
o

p
a
r
a

a

W
e
b

D=/7/@.& ;+,"-<
Cs elemenLos conudos no A-"6 podem ser:
1lLulo da pglna (&"3 BP01*D):
uene o Lulo do documenLo:
Lxlbldo na barra de Lulo do navegador,
Sugerldo para o usurlo ao adlclonar a pglna aos favorlLos,
Lxlbldo em resulLados de mecanlsmos de busca.
67
S
l
4
0
1

-

r
o
g
r
a
m
a
o

p
a
r
a

a

W
e
b

D=/7/@.& ;+,"-<
ScrlpLs (&"3 B+'&620D):
usado para denlr scrlpLs de execuo do lado do cllenLe,
LlemenLos de esulo (&"3 B+0O1*D):
usados para denlr esulos de formaLao que devem ser apllcados
aos elemenLos do documenLo P1ML.
68
S
l
4
0
1

-

r
o
g
r
a
m
a
o

p
a
r
a

a

W
e
b

D=/7/@.& ;+,"-<
LlemenLos de meLa lnformao (&"3 B$*0%D),
rovm meLa-dados sobre o documenLo P1ML,
LsLes elemenLos no so exlbldos pelo navegador, mas podem ser
anallsados por ele e por ouLros sowares,
CeralmenLe so usados para lnserlr uma descrlo do documenLo,
palavras chave, auLores, uluma daLa de modlcao, eLc.
69
S
l
4
0
1

-

r
o
g
r
a
m
a
o

p
a
r
a

a

W
e
b

D=/7/@.& ;+,"-<
LlemenLo base (&"3 BM%+*D):
uene o dlreLrlo ou servldor base para Lodos os llnks uullzados na
pglna.
LlemenLo 5721 (&"3 B16!]D):
usado para relaclonar o documenLo P1ML com recursos exLernos,
CeralmenLe e usado para lncorporar pglnas de esulo (CSS).
70
S
l
4
0
1

-

r
o
g
r
a
m
a
o

p
a
r
a

a

W
e
b

M=>?@
71
S
l
4
0
1

-

r
o
g
r
a
m
a
o

p
a
r
a

a

W
e
b

Z*!+,
xP1ML e uma verso mals esLrlLa e llmpa de P1ML,
xP1ML = )T&-2'785- (#,-.C-/& U".1%, !"23%"3-V
L quase ldnuca a P1ML 4.01,
L baslcamenLe uma redenlo de P1ML como uma apllcao xML:
xML e uma llnguagem de marcao que exlge que as marcaes dos
documenLos esLe[am dlsposLas correLamenLe e na ordem exaLa.
ol proposLa com o lnLulLo de colblr a prollferao de documenLos
P1ML mal escrlLos,
LxlsLem navegadores espalhados pelos mals dlferenLes upos de
dlsposluvos,
ulsposluvos mvels geralmenLe no Lm capacldade de lnLerpreLar
documenLos mal escrlLos.
72
S
l
4
0
1

-

r
o
g
r
a
m
a
o

p
a
r
a

a

W
e
b

Z*!+,
73
S
l
4
0
1

-

r
o
g
r
a
m
a
o

p
a
r
a

a

W
e
b

uals os problemas do cdlgo aclma?
Z*!+,
rlnclpals dlferenas em relao a P1ML:
LlemenLos xP1ML devem esLar 2&#2&6%$*!0* %!6!/%:#+,
MulLas vezes o anlnhamenLo de elemenLos em documenLos P1ML e
felLo de manelra errada:
ara aLender ao padro xP1ML, o cdlgo aclma deverla ser:
74
S
l
4
0
1

-

r
o
g
r
a
m
a
o

p
a
r
a

a

W
e
b

Z*!+,
LlemenLos xP1ML devem sempre +*& I*'/%:#+,
lsLo e vlldo lncluslve para elemenLos vazlos:
73
S
l
4
0
1

-

r
o
g
r
a
m
a
o

p
a
r
a

a

W
e
b

Z*!+,
As &"3' de xP1ML devem sempre ser escrlLas em 1*0&%+ $6!=+'A1%+,
C mesmo vale para os nomes dos aLrlbuLos de cada elemenLo,
Cs valores dos aLrlbuLos xP1ML devem esLar sempre *!0&* %+2%+,
uocumenLos xP1ML devem Ler um elemenLo ralz,
Cu se[a, 0#:#+ os elemenLos xP1ML devem esLar anlnhados denLro do
elemenLo ralz B/0$1D^
C elemenLo B/0$1D:
LsLe deve Ler o aLrlbuLo 5$1!+" denldo com a especlcao no espao
de nomes de xML
<hLml xmlns=hup://www.w3.org/1999/xhLml>
76
S
l
4
0
1

-

r
o
g
r
a
m
a
o

p
a
r
a

a

W
e
b

Z*!+,
Alguns elemenLos so #M&69%0_&6#+:
C elemenLo B/0$1D,
C elemenLo B/*%:D,
ueve conLer o elemenLo BP01*D,
C elemenLo BM#:OD.
ueve conLer uma declarao uCC1?L aproprlada:
77
S
l
4
0
1

-

r
o
g
r
a
m
a
o

p
a
r
a

a

W
e
b

Z*!+,
L posslvel verlcar se um documenLo segue a especlcao
xP1ML no slLe:
hup://valldaLor.w3.org/
78
S
l
4
0
1

-

r
o
g
r
a
m
a
o

p
a
r
a

a

W
e
b

;M;ECNC"8 #
79
S
l
4
0
1

-

r
o
g
r
a
m
a
o

p
a
r
a

a

W
e
b

D</0%R%$& [
aa os a[usLes necessrlos para delxar Lodos os documenLos
crlados nos exerclclos anLerlores no padro T(CU! WLX
C."2'7:$2"5.
aa a valldao de Lodos eles no slLe da W3C.
Cbs.: Como lnformar codlcao de caracLeres em P1ML
hup://www.w3.org/lnLernauonal/quesuons/qa-hLml-encodlng-declarauons
80
S
l
4
0
1

-

r
o
g
r
a
m
a
o

p
a
r
a

a

W
e
b

E;S;ETJC"D!
81
S
l
4
0
1

-

r
o
g
r
a
m
a
o

p
a
r
a

a

W
e
b

-/M/0\@%$8B
82
1 W3Schools P1ML 1uLorlal:
hup://w3schools.com/hLml/defaulL.asp
2 W3C P1ML 4.01 Speclcauon:
hup://www.w3.org/18/hLml4/
3 W3C P1ML 3 Speclcauon:
hup://www.w3.org/18/hLml3/
4 xP1ML 1.0 1he LxLenslble Pyper1exL Markup Language
(Second Ldluon):
hup://www.w3.org/18/xhLml1/
S
l
4
0
1

-

r
o
g
r
a
m
a
o

p
a
r
a

a

W
e
b

HTML PDF

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

HTML PDF

Enviado por

Direitos autorais:

Formatos disponíveis

!

<p>Minha primeira pagina Web!</p>

<p>Minha primeira pagina Web!</p>

<p>Minha primeira pagina Web!</p>

<p>Minha primeira pagina Web!</p>

Você também pode gostar