You are on page 1of 15

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
7c-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- cc ! 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  c6c
c! -c!cTagsc<!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&  cc !cc!-c) c!-c"#c
cNextcubecc  cc-4cc''-cc Nextstpep$cccc
6 6*cc ( cFcc<!-cc 4!cc 64cc "#cc
c AAAc  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 Webc #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 -6c 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 Fc4cc
; -!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',$ $c cI' 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 ! 1c 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 7ccc ! 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 Sitec 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 bodc  '-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) cBcccP Q$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 COLORc c c  c !c
4 ccc7c6c 4!c Kccc& U$c c
P c  TO-cc OQPR Qc
P c  TVKKKKKKQPR Qc

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;OcO Oc!cO (O1 c

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


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-c67c6 -c!cXc0c cRc
rows="valor,valor"> 6 6 "#1$c

;cc!c!-cC!cc; -$c/ c
<frameset 6c c-c67c6 -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>  cOMOcOOc!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"cc ccc #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 6c (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 -6c 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( ,$(- cc0ccccx5cc
'-4 cc, x 1Ec
c (6RR $! $-R \](T6 
^6 T_6^!T(6RRJJJ$J%($-R(-R(-\6 - M$6^ ! T 
$$-^!T9I (+4/S  \`=./8Sc0ccc
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