c

INSTITUTO SUPERIOR ENTRE DOURO E VOUGA

c
c cc
c
 
cc 
c





 

 : Nuno Peixoto

 Susana Morgado

Santa Maria da Feira, 19 de Novembro de 2010

 cc  c
c
Índice
 !"#c$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$%c
x$c & 'c(c)* cc) c$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$+c
,$c !-c) c$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ $$$$$.c
,$x$c /cc'cc)  c$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ $$$.c
%$c -c) c01c$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$$$2c
%$x$c c&3c$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$2c
%$,$c 4"(c$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$5c
%$%$c  4!cc 6c$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ $5c
%$+$c 7c$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$8c
%$.$c 9c$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$8c
%$2$c  -"#c$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$:c
%$5$c  ;-c$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$:c
%$8$c 4c$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$:c
%$:$c  4!cc4c$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$$$$$x c
%$x $c  -c$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$xxc
%$x $x$c  4!cc!-c -c$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$xxc
+$c  -cc-c) c$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$xxc
.$c  cc) c$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ $$$$x,c
2$c  !! cc!-c!-c-c) c$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ $$$x,c
 ;c$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$x.c
c
c
c
c
c
c
c
c
c
c

Œ2
Instituto Superior Entre Douro e Vouga
 cc  c
c
Introdução
c <!c -c &  c c c  !c c !-c ) c  ipertext Markup Language),c
-c x::
c <!c c websitesc '' -c c !-c ; -c !c c <!c 'c
 = c!-c'c>-c?cInternet$cc!-c) c'!cccc!-c'c
6@!c c  "#c c 63c -c ) c 6 c c A4c -c ! c c -c c
7
c-cc--$cc
-c c 'c ; -
c c !-c c A4c #c  =c -c !c c
-c <!c #c  6 c 6c browsers$c c !-c -4B-c ;c c
Bcc!-c<!c#c6 c 'Bcc-cc; -"# $c
  c!-c6 CccA&cBc3 c  cc!c-c63c webc
Dc <!'cc7c; -c-c) Echome pagecDc63c6c!c63cc
c !-c 7Ec c A4c c Dc C!c c 63c ) c <!c F-c !-c C!c c
; -"Gc $ c
c 4(c! cc!-c6<!cc ;7#c4 cc; -c<!c'c = c
!-c'c>-c?c $cc
 -c #
c !-c 6 - c --
c -c !-c 4 'c (c (* c c
!-c ) 
c c 6-c ' c c - c (* c c '!"#c c
; -Ecc6cH- c
c ! c!-c4 -c* cc) 
cc#c
;c c 6 6c 'c c 'c c ; -c c c 6 6c
!cc cc"#cc63c-c) Ecc6 cH-
c! c!-c  c6
c
c! -c!cTags
c<!c '-c6 c  c63c-c) $c
c
c
c
c
c
c
c
c
c
c
c

Œ3
Instituto Superior Entre Douro e Vouga
 cc  c
c
1. Breve Resenha Histórica do HTML
 ccc:
c<!c-c&  c
c !cc!-c) 
c!-c"#c
cNextcubecc  cc-4cc''-cc Nextstpep$cc
cc
6 6*cc( cF
cc<!-cc 4!cc 64cc "#cc
c AAA
c  c   c !-c C!c c ; -c 6 c ' c c 6 4-c c
-!"#c c -"#c c 6<!
c  c c c c !c  !6c c $c c
!"#cc(
c-4c-cc- c c H4c D Internet c(!c
;c-!$c
c 6 - c ' Gc c ) c ; -c ;c -c  c 37c ;7@'
c c <!c
6 -!c <!c c != c 6!c ;- =c -c c 6!4"#c c Web
c #c
-c;!c-c;=F$c
)Cc -c 
c c 7c c ) c Bc -!c -c @
c 6 -c !-c *c -c
6 $c  'Bc c -6
c c !="#c c ; -c 6 c c ! c c ) c
!-!
c4-c-ccFc-c  cc7cc'=c-c @$ c
!-cc!cc- c(* cc!-c)  c
c x::,cDc! cc) $c
c x::%c Dc'!"#cc ) 
c! - !-c;"Gcc6 F
c4cc
; -!3 Ec
c x::+cc) c',$
c6 ="#cc  @c6 6E c
c x::+c c) c '%$
c!-c7#cc ) 
cc ' #cBcc-c!-c
!(cc6 #Ec
c x::.c c) c'%$,
cNetscape e Internet Explorerc;-c!c6 *6 c6 Gc
4cc-6-"Gc E c
c x::.cDcI' 6c c6 c& c(cc6c-c!-c7#cc
) c6 cc4 J c' c',$ $ccI' 6cBc!-c!-cc  c
0 61c 4c -c 4Cc c 6 -c <!c C-c -6!c  'Bc c
'c>-c<!c;'-cc) E c
c x::2c cxc-c=-4 cccBc6 c6c6 - c'=cc(c
c 
c  c 6 c -6- c c !-c ) $c !@c !-c
; -"#c-6cc cc2 c6 6 E c
c x::5c c) c'+$ c#c"ccbrowsers Netscapec'+$ c01cc Internet
Explorer v4.0c 0!!4 1c <!c 6  -c !-c C!c c c 0 CSS,
JavaScript/VBScript e DOM1c <!c C!c 64= -c ' c ! c
 cc) c>-$c! c#c c) Ec
Œ4
Instituto Superior Entre Douro e Vouga
 cc  c
c
c x::8c c ,$c -c c Bc "c c !c ' #c c (c c c <!
c
B-cc! ccc6 6 ccxcc6 c6 c'cc5 c
'c6 6 Ec
c x:::cc) c'+$ xc!-c-;"Gcc' #c  $c
c , ccK) c'x$ cLc cccc!-c' #cK cc) c'+$ x$c
c
2. Linguagem HTML
c !-c ) c 
pertext Markup Language)c Bc !-c !-c c - "#c
!=c 6 c 6 != c 63c c Web$c c !-c ) c 6-c  c
 6 c 6 c ' $c c c ! !c c !#c c c
)M-cc $c
c )M-c Bc !-c 6 #c 6 c c 6 "#c  !! c c -!-Bc c Hc
4c c -6$c c @!c c 7-6c !-c !-c Bc 'c -c !-c C!c c
'c  c 6c c -6c 03!
c '@
c  c ! 1
c c
6 c (6 "G$c c 6 #c Bc 6c c ! c 6 Gc c 6 -c c
7c-c $c
 c!c! c  cBc!-c6 #cc; -"#cc7cc<!c#c;c''c
6 c(6 7
ccc ! c'c6 cc ; - c!-c-c
(6 4Cc6 c ' c"G$c
-c;
cc!-cc Webc#c =c-cc!cc-c<!c#c
 6 c 6c 4 J $c c -c -6G -c c !-c ) c

perText Markup Language).
c !-c ) c Bc !-c !-c !=c 6 c ; c c 6 Fc 0; -"#1c
c!-ccWeb.c
c
2.1. Vantagens e Desvantagens do HTML
Vantagens:
c c;3cc!="#Ec
c Lc;3cc6  Ec
c c c!=c6 c6  c<!<! c6ccE c
c Lcc-6c"#
c6 cc;c4c6c!-c cc7E c
c Loose sintaxec06 cc c-!c;7@'
c#c!-6 cc -1E c
c !6 c6 c<!ccc' 
cc#ccc'  Ec

Œ5
Instituto Superior Entre Douro e Vouga
 cc  c
c
c -6-c !=Ec 4c -c <!c c Web Site
c c #c c c
sitesEc
c !c 6 c -c c 7c K 
c <!c Bc c '=c -c !=c 6 c
 -=-ccEc
c ' cDc#cBc3 c-6  c(!-c;J Ec
c 3cc6  Ec

Desvantagens:
c c<!cc63c-c) c6cc !" #cc- Ec
c #c6c6 != c@c >-c=(
cC3c<!cBc!-c!-c3E c
c Nc'=
cc !! "#cc!-c) cBc;@cc-6  E c
c ! cc! "c; c6c) c#c-Ec
c #cBc6 c -c-ccc E c
c !c;74c-c "#cc! c6 Gc!cE c
c cc63c#cc'!-E c
c -c ; c ;  
c c 6 *6 c <!c 6 =c #c #c
!6 c c c 6c - c c ' 0c 6 c 7-6c c tag
marquee).

3. Comandos HTML (Tags)

c-c) c#c  c<!c-cc4 J c-cc; -"Gc
'-c 6  c c #c (-c c $c #c  c 4  - c  c c
cOPOc0- c<!1ccOQOc0- c<!1$ c
c
3.1. Tags Básicos

TAGS BÁSICOS

<html>
</html> R -c!-c!-c) $c

<head> ;cc? cc4"(
c-c-c<!c#c#c''c

</head> c63$c

<body>
</body> ;cc3 c''cc!-$c

Œ6
Instituto Superior Entre Douro e Vouga
 cc  c
c
c
 c c c bod
c  '-c c 7c c 63$c c 6 6c c 6 c c
; -"#cc7c#c
<P> c!-c6 3 ;</P>
<CENTER> =cc7</CENTER>
<B>7c-c </B>
<I>7c-c3</I>
<U>7c!4(</U>
<TT>7cccc-3<!cc ' </TT>
<SUB>7c!4 </SUB>
<SUP>7c4  </SUP>
<BR>S!4 cc(
c#cc c;( c
<!--cc;c;c6 c-3 ccBc c6c4 J c -->
<DD>ccBc!c6 c  c6 3 ;c0c6"c6 cc6 - c(1$

3.2. Cabeçalho

CABEÇALHO

cc-cc63cc4 cc@!cc
<title></title> C$c

c
c
3.3. Atributos do Corpo

ATRIBUTOS DO CORPO

<body bgcolor=?>  cc;!$c

<body text=?>  cc7$c

<body link=?>  cc9$c

<body vlink=?>  cc9c6 '-c'$c

<body alink=?>  cc9c'$c

Œ7
Instituto Superior Entre Douro e Vouga
 cc  c
c
3.4. Texto

TEXTO

<b></b> 7c $c

<i></i> 7c-c3$c

7cc-3<!cc '
c
<tt></tt> -6"-$c

<font size=?></font> -(cc $c

<font color=?></font>  cc $c

<font face=?></font> ;cc;c!=$c

c
-cc-!c-6 cc!-c) cBcccPQ$cc -cc
c
-(cc6cc;$
c-(cc;
c-c) 
c varia de 1 (menor) a 7 (maior).
 c;!  -cc7c-cc;c
<FONT SIZE=n> ccTc-(cc;cC c</FONT>
Aumentar ou diminuir c;c-c "#cc<!c3c;! 
cc--
c#c
Bc *c 6 c !-c sinal de mais 06 c !- 1c ou menos 06 c -! 1c c -(c c
;$c
 c-! cccc;cBc*c! cc 4!c FACE$c<FONT SIZE=2 FACE=Arial>
c  c c ;c #c  -c 6c  4!c COLOR
c c c c !
c
4 ccc7
c6c 4!cK
ccc&U$c c
PcTO-cc OQPRQc
PcTVKKKKKKQPRQc

3.5. Links

LINKS

<a href="URL"></a>  c!-c(6 "#$c

<a
href="mailto:EMAIL"></a>  c!-c9c6 cc'cc $ c

<a name="NOME"></a>  c!-cW'Wc cc!-c63$ c

Œ8
Instituto Superior Entre Douro e Vouga
 cc  c
c
=cc"#cc!-cW'Wc6 c cc--c
<a href="#NAME"></a> 63$c

3.6. Formatação

FORMATAÇÃO

<p></p> ;cc3 cc!-c6 3 ;$ c

<p align=?> (-cc!-c6 3 ;$ c

<br>  c!-c<!4 cc($ c

WWcB c!=c6 c; - c4cc

<div align=?> 7$c

3.7. Grafismo

GRAFISMO

<img src="FICHEIRO">  c!-c--$c

<img src="FICHEIRO"
align=?> (c!-c--c-c "#cc cc7$ c

<img src="FICHEIRO"
border=?> ;cc4 cc--$ c

<hr>  c!-c(c( =$c

c
3.8. Tabelas

TABELAS

<table></table>  c!-c4$c

<tr></tr> (cc!-c4c

<td></td> B!c'!c!-c($ c

<hr>  c!-c(c( =$ c

Œ9
Instituto Superior Entre Douro e Vouga
 cc  c
c
3.9. Atributos de Tabelas

ATRIBUTOS DE TABELAS

<table border=#> & c?c'cccB!$c

<table cellspacing=#>  -c  ccB!$c

<table width=# or %>  ! cc4c c-c67c!c6 -$c

(-c( =ccHcc
<tr align=?> or <td align=?> B!$<!E;O
cO Oc!cO (O1 c

<tr valign=?> or <td (-c' ccHccB!$0O6O
c

valign=?> O-Oc!cO4-O1c

<td colspan=#> !- cc!cW6  Wc6 c!-cB!$ c

<td rowspan=#> !- cc(cW6  Wc6 c!-cB!$ c

c
3.10. Formulários

Formulários cc

P; -Q ;c!-c; -!3 c6 c cc!!3  c

P6!Q ;c!-c-6cc c

P7 Q ;c!-c3 cc7c

P4Q ;c!-c *!c6 c!-c  c

P;Q ;c!-cC!cc-6c

PQ ;c!-c@!c6 c!-cC!cc-6 c

P6 !6Q ;c!-cc3'c

P6Qc ;c!-c6"#c-c!-c7c 6Jc

P4!Q ;c!-c4#c6 c6  c

c
c

Π10
Instituto Superior Entre Douro e Vouga
 cc  c
c
3.11. Frame

FRAMES

;ccC!cc; -$c! ccc

<frameset></frameset> P4MQc!-c!-c-c; -$c

;cc(c!-cC!cc; -$c/ c
<frameset 6c c-c67
c6 -c!cXc0c cRc
rows="valor,valor"> 6 6 "#1$c

;cc!c!-cC!cc; -$c/ c
<frameset 6c c-c67
c6 -c!cXc0c cRc
cols="valor,valor"> 6 6 "#1$c

;c!-cHc; -$c! c cc

<frame> P; -Q$c

Y ccBc ccHc''c-c
<noframes></noframes> 4 J c<!c#c!6 -cc!cc; -$ c

3.11.1. Atributos de uma Frame

ATRIBUTOS DE UMA FRAME

6;cc!-c) cc c74cc

<frame src="URL"> ; -$c

3c!-c-c?c; -cc-cc6 c cW9Wc

<frame name="nome"> c6  cc! c; -$c

;ccc; -c-c4 cc $c/c6c

<frame scrolling=VALOR>  cOMO
cOOc!cO!O$c

<frame noresize> -6cc'cc - cc; -$ c

c
c
4. Formas dos Comandos HTML
cc6-c c
c 4 c0-61 P-Qc
c ( P-Qc$c$c$cPR-Qc
c -6 P-Qc
Π11
Instituto Superior Entre Douro e Vouga
 cc  c
c
cccccccccccccccccccccccccccccccc P-cxQc$$$cPR-cx Qc
cccccccccccccccccccccccccc P-c,Qc$$$cPR-c,Q c
cccccccccccccccccccccP-cQc$$$cPR-cQc
PR-Qc
c
5. Regras do HTML
c ( c-6 cctagsc;(cc-6Ec
c !c<! c!-cccZP[c!ccZQ[
cc@c!cc;-cc tag;c
c #c! c6"ccc0c  cccZP[ccZQ[1$ c
7-6c
ccPRc-Qc
cPc-ccQcc
c c !6-cc6"ccccc #c 6 c
-c6c!-c6"$c ccc#c(3c  "#cc!cc6"E c
c -cccc H!c0#cBc -c3 c-c;cc
! cc- -c-c'"#c6 ccc*1E c
c -cc cc0!'c7#cZ$(-[c!cZ$(-[1cDc-H!$c

6. Estrutura de um documento em HTML

P) Qc
P)Qc
cccccccccPQ Titulo da PáginaRQc
PR)Qc
P&UQc
<! -- Corpo da Página -->
PR&UQc
PR) Qc
-c!-c) cBc-6cc!c6 cc"#cc4"(c 'cc
c 6ccH$c

Π12
Instituto Superior Entre Douro e Vouga
 cc  c
c

c
c
c

c
c
c
c
c

Π13
Instituto Superior Entre Douro e Vouga
 cc  c
c
Conclusão
/'-c!-cc'c6 cc 7  cDcc!c-!cc!c3c-c
c 
c c !-c ) c (!c 6 c  = c !-c 'c >-c ?c J46c c
C! cc  c6<!c cCc4 c6 cc-!$c c
c ;*-
c <!c ! !c c c c c :
c (!c 6 c '! c c
-!"#c c c c  !c 6@'c <!c != c -!c ;-c 6=c c
  cwebpagesc-c6 c ! cc(-$c
S!c 6 c 6 c c ="#c c  4(
c #c -c c -c !-
c 6
c (c
-6 c c!c c <!c  c c !-c ) c c -c ;!'$c c c
-3cc(c cc76 Fcc6 - c6cc  c!-cJ46c
-c !-c ) $c c 
c c c !
c -6 c <!c Bc !-c ; -
c
6 cc<!c-cc c-!c"#
c6 <!c!-c6<!c 
c6c c-c
!c!-c 4(cc<!c7c-!c; "c6 c  cc $cc--c; -c<!c
c c ;!
c -6 c c --c --c <!c  c !-c !c c
; -$cc
-cc ="#cc 4(cccc 4(cC3c''c c>-4cc
6c c c 0c c  1c c <!c c '=c -c -6 c c
- c<!c''-cc -!"Gc-c 
c<!c-"cc cFcc
-!c 
c <!c 
c 6c -c -'c c  c c 
c -
c <!c  -c
-c6 !6c-c6 4 cc!c6 <!Fcc<!cc!c;!
c(Ccc<!c
c<!"#cc'cc<!c-c =c!-c!! c; -3cc<!cc
(-c6c c!-c -'cc;!! $cc
6 cc6!c64cc-6c6 cc ="#cc 4(
c!-c'=c
<!c c *c -c c !-! c '3 c 66Bc c --c -6
c 
c #c Bc ;3c  c
64cc-6cc6*c6 cc''-cc 4(
c;c
<!c c -c 6 -c c  !"#c c (-c c 6 c c c
Fc6 c; c<!c6-c-!cB-cc; -"Gc<!c<!  -c-c
7cccc!$ c
-c !-
c c  4(c ;c !-c -'c 6 c c -(c ; -"#c c >-4c c
'c c c c <!c c --c (c "#c c -c c ;=c !-c
63c-c!-c) cc<!c6 ''-cc c!-c-6c c"#
c
c;= c!-c63c-c)  c
c

Π14
Instituto Superior Entre Douro e Vouga
 cc  c
c
Netografia
c (6RRJJJ$$-R! (-R$(-
c0ccccx5cc'-4 c
c, x 1Ec
c (6RRJJJ$ 4$-RRx+,%+ .,R) 
c0ccccx5cc'-4 c
c, x 1Ec
c JJJ$J%$ R 6RR49+R( ,$(- c
c0ccccx5cc
'-4 cc, x 1Ec
c (6RR $! $-R \](T6 
^6 T_6^!T(6RRJJJ$J%($-R(-R(-\6 - M$6^ ! T 
$$-^!T9I (+4/S \`=./8S
c0ccc
cx5cc'-4 cc, x 1E c
c A96Bc0, x 1$c!-c6@'c- c(6RR6$J96$ RJ9R)  c0c
cccx5cc'-4 cc, x 1Ec
c

Π15
Instituto Superior Entre Douro e Vouga