Curso de HTML e Introducao Ao XHTML

Curso de HTML 4.
01 e Introduo ao XHTML
Desenvolvimento, aplicaes e referncias de acordo com as normas do W3C
ndice
PARTE I HTML Bsico
1 Noes Bsicas ................................................................................................. 8
Sobre a "World Wide Web" ............................................................................... 8
O que preciso para criar pginas para a Web? ............................................. 9
A sua primeira pgina escrita em HTML ........................................................... 9
2 Elementos e atributos ....................................................................................... 11
Elementos ......................................................................................................... 11
Atributos ............................................................................................................ 13
3 Elementos bsicos da linguagem HTML ......................................................... 16
Cabealhos ....................................................................................................... 16
Pargrafos .........................................................................................................16
Quebras de linha ............................................................................................... 16
Comentrios ......................................................................................................17
Lista de elementos bsicos do HTML ............................................................... 17
Dicas ................................................................................................................. 21
Como ver o cdigo fonte de uma pgina HTML ............................................... 21
4 Formatao de texto ......................................................................................... 22
Elementos para formatao de texto ................................................................ 23
Elementos para o "output de cdigo de computador" ...................................... 23
Elementos para citaes e listas de definies ................................................ 23
5 Ligaes de HiperTexto ("links") ..................................................................... 28
O Elemento <a> (ncora) e o atributo href ....................................................... 28
O atributo target ................................................................................................ 30
O atributo name ................................................................................................ 30
"Uniform Resource Locators" (URLs) ............................................................... 34
Ligaes em HTML ("links") .............................................................................. 34
Como se forma um URL ................................................................................... 34
Protocolos de acesso ....................................................................................... 35
6 Listas .................................................................................................................. 35
Listas No Ordenadas ...................................................................................... 35
Listas Ordenadas .............................................................................................. 36
Listas de Definies .......................................................................................... 36
Elementos para Listas ...................................................................................... 36
7 Imagens .............................................................................................................. 41
O elemento <img> e o atributo src ................................................................... 41
O atributo alt ou title ......................................................................................... 43
Elementos relacionados com imagens ............................................................. 43
Fundos de pgina ............................................................................................. 48
O atributo bgcolor do elemento <body> ........................................................... 49
O atributo background ...................................................................................... 49
Dicas ................................................................................................................. 49
8 Cores .................................................................................................................. 50
Formas de exprimir cores ................................................................................. 50
Nomes de cores ................................................................................................ 50
<meta name="autor" content="Gregory Bevilaqua">
Curso de HTML 4.01 e Introduo ao XHTML 1.0

Cores seguras da Web ..................................................................................... 51

Formas de exprimir os valores das cores ......................................................... 53
Mais de 16 milhes de cores diferentes ........................................................... 55
Mais nomes de cores ........................................................................................ 55
9 As entidades de caracteres do HTML .............................................................. 60
Entidades de caracteres mais importantes ....................................................... 61
Inserir espaos sem quebras de linha .............................................................. 61
Entidades para caracteres do conjunto ASCII .................................................. 62
Entidades para caracteres do conjunto ISO 8859-1 ......................................... 62
Entidades no pertencentes ao conjunto ISO 8859-1 ...................................... 64
10 Tabelas ............................................................................................................. 65
Definir tabelas ................................................................................................... 67
O atributo border ............................................................................................... 68
Cabealhos numa tabela .................................................................................. 68
Clulas vazias numa tabela .............................................................................. 69
Elementos relativos a tabelas ........................................................................... 69
PARTE II HTML Avanado

11 Arranjo grfico das pginas ........................................................................... 79
12 Formatao com estilos CSS ......................................................................... 79
Com atuam os estilos? ......................................................................................79
Folha de estilos externa .................................................................................... 79
Folhas de estilos internas ................................................................................. 79
Estilos "inline" ................................................................................................... 80
Elementos para estilos ..................................................................................... 80
O Elemento <font> ............................................................................................ 81
A forma correta de formatar, com estilos .......................................................... 82
13 Formulrios ...................................................................................................... 85
Criar um formulrio ........................................................................................... 85
Inputs ................................................................................................................ 85
Radio Buttons ................................................................................................... 85
Checkboxes ...................................................................................................... 86
O atributo action e o boto de submisso ........................................................ 86
Elementos para Formulrios ............................................................................. 86
14 Porqu usar HTML 4? ..................................................................................... 92
O HTML 3.2 criava muitos problemas! ............................................................. 92
O que que o HTML 4 veio resolver? .............................................................. 93
Escolha a DTD .................................................................................................. 93
Teste o seu HTML no validador do W3C .......................................................... 94
15 O cabealho de um documento HTML .......................................................... 94
O Elemento <head>........................................................................................... 94
Elementos de cabealho (<head>) ................................................................... 95
A declarao DOCTYPE ................................................................................... 96
O elemento <meta> .......................................................................................... 96
Valores desconhecidos para o atributo name ................................................... 97
<meta name="autor" content="Rafael Feitosa">

16 Molduras ("frames") ........................................................................................ 98

Elementos para molduras ("frames") ................................................................ 102
17 Insero de scripts .......................................................................................... 105
Inserir um script numa pgina HTML ................................................................ 105
Como lidar com os browsers antigos ................................................................ 106
Elementos para inserir scripts e cdigo ............................................................ 107
PARTE III Referncia Rpida e Reviso

18 Exemplos rpidos de HTML 4.01 .................................................................... 109
19 Referncia rpida de HTML 4.01 .....................................................................111
Todos os elementos ordenados alfabeticamente ............................................. 111
20 Atributos especiais do HTML 4 ...................................................................... 113
Atributos nucleares ou intrnsecos ("Core Attributes") ...................................... 113
Atributos lingsticos ......................................................................................... 113
Atributos de teclado .......................................................................................... 113
Atributos de eventos do HTML 4 .......................................................................114
Eventos de janela ..............................................................................................114
Eventos para formulrios .................................................................................. 114
Eventos de teclado ............................................................................................114
Eventos do mouse ............................................................................................ 114
21 O conjunto de caracteres ASCII de 7 bits ..................................................... 115
Caracteres ASCII imprimveis ........................................................................... 115
Caracteres de controle ASCII (no imprimveis) ............................................... 117
PARTE IV: Referncia de HTML 4 e XHTML 1

1. Introduo ...................................................................................................... 119
2.  ..................................................................................... 119
3. <!DOCTYPE> .................................................................................................119
4. a ..................................................................................................................... 121
5. abbr ................................................................................................................ 123
6. acronym ......................................................................................................... 124
7. address .......................................................................................................... 125
8. applet ............................................................................................................. 125
9. area ................................................................................................................ 127
10. b ..................................................................................................................... 145
11. base ............................................................................................................... 129
12. basefont ......................................................................................................... 130
13. bdo ................................................................................................................. 131
14. big .................................................................................................................. 145
15. blockquote ...................................................................................................... 131
16. body ............................................................................................................... 132
17. br .................................................................................................................... 133
18. button ............................................................................................................. 134
19. caption ............................................................................................................135
20. center ............................................................................................................. 136
21. cite ..................................................................................................................175

22. code ............................................................................................................... 175

23. col ...................................................................................................................136
24. colgroup ......................................................................................................... 138
25. dd ................................................................................................................... 139
26. del .................................................................................................................. 140
27. dfn .................................................................................................................. 175
28. dir ................................................................................................................... 140
29. div ...................................................................................................................141
30. dl .................................................................................................................... 142
31. dt .................................................................................................................... 143
32. em .................................................................................................................. 175
33. fieldset ............................................................................................................ 143
34. font ................................................................................................................. 144
35. form ................................................................................................................ 146
36. frame .............................................................................................................. 147
37. frameset ......................................................................................................... 149
38. head ............................................................................................................... 150
39. <h1>...<h6> .................................................................................................... 150
40. hr .................................................................................................................... 151
41. html ................................................................................................................ 152
42. i ...................................................................................................................... 145
43. iframe ............................................................................................................. 153
44. img ................................................................................................................. 154
45. input ............................................................................................................... 156
46. ins ...................................................................................................................158
47. kbd ................................................................................................................. 175
48. label ............................................................................................................... 159
49. legend ............................................................................................................ 160
50. li ..................................................................................................................... 161
51. link ................................................................................................................. 162
52. map ................................................................................................................ 164
53. menu .............................................................................................................. 165
54. meta ............................................................................................................... 166
55. noframes ........................................................................................................ 167
56. noscript .......................................................................................................... 168
57. object ..............................................................................................................169
58. ol .................................................................................................................... 171
59. optgroup ......................................................................................................... 172
60. option ............................................................................................................. 172
61. p ..................................................................................................................... 173
62. param ............................................................................................................. 174
63. pre .................................................................................................................. 176
64. q ..................................................................................................................... 177
65. s ..................................................................................................................... 180
66. samp .............................................................................................................. 175
67. script ...............................................................................................................177
68. select .............................................................................................................. 179
69. small ............................................................................................................... 145
70. span ............................................................................................................... 180
71. strike ...............................................................................................................180
72. strong ............................................................................................................. 175
73. style ................................................................................................................ 181
74. sub ................................................................................................................. 182
75. sup ................................................................................................................. 182
76. table ............................................................................................................... 182

77. tbody .............................................................................................................. 184

78. td .................................................................................................................... 185
79. textarea .......................................................................................................... 187
80. tfoot ................................................................................................................ 188
81. th .................................................................................................................... 190
82. thead .............................................................................................................. 192
83. title ..................................................................................................................193
84. tr ..................................................................................................................... 194
85. tt ..................................................................................................................... 145
86. u ..................................................................................................................... 195
87. ul .................................................................................................................... 195
88. var .................................................................................................................. 175

PARTE I: HTML Bsico

1. Noes Bsicas
1.1 Sobre a "World Wide Web"
O que a World Wide Web?
x
x
x
A World Wide Web (WWW), designada habitualmente apenas por a Web,

formada por muitas redes de computadores ligadas entre si que se estendem
por quase todo o mundo.
Todos os computadores que esto ligados Web podem comunicar uns com
os outros.
A comunicao entre os computadores que esto na Web faz-se usando o
protocolo padro HTTP ("HypertText Transfer Protocol,") que significa:
Protocolo para a Transferncia de HiperTexto.
Como funciona a WWW?

x
x
x
x
x
Na Web a informao normalmente guardada em documentos designados

por pginas da Web.
As pginas da Web so constitudas por arquivos que esto guardados em
computadores designados por servidores da Web.
Os computadores usados para ler as pginas da Web so designados por
clientes da Web.
Os clientes da Web usam um software designado por Web browser (ou
navegador da Web) para apresentar as pginas graficamente.
Os browsers mais populares so o Microsoft Internet Explorer e o Netscape,
mas o Mozilla (do qual derivam as verses modernas do Netscape) revela
muitas qualidades que j superam o MSIE. A verso 9 do browser Opera
tambm revela qualidades que merecem a nossa ateno.
Como que o browser vai buscar as pginas?

x
x
x
O browser faz um pedido ao servidor da Web que guarda a pgina que quer
ver.
O pedido, que contm o endereo (URL) da pgina desejada, enviado
usando o protocolo padro HTTP.
O
endereo
(URL)
tem
um
aspecto
semelhante
a
este:
http://www.qualquersitio.com/pagina.html
Como que o browser faz a apresentao das pginas?

x
x
x
As pginas contm instrues que descrevem a forma como devem ser

mostradas.
O browser l as instrues e usa-as para desenhar uma representao grfica
do contedo da pgina.
A forma usada para escrever essas instrues baseia-se na linguagem HTML.
Quem responsvel pela definio dos padres da Web?

x
x
x
x
x
Os padres atuais da Web foram influenciados por aquilo que a Netscape e a

Microsoft fizeram no passado com os seus Web browsers, mas atualmente a
influncia destas entidades menor.
O organismo que define as regras para a Web o World Wide Web
Consortium (W3C), que conta com a participao ativa dos lderes da indstria
e de meios acadmicos.
O W3C define as especificaes tcnicas que formam os padres da Web.
Os padres mais importantes da Web so: HTML, CSS e XML.
O padro mais recente da famlia HTML o XHTML 2.0. Esta uma
reformulao da linguagem XHTML 2.0 baseada no HTML 4.01 que obedece
aos requisitos do XML.
1.2 O que preciso para criar pginas para a Web?

x
x
x
x
Um editor de texto capaz

Um programa para manipular imagens
Web Browser
Idias e coisas para mostrar
1.3 A sua primeira pgina escrita em HTML

O acrnimo HTML significa HyperText Markup Language. Este nome significa
que o HTML constitudo por um texto especial que habitualmente designado por
hipertexto.
O que que est dentro de um arquivo HTML?
x
x
x
Um arquivo HTML constitudo por um texto que define os elementos da

linguagem HTML usando "etiquetas de markup".
As etiquetas de markup do instrues ao browser sobre a estrutura do
documento e sobre forma como a pgina deve ser apresentada graficamente.
Os arquivos HTML podem ser escritos usando um simples editor de texto e os
seus nomes devem ter a extenso .html ou .htm.
Experimente voc mesmo

Usando o seu editor de texto preferido crie um novo arquivo e escreva nele o
texto seguinte:
<html>
<head>
<title>Ttulo da pgina</title>
</head>
<body>
Esta a minha primeira pgina da Web.
<b>Este texto est em negrito</b>
</body>
</html>
Salve o arquivo com o nome "pagina.html".

Abra o documento "pagina.html" no local em que voc salvou o arquivo e
observe o resultado:

Explicao do Exemplo
A primeira etiqueta que encontramos no documento anterior <html>. Ela
define o elemento raiz do documento, que aquele que contm toda a definio da
pgina. Esta etiqueta diz ao browser para iniciar um novo documento HTML cujo
contedo se encontra definido entre esse local e a etiqueta de fim (ou de finalizao),
que </html>. Esta etiqueta de fim marca o fim do documento (pgina).
O texto contido entre as etiquetas <head> e </head> define o cabealho do
documento. Esta informao no apresentada graficamente, mas d indicaes
importantes a respeito daquilo que a pgina contm e sobre a forma como ela deve
ser apresentada graficamente.
O texto contido no elemento <title> define o ttulo do documento. Repare que o
seu sistema operacional d janela do browser um nome em que entra este ttulo.
O texto contido no elemento <body> define tudo aquilo que o browser deve
apresentar graficamente. O corpo da pgina ("body") constitudo por tudo o que se
encontra entre <body> e </body>.
O texto contido entre as etiquetas <b> e </b> ser apresentado em negrito.
Devemos usar a extenso .htm ou .html?
Os nomes dos arquivos escritos em HTML devem ter a extenso .html, mas a
extenso .htm ainda usada. Este fato uma herana dos tempos (pr-histricos no
que diz respeito Internet) do MS DOS e do Windows 3.11 de 16 bits, em que os
nomes dos arquivos tinham no mximo 8 caracteres e as suas extenses no podiam
ter mais de 3 caracteres.
Essas deficincias, que no passado obrigaram a usar a extenso .htm em vez
de .html, j foram eliminadas. Por isso devemos usar a extenso .html, a no ser que
exista uma boa razo para usar .htm (pouco provvel).
Editores Especializados em HTML
Muita gente acha que a forma mais fcil de criar e editar arquivos HTML
consiste em usar um editor do tipo "what you see is what you get" ou em uma traduo
ao p da letra o que voc v o que voc comea (WYSIWYG) como o Macromedia
10

Dreamweaver MX, o Adobe GoLive ou o Microsoft FrontPage 2003. Estes editores

WYSIWYG permitem criar as pginas num ambiente grfico sem que o usurio precise
conhecer a linguagem HTML. No entanto, estas aplicaes apresentam diversas
deficincias na qualidade do HTML que produzem. Apesar de as verses mais
recentes produzirem cdigo de melhor qualidade, elas ainda esto muito longe da
perfeio, o que obriga os usurios a editar manualmente partes do HTML produzido
para corrigir os erros criados. Se no quiser desistir de usar a sua aplicao preferida,
mas quer produzir bom HTML ento ter de ser capaz de corrigir o cdigo que ela
produz de forma deficiente.
O melhor uso que se pode dar a um editor WYSIWYG consiste em us-lo para
acelerar o desenvolvimento das pginas e sempre que necessrio ir ao cdigo fonte
para fazer as otimizaes necessrias. Se o seu objetivo adquirir conhecimentos que
lhe permitam criar pginas para a Web de forma competente, ento deve aprender
HTML usando um editor de texto e s depois comear a usar um editor especializado
em HTML.
Editores de texto simples
Muita gente usa o editor de texto notepad (Bloco de Notas) para editar as suas
pginas HTML. Isto acontece porque este editor de texto est presente em todas as
mquinas Windows. Muitos consideram este editor fraco por no apresentar uma boa
interface ou por no destacar trecos de cdigos que facilitem a localizao entre as
linhas. No entanto para quem adotar essa mesma idia, atualmente o mercado
oferece boas alternativas de softwares para edio HTML, um deles o PHP Editor
que oferece suporte tanto a HTML quanto ao PHP, com esquema de cores, e algumas
formataes pr-definidas.
2. Elementos e atributos
2.1 Elementos
Os documentos HTML so simples arquivos de texto que contm "etiquetas de
markup". Estas etiquetas definem os elementos da linguagem HTML e os seus
contedos. A lista seguinte indica algumas das suas caractersticas:
x
As "etiquetas de markup" do HTML so usadas para definir os elementos.
11

x
x
x
x
x
As etiquetas do HTML escrevem-se usando os caracteres < e >, envolvendo o

nome do elemento e os seus atributos.
Em regra, as etiquetas do HTML aparecem em pares, como em <b> e </b>.
A primeira etiqueta do par a etiqueta de incio (ou de abertura) e a segunda
etiqueta do par a etiqueta de fim (ou de finalizao).
Tudo o que se encontrar entre as etiquetas de incio e de fim faz parte do
contedo do elemento.
Em HTML as etiquetas podem ser escritas com letra maiscula ou com letra
minscula, ou seja, o html no sensitive case. Os resultados so os
mesmos porque os nomes dos elementos no dependem do tipo de letra. As
etiquetas <b> e <B> representam o mesmo elemento.
Em XHTML as etiquetas devem ser escritas sempre com letra pequena. Em
XHTML as etiquetas <b> e <B> no representam o mesmo elemento.
Relembremos agora o exemplo apresentado antes:

<html>
<head>
<title>Ttulo da pgina</title>
</head>
<body>
</body>
</html>
O fragmento apresentado a seguir um elemento da linguagem HTML:

Repare nos aspectos seguintes deste fragmento:

x
x
x
O elemento comea com a etiqueta de incio (ou abertura): <b>

O contedo do elemento <b> apenas texto ("Este texto est em negrito")
O elemento termina com a etiqueta de fim (ou de finalizao): </b>
A etiqueta <b> serve para definir o elemento do HTML que provoca a escrita do
texto em negrito.
Um exemplo mais complexo
O fragmento seguinte tambm um elemento do HTML:
<body>
</body>
O elemento principal deste fragmento inicia-se com a etiqueta <body>, e

termina com a etiqueta </body>.
A etiqueta <body> serve para definir o elemento que contm tudo aquilo que
vai ser apresentado graficamente na janela do browser. Ele contm o corpo ("body")
do documento HTML.
Porque que se recomenda a escrita das etiquetas com letra minscula?
12

Como se disse antes, em HTML os nomes dos elementos podem ser escritos
tanto com letra maiscula como com letra minscula: <B> significa o mesmo que <b>.
Se voc buscar mais tutoriais de HTML na Web, vai reparar que os mais antigos usam
quase sempre letra maiscula para escrever os nomes dos elementos, mas os mais
modernos usam exclusivamente letra minscula. Aqui usaremos sempre letra
minscula porque existe uma razo muito forte para isso.
A nova gerao do HTML uma aplicao do XML e designa-se por XHTML. O
XHTML a melhor linguagem para criar pginas para a Web, mas mais restritiva do
que o HTML (rouba algumas das liberdades que o HTML oferece.) Contrariamente ao
que acontece em HTML, em XML as etiquetas <B> e <b> representam coisas
diferentes, pois em XHTML adotou-se uma conveno segundo a qual todas as
etiquetas devem ser escritas com letra minscula. Por este motivo conveniente que
escreva todas as etiquetas com letra minscula. Deste modo no s adquirir bons
hbitos, como ter muito pouco (quase nenhum) trabalho quando precisar converter as
suas pginas de HTML para XHTML.
2.2 Atributos
A etiqueta <body> define o corpo ("body") de uma pgina HTML. No exemplo
seguinte adicionamos o atributo bgcolor (que significa "background color", ou cor de
fundo) para indicarmos que queremos que a pgina seja pintada com a cor de fundo
vermelha:
<html>
<body bgcolor="red">
</body>
</html>
Consideremos agora a etiqueta <table>, que define um elemento de tabela. Ao

juntarmos o atributo border (que significa fronteira, ou limites) com o valor apresentado
a seguir estamos dizendo ao browser para no desenhar os limites da tabela (<table
border="0"> indica uma espessura nula para a linha de contorno da tabela):
<html>
<body>
<table border="0">
<tr>
<td>
13

Esta a minha primeira tabela.
</td>
</tr>
</table>
</body>
</html>
J no exemplo seguinte ns dizemos ao browser para desenhar uma linha de

contorno com espessura 2 (border="2").
<html>
<body>
<table border="2">
<tr>
<td>
Esta a minha segunda tabela.
</td>
</tr>
</table>
</body>
</html>
Como acabou de ver os atributos aparecem sempre em pares nome/valor,

assim: nome="valor".
14

Nota: Os atributos s podem aparecer nas etiquetas de incio. proibido

colocar atributos nas etiquetas de finalizao.
Nota: Para assegurar a compatibilidade com o XHTML use letra minscula
para escrever os nomes dos atributos e coloque os valores entre aspas.
Devemos usar aspas ou apstrofos (escrevemos "texto" ou 'texto')?
Pelos motivos que acabamos de ver, os valores dos atributos devem ser
sempre colocados entre aspas. Normalmente usam-se aspas normais ("), mas os
apstrofos (') tambm so permitidos. No entanto, provvel que ao misturarmos
cdigo PHP ou JavaScript estrutura HTML ocorra enganos quanto sintaxe
utilizada.
Em certos casos, o valor do atributo contm o prprio caractere aspas. Numa
situao dessas devemos usar apstrofos (que aqui funcionam como aspas simples)
para colocar em torno do valor do atributo, assim:
alt='Ele disse: "No!"'
Se preferirmos usar apstrofos devemos escrever assim:

alt="Ele disse: 'No!'"
3. Elementos bsicos da linguagem HTML

Algumas das etiquetas mais importantes em HTML so aquelas que definem
cabealhos de seo, pargrafos, divises e quebras de linha.
Para aprofundarmos este tema vamos ver e executar um exemplo muito
simples que demonstra a forma como o texto dentro de um elemento <p> (pargrafo)
apresentado pelo browser:
<html>
<head>
<title>Exemplo</title>
</head>
<body>
<p>Isto um pargrafo.</p>
<p>Isto outro pargrafo.</p>
<p>
Os pargrafos definem-se com o elemento <p>
</p>
</body>
</html>
15

Nota: A iniciativa da Web Semntica d muita importncia aos elementos que

vamos estudar nesta pgina e nas pginas seguintes. O uso correto destes elementos
permite melhorar muito as potencialidades da Web como meio de publicao.
3.1 Cabealhos
Os cabealhos (de captulo ou de seo) definem-se com as etiquetas
<h1>...<h6>. <h1> define o cabealho mais importante (maior) e <h6> define o menos
importante (menor).
<h1>Isto
<h2>Isto
<h3>Isto
<h4>Isto
<h5>Isto
<h6>Isto
um
um
um
um
um
um
cabealho</h1>
cabealho</h2>
cabealho</h3>
cabealho</h4>
cabealho</h5>
cabealho</h6>
O HTML adiciona de forma automtica uma linha em branco antes e depois de

um cabealho.
3.2 Pargrafos
Os pargrafos definem-se com a etiqueta <p>.
<p>Isto um pargrafo</p>
<p>Isto outro pargrafo</p>
O HTML adiciona de forma automtica uma linha em branco antes e depois de

um pargrafo.
3.3 Quebras de linha

A etiqueta <br> usa-se para terminar uma linha sem iniciar um novo pargrafo.
Esta etiqueta (<br>, ou "line break") provoca uma mudana de linha forada no local
em que aparece.
<p>
Isto<br> um par-<br>grafo
com quebras de linha
</p>
16

O exerccio seguinte d uma oportunidade para experimentar:

<html>
<head>
</head>
<body>
<p>
Isto<br> um par-<br>grafo
com quebras de linha
</p>
</body>
</html>
A etiqueta <br> uma etiqueta vazia. Ela no pode ter qualquer contedo e
no tem etiqueta de fim (finalizao).
3.4 Comentrios
As etiquetas de comentrio so especiais porque no se escrevem da mesma
forma que as etiquetas que representam elementos normais. Os comentrios servem
para dizer ao browser que o seu contedo um comentrio e no pode ser
apresentado graficamente. Usa-se essas etiquetas para fazer anotaes que explicam
a forma como o cdigo fonte est feito para que mais tarde consigamos compreender
aquilo que fizemos antes. O exemplo seguinte mostra um comentrio

Repare que o fato de termos um ponto de exclamao no incio diz ao browser

que esta uma etiqueta especial, a qual no representa um elemento normal da
linguagem HTML.
3.5 Lista de elementos bsicos do HTML

Elemento
<html>
<body>
<h1> ...
<h6>
<p>
Descrio
Elemento que contm todas as definies da pgina HTML
Elemento que contm o corpo ("body") da pgina
Define cabealhos desde o nvel 1 (mais importante) at ao nvel 6
(menos importante)
Define um pargrafo
17

<br>
<hr>

Provoca uma mudana de linha forada

Insere uma linha horizontal
Insere um comentrio no cdigo fonte
Exemplos de Aplicao
Mais pargrafos
<html>
<head>
</head>
<body>
<p>
No cdigo fonte este pargrafo tem trs
linhas, mas o browser ignora isso e pode
apresentar outro nmero.
</p>
<p>No cdigo fonte o texto deste pargrafo tem
vrios
espaos seguidos,
mas o
browser trata-os como se eles formassem
um
nico espao.
</p>
<p>O nmero de linhas de um pargrafo depende
do tamanho da janela do browser. Ao alterar
a largura desta provocar alteraes no
nmero de linhas
</p>
</body>
</html>
Elementos de cabealho
<html>
<head>
</head>
<body>
<h1>Isto um cabealho de nvel 1</h1>
18

<p>Os elementos h1-h6 devem ser
usados apenas para escrever cabealhos. No os use
para outros fins. Existem outros elementos concebidos especificamente para
outras finalidades.</p>
</body>
</html>
Cabealho alinhado ao centro

<html>
<head>
</head>
<body>
<h1 align="center"
>Este um cabealho
de nvel 1</h1>
<p>Este cabealho mostrado mais acima
est alinhado ao centro da pgina.
</p>
</body>
</html>
19

Inserir uma linha horizontal

<html>
<head>
</head>
<body>
<p>O elemento hr desenha uma linha horizontal:</p>
<hr>
</body>
</html>
Comentrios no cdigo fonte de uma pgina HTML

<html>
<body>

<p>Isto um pargrafo normal</p>
</body>
20

</html>
Utilizando uma cor de fundo

<html>
<head>
</head>
<body bgcolor="yellow">
<h2>Um fundo colorido</h2>
</body>
</html>
3.6 Dicas
Se voc executou os exemplos de aplicao listados mais acima
provavelmente deparou com alguns comportamentos inesperados. As dicas seguintes
chamam a ateno para alguns deles.
1) Quando escrevemos pginas em HTML devemos ter sempre ateno ao fato
de elas poderem ser apresentadas de forma diferente em browsers diferentes ou em
mquinas diferentes. O aspecto grfico de uma pgina pode diferir entre mquinas ou
entre browsers! Isso se deve no s a diferenas nos sistemas, mas tambm ao fato
21

de os usurios poderem ter monitores de tamanhos diferentes e de poderem

redimensionar a janela do browser para o tamanho que preferirem.
2) As diferenas nos tamanhos das janelas dos browsers fazem com que o
nmero de caracteres que cabem numa linha varie muito. Por esse motivo no
seremos capazes de controlar nem o nmero de linhas nem os locais em que
acontecem as mudanas de linha. Nunca tente formatar o texto inserindo espaos ou
linhas vazias pois os resultados possveis podem no ser aqueles que pretende obter!
3) Quando encontra dois ou mais espaos seguidos, o HTML trata-os como se
fossem um nico espao. Quando escreve uma seqncia de espaos seguidos o
resultado o mesmo de escrever um nico espao. Em HTML as teclas Tab e Enter
equivalem a um espao.
4) Sempre que quiser inserir linhas em branco use o elemento <br>. H quem
use pargrafos vazios para obter o mesmo resultado, mas isso est errado. O
elemento <p> deve ser usado apenas para definir pargrafos e o elemento <br> no
deve ser usado para fins como criar listas por exemplo. Existem elementos concebidos
especificamente para isso. Sempre que precisar obter uma formatao especial deve
usar o elemento que foi criado para esse efeito.
5) Em muitas pginas os pargrafos esto escritos sem a etiqueta de
finalizao (</p>.) Apesar de os browsers aceitarem essa omisso tenha sempre o
cuidado de fechar todas os elementos que requerem uma etiqueta de finalizao. Se
tentar validar uma pgina que contenha estes erros ver que ela no passar no teste
de validao.
6) Aos elementos <p> e <h1> ... <h6> o browser adiciona automaticamente
uma linha em branco antes do incio e outra depois do fim.
3.7 Como ver o cdigo fonte de uma pgina HTML

Voc alguma vez olhou para uma pgina da Web e se perguntou sobre a forma
com que as instrues do origem ao que exibido na tela do seu computador?
Se estiver usando o Internet Explorer, Netscape, Mozilla ou outro browser e
quer descobrir, ento v ao menu "Exibir" (ou "View") e escolha a opo "Exibir Cdigo
Fonte". Tanto no Netscape, no Internet Explorer ou no Mozilla voc pode clicar com o
boto inverso sobre a pgina e escolher a opo "Cdigo Fonte" ou "View Page
Source." Depois de realizar esta ao ir abrir uma nova janela contendo o cdigo
fonte da pgina que est sendo apresentado pelo browser.
No desanime se o aspecto do cdigo fonte lhe parecer assustador. Se for
esse o caso pode estar certo que a pgina que est visualizando foi escrita por um
programa de software ou ento o cdigo foi propositadamente "desarranjado" para
confundir os "espies. Como ter oportunidade de ver ao longo deste curso, o cdigo
HTML bem escrito mo muito mais fcil de ler, mas h muita gente que o complica
de propsito s para confundir.
4. Formatao de texto
A linguagem HTML define vrios elementos para formatar texto, como, por
exemplo, escrever em negrito, itlico, ou sublinhado. O exemplo seguinte d uma
oportunidade para experimentar alguns deles:
22

<html>
<body>
Este exemplo tem texto em <i>itlico</i>, <b>negrito</b>,
<em>enfatizado</em>, <u>sublinhado</u> e tipo
<code>cdigo de computador</code>.
</body>
</html>
4.1 Elementos para formatao de texto

Elemento
<b>
<big>
<em>
<i>
<small>
<strong>
<sub>
<sup>
<u>
Descrio
Define texto escrito em negrito
Define texto com letra maior
Define texto enfatizado (escreve-se com caracteres itlicos)
Define texto escrito com caracteres itlicos
Define texto com letra menor
Define texto forte (escreve-se em negrito)
Texto subscrito (alinhado um pouco mais abaixo)
Texto sobrescrito (alinhado um pouco mais acima)
Texto sublinhado
4.2 Elementos para o "output de cdigo de computador"

Elemento
<code>
<kbd>
<samp>
<tt>
<var>
<pre>
Descrio
Define texto que cdigo de computador
Texto inserido com o teclado
Amostra de cdigo de computador
"Teletype text" (imita a letra de uma mquina de escrever antiga)
Texto que representa uma varivel
Texto pr-formatado
4.3 Elementos para citaes e listas de definies

Elemento
<abbr>
<acronym>
Descrio
Define uma abreviao
Define um acrnimo
23

<address>
<bdo>
<blockquote>
<q>
<cite>
<dfn>
Define um endereo (postal)

Define a direo de escrita do texto
Citao longa
Citao curta
Citao
Apresenta a definio de um termo
Exemplos de Aplicao
Formatao de Texto
<html>
<head>
</head>
<body>
<b>Isto texto em negrito</b> <br>
<strong>Isto texto forte</strong> <br>
<big>Isto texto maior</big> <br>
<em>Isto texto enfatizado</em> <br>
<i>Isto texto itlico</i> <br>
<small>Isto texto mais pequeno</small> <br>
Este texto contm uma parte alinhada mais <sub>abaixo</sub>
<br>
Este texto contm uma parte alinhada mais <sup>acima</sup>
</body>
</html>
Texto pr-formatado (controla rigorosamente as mudanas de linha e a insero

de espaos)
<html>
<head>
</head>
<body>
<pre>
Isto texto
pr formatado.
ele preserva
os espaos
e as quebras de linha.
</pre>
24

<p>O elemento pre til para representar
cdigo de computador:</p>
<pre>
for(var i = 0; i< 20; i++)
document.write(i);
</pre>
</body>
</html>
Diversos elementos para mostrar cdigo de computador

<html>
<head>
</head>
<body>
<code>Cdigo de computador</code><br>
<kbd>Keyboard input</kbd><br>
<tt>Teletype text</tt><br>
<samp>Amostra de texto</samp><br>
<var>Varivel de cdigo de computador</var><br>
<p> <b>Nota:</b> Estes elementos so normalmente usados
para apresentar texto que cdigo de computador
</p>
</body>
</html>
25

Inserir um endereo
<html>
<head>
</head>
<body>
<address>Robin dos Bosques<br>
Clareira dos Cucos<br>
Floresta de Sherwood<br>
Nottingham</address>
</body>
</html>
Abreviaes e acrnimos
<html>
<head>
</head>
<body>
<abbr title="United Nations">UN</abbr><br>
<br>
<acronym title="World Wide Web">WWW</acronym>
<p>O atributo "title" deve ser usado para dar a conhecer o
significado do acrnimo ou da
abreviao. O seu contedo mostrado
quando o ponteiro do mouse pra sobre o elemento
(Algumas verses do MSIE no respeitam as normas e s fazem isto com o
elemento <acronym>)
</p>
</body>
</html>
26

Citaes extensas e curtas

<html>
<head>
</head>
<body>
Aqui temos uma citao longa:
<blockquote>Isto uma citao extensa. Ou
pelo menos devia ser.</blockquote>
Aqui temos uma citao curta: <q>Esta mesmo
curta.</q>
<p><b>Nota:</b> O elemento <blockquote> insere
automaticamente margens e quebras de linha. J o elemento
<q> no produz nada de especial para alm de
colocar o texto entre aspas.</p>
<br>
</body>
</html>
Como indicar texto que foi apagado e texto que foi inserido em substituio
<html>
<head>
27

</head>
<body>
<p>Um quarteiro so
<del>12</del>
<ins>25</ins> unidades.</p>
<p><b>Nota:</b> A maioria dos browsers escreve um trao
horizontal a meia altura sobre o texto apagado e sublinha o texto
inserido, mas alguns browsers antigos podem apresentar o texto
apenas como texto normal.</p>
<br>
</body>
</html>
5. Ligaes de HiperTexto ("links")

O HTML usa ligaes de hipertexto ("hyperlinks") para ligar as pginas da Web
umas s outras.
5.1 O Elemento <a> (ncora) e o atributo href

O elemento <a> serve para criar uma ligao ("link") para outro documento. A
ligao pode apontar para qualquer recurso disponvel na Web: uma pgina escrita em
HTML, uma imagem, um arquivo de som, um filme, etc.
Sintaxe para criar uma ncora:
<a href="url">Texto a mostrar</a>
O atributo href contm o endereo (URL) do recurso ao qual se faz a ligao.

Aquilo que est dentro do elemento constitui o material visvel sobre o qual se deve
clicar para ligar ao recurso.
A ligao seguinte define uma ligao para o stio do W3C:
<a href="http://www.w3.org/">Stio do World Wide Web Consortium</a>
28

A linha mais acima tem o seguinte aspecto no seu browser:

Site do World Wide Web Consortium
Exemplos de Aplicao
Como inserir ligaes (links)
<html>
<head>
</head>
<body>
<p><a href="pagina.htm">Isto uma ligao</a>
para outra pgina deste website.
</p>
<p><a href="http://www.w3.org/">Isto outra ligao</a>,
mas para outro website
</p>
</body>
</html>
Colocar uma ligao sobre uma imagem

<html>
<head>
</head>
<body>
<p>
Uma imagem com uma ligao ("link"):
<a href="javascript:alert('Bem vindo ao paraso')">
<img alt="Paraso" src="praia.jpg" border="0"></a>
</p>
</body>
</html>
29

5.2 O atributo target

O atributo target permite abrir a ligao numa janela ou moldura ("frame")
diferente daquela em que foi feito o clique.
A linha mais abaixo vai abrir o documento numa nova janela do browser:
<a href="http://www.w3.org/" target="_blank">World Wide Web Consortium</a>
5.3 O atributo name

O atributo name usa-se para dar um nome nico ncora. Este nome serve
para marcar o lugar em que a ncora se encontra e tornar possvel saltar diretamente
para esse local a partir de outros documentos ou de outros pontos do mesmo
documento sem que o usurio tenha de se deslocar na pgina.
Mais abaixo temos a sintaxe de uma ncora que recebeu um nome:
<a name="nome">Texto a mostrar</a>
O atributo name d um nome nico ao local em que se encontra a ncora.

Esse nome pode ser um texto sua escolha e no deve ser repetido em nenhuma
outra ncora que esteja no mesmo documento.
A linha seguinte define uma ncora com um nome:
<a name="toc">Tabela de Contedos</a>
Nota: uma ncora com atributo name no pode ter atributo href. Por isso ela
no sensvel a cliques. Ela serve apenas para marcar um local do documento para o
qual podem apontar outras ligaes.
Depois de darmos um nome a um local do documento podemos ligar
diretamente a ele. Continuando com o ltimo exemplo que vimos podemos ligar
seo "Tabela de Contedos" usando uma ligao como esta:
<a href="#toc">Ir para a tabela de contedos da especificao HTML 4.01</a>
30

Se a tabela de contedos a que queremos ligar estiver na pgina cujo URL

http://www.w3.org/TR/1999/REC-html401-19991224/cover.html basta escrever esta
ligao:
<a href="http://www.w3.org/TR/1999/REC-html401-19991224/cover.html#toc">Ir
para a tabela de contedos da especificao HTML 4.01</a>
Dicas
As ncoras com nomes so freqentemente usadas para criar "tabelas de
contedos" no incio de um documento extenso (a pgina do W3C indicada no
exemplo anterior antes um bom exemplo disto.) Cada captulo dentro do documento
recebe uma ncora com um nome, e as ligaes presentes na tabela de contedos
referem-se a esses nomes para saltar para a seo ou captulo pretendidos.
Quando o browser recebe um clique para um local que devia conter uma
ncora com um nome, mas no consegue encontrar a ncora indicada, ento salta
para o topo do documento. Isto no gera qualquer erro.
Elementos para fazer ligaes

Elemento
<a>
Descrio
Define uma ncora ou uma ligao de hipertexto
Exemplos de Aplicao
Abrir uma pgina numa nova janela do browser
<html>
<head>
</head>
<body>
<a target="_blank" href="pagina.htm">Saltar para a pgina de teste</a>
<p>
Se colocar o valor "_blank" no atributo target a
ligao ser aberta numa nova janela do browser.
</p>
</body>
</html>
31

Saltar para um outro local dentro da mesma pgina

<html>
<head>
</head>
<body>
<p><a href="#C3">Veja tambm o Captulo 3</a></p>
<h1>Manual de Iniciao Tortura Chinesa</h1>
<h3>Captulo 1</h3>
<p>
Neste captulo vamos descrever as qualidades
necessrias para poder tornar-se num Tcnico Superior
de Tortura Chinesa. Esta nobre arte, desenvolvida ao longo
de muitos sculos por grandes mestres da cultura oriental,
assenta numa filosofia de respeito pelos valores da
tolerncia e amor pelo prximo.
</p>
<h3>Captulo 2</h3>
<p>
Para desenvolver as aptides necessrias
a um bom exerccio desta nobre arte voc precisa de
arranjar um espao fsico para instalar o seu
laboratrio. Esta escolha uma das decises
mais importantes para o sucesso das suas inciativas de tortura
chinesa.
</p>
<h3><a name="C3" id="C3">Captulo 3</a></h3>
<p>
Agora chegado o momento de recrutar alguns colaboradores e testar
os conhecimentos j adquiridos. Comece por tentar persuadir
algumas pessoas de quem goste menos para
participarem nas suas sesses de iniciao tortura chinesa
na qualidade de vtimas indefesas. No caso de elas se mostrarem reticentes
ser obrigado a nome-los como voluntrios fora, o
que j ser um excelente exerccio de iniciao.
</p>
</body>
</html>
32

Como libertar uma pgina que est dentro de uma subjanela ("frame")
<html>
<head>
</head>
<body>
<p>Esta pgina est dentro de uma moldura ("frame")?</p>
<a target="_top" href="javascript:alert('Isto apenas uma \ simulao.
\nNuma situao real aqui \ estaria o verdadeiro endereo da pgina')">
Clique aqui para sair dele!</a>
</body>
</html>
Como fazer uma ligao para enviar e-mail

<html>
<head>
</head>
<body>
<p>
Ligao:
<a href="mailto:ze_das_couves@nabal.com?Subject=As couves estavam boas">
Enviar e-mail</a>
</p>
</body>
</html>
33

"Uniform Resource Locators" (URLs)

5.4 Ligaes em HTML ("links")
Em uma Pgina, existe um elemento <a> que contm informao sobre o local
da Web onde se encontra a pgina que vai ser mostrada a seguir. Essa informao
o endereo (URL) da nova pgina e est contida no atributo href, assim:
<a href="pagina.html">Uma Pgina</a>.
O caminho para a ligao que tem escrito "Uma pgina", apresentada antes,
uma ligao relativa. Isto significa que o browser constri o endereo da nova pgina
baseando-se no endereo da pgina atual.
5.5 Como se forma um URL

O conceito de Uniform Resource Locator (URL) est na base da forma como
so localizados os recursos da Web. Para acessarmos um recurso precisamos saber
como encontr-lo. A informao que nos permite encontr-lo est contida no seu URL.
Um URL completo (absoluto) contm o endereo completo, que comea
sempre pelo protocolo (que quase sempre http://), mas tambm podemos usar URLs
relativos. Sempre que se encontra um link em que o atributo href no comea por
http:// o browser trata-o como um URL relativo. Isto significa que o browser calcula o
novo endereo (URL) a partir do servidor e da pasta em que se encontra a pgina que
est a mostrar. H uma exceo a esta regra: quando se usa o elemento <base> no
cabealho head, os URLs relativos so calculados a partir do endereo indicado no
atributo href desse elemento:
<base href="http://www.w3schools.com/images/">
Um URL composto pelas seguintes partes:

protocolo://subdominio.dominio: porta/pasta/arquivo
O protocolo quase sempre http, mas tambm pode ser ftp ou outro que seja
adequado.
O domnio uma identificao nica para o website ou a rede onde est o
recurso. Por exemplo, o domnio atribudo ao World Wide Web Consortium w3c.org
O subdomnio representa normalmente uma subrede dentro de uma rede
maior, mas as coisas podem ser mais complexas do que isso. Para aquilo que nos
interessa podemos considerar que se trata de uma identificao dada a uma parte do
domnio que passa a ter um nome que permite distingui-la das restantes. Nos
primeiros tempos da Web usava-se sempre o subdomnio www para identificar a parte
da rede pertencente ao servidor da Web, mas hoje freqente no encontrar
subdomnio nenhum e subdomnios com nomes diferentes (como por exemplo
http://yahoo.com, ou http://msdn.microsoft.com).
A porta utilizada para acessar o servidor representada por um nmero: o
nmero de porta. O software do servidor escuta apenas os pedidos que so feitos
atravs de uma determinada porta. Os servidores da Web em regra escutam a porta
nmero 80. Como o valor deste parmetro por omisso 80 ns no precisamos de
escrev-lo porque ele acrescentado automaticamente. Se o servidor escutar uma
34

porta diferente ento temos de escrever o seu nmero para que ele oua os nossos
pedidos.
O parmetro da pasta indica diretrio do servidor dentro da qual se encontra o
recurso a que queremos acessar. Se no escrevermos nenhum valor para este
parmetro o servidor procura o arquivo no diretrio raiz do website.
O parmetro arquivo contm o nome do arquivo a que queremos acessar. Se
no escrevermos nada o servidor insere um valor por omisso, que normalmente
index (ou default nos servidores da Microsoft) e apresenta-nos essa pgina.
5.6 Protocolos de acesso

Alguns dos protocolos mais usados para acessar aos recursos da Internet so:
Fazer um download por FTP
O seguinte cdigo HTML cria uma ligao para um arquivo acessvel por ftp (a
ligao que mostramos fictcia e no funciona!).
<a href="ftp://um_servidor.com/pub/arquivo.zip">Download de Arquivo</a>
Abrir o Programa de E-mail

O seguinte cdigo HTML cria uma ligao que faz abrir o seu programa de email, normalmente o outllook, com o e-mail do destinatrio j escrito.
<a href="mailto:ze_das_couves@horta.com">ze_das_couves@horta.com</a>
6. Listas
A linguagem HTML contm elementos que permitem criar listas de definies,
listas ordenadas e listas no ordenadas.
6.1 Listas No Ordenadas

Uma lista no ordenada contm vrios itens marcados todos com o mesmo
smbolo (normalmente um crculo pequeno ou um quadrado pequeno).
Para criar uma lista no ordenada usa-se o elemento <ul> ("unordered list")
Dentro desse elemento os vrios itens so criados com o elemento <li> ("list item.") O
exemplo seguinte mostra uma lista simples:
<ul>
<li>Rum</li>
<li>Bagao</li>
</ul>
Este o aspecto com que fica no seu browser:

x
x
Rum
Bagao
Dentro de uma lista no ordenada podemos colocar pargrafos, quebras de

linha, imagens, outras listas, etc.
35

6.2 Listas Ordenadas

Uma lista ordenada contm vrios itens numerados e criada com o elemento
<ol> ("ordered list"). Os itens da lista definem-se com o elemento <li> ("list item").
<ol>
<li>Rum</li>
<li>Bagao</li>
</ol>

1. Rum
2. Bagao
Dentro de uma lista ordenada podemos colocar pargrafos, quebras de linha,

imagens, outras listas, etc.
6.3 Listas de Definies

Uma lista de definies no constituda por uma srie de itens mas sim por
vrios termos acompanhados de descries dos seus significados.
As listas de definies criam-se com o elemento <dl> ("definition list"). O nome
de cada termo fica dentro de um elemento <dt> ("definition term") e a sua descrio
fica num elemento <dd> ("definition description").
<dl>
<dt>Rum</dt>
<dd>Bebida espirituosa muito apreciada pelos piratas das Carabas</dd>
<dt>Bagao</dt>
<dd>Bebida com elevado contedo alcolico. A sabedoria popular
atribui-lhe fortes propriedades teraputicas.</dd>
</dl>

Rum
Bagao
Bebida espirituosa muito apreciada pelos piratas das Carabas
Bebida com elevado contedo alcolico. A sabedoria popular reconhece-lhe

fortes propriedades teraputicas.
Dentro de um elemento <dd> podemos colocar pargrafos, quebras de linha,

imagens, outras listas, etc.
6.4 Elementos para Listas

Elemento
<ol>
<ul>
<li>
<dl>
<dt>
<dd>
Descrio
Define uma lista ordenada
Define uma lista no ordenada
Insere um item na lista
Insere uma lista de definies
Apresenta a definio de um termo
Insere a definio de um termo
36

Exemplos de Aplicao
Uma lista ordenada
<html>
<head>
</head>
<body>
<h4>Uma lista ordenada:</h4>
<ol>
<li>Rum</li>
<li>gua do Luso</li>
<li>Bagaceira</li>
</ol>
</body>
</html>
Diferentes tipos de listas ordenadas

<html>
<head>
</head>
<body>
<h4>Lista Ordenada com nmeros:</h4>
<ol>
<li>Espinafres</li>
<li>Ervilhas</li>
<li>Cenouras</li>
<li>Alfaces</li>
</ol>
<h4>Lista Ordenada com letras maisculas:</h4>
<ol type="A">
<li>Espinafres</li>
<li>Ervilhas</li>
<li>Cenouras</li>
<li>Alfaces</li>
</ol>
<h4>Lista Ordenada com letras minsculas:</h4>
<ol type="a">
<li>Espinafres</li>
37

<li>Ervilhas</li>
<li>Cenouras</li>
<li>Alfaces</li>
</ol>
<h4>Lista Ordenada com nmeros romanos (maisculas):</h4>
<ol type="I">
<li>Espinafres</li>
<li>Ervilhas</li>
<li>Cenouras</li>
<li>Alfaces</li>
</ol>
<h4>Lista Ordenada com nmeros romanos (minsculas):</h4>
<ol type="i">
<li>Espinafres</li>
<li>Ervilhas</li>
<li>Cenouras</li>
<li>Alfaces</li>
</ol>
</body>
</html>
Diferentes tipos de listas no ordenadas

<html>
<head>
</head>
<body>
<h4>Lista com discos como marca:</h4>
38

<ul type="disc">
<li>Bagaceira</li>
<li>Aguardente de Medronho</li>
<li>Cachaa</li>
<li>Ginja com Elas</li>
</ul>
<h4>Lista com anis como marca:</h4>
<ul type="circle">
<li>Bagaceira</li>
<li>Cachaa</li>
</ul>
<h4>Lista com quadrados como marca:</h4>
<ul type="square">
<li>Bagaceira</li>
<li>Cachaa</li>
</ul>
</body>
</html>
Listas encaixadas
<html>
<head>
</head>
<body>
<h4>Listas encaixadas:</h4>
<ul>
39

<li>Bagao</li>
<li>Bebidas de menina
<ul>
<li>Chazinho</li>
<li>Leitinho</li>
</ul>
</li>
<li>Rum</li>
<li>Cachaa</li>
</ul>
</body>
</html>
Uma lista de definies

<html>
<head>
</head>
<body>
<h4>Uma Lista de Definies:</h4>
<dl>
<dt>Rum</dt>
<dd>Bebida com alto teor alcolico. Revigorante poderoso para quem
sofre de fraqueza fsica.</dd>
<dt>gua das pedras</dt>
<dd>Bebida para senhoras e meninos fracos.</dd>
<dt>Bagao</dt>
<dd>Bebida para Homens e Mulheres de barba.</dd>
</dl>
</body>
</html>
40

7. Imagens
O HTML torna muito fcil a tarefa de mostrar imagens dentro de um
documento.
7.1 O elemento <img> e o atributo src

A insero de imagens num documento se faz com o elemento <img>. Este
elemento tem contedo vazio, o que significa que ele apenas possui atributos e no
tem etiqueta de finalizao.
A escolha da imagem para mostrar na pgina se faz atravs do atributo src
(que uma abreviao de "source", ou origem) o qual indica o nome e o local em que
pode ser encontrado o arquivo que contm a imagem.
O exemplo seguinte ilustra o uso deste elemento:
<html>
<body>
<img src="magoo.gif">
</body>
</html>
A forma genrica mais simples deste elemento a seguinte:
41

<img src="url">
A URL aponta para o local onde se encontra o arquivo que contm a imagem.
Por exemplo, se quisermos mostrar o cone que aparece no incio de cada pgina do
W3C devemos usar o URL: http://www.w3.org/Icons/WWW/w3c_home
A imagem ser desenhada no local que corresponde ao elemento <img> dentro
do documento HTML.
7.2 O atributo alt ou title

Os atributos alt e title usam-se para definir "texto alternativo" imagem. Este
texto ser mostrado em vez da imagem no caso de o browser no conseguir
apresent-la, e usa-se assim:
<img src="http://www.w3.org/Icons/WWW/w3c_home" alt="cone do W3C">
<img src="http://www.w3.org/Icons/WWW/w3c_home" title="cone do W3C">
importante ressaltar a diferena entre alt e tile. O atributo alt funciona

somente no Internet Explorer, j o atributo title usado no Mozilla. Para evitar
problemas com a utilizao desses atributos, utilize-os juntamente como no exemplo:
<img src="http://www.w3.org/Icons/WWW/w3c_home" alt="cone do W3C"
title="cone do W3C">
Os atributos alt e title devem conter uma descrio daquilo que a imagem
contm para que seja possvel compreender o seu contedo mesmo sem a ver. A
utilizao dos atributos alt e title recomendada porque melhora a acessibilidade das
pginas. Este atributo pode ser lido em voz alta pelo software de leitura utilizado pelas
pessoas que tm deficincias visuais. Nesses casos, sem os atributos alt e title o
contedo das imagens seria sempre um mistrio.
Nota: Ao utilizar imagens tenha em mente que elas podem aumentar
consideravelmente o tempo que preciso esperar para ver os contedos das suas
pginas: Por isso, use-as com cuidado!
7.3 Elementos relacionados com imagens

Elemento
<img>
<map>
<area>
Descrio
Insere uma imagem
Define um mapa sobre uma imagem ("image map")
Define uma rea clicvel sobre um mapa de imagem
Exemplos de Aplicao
Como inserir imagens
<html>
<head>
</head>
<body>
<p>Uma imagem em formato gif: <img alt="Senhor Magoo" src=
"magoo.gif" width="90" height="99"></p>
<p>Uma imagem em formato jpg: <img alt="O Paraso" src=
42

"praia.jpg"></p>
<p>Repare que em ambos os casos a imagem inserida do mesmo
modo.</p>
</body>
</html>
Utilizando uma imagem de fundo

<html>
<head>
</head>
<body background="bg-pegadas.jpg">
<h3>Uma imagem de fundo</h3>
<p>Os fundos de imagem tanto podem ser criados com imagens do tipo
jpg como gif ou png.<br>
</p>
<p>Se a imagem de fundo tiver dimenses inferiores s
da janela do browser ela ser repetida (formando um mosaico)
at preencher todo o fundo da pgina.</p>
</body>
</html>
43

Como alinhar uma imagem com o texto

<html>
<head>
</head>
<body>
<p>Uma imagem <img alt="O Paraso" src="praia.jpg" align=
"bottom"> misturada com texto</p>
"middle"> misturada com texto</p>
"top"> misturada com texto</p>
<p><b>Nota:</b> O valor do alinhamento por omisso
align="bottom"</p>
"bottom"> misturada com texto</p>
<p><img alt="O Paraso" src="praia.jpg" align="bottom">
Uma imagem antes do texto</p>
<p>Uma imagem depois do texto <img alt="O Paraso" src=
"praia.jpg" align="bottom"></p>
</body>
</html>
44

Como fazer com que uma imagem flutue esquerda ou direita de um pargrafo
<html>
<head>
</head>
<body>
<p><img alt="Magoo" src="magoo.gif" align="left"> Aqui temos um
pargrafo com uma imagem. O atributo align tem o valor
"left", deste modo, a imagem deve flutar esquerda do
texto.</p>
<p><img alt="Magoo" src="magoo.gif" align="right"> Aqui temos um
pargrafo com uma imagem. O atributo align tem o valor
"right", deste modo, a imagem deve flutar direita do
texto.</p>
</body>
</html>
Como ajustar o tamanho de uma imagem

<html>
<head>
</head>
<body>
<p><img alt="Caminho para pees" src="caminho.jpg" width=
"75" height="50"></p>
"150" height="100"></p>
"300" height="200"></p>
<p><b>Nota:</b> Para alterar o tamanho de uma imagem utilize os
atributos "height" (altura) e "width" (largura).</p>
</body>
</html>
45

Como juntar texto alternativo (visvel quando no possvel mostrar a imagem)

<html>
<head>
</head>
<body>
<p><img alt="Magoo o pitosga" src="magoo.fif" align="left">
O web browser no consegue encontrar a imagem "magoo.fif". Por
isso escreve o texto alternativo dado atravs do atributo alt.
</p>
</body>
</html>
Colocar uma ligao sobre uma imagem

<html>
<head>
</head>
<body>
46

<p>
Uma imagem com uma ligao ("link"):
<a href="http://www.um_paraiso.com">
<img alt="Paraso" src="praia.jpg" border="0"></a>
</p>
</body>
</html>
Crie um mapa sobre uma imagem com diferentes reas sensveis a cliques
<html>
<head>
</head>
<body>
<p>Clique sobre a rea 1.</p>
<img src="rects.gif" usemap="#rectangulos" border="0">
<map id="rectangulos" name="rectangulos">
<area shape="rect" coords="0,0,56,120" href=
"javascript:alert('rea 1')" alt="rea 1">
<area shape="rect" coords="56,0,248,42" href=
"javascript:alert('rea 2')" alt="rea 2">
</map>
<p><b>Nota:</b> O atributo "usemap" utilizado com o elemento
img refere-se ao atributo "id" ou ao atributo
"name" (depende do browser) existente num elemento map. Por
isso temos, se queremos garantir a compatibilidade da pgina
com todos os browsers, devemos aplicar ambos os atributos ("id" e
"name") ao elemento <map>.</p>
</body>
</html>
47

Fundos de pgina
Uma cor ou uma imagem de fundo bem escolhidos podem melhorar o aspecto
da pgina, mas uma m escolha capaz de causar danos muito graves na legibilidade
e no aspecto geral.
Uma boa escolha para as cores de fundo e do texto
<html>
<head>
</head>
<body style="background-color: #d0d0d0; color: black">
<p>Neste exemplo a cor escolhida para o fundo
adequada porque permite ler o texto
com facilidade.
</p>
</body>
</html>
Uma m escolha para as cores de fundo e do texto

<html>
<head>
</head>
<body style="background-color: white; color: yellow">
<p>Neste exemplo a cor escolhida para o fundo
desadequada porque no permite ler o texto
com facilidade.
</p>
</body>
</html>
48

7.4 O atributo bgcolor do elemento <body>

O elemento <body> possui atributos que nos permite especificar as cores do
texto e a cor de fundo. Tambm podemos usar uma imagem como padro de fundo.
O atributo bgcolor nos permite escolher a cor de fundo da pgina. O quadro
seguinte mostra trs formas de indicar a cor de fundo da pgina usando um cdigo de
cor hexadecimal um cdigo rgb e um nome de cor (veja mais frente neste curso
como se definem as cores.)
<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">
As linhas apresentadas mais acima usam formas diferentes (mas todas vlidas)
para dar a cor preta ao fundo da pgina.
Nota: a forma recomendada para formatar o texto e os fundos de pgina
baseia-se em estilos CSS. A utilizao do atributo bgcolor s se justifica se
precisarmos manter a compatibilidade com browsers antigos que no suportam CSS.
7.5 O atributo background

O atributo "background" estabelece que o padro de fundo da pgina dado
por uma imagem. O valor deste atributo indica o local onde se encontra a imagem. Se
as dimenses da imagem forem inferiores s dimenses da pgina, o browser repetir
a imagem (como num cho de mosaicos ou numa parede de azulejos) de modo a
ocupar todo o fundo da pgina. O quadro seguinte mostra como isso se faz:
<body background="clouds.gif">
<body background="http://www.meusite.com/clouds.gif">
O valor do atributo background um URL que define o local onde pode ser
encontrada a imagem. Na primeira linha mais acima demos um URL relativo e na
segunda demos um URL absoluto.
Nota: a forma recomendada para formatar o texto e os fundos de pgina
baseia-se em estilos CSS. A utilizao deste atributo s se justifica se precisarmos
manter a compatibilidade com browsers antigos que no suportam CSS.
7.6 Dicas
Sempre que usar uma imagem de fundo considere os seguintes aspectos:
x
x
x
x
x
Certifique-se de que o tamanho da imagem (em KBytes) no muito grande, o

que aumentaria o tempo de carregamento da pgina.
Certifique-se de que a imagem de fundo combina bem com a cor do texto.
Certifique-se de que o fundo combina bem com as outras imagens que tem na
pgina.
Verifique se da repetio a imagem de fundo em mosaico resulta um padro
perfeito. Se detectar falhas ao passar de um mosaico para o seguinte no use
essa imagem.
Certifique-se de que a imagem no incomoda e no desvia a ateno do texto.
49

Os atributos "bgcolor", "background" e "text" do elemento <body> foram

desaprovados nas recomendaes mais recentes do W3C para a linguagem HTML
(HTML 4 e XHTML). A forma recomendada para obter os mesmos resultados baseiase na utilizao de estilos CSS. A utilizao destes atributos s se justifica se
precisarmos manter a compatibilidade com browsers antigos que no suportam CSS.
So muito poucos os websites de qualidade que usam imagens de fundo, e
aqueles que o fazem usam fundos discretos.
As cores de fundo mais usadas so: branco (a escolha mais frequente,) preto e
cinzento.
8. Cores
Podemos obter qualquer cor nossa escolha combinando em propores
corretas trs cores base: vermelho (red), verde (green) e azul (blue).
8.1 Formas de exprimir cores

Em CSS a forma recomendada para exprimir cores baseia-se em notao
hexadecimal. Nesta forma as cores exprimem-se usando trs nmeros hexadecimais
que definem as quantidades de vermelho, verde e azul que entram na composio de
uma determinada cor. O valor mais baixo de uma determinada cor 0 (#00 na notao
hexadecimal usada em CSS) e o valor mais alto 255 (#FF em notao hexadecimal.)
Assim, a cor preta tem 0 vermelho, 0 verde e 0 azul escrita na forma #000000. J o
branco tem 255 vermelho, 255 verde e 255 azul escrita como #FFFFFF. O amarelo
forte tem 255 de vermelho, 255 de verde e zero de azul e escreve-se como #FFFF00.
A tabela seguinte mostra os resultados de diversas combinaes de cores:
8.2 Nomes de cores

A tabela seguinte mostra as 16 cores cujos nomes foram definidos oficialmente
pelo W3C. Todos os browsers reconhecem estes nomes podendo assim, us-las sem
qualquer problema:
50

Cores com Nomes Atribudos Oficialmente
Apesar de no estarem definidos oficialmente, os nomes de cor apresentados a

seguir so reconhecidos por todos os browsers relevantes com exceo das verses
muito antigas.
Nota: Estes nomes de cores no esto definidos em nenhum padro do W3C.
Apesar de serem reconhecidos pelos browsers mais importantes, esse
reconhecimento no exigido a nenhum browser para estar conforme com as
recomendaes oficiais. pouco provvel que nos anos mais prximos os browsers
para PDA e telefones mveis consigam reconhecer estes nomes de cor. Se deseja
garantir a apresentao correta das cores das suas pginas em todos os browsers
conforme as normas do W3C deve usar, em vez dos nomes apresentados na tabela,
os cdigos hexadecimais apresentados junto das cores.
8.3 Cores seguras da Web

Problemas causados por um nmero reduzido de cores
Todos os computadores modernos so capazes de mostrar dezenas de
milhares ou milhes de cores em simultneo. Contudo, at meados da dcada de
1990 muitos sistemas apenas conseguiam apresentar 256 cores diferentes de cada
vez. Esta limitao obrigava os browsers a trabalharem com uma paleta fixa que
continha apenas 256 cores.
Os browsers eram obrigados a usar apenas 256 cores para simular todas as
cores que no conseguiam apresentar. Os efeitos destas aproximaes eram visveis
na forma pontos adjacentes com cores diferentes e de manchas de cor. Atualmente
estas limitaes j no existem.
51

Como acabamos de ver, na primeira metade da dcada de 1990, a maioria dos

computadores eram capazes de apresentar apenas 256 cores diferentes de cada vez.
Dessas 256 cores, os sistemas operacionais Windows e Apple Macintosh reservavam
20 cores cada um (40 no total) para desenhar as suas interfaces grficas. Assim, de
um total de 256 cores possveis, apenas 216 podiam ser escolhidas livremente com a
garantia de poderem ser apresentadas tanto numa mquina Windows como num Mac.
Estas 216 cores receberam a designao de cores seguras da Web.
A forma encontrada para limitar as conseqncias resultantes da utilizao de uma
paleta com apenas 216 cores consiste em usar apenas cores cujos cdigos
hexadecimais usam apenas combinaes dos nmeros indicados na tabela seguinte:
RGB
Hex
00
00
51
33
102
66
153
99
204
CC
255
FF
A tabela seguinte mostra todas as 216 combinaes de cores que podemos

formar com os valores apresentados na tabela anterior. Estas so, portanto as 216
cores seguras da Web, que mostramos juntamente com os seus cdigos
hexadecimais (o caractere # no incio foi omitido):
52

Atualmente qualquer mquina consegue apresentar milhes de cores

diferentes ao mesmo tempo, sendo assim, j no precisamos de ter o cuidado de usar
apenas cores seguras. Apesar disso, este tema continua a ser focado em quase todas
as introdues construo de pginas para a Web.
8.4 Formas de exprimir os valores das cores

As cores definem-se usando notao hexadecimal que exprime as quantidades
de vermelho (Red), verde (Green) e azul (Blue) que entram na sua composio. A
quantidade mnima de uma dada cor 0 (#00 em notao hexadecimal) e a
quantidade mxima 255 (#FF em notao hexadecimal.) Assim, a cor branca
escreve-se na forma #FFFFFF e a cor preta na forma #000000. Uma forma mais
antiga que ainda funciona a forma decimal. Na forma decimal a cor branca exprimese como rgb(255,255,255) e a cor preta exprime-se como rgb(0,0,0). Entre estes dois
extremos temos toda a gama de cores que podem ser apresentadas num monitor de
computador.
Nada de Vermelho
Se desligarmos completamente a cor vermelha ficamos com 65536 cores
diferentes que resultam de combinar 256 quantidades de verde com 256 quantidades
de azul (65536 = 256 256).
A tabela seguinte mostra algumas destas combinaes:
53

Tons de Vermelho
A tabela apresentada mais abaixo mostra o que se obtm variando a
quantidade de cor vermelha desde 0 at 255 ao mesmo tempo que se mantm a zero
as quantidades de verde e de azul. Existem 256 tons diferentes de vermelho puro e
muitos outros que contm misturas de outras cores.
Tons de Cinza
As cores cinzentas obtm-se combinado quantidades iguais de vermelho,
verde e azul. A cor branca corresponde ao cinzento mais claro de todos e obtm-se
juntando 255 de vermelho, 255 de verde e 255 de azul (#FFFFFF em hexadecimal). O
preto o cinzento mais escuro de todos e obtm-se colocando todas as cores a zero
(#000000 em hexadecimal.) Entre estes dois valores extremos temos 254 graus de
intensidade possveis.
A tabela seguinte d uma idia dos tons de cinza que podemos obter:
54

8.5 Mais de 16 milhes de cores diferentes

Combinando as 256 quantidades possveis de vermelho com as 256
quantidades possveis de verde e as 256 quantidades possveis de azul conseguimos
criar mais de 16 milhes de cores diferentes (256256256).
Praticamente todos os monitores de computador modernos esto preparados
para apresentar mais de 16 milhes de cores diferentes. No entanto, preciso levar
em conta que os novos terminais mveis a cores que existem no mercado (em
telefones mveis e em PDAs) em regra possuem paletas mais reduzidas. Alguns
mostram apenas 256 cores, outros 4096 ou 65536.
8.6 Mais nomes de cores

As cores mostradas na tabela seguinte tm nomes que so reconhecidos por
todos os browsers relevantes. A utilizao destes nomes muito conveniente porque
nos permite evitar o uso cdigos hexadecimais, mas infelizmente eles no esto
definidos em nenhum padro do W3C. Se deseja que as suas pginas estejam em
conformidade com as recomendaes do W3C deve usar os cdigos hexadecimais
equivalentes em vez dos nomes.
55

56

57

58

59

9. As entidades de caracteres do HTML

Alguns caracteres, como o caractere <, tm significados especiais em HTML e
por isso no podem ser usados no cdigo fonte. Sempre que precisar escrever um
parntesis angular (< ou >) no contedo da pgina (no para escrever uma etiqueta)
deve usar entidades de caracteres. A lista abaixo contm estes e outros caracteres
especiais importantes em HTML.
Entidades de caracteres
Os caracteres mais especiais em HTML so <, > e &. Sempre que precisarmos
inserir um destes caracteres como parte do contedo de uma pgina devemos usar
entidades de caracteres.
Uma entidade de caractere formada por trs partes: o smbolo &, o nome da
entidade (ou o seu cdigo numrico equivalente) e finalmente o smbolo ; (ponto e
virgula).
Temos assim que os caracteres mais especiais (entre eles temos os parntesis
angulares que representam os smbolos matemticos "menor do que" e "maior do
que") so representados pelas seguintes entidades:
Caractere
<
>
&
Entidade correspondente
< ("less than")
> ("greater than")
& (ampersand)
Um pouco mais abaixo voc pode ver uma lista que contm estes e outros
caracteres especiais importantes em HTML.
60

9.1 Entidades de caracteres mais importantes:

Resultado Descrio
inserir espao sem mudar de linha ("nonbreaking space")
<
menor do que
>
maior do que
&
"e" comercial
"
aspas
Euro
Entidade

Cdigo

<
>
&
"
€
<
>
&
"
€
Entidade
¢
£
¥
§
©
®
×
÷
Cdigo
¢
£
¥
§
©
®
×
÷
Outras entidades importantes:

Resultado
Descrio
cntimo (de dollar)
libra esterlina
yen
seo
direitos de cpia ("copyright")
marca registada
sinal de multiplicao
sinal de diviso
9.2 Inserir espaos sem quebras de Linha

Uma entidade de caractere que muito utilizada . Ela serve para
forar o browser a inserir um espao e probe-o de mudar de linha junto a esse
espao.
<html>
<body>
<p>A seguir
temos
5 espaos normais.</p>
<p>A seguir
temos 5 espaos especiais.</p>
</body>
</html>
61

Entidades de caracteres do HTML 4.01

O HTML 4.01 suporta o conjunto de caracteres ISO 8859-1 (Latin-1), que
contm os caracteres com acentos usados pelas lnguas da Europa Ocidental. Os
caracteres acentuados da lngua portuguesa podem ser todos obtidos usando este
conjunto de caracteres.
9.3 Entidades para caracteres do conjunto ASCII e os nomes definidos em

HTML
Os caracteres da primeira metade do conjunto ISO-8859-1 (cdigos desde 0 a
127) so os mesmos que os caracteres padro ASCII de 7 BITs. A maior parte destes
caracteres pode ser usada diretamente sem necessidade de recorrer a entidades
porque esto sempre disponveis em todas as mquinas qualquer que seja a sua
configurao.
Os caracteres finais do conjunto ISO-8859-1 (cdigos desde 160 at 255)
podem ser usados recorrendo a nomes de entidade de caractere definidos em HTML.
Nota: os nomes das entidades so sensveis ao tipo de letra (maiscula ou
minscula).
Resultado
"
&
<
>
Descrio
aspas
"e" comercial
menor do que
maior do que
Nome da Entidade
"
&
<
>
Cdigo Numrico
"
&
<
>
9.4 Entidades para caracteres do conjunto ISO 8859-1 (no ASCII)

Resultado Descrio
inserir espao sem mudar de linha ("nonbreaking space")
ponto de exclamao invertido
dinheiro
centavo (de dollar)
libra esterlina
yen
barra vertical descontnua
seo
acento direse (trema, metafonia)
direitos de cpia ("copyright")
ordinal feminino
abertura de aspas angulares
negao
hfen "soft" (pode acontecer uma quebra
de linha junto ao hfen)
marca registrada
sinal (acento)
graus
Entidade

Cdigo

¡
¤
¢
£
¥
¦
§
¨
©
ª
«
¬

¡
¤
¢
£
¥
¦
§
¨
©
ª
«
¬

®
¯
°
®
¯
°
62

mais ou menos
2 sobrescrito
3 sobrescrito
acento agudo
micro
pargrafo
ponto a meia altura
cedilha
1 sobrescrito
ordinal masculino
fecho de aspas angulares
frao 1/4
frao 1/2
frao 3/4
ponto de interrogao invertido
sinal de multiplicao
sinal de diviso
a grande com acento grave
a grande com acento agudo
a grande com acento circunflexo
a grande com til
a grande com direse
a grande com anel
ae ligados, grandes
c grande com cedilha
e grande com acento grave
e grande com acento agudo
e grande com acento circunflexo
e grande com direse
i grande com acento grave
i grande com acento agudo
i grande com acento circunflexo
i grande com direse
eth grande (Islands)
n grande com til
o grande com acento grave
o grande com acento agudo
o grande com acento circunflexo
o grande com til
o grande com direse
o grande com trao obliquo
u grande com acento grave
u grande com acento agudo
u grande com acento circunflexo
u grande com direse
y grande com acento agudo
thorn grande (Islands)
±
²
³
´
µ
¶
·
¸
¹
º
»
¼
½
¾
¿
×
÷
À
Á
Â
Ã
Ä
Å
Æ
Ç
È
É
Ê
Ë
Ì
Í
Î
Ï
Ð
Ñ
Ò
Ó
Ô
Õ
Ö
Ø
Ù
Ú
Û
Ü
Ý
Þ
±
²
³
´
µ
¶
·
¸
¹
º
»
¼
½
¾
¿
×
÷
À
Á
Â
Ã
Ä
Å
Æ
Ç
È
É
Ê
Ë
Ì
Í
Î
Ï
Ð
Ñ
Ò
Ó
Ô
Õ
Ö
Ø
Ù
Ú
Û
Ü
Ý
Þ
63

caractere que representa a ligao sz,

minsculo (Alemo)
a pequeno com acento grave
a pequeno com acento agudo
a pequeno com acento circunflexo
a pequeno com til
a pequeno com direse
a pequeno com anel
ligao ae, minscula
c pequeno com cedilha
e pequeno com acento grave
e pequeno com acento agudo
e pequeno com acento circunflexo
e pequeno com direse
i pequeno com acento grave
i pequeno com acento agudo
i pequeno com acento circunflexo
i pequeno com direse
eth pequeno (Islands)
n pequeno com til
o pequeno com acento grave
o pequeno com acento agudo
o pequeno com acento circunflexo
o pequeno com til
o pequeno com direse
o pequeno com trao oblquo
u pequeno com acento grave
u pequeno com acento agudo
u pequeno com acento circunflexo
u pequeno com direse
y pequeno com acento agudo
thorn pequeno (Islands)
y pequeno com direse
ß
ß
à
á
â
ã
ä
å
æ
ç
è
é
ê
ë
ì
í
î
ï
ð
ñ
ò
ó
ô
õ
ö
ø
ù
ú
û
ü
ý
þ
ÿ
à
á
â
ã
ä
å
æ
ç
è
é
ê
ë
ì
í
î
ï
ð
ñ
ò
ó
ô
õ
ö
ø
ù
ú
û
ü
ý
þ
ÿ
9.5 Entidades HTML no pertencentes ao conjunto ISO 8859-1

Resultad
o
Descrio
Entidade
Cdigo
Moeda Euro
Marca para item em lista no ordenada
("bullet")
Marca comercial ("Trade Mark")
trs pontos (elipse)
aspas
aspas duplas
aspas (elegantes) do lado esquerdo
aspas (elegantes) do lado direito
seta para a direita
€
•
€
•
™
…
′
″
“
”
→
™
…
′
″
“
”
→
64

seta para a esquerda

ligao OE grande
ligao oe pequena
s grande com um caron
s pequeno com um caron
y grande com direse
caractere modificador para acento
circunflexo
til pequeno
trao "en dash"
trao "em dash"
aspa esquerda simples
aspa direita simples
←
&OElig;
&oelig;
&Scaron;
&scaron;
&Yuml;
&circ;
←
Œ
œ
Š
š
Ÿ
ˆ
&tilde;
–
—
‘
’
˜
–
—
‘
’
10. Tabelas
As tabelas definidas em HTML tm permitido apresentar dados em forma
tabular e construir arranjos de pgina complexos. Apesar de as recomendaes
modernas darem preferncia utilizao das Folhas de Estilos em Cascata (CSS) em
desfavor das tabelas quando se trata de fazer arranjos grficos complexos, a verdade
que as tabelas continuam a ser muito teis devido ao fato de os browsers
apresentarem alguns erros na forma como implementam os padres CSS.
Exemplos de Aplicao
Tabelas simples
<html>
<head>
</head>
<body>
<h4>Uma coluna:</h4>
<table border="1">
<tbody>
<tr>
<td>100</td>
</tr>
</tbody>
</table>
<h4>Uma linha e trs colunas:</h4>
<table border="1">
<tbody>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</tbody>
</table>
<h4>Duas linhas e trs colunas:</h4>
<table border="1">
<tbody>
<tr>
65

<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</tbody>
</table>
<p>As tabelas constroem-se com o elemento <table>. As linhas da
tabela obtm-se com o elemento <tr>. As clulas de dados
criam-se com o elemento <td>.</p>
</body>
</html>
Decorao dos limites da tabela

<html>
<head>
</head>
<body>
<h4>Uma linha de fronteira normal:</h4>
<table border="1">
<tbody>
<tr>
<td>Primeira</td>
<td>Linha</td>
</tr>
<tr>
<td>Segunda</td>
<td>Linha</td>
</tr>
</tbody>
</table>
66

<h4>Uma linha de fronteira mais espessa:</h4>
<table border="8">
<tbody>
<tr>
<td>Primeira</td>
<td>Linha</td>
</tr>
<tr>
<td>Segunda</td>
<td>Linha</td>
</tr>
</tbody>
</table>
<h4>Uma linha de fronteira muito espessa:</h4>
<table border="15">
<tbody>
<tr>
<td>Primeira</td>
<td>Linha</td>
</tr>
<tr>
<td>Segunda</td>
<td>Linha</td>
</tr>
</tbody>
</table>
</body>
</html>
10.1 Definir tabelas

A tabelas definem-se com o elemento <table>. Uma tabela divide-se em linhas
(com o elemento <tr>, cujo nome deriva de "table row"), e cada linha divide-se em
clulas (definidas com o elemento <td>, cujo nome deriva de "table data"). Uma clula
67

pode conter dados, texto, imagens e outros elementos do HTML. O exemplo seguinte
mostra cdigo que cria uma tabela:
<table border="1">
<tr>
<td>linha 1,
<td>linha 1,
</tr>
<tr>
<td>linha 2,
<td>linha 2,
</tr>
</table>
clula 1</td>
clula 2</td>
clula 1</td>
clula 2</td>
Esta tabela ter o seguinte aspecto quando visualizada no seu browser:
10.2 O atributo border

Se no especificarmos o valor do atributo border a tabela ser apresentada
sem linhas de contorno. s vezes isto til, mas muitas vezes queremos que sejam
desenhadas linhas no contorno da tabela.
Para que sejam desenhadas linhas usamos o atributo border:
<table border="2">
<tr>
<td>Linha 1, clula 1</td>
<td>Linha 1, clula 2</td>
</tr>
</table>
10. Cabealhos numa tabela

O cabealho de uma tabela define-se com o elemento <th>.
<table border="1">
<th>Cabealho</th>
<th>Outro cabealho</th>
<tr>
<td>linha 1, clula 1</td>
</tr>
<tr>
</tr>
</table>
Esta tabela ter o seguinte aspecto quando visualizada no seu browser:
68

10.4 Clulas vazias numa tabela

A maioria dos browsers no desenha as clulas que no tm qualquer
contedo. Para manterem a compatibilidade os browsers modernos tendem a atuar do
mesmo modo.
<table border="1">
<tr>
</tr>
<tr>
<td></td>
</tr>
</table>
Aspecto desta tabela quando visualizada no seu browser:
Dependendo do browser que voc est usando, o contorno ao redor da clula

vazia pode ou no ter sido desenhado. O mais certo no ter sido desenhado. Os
browsers antigos nunca desenhavam os contornos num caso destes.
Para evitar que isto acontea e garantir a consistncia no aspecto das suas
pginas coloque um caractere dentro da clula vazia para que ela passe a ter
contedo e tenha o contorno desenhado:
<table border="1">
<tr>
</tr>
<tr>
<td> </td>
</tr>
</table>
Aspecto da tabela quando visualizada no seu browser:
Dicas
Os elementos <thead>,<tbody> e <tfoot> ainda so pouco usados devido ao
suporte deficiente oferecido pelos browsers antigos. Os browsers modernos j
suportam bem estes elementos.
10.5 Elementos relativos a tabelas

Elemento
<table>
Descrio
Define uma tabela
69

<th>
<tr>
<td>
<caption>
<colgroup>
<col>
<thead>
<tbody>
<tfoot>
Define um cabealho para uma tabela

Insere uma nova linha numa tabela
Insere uma clula numa tabela
Define uma legenda para uma tabela
Agrupa colunas numa tabela
Define os valores dos atributos para uma ou mais colunas da tabela
Define um cabealho de uma tabela
Define um corpo numa tabela
Define o rodap de uma tabela
Exemplos de Aplicao
Colocar um cabealho numa tabela
<html>
<head>
</head>
<body>
<h4>Cabealhos de tabela:</h4>
<table border="1">
<tbody>
<tr>
<th>Nome</th>
<th>Nmero de scio do Belenenses</th>
<th>Artista Favorito</th>
</tr>
<tr>
<td>Z das Couves</td>
<td>31</td>
<td>Z Kabra</td>
</tr>
</tbody>
</table>
<h4>Cabealhos alinhados ao centro:</h4>
<table border="1">
<tbody>
<tr>
<th>Nome:</th>
</tr>
<tr>
<th>Nmero de scio do Belenenses:</th>
<td>31</td>
</tr>
<tr>
<th>Artista Favorito:</th>
<td>Z Kabra</td>
</tr>
</tbody>
</table>
</body>
</html>
70

Problemas com as clulas vazias

<html>
<head>
</head>
<body>
<table border="1">
<tbody>
<tr>
<td>Algum texto</td>
</tr>
<tr>
<td></td>
</tr>
</tbody>
</table>
<p>Como voc pode ver, uma das clulas no tem linhas de
fronteira desenhadas. Isso deve-se ao fato de a clula
estar vazia. Se inserir um espao vai ver que ela
continuar vazia.</p>
<p>Para resolver o problema deve inserir um espao
"no-breaking space" na clula que est vazia.</p>
<p>O espao "no-breaking space" uma entidade de
caractere do HTML e escreve-se na forma " ".</p>
</body>
</html>
71

Uma tabela com legenda

<html>
<head>
</head>
<body>
<h4>Esta tabela tem uma legenda:</h4>
<table border="1">
<caption>A Minha Legenda</caption>
<tbody>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</tbody>
</table>
</body>
</html>
Clulas que se estendem por mais do que do que uma linha ou coluna
<html>
<head>
</head>
<body>
<h4>Uma clula que ocupa duas colunas:</h4>
<table border="1">
<tbody>
<tr>
<th>Nome</th>
<th colspan="2">Nmero de scio do Belenenses</th>
</tr>
<tr>
<td>31</td>
<td>31</td>
</tr>
</tbody>
</table>
72

<h4>Uma clula que ocupa duas linhas:</h4>
<table border="1">
<tbody>
<tr>
<th>Nome:</th>
</tr>
<tr>
<th rowspan="2">Nmero de scio do Belenenses:</th>
<td>31</td>
</tr>
<tr>
<td>31</td>
</tr>
</tbody>
</table>
</body>
</html>
Utilizao de elementos dentro de uma tabela

<html>
<head>
</head>
<body>
<table border="1">
<tbody>
<tr>
<td>
<p>Isto outro pargrafo</p>
</td>
<td>Esta clula contm uma tabela:
<table border="1">
<tbody>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
73

</tbody>
</table>
</td>
</tr>
<tr>
<td>Esta clula contm uma lista:
<ul>
<li>livros</li>
<li>revistas</li>
<li>jornais</li>
</ul>
</td>
<td>Esta contm apenas texto.</td>
</tr>
</tbody>
</table>
</body>
</html>
Como alinhar o contedo dentro de uma clula

<html>
<head>
</head>
<body>
<h3>Pontos acumulados</h3>
<table width="400" border="1">
<tbody>
<tr>
<th align="left">Tipo de compra</th>
<th align="right">Dezembro</th>
<th align="center">Janeiro</th>
</tr>
<tr>
<td align="left">Gasolina</td>
<td align="right">28</td>
<td align="center">16</td>
</tr>
<tr>
<td align="left">Supermercado</td>
<td align="right">17</td>
<td align="center">21</td>
</tr>
<tr>
<td align="left">Doces</td>
74

<td align="right">5<br></td>
<td align="center">9<br>
</td>
</tr>
<tr>
<th align="left">Totais</th>
<th align="right">50</th>
<th align="center">46</th>
</tr>
</tbody>
</table>
</body>
</html>
O atributo "frame"
<html>
<head>
</head>
<body>
<p>Se no conseguir ver uma moldura desenhada ao redor da
tabela ento o seu browser deve ser muito antigo ou tem uma
deficincia no suporte para HTML 4.01.</p>
<h4>Com frame="border":</h4>
<table frame="border">
<tbody>
<tr>
<td>Primeira</td>
<td>Linha</td>
</tr>
<tr>
<td>Segunda</td>
<td>Linha</td>
</tr>
</tbody>
</table>
<h4>Com frame="box":</h4>
<table frame="box">
<tbody>
<tr>
<td>Primeira</td>
<td>Linha</td>
</tr>
<tr>
75

<td>Segunda</td>
<td>Linha</td>
</tr>
</tbody>
</table>
<h4>Com frame="void":</h4>
<table frame="void">
<tbody>
<tr>
<td>Primeira</td>
<td>Linha</td>
</tr>
<tr>
<td>Segunda</td>
<td>Linha</td>
</tr>
</tbody>
</table>
<h4>Com frame="above":</h4>
<table frame="above">
<tbody>
<tr>
<td>Primeira</td>
<td>Linha</td>
</tr>
<tr>
<td>Segunda</td>
<td>Linha</td>
</tr>
</tbody>
</table>
<h4>Com frame="below":</h4>
<table frame="below">
<tbody>
<tr>
<td>Primeira</td>
<td>Linha</td>
</tr>
<tr>
<td>Segunda</td>
<td>Linha</td>
</tr>
</tbody>
</table>
<h4>Com frame="hsides":</h4>
<table frame="hsides">
<tbody>
<tr>
<td>Primeira</td>
<td>Linha</td>
</tr>
<tr>
<td>Segunda</td>
<td>Linha</td>
</tr>
</tbody>
</table>
<h4>Com frame="vsides":</h4>
76

<table frame="vsides">
<tbody>
<tr>
<td>Primeira</td>
<td>Linha</td>
</tr>
<tr>
<td>Segunda</td>
<td>Linha</td>
</tr>
</tbody>
</table>
<h4>Com frame="lhs":</h4>
<table frame="lhs">
<tbody>
<tr>
<td>Primeira</td>
<td>Linha</td>
</tr>
<tr>
<td>Segunda</td>
<td>Linha</td>
</tr>
</tbody>
</table>
<h4>Com frame="rhs":</h4>
<table frame="rhs">
<tbody>
<tr>
<td>Primeira</td>
<td>Linha</td>
</tr>
<tr>
<td>Segunda</td>
<td>Linha</td>
</tr>
</tbody>
</table>
</body>
</html>
77

78

PARTE II: HTML Avanado

11. Arranjo grfico das pginas
Utilizando a linguagem HTML ns podemos criar arranjos grficos de pgina
bastante elaborados nos quais podem existir setores com: barras de navegao,
caixas com vrias categorias de destaques, blocos de texto curtos, blocos de texto
extensos, imagens, animaes em flash, etc. O HTML necessrio para produzir estes
resultados pode ser bastante complexo. Existem duas formas possveis para construir
estes arranjos de pgina: 1) usar um programa de software que escreve HTML (como
o Macromedia Dreamweaver MX) ou 2) trabalhar de forma muito metdica e escrever
tudo num editor de texto.
Qualquer que seja o caminho que escolher, se quiser obter bons resultados
voc vai ter que aprender HTML. Mesmo que use um programa que escreva HTML, h
de chegar um momento em que ele no consegue produzir sozinho o resultado que
voc deseja. Nessa altura voc vai ter de lhe dar uma ajuda editando diretamente uma
parte do HTML e corrigindo-o.
A criao de arranjos grficos elaborados para as pginas da Web uma
tarefa que exige bastante treino e alguma sensibilidade para questes de design
grfico.
12. Formatao com estilos CSS

Em HTML 4 toda a formatao deve ser removida dos elementos da linguagem
e colocada em Folhas de Estilos em Cascata (CSS)
12.1 Com atuam os estilos?

Quando o browser l uma folha de estilos ele guarda na memria as definies
que encontra. Ao apresentar a pgina, que contm referncias a esses estilos, ele
aplica as definies que leu antes para criar o aspecto grfico desejado. Existem trs
maneiras diferentes para definir estilos CSS.
12.2 Folha de estilos externa

Uma folha de estilos externa soluo mais indicada quando se pretende
aplicar os mesmos estilos a vrias pginas. Este mtodo de formatao permite-nos
alterar os estilos apenas na folha e t-los aplicados a todas as pginas imediatamente.
Todas as pginas ficam atualizadas com as novas definies. Para uma pgina poder
usar uma folha de estilos basta colocar dentro do cabealho (<head>) um elemento
<link> com uma referncia para a folha de estilos que contm as definies, como se
ilustra a seguir:
<head>
<link rel="stylesheet" type="text/css" href="meu_estilo.css">
</head>
12.3 Folhas de estilos internas

As folhas de estilos internas devem ser usadas quando as definies so
usadas por um nico documento. Neste caso as definies dos estilos so colocadas
dentro de um elemento <style> no cabealho do documento HTML:
79

<head>
<style type="text/css">
body { background-color: red }
p
{ margin-left: 20px }
</style>
</head>
12.4 Estilos "inline"

Um estilo "inline" usa-se quando a definio em causa s precisa ser usada
uma nica vez.
A definio de estilos "inline" faz-se atravs do atributo style colocado no
elemento ao qual queremos aplicar o estilo. A definio pode conter qualquer uma das
propriedades CSS. O exemplo seguinte mostra como podemos alterar a cor e a
margem esquerda de um pargrafo:
<p style="color: blue; margin-left: 20px">Isto um pargrafo</p>
Para aprender estilos CSS faa o curso de Folhas de Estilos em Cascata.
12.5 Elementos para estilos

Elemento
<style>
<link>
<div>
<span>
Descrio
Define estilos CSS
Define uma referncia para um recurso externo
Insere uma seo no documento
Usa-se para alterar as definies de estilo apenas numa pequena parte
do texto
Exemplos de Aplicao
Definio de estilos dentro do cabealho do documento HTML
<html>
<head>
h1 {color: red}
h3 {color: blue}
</style>
</head>
<body>
</body>
</html>
80

Utilizao de estilos definidos numa folha de estilos externa

estilos.css
h1,h2
p
{ font-family: sans-serif; color: #666666; }

{ font-family: cursive; }
<html>
<head>
<link href="estilos.css" type="text/css" rel="stylesheet">
</head>
<body>
<h1>Este cabealho foi formatado com uma folha de estilos.</h1>
<p>Este pargrafo tambm!</p>
</body>
</html>
12.6 O Elemento <font>

O elemento <font> foi desaprovado nas especificaes do HTML 4 e em
HTML-Strict ele foi totalmente removido.
Apesar de ainda ser usado por muita gente que continua a usar as tcnicas do
passado, o uso deste elemento contra indicado, devendo fazer-se a formatao das
pginas com estilos CSS. Apesar disso, como este elemento ainda bastante usado
deixa-se aqui alguma informao a seu respeito.
O cdigo seguinte permite-lhe especificar tanto o tamanho como o tipo de letra
com que o texto ser escrito pelo browser:
81

<html>
<body>
<p>
<font size="2" face="Verdana">Isto um pargrafo.</font>
</p>
<p>
<font size="3" face="Times">Isto outro pargrafo.</font>
</p>
</body>
</html>
Atributos do Elemento <font>

Atributo
size="nmero"
size="+nmero"
size="-nmero"
face="face-name"
Exemplo
size="2"
size="+1"
size="-1"
face="Times"
color="color-value"
color="color-name"
color="#eeff00"
color="red"
Finalidade
Define o tamanho do texto
Aumenta o tamanho do texto
Diminui o tamanho do texto
Define o nome do tipo de letra a usar
para escrever o texto
Define a cor do texto
Define a cor do texto
12.7 A forma correta de formatar, com estilos.

O World Wide Web Consortium (W3C) removeu o elemento <font> das suas
recomendaes HTML 4 e XHTML. Nas verses modernas do HTML todo o arranjo
grfico e formataes se obtm recorrendo apenas a estilos CSS.
Para aprender a construir pginas na forma recomendada pelo W3C primeiro
acabe de estudar HTML. Os captulos seguintes ensinam muito do que preciso fazer,
em particular como se faz a remoo dos elementos desaprovados e a sua
substituio por estilos CSS.
Exemplos de Aplicao
Definir o tipo de letra para o texto
<html>
<head>
</head>
<body>
<p>
O texto seguinte tem <font face="Tahoma">tipo de letra tahoma.</font>
82

</p>
<p>
O texto seguinte tem <font face="Times">tipo de letra times.</font>
</p>
<p>
O texto seguinte tem <font face="Arial">tipo de letra arial.</font>
</p>
</body>
</html>
Definir o tamanho da letra

<html>
<head>
</head>
<body>
<p>
O texto seguinte tem <font size="2">tamanho 2.</font>
</p>
<p>
O texto seguinte tem <font size="4">tamanho 4.</font>
</p>
<p>
O texto seguinte est <font size="+1">um tamanho acima do normal.</font>
</p>
<p>
O
texto
seguinte
est
<font
size="-1">um
tamanho
abaixo
do
normal.</font>
</p>
</body>
</html>
83

Definir a cor do texto

<html>
<head>
</head>
<body>
<p>
O texto seguinte tem <font color="red">cor vermelha.</font>
</p>
<p>
O texto seguinte tem <font color="blue">cor azul.</font>
</p>
<p>
O texto seguinte tem <font color="#00cc00">cor verde.</font>
</p>
</body>
</html>
Definir o tipo de letra, o tamanho e a cor

<html>
<head>
</head>
<body>
<p>
O texto seguinte tem
<font color="red" size="+1" face="tahoma">cor vermelha,
tem tamanho acima do normal e tipo de letra tahoma.</font>
</p>
</body>
</html>
84

13. Formulrios
Os formulrios servem para recolher dados introduzidos pelos usurios e
envi-los para processamento no servidor.
13.1 Criar um formulrio

Um formulrio uma seo da pgina HTML que contm elementos que
permitem ao usurio introduzir dados (elementos <textarea> e vrios tipos de
elementos <input>, <option> e <select>.) Estes elementos permitem inserir dados
numricos, textos curtos, textos extensos, selecionar elementos numa lista com vrias
escolhas, responder facilmente com respostas do tipo "sim" ou "no", selecionar
rapidamente uma opo num grupo pequeno, etc.
Os formulrios criam-se com o elemento <form>. Dentro desse elemento
principal colocamos diversos elementos para a insero dos dados.
<form>
<input>
.
.
.
<input>
</form>
O elemento <form> por si s no faz com que o browser desenhe nada na

pgina nem permite inserir dados. Ele contm elementos que recolhem os dados e
possui atributos que dizem ao browser como e para onde deve enviar os dados para
processamento.
13.2 Inputs
O elemento que encontramos com maior freqncia em formulrios o
elemento <input>. O exemplo seguinte mostra um formulrio simples com dois
elementos input:
<form action="processar.php" method="post">
Primeiro nome:
<input type="text" name="primeiro_nome"><br>
ltimo nome:
<input type="text" name="ultimo_nome">
</form>
Aspecto do formulrio quando visualizado no seu browser:
O elemento <input> pode assumir diversas formas com finalidades diferentes.

Consulte os exemplos e a referncia de HTML para saber mais sobre este elemento.
13.3 "Radio Buttons"

Os "Radio Buttons" usam-se para criar um grupo (pequeno) de opes em que
apenas se pode selecionar uma de cada vez.
85

<form action="processamento.asp">
<input type="radio" name="sexo" value="masculino"> Masculino<br>
<input type="radio" name="sexo" value="feminino"> Feminino
<form>
Aspecto do formulrio quando visualizado num browser:
Repare que s se pode selecionar uma das opes dadas. Elas excluem-se
mutuamente.
13.4 Checkboxes
As caixas de validao ("checkboxes") devem ser usadas sempre que
queremos que o usurio aprove (ou no) itens dentro de um pequeno grupo.
permitido validar mais do que uma opo simultaneamente.
<form>
<input type="checkbox" name="patins">Eu tenho patins em linha<br>
<input type="checkbox" name="skate">Eu tenho um skate
<form>
Repare que voc pode selecionar cada uma das opes de forma
independente da outra.
13.5 O atributo action e o boto de submisso

Quando o usurio clica sobre o boto "Submeter" (ou "Submit",) as repostas e
texto inseridos no formulrio so enviados para processamento. O atributo action do
elemento <form> contm o endereo (URL) do recurso da Web que est encarregado
de realizar esse processamento. para l que o contedo do formulrio enviado.
<form name="input" action="exemplos/action.php" method="get">
Nome de utilizador:
<input type="text" name="utilizador">
<input type="submit" value="Submeter">
<form>
13.6 Elementos para Formulrios

Elemento
<form>
<input>
<textarea>
Descrio
Define um formulrio para recolher dados inseridos pelo usurio
Insere um campo para introduzir dados
Define uma rea de texto (permite inserir texto com vrias linhas e um
86

<label>
<fieldset>
<legend>
<select>
<optgroup>
<option>
<button>
nmero ilimitado de caracteres)

Define um nome para um elemento
Agrupa elementos num formulrio
Define uma legenda para um grupo de elementos do formulrio
Define uma lista com vrias opes selecionveis
Define um grupo de opes
Insere mais uma opo numa lista com vrias opes selecionveis
Define um boto que pode ser pressionado
Exemplos de Aplicao
Como criar campos para insero de texto ou dados
<html>
<head>
</head>
<body>
<form action="processar.php">
Escreva o seu primeiro nome: <input name="firstname"><br>
Escreva o seu ltimo o nome: <input name="lastname"><br>
<input type="submit">
</form>
</body>
</html>
Campos para senhas ("password")

<html>
<head>
</head>
<body>
Escreva o seu nome de usurio: <input name="user"><br>
Escreva a sua senha (segredo): <input type="password" value=""
name="password"><br>
</form>
<p><b>Nota:</b> Quando se digita uma senha o browser mostra
asteriscos ou bolinhas em vez dos caracteres que introduz. Deste
modo se algum estiver espionando por cima do seu ombro enquanto
escreve no vai conseguir ler a sua senha.</p>
</body>
</html>
87

Caixas de validao ("checkboxes")

<html>
<head>
</head>
<body>
Eu tenho uma bicicleta: <input type="checkbox" value="ON"
name="bicicleta"><br>
Eu
tenho
patins
em
linha:
<input
type="checkbox"
name="patins">
<br>
</form>
</body>
</html>
value="ON"
"Radiobuttons" (grupos de botes em que apenas um pode estar ativo)

<html>
<head>
</head>
<body>
Masculino: <input type="radio" checked value="macho" name="Sexo"><br>
Feminino: <input type="radio" value="fmea" name="Sexo"><br>
</form>
<p><b>Nota:</b> Quando o usurio clica sobre um "radiobutton"
ele passa a ser a sua escolha (passa ao estado "checked") e os
88

restantes "radiobuttons" pertencentes ao mesmo grupo passam ao
estado "unchecked".</p>
</body>
</html>
Lista com vrios itens para selecionar

<html>
<head>
</head>
<body>
<h3>Times</h3>
<select name="clubes">
<option value="Benfica" selected="selected">Benfica</option>
<option value="FCP">F.C.P</option>
<option value="Boavista">Boavista</option>
<option value="Sporting">Sporting</option>
</select><br>
</form>
</body>
</html>
Lista com vrios itens selecionveis, mas com um valor pr-selecionado

<html>
<head>
</head>
<body>
89

<h3>Times</h3>
<select name="clubes">
<option value="Benfica" selected="selected">Benfica</option>
<option value="FCP">F.C.P</option>
<option value="Boavista" selected>Boavista</option>
<option value="Sporting">Sporting</option>
</select><br>
</form>
Repare que aqui temos um item pr-selecionado de forma explcita.
</body>
</html>
Como criar um boto

<html>
<head>
</head>
<body>
<input type="button" value="Carregue Aqui!">
</form>
</body>
</html>
90

Formulrio com um campo para inserir dados e um boto para submeter

<html>
<head>
</head>
<body>
<form name="input" action="processar.php" method="get">
Escreva o seu primeiro nome: <input value="Robin"
name="PrimeiroNome"><br>
Escreva o seu ltimo o nome: <input value="dos Bosques"
name="UltimoNome"><br>
</form>
<p>Se clicar sobre o boto "Submeter" os dados do formulrio sero enviados
para a pgina "processar.php".</p>
</body>
</html>
Formulrio com caixas de validao e um boto para submeter

<html>
<head>
</head>
<body>
Eu tenho uma bicicleta: <input type="checkbox" checked value="ON"
name="Bike"><br>
Eu tenho patins em linha: <input type="checkbox" value="ON"
name="Patins"><br>
</form>
</body>
</html>
91

Formulrio com "radiobuttons" e um boto para submeter

<html>
<head>
</head>
<body>
Masculino:
<input
type="radio"
checked
value="Masculino"
name="Sexo"><br>
Feminino: <input type="radio" value="Feminino" name="Sexo"><br>
</form>
</body>
</html>
14. Porqu usar HTML 4?

14.1 O HTML 3.2 criava muitos problemas!
O criador do HTML, Tim Berners Lee, nunca teve qualquer inteno de criar
elementos cuja nica finalidade era a formatao do texto e das pginas. Os
elementos que concebeu destinavam-se apenas a apresentar informao e no
serviam para criar arranjos grficos complexos. Os elementos criados inicialmente
serviam apenas para fazer coisas como:
92

ou
<ul><li>Isto um item numa lista no ordenada</li></ul>.
Quando foram introduzidos elementos como <font> e atributos de cor na

especificao do HTML 3.2, comeou um pesadelo para os criadores de HTML. Ao
desenvolverem websites de grandes dimenses, as formataes tinham de ser
repetidas na totalidade em todos os lugares em que eram necessrias e em todas as
pginas. O resultado disto foi a complicao desmesurada das tarefas de
melhoramento e atualizao das pginas, que era um verdadeiro pesadelo porque
gerava muitos erros e dava muito trabalho.
14.2 O que que o HTML 4 veio resolver?

Com o HTML 4 iniciou-se uma nova era em que a formatao pode ser em
grande parte separada do contedo do documento e guardada em folhas de estilos.
Ao separarmos a formatao da estrutura dos contedos conseguimos obter
um grau de flexibilidade mais elevado e reduzir substancialmente o esforo necessrio
para manter e fazer evoluir um website. As misturas entre contedos informativos por
um lado e especificaes de cor e estilos de letra por outro causam srias dificuldades
que agora podem ser muito atenuadas. o browser que ao construir a apresentao
do documento faz a combinao dos contedos com os estilos. O criador de HTML
consegue ver aumentado o nvel de controle sobre a apresentao e diminudo o
esforo que tem de fazer.
Como que tiramos partido disto?
Para comear reduza o mais possvel a utilizao de atributos de apresentao
nos elementos do HTML. A Referncia de HTML 4 indica quais so os elementos e
atributos que foram desaprovados pelo W3C, tudo acompanhado por muitos exemplos
de cdigo fonte que se deve consultar para esclarecer dvidas. Siga essas indicaes
para produzir pginas em conformidade com as recomendaes do W3C.
Prepare-se para o XHTML. O XHTML a nova gerao do HTML. O nmero
de websites escritos em XHTML no pra de crescer, sendo assim, deve comear a
preparar-se j para utiliz-lo. As coisas mais importantes que deve fazer escrever
HTML 4 vlido, escrever os nomes dos elementos com letra pequena, fechar todos os
elementos, e colocar sempre aspas nos atributos. Se voc se habituar a fazer isto vai
ver que a transio para o XHTML vai ser muito fcil.
Nota: A recomendao oficial HTML 4.01 j recomenda que se escrevam os
nomes dos elementos com letra pequena.
Faa a validao das suas pginas como HTML 4.01. Um documento HTML
deve ser validado recorrendo Definio de Tipo de Documento (DTD) que exprime
as regras do HTML 4.01. Antes de uma pgina poder ser validada preciso juntar ao
documento a declarao que indica qual o tipo de documento que foi usado. Isto deve
ser feito logo na primeira linha.
14.3 Escolha a DTD

A DTD para HTML 4.01 Strict inclui apenas os elementos e os atributos que
no foram desaprovados e no inclui molduras ("frames" ou subjanelas.) Se as suas
pginas esto escritas em HTML Strict ento a declarao DTD que deve usar :
93

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
A DTD para HTML 4.01 Transitional inclui tudo o que est includo na DTD
Strict mais os elementos e os atributos que foram desaprovados e no inclui molduras
("frames".) Se as suas pginas esto escritas em HTML Transitional ento a
declarao DTD que deve usar :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
A DTD HTML 4.01 Frameset inclui tudo o que est na DTD Transitional mais as
molduras ("frames".) Se as suas pginas usam molduras ("frames") ento a
declarao DTD que deve usar :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
14.4 Teste o seu HTML no validador do W3C

O W3C oferece um sistema de validao on-line para suas pginas, de acordo
com suas especificaes. Acesse o endereo http://validator.w3.org/ e entre com a
URL de sua web para efetuar essa verificao.
15. O cabealho de um documento HTML

15.1 O Elemento <head> (cabealho do documento)
O elemento <head> contm informao de carter geral, tambm designada
por meta-informao, sobre o contedo do documento e sobre a forma como ele deve
ser apresentado.
Podemos dizer que o termo meta-informao (ou meta-dados) significa dados
que descrevem outros dados, ou informao acerca de informao.
Exemplos de Aplicao
Definir o ttulo do documento
<html>
<head>
<title>O ttulo no apresentado pelo browser</title>
</head>
<body>
<p>Este texto apresentado porque est dentro de um pargrafo.</p>
</body>
</html>
Definir um nico alvo para todas as ligaes da pgina

<html>
<head>
<base target="_blank">
</head>
<body>
<p><a target="_blank" href="http://www.w3.org">W3C</a> - Esta
ligao se abre numa nova janela porque o atributo
94

"target" possui o valor "_blank".</p>
<p><a href="http://www.w3.org">W3C</a> - Apesar de o atributo
target no ter sido usado no elemento a, esta
ligao se abre numa nova janela porque o atributo
"target" do elemento <base> possui o valor "_blank".</p>
</body>
</html>
A Informao Contida no Elemento <head>

Os elementos contidos dentro do elemento <head> no devem ser
apresentados graficamente pelo browser.
O padro HTML estabelece que s um pequeno nmero de elementos pode
aparecer dentro do cabealho. Eles so: <base>, <link>, <meta>, <title>, <style> e
<script>.
A construo seguinte viola as regras do HTML:
<head>
<p>Aqui temos algum texto</p>
</head>
Numa situao destas o browser pode reagir de duas formas:

x
x
Apresenta o texto porque ele se encontra dentro de um elemento <p>

Esconde o texto porque ele pertence ao cabealho
Se colocar um elemento no autorizado, como <h2> ou <p>, dentro do cabealho,

a maioria dos browsers o exibe na pgina, apesar de ele ser ilegal o local em que se
encontra.
Aparentemente as pessoas que so responsveis pela concepo dos
browsers acham que este gnero de erros aceitvel. Esta e outras deficincias dos
browsers so parcialmente responsveis pelas ms prticas de codificao adquiridas
por muitos criadores de pginas HTML. Uma das razes que levaram criao do
XHTML foi a necessidade de acabar com estas situaes de uma vez por todas.
15.2 Elementos de cabealho (<head>)

Elemento
<head>
Descrio
Contm informao importante a respeito do documento, mas que
95

no deve ser apresentada no corpo da pgina

Define o ttulo da pgina
Define uma URL base comum para todas as ligaes relativas da
pgina
Faz referncia a um recurso externo e estabelece a ligao com ele
D informao sobre aquilo que o documento contm
<title>
<base>
<link>
<meta>
15.3 A declarao DOCTYPE

A declarao DOCTYPE serve para indicar o DTD a ser usado para validao
na pgina. Quando utilizada, deve aparecer logo no incio da pgina, antes do
elemento <html>.
Declarao
<!DOCTYPE>
Descrio
Define o tipo de documento. Deve ser colocada antes de qualquer
elemento, ficando mesmo antes do elemento <html>.
O elemento <meta>
O elemento <meta> contm informao de carter geral (meta-informao)
acerca do documento e deve ser colocado dentro do elemento <head>. A sua
finalidade fornecer informao que descreve o documento.
15.4 Palavras-chave para os motores de pesquisa
Durante alguns anos a utilizao mais freqente da informao fornecida pelo
elemento <meta> foi a criao de ndices para os motores de pesquisa. Hoje s alguns
motores de pesquisa ainda usam esta informao para indexar pginas, e os de maior
sucesso a ignora. No entanto, h partes que continuam a ser consideradas pelos
agentes (robots) dos motores de pesquisa, como por exemplo as indicaes dadas
sobre as pastas em que no deve ser feita qualquer indexao.
Alguns motores de pesquisa da Web (no muitos) usam a informao contida
nos elemento meta para indexar as pginas. No fragmento de cdigo seguinte o
elemento <meta> contm uma breve descrio da pgina:
<meta name="description" content="Tutoriais e referncias tcnicas de HTML,
CSS, JavaScript, XML, XSLT, SVG">
No fragmento de cdigo seguinte o elemento <meta> contm palavras-chave

para indexar a pgina:
<meta name="keywords" content="HTML, DHTML, CSS, XML, XHTML, JavaScript, XSLT,
SVG">
Como acabamos de ver, os nomes dados ao atributo name indicam claramente

a finalidade da informao contida no elemento meta.
Infelizmente, muitos criadores de pginas para a Web abusaram do elemento
meta e usaram de forma contrria sua filosofia para enganar os motores de
pesquisa. Em resultado disto os motores de pesquisa passaram a ignorar cada vez
mais o elemento <meta>, o que acabou dificultando a vida de todos aqueles que
pretendiam us-lo corretamente.
96

15.5 Valores desconhecidos para o atributo name do elemento <meta>

Algumas vezes encontramos situaes em que o atributo name do elemento
<meta> contm um valor desconhecido, como no exemplo seguinte:
<meta name="security" content="low">
Numa situao destas devemos interpretar o elemento meta como contendo

informao que especfica do website em causa. Essa informao pode ser
importante para o autor da pgina, mas provavelmente irrelevante para os visitantes.
possvel que essa informao seja til para algum software que leia a pgina.
Para obter informao completa acerca do elemento meta consulte a
Referncia de HTML 4.
Exemplos de Aplicao
As palavras chave do documento
<html>
<head>
<meta name="description" content= "Tutoriais de HTML, CSS, XML, XHTML, SVG e
Flash disponveis para download">
<meta name="keywords" content= "HTML, DHTML, CSS, XML, XHTML, JavaScript, XML,
SVG">
</head>
<body>
<p>Os atributos do elemento meta presentes neste documento descrevem o seu
contedo e fornecem algumas palavras-chave.</p>
</body>
</html>
A descrio do documento
<html>
<head>
<meta name="author" content="Manel Ambrsio">
<meta name="revised" content="Xiko Ambrsio,26/05/03">
<meta name="generator" content="Um Software Qualquer">
</head>
<body>
<p>Os atributos do elemento <meta> presentes neste documento identificam o
autor e o software usado para criar a pgina.</p>
</body>
97

</html>
Redirecionar para outra pgina

<html>
<head>
<meta http-equiv="Refresh" content="10;url=http://www.w3.org">
</head>
<body>
<p>Se o nosso website estivesse em remodelao seria enviado para o website
do w3c: <a href="http://www.w3.org">http://www.w3.org/</a></p>
<p>Dentro de 10 segundos ser enviado para o website do W3C.</p>
<p>Se esta mensagem permanecer visvel por mais de 10 segundos, por favor
clique na ligao mais acima!</p>
</body>
</html>
16. Molduras ("frames")

As molduras ("frames") so subjanelas definidas sobre a janela principal do
browser. Estas subjanelas so criadas dividindo a janela em vrias partes. Cada uma
dessas partes pode apresentar uma pgina da Web diferente. As subjanelas so
habitualmente designadas por molduras, ou "frames".
98

Exemplos de Aplicao
Como criar um conjunto de subjanelas com trs documentos dispostos na
vertical
Moldura A
<html>
<head>
<title></title>
</head>
<body>
<p>Esta a moldura <span style="color: red; font-size: 150%">A</span></p>
</body>
</html>
Moldura B
<html>
<head>
<title></title>
</head>
<body>
<p>Esta a moldura <span style="color: blue; font-size: 150%">B</span></p>
</body>
</html>
Moldura C
<html>
<head>
<title></title>
</head>
<body>
<p>Esta a moldura <span style="color: teal; font-size: 150%">C</span></p>
</body>
</html>
<html>
<head>
</head>
<frameset cols="25%,50%,25%">
<frame src="moldura_a.html">
<frame src="moldura_b.html">
<frame src="moldura_c.html">
</frameset>
</html>
99

Como criar um conjunto de subjanelas com trs documentos dispostos na

horizontal
<html>
<head>
</head>
<frameset rows="25%,50%,25%">
</frameset>
</html>
Vantagens e desvantagens das molduras

As molduras ("frames") permitem-nos apresentar mais do que uma pgina
HTML numa nica janela do browser. Cada pgina est dentro da sua prpria moldura
(subjanela) e independente das restantes pginas. Apesar de oferecerem alguma
liberdade ao facilitarem bastante a criao de barras de navegao em conjuntos de
documentos com muitas pginas e de tornarem bastante mais rpido o carregamento
das pginas, as molduras tambm podem dar origem a algumas dificuldades, tais
como:
x
x
x
O criador de pginas se v obrigado a lidar com um nmero maior de pginas

ao mesmo tempo.
A impresso do contedo do browser fica mais difcil.
Algumas vezes preciso que um nico elemento <a> faa ligao a duas ou
mais pginas, o que obriga a utilizar JavaScript.
O Elemento frameset
x
x
x
O elemento <frameset> define a forma como a janela do browser se subdivide

para acomodar as molduras.
Este elemento divide a janela do browser em linhas e colunas.
Os valores atribudos s linhas e s colunas indicam a quantidade de rea de
tela que cada linha e cada coluna devem ocupar.
100

O Elemento <frame>
x
O elemento <frame> define qual o documento HTML dever colocar numa

determinada moldura.
No exemplo apresentado a baixo temos um conjunto de molduras com duas

colunas. A primeira coluna ocupa 25% da largura da janela do browser e a segunda
coluna ocupa 75% da largura. O documento "moldura_a.html" ocupa a primeira coluna
e o documento "moldura_b.html" ocupa a segunda coluna:
<frameset cols="25%,75%">
<frameset>
Dicas
Diferente de outras pginas normais, as pginas dividas em frames no
utilizam o elemento <body>, sendo assim substitudo pelo elemento <frameset>
Quando uma moldura possui linhas de contorno visveis, o usurio pode alterar
as suas dimenses arrastando as linhas de limite com o mouse. Para impedir que isso
acontea utilize o atributo noresize no elemento <frame>.
Se voc deseja ocultar as bordas dos frames, utilize o atributo frameborder=0
e para definir os espaamento entre o frames como 0 utlize o framespacing="0". Esses
atributos so usados sempre no elemento <frameset>
Outro recurso que pode ser utilizado nos frames o scrolling para ocultar ou
no as barras de rolagem. Usa-se como: scrolling=no no elemento <frame>.
O atributo name do elemento <frame> especifica sua identificao para que
outros frames o reconhea e chame contedos para serem exibidos nele mesmo.
<html>
<head>
</head>
<frameset rows="25%,50%,25%" frameborder="0" framespacing="0">
<frame name="a" noresize src="moldura_a.html" scrolling="no">
<frame name="b" src="moldura_b.html">
<frame name="c" src="moldura_c.html" scrolling="yes">
</frameset>
</html>
101

Use o elemento <noframes> para que os browsers que no suportam molduras

possam mostrar um aviso aos seus usurios.
16.1 Elementos para molduras ("frames")

Elemento
<frameset>
<frame>
<noframes>
<iframe>
Descrio
Define um conjunto de molduras
Define o contedo de uma subjanela (moldura, ou "frame")
Define uma seo "noframes" para ser usada pelos browsers que no
suportam molduras
Define uma subjanela (moldura) interior ("inline frame")
Exemplos de Aplicao
Como criar subjanelas com partes dispostas na vertical e outras na horizontal
<html>
<head>
</head>
<frameset rows="50%,50%">
</frameset>
</frameset>
</html>
Como usar subjanelas para organizar a navegao no seu site

Moldura de Navegao
<html>
<body>
<br><b>Barra de Navegao</b>
<hr>
<a href="moldura0.html" target="principal">HOME</a><br><br>
<a href="moldura_a.html" target="principal">Documento A</a><br>
<a href="moldura_b.html" target="principal">Documento B</a><br>
<a href="moldura_c.html" target="principal">Documento C</a><br>
</body>
</html>
102

Moldura de Contedo
<html>
<head>
<title></title>
</head>
<body>
Este o documento de entrada ("home") do conjunto de molduras.<br><br>
</body>
</html>
<html>
<head>
</head>
<frameset cols="120,*">
<frame src="nav_molduras.html">
<frame name="principal" src="moldura0.html">
</frameset>
</html>
Como colocar uma subjanela interior ("inline frame") dentro de uma pgina
Moldura iframe
<html>
<head>
<title>Uma moldura "inline"</title>
</head>
<body>
Esta parte pertence a uma moldura "inline" (iframe)<br>
Ela est num documento HTML separado.<br><br>
Veja que se o documento no couber todo dentro da sua janela
aparecem barras de deslocamento.<br><br>
A diferena mais importante relativa s molduras normais
est no fato de um iframe poder ser colocado dentro de uma
pgina, misturado com os contedos desta e no site que quisermos.<br>
</body>
</html>
<html>
<head>
</head>
<body>
<h3>Uma moldura "inline" (iframe)</h3>
<iframe src="iframe.html" width="400" height="150" frameborder="1"
marginheight="0" marginwidth="0"></iframe>
103

<p>Alguns browsers antigos no suportam iframes.</p>
</body>
</html>
Saltar para um local especfico de uma pgina que se encontra numa outra
subjanela ("frame")
Moldura de Navegao
<html>
<body>
<p><a href="link_bookmark.html#C3" target="principal">Veja
também o Capítulo 3</a></p>
</body>
</html>
Moldura de Contedo
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
</head>
<body>
<p><a href="#C3">Veja tambm o Captulo 3</a></p>
<h1>Manual de Iniciao Tortura Chinesa</h1>
<h3>Captulo 1</h3>
<p>
Neste captulo vamos descrever as qualidades necessrias para poder tornarse
um Tcnico Superior de Tortura Chinesa. Esta nobre arte, desenvolvida ao
longo de muitos sculos por grandes mestres da cultura oriental, assenta
numa
filosofia de respeito pelos valores da tolerncia e amor pelo prximo.
</p>
<h3>Captulo 2</h3>
<p>
Para desenvolver as aptides necessrias a um bom exerccio desta nobre
arte
voc precisa arranjar um espao fsico para instalar o seu laboratrio.
Esta escolha uma das decises mais importantes para o sucesso das suas
iniciativas de tortura chinesa.
</p>
104

<h3><a name="C3" id="C3">Captulo 3</a></h3>
<p>
Agora chegado o momento de recrutar alguns colaboradores e testar os
conhecimentos j adquiridos. Comece por tentar persuadir algumas pessoas de
quem goste menos para participarem nas suas sesses de iniciao tortura
chinesa na qualidade de vtimas indefesas. No caso de elas se mostrarem
reticentes ser obrigado a nome-los como voluntrios fora, o que j
ser
um excelente exerccio de iniciao.
</p>
</body>
</html>
<html>
<head>
</head>
<frameset cols="240,*">
<frame src="moldura_saltar.html">
<frame src="link_bookmark.html#C3" name="principal">
</frameset>
</html>
17. Insero de scripts

A adio de scripts s pginas escritas em HTML pode fazer com que elas
sejam capazes de reagir de forma dinmica e interagir com os usurios.
17.1 Inserir um script numa pgina HTML

A insero de um script em HTML se faz atravs do elemento <script>.
<html>
<head>
</head>
<body>
<script type="text/javascript">
document.write("Ol Mundo!");
</script>
</body>
</html>
105

O script apresentado acima produz os seguinte resultado:
Para aprender mais sobre a criao de scripts faa os cursos Iniciao ao

JavaScript, Programao em JavaScript.
17.2 Como lidar com os browsers antigos

Um browser que no reconhece o elemento <script> j muito antigo e a sua
utilidade na Web atual muito reduzida. Estes browsers, ao encontrarem um elemento
<script>, cujo significado desconhecem, limitam-se a apresentar o texto que est
dentro do elemento como se tratasse de contedo normal. Para impedir que isso
acontea deve colocar o contedo do elemento <script> dentro de um comentrio <!-script aqui -->. Deste modo, os browsers que no suportam scripts ignoram-nos, mas
os restantes browsers reconhecem os scripts e os executam, apesar dos comentrios.
Mesmo com browsers modernos a utilizao de comentrios nos scripts uma prtica
recomendvel porque evita muitos problemas que surgem quando utilizamos scripts
na linguagem XHTML.
O Elemento <noscript>
Para alm de escondermos o cdigo dentro de um comentrio, uma outra
forma de ajudar os browsers muito antigos consiste em usar o elemento <noscript>
para oferecer contedos alternativos.
O elemento <noscript> usado para compensar de alguma forma a falta de
execuo de um script. O contedo deste elemento ser apresentado pelos browsers
que no reconhecem scripts, mas ser ignorado pelos browsers mais modernos e no
interfere na apresentao da pgina.
Um exemplo
<html>
<head>
<head>
<body>
<!-document.write("Ol mundo!")
-->
</script>
<noscript>
O seu browser no suporta JavaScript!
</noscript>
</body>
106

</html>
17.3 Elementos para inserir scripts e cdigo

Elemento
<script>
<noscript>
<object>
<param>
Descrio
Define um bloco que contm um script
Define texto alternativo para ser apresentado sempre que o script no
executado
Insere um objeto na pgina
Define parmetros para controlar o objeto
Exemplos de Aplicao
Como inserir um script
<html>
<head>
</head>
<body>
document.write('<h1>Ol Mundo!</h1>')
</script>
<h1>Ol Mundo!</h1>
</body>
</html>
Como lidar com um browser que no suporta scripts

<html>
<head>
107

</head>
<body>
<!-document.write("Se voc v este texto o seu browser suporta
scripts!")
-->
</script>
<noscript>No h suporte para JavaScript!</noscript>
<p>Se o browser no suportar JavaScript ser mostrado o texto presente no
elemento <noscript>.</p>
</body>
</html>
108

PARTE III: Referncia Rpida e Reviso

18. Exemplos rpidos de HTML 4.01
Lista para tirar rapidamente pequenas dvidas sobre HTML.
O documento HTML bsico
<html>
<head>
<title>Aqui colocamos o ttulo</title>
</head>
<body>
Aqui colocamos os contedos visveis
</body>
<html>
Elementos de cabealho (para captulos ou sees)

<h1>Cabealho maior</h1>
<h2>. . . </h2>
<h3>. . . </h3>
<h4>. . . </h4>
<h5>. . .</h5>
<h6>Cabealho menor</h6>
Elementos para texto

<br> (mudana forada de linha)
<hr> (linha horizontal)
<pre>Isto texto pr-formatado</pre>
Estilos lgicos
<em>Isto texto enfatizado</em>
<strong>Isto texto forte</strong>
<code>Isto cdigo de computador</code>
Estilos fsicos
<b>Isto texto em negrito</b>
<i>Isto texto em itlico</i>
Ligaes e ncoras
<a href="http://www.w3.org/">Isto uma Ligao</a>
<a href="http://www.w3.org/"><img src="URL" alt="Texto alternativo"></a>
<a href="mailto:bill@gaitas.com">Enviar e-mail</a>
Uma ncora com nome:

<a name="dicas" id="dicas">Dicas teis</a>
<a href="#dicas">Saltar para a Seo de Dicas</a>
Lista no ordenada
<ul>
<li>Primeiro item</li>
<li>Item seguinte</li>
109

</ul>
Lista ordenada
<ol>
<li>Primeiro item</li>
<li>Item seguinte</li>
</ol>
Lista de definies
<dl>
<dt>Primeiro termo</dt>
<dd>Definio</dd>
<dt>Termo seguinte</dt>
<dd>Definio</dd>
</dl>
Tabelas
<table border="1">
<tr>
<th>um cabealho</th>
<th>outro cabealho</th>
</tr>
<tr>
<td>algum texto</td>
<td>mais texto</td>
</tr>
</table>
Subjanelas (molduras, ou "frames")

<frame src="pagina1.html">
<frame src="pagina2.html">
<frameset>
Formulrios
<form action="http://www.o_meu_site.com/processar.php" method="post/get">
<input type="text" name="lastname" value="Nabo" size="30" maxlength="50">
<input type="password">
<input type="checkbox" checked="checked">
<input type="radio" checked="checked">
<input type="reset">
<input type="hidden">
<select>
<option>Rabanetes
<option selected>Alhos
<option>Cebolas
</select>
<textarea name="Comentario" rows="60" cols="20"></textarea>
</form>
Entidades
< representa o mesmo que <
> representa o mesmo que >
© representa o mesmo que
110

Outros Elementos
<blockquote>
Texto citado a partir de uma fonte externa.
</blockquote>
<address>
Endereo (1 linha)<br>
Endereo (2 linha)<br>
Cidade<br>
</address>
19. Referncia rpida de HTML 4.01

19.1 Todos os elementos ordenados alfabeticamente
Elemento

<!DOCTYPE>
<a>
<abbr>
<acronym>
<address>
<area>
<b>
<base>
<bdo>
<big>
<blockquote>
<body>
<br>
<button>
<caption>
<cite>
<code>
<col>
<colgroup>
<dd>
<del>
<dfn>
<div>
<dl>
<dt>
<em>
<fieldset>
<form>
Descrio
Permite inserir um comentrio
Indica o tipo de documento usado na pgina
Insere uma ncora (marca que identifica o local do documento em
que se encontra)
Insere uma abreviao
Insere um acrnimo
Insere um endereo (postal)
Define uma rea sobre uma imagem
Insere texto carregado (negrito ou "bold")
Define o URL base de onde partem todas as ligaes relativas da
pgina
Define a direo em que o texto apresentado com o atributo dir
sendo rtl (right to left) ou ltr (left to right)
Texto com letra maior
Define uma citao extensa
Elemento que contm o corpo (contedo visvel) da pgina
Provoca uma mudana de linha forada
Insere um boto num formulrio
Define a legenda de uma tabela
Insere uma citao
Define texto que cdigo de computador
Define os atributos para as colunas de uma tabela
Agrupa colunas numa tabela
Insere texto que descreve uma definio
Define texto que foi apagado ("deleted")
Insere uma diviso (ou seo) dentro da pgina
Insere uma lista de definies ("definition list")
Insere texto enfatizado (escreve-se em itlico)
Elemento que contm um grupo de campos de um formulrio
Insere um formulrio
111

<frame>
<frameset>
<h1> a <h6>
<head>
<hr>
<html>
<i>
<iframe>
<img>
<input>
<ins>
<kbd>
<label>
<legend>
<li>
<link>
<map>
<meta>
<noframes>
<noscript>
<object>
<ol>
<optgroup>
<option>
<p>
<param>
<pre>
<q>
<samp>
<script>
<select>
<small>
<span>
<strong>
<style>
<sub>
<sup>
<table>
<tbody>
Define uma subjanela (moldura) dentro da janela principal do

browser. A subjanela contm a sua prpria pgina da Web
Insere um conjunto de subjanelas ("frames")
Define cabealhos ("headers") desde o nvel 1 (mais importante) at
ao nvel 6 (menos importante)
Contm informao importante a respeito do documento que no
deve ser apresentada no corpo da pgina
Desenha uma linha horizontal
Elemento dentro do qual so colocados todos os restantes elementos
da pgina
Insere texto para ser escrito com caracteres itlicos
Insere no interior da pgina da Web uma subjanela ("frame")
contendo a sua prpria pgina da Web
Insere uma imagem
Define uma caixa para insero de texto num formulrio
Define texto que foi inserido em substituio de outro mais antigo
Define texto inserido atravs do teclado
Define uma marca que ser associada a um controle. Ao clicar nessa
marca o controle que lhe est associado dever ser focado
Define um ttulo num elemento <fieldset>
Define um item de uma lista
Faz referncia a um recurso externo e estabelece a ligao com ele
Define um mapa sobre uma imagem
D informao sobre aquilo que o documento contm
Define um bloco noframes, o qual s ser apresentado se o browser
no suportar os elementos <frameset> e <frame>
Define um bloco noscript, o qual s ser apresentado se o browser
no suportar o elemento <script>
Insere um objeto dentro da pgina (como um filme em Flash, por
exemplo)
Define uma lista ordenada
Define um grupo de opes
Define uma opo numa lista de um formulrio
Insere um pargrafo
Define um parmetro para o elemento <object>
Define texto pr-formatado
Define uma citao curta
Define uma amostra ("sample") de cdigo de computador
Insere um script
Define uma lista com items selecionveis
Define texto menor ("small")
Insere uma diviso (ou seo) dentro da pgina
Define texto mais forte (ser escrito em negrito)
Define estilos CSS a aplicar na pgina
Define texto que fica alinhado um pouco mais abaixo ("subscript")
Define texto que fica alinhado um pouco mais acima ("superscript")
Define uma tabela
Define um corpo ("body") numa tabela
112

<td>
<textarea>
<tfoot>
<th>
<thead>
<title>
<tr>
<tt>
<u>
<ul>
<var>
Define uma diviso, ou clula, numa tabela

Define uma rea para insero de texto num formulrio
Define o rodap de uma tabela
Define o cabealho de uma coluna numa tabela
Define o cabealho de uma clula numa tabela
Define o ttulo da pgina
Define uma linha de clulas numa tabela
Define texto que imita o de uma mquina de escrever antiga
("teletype text")
Define texto sublinhado ("underlined.")
Define uma lista no ordenada ("unordered list")
Define uma varivel
20. Atributos especiais do HTML 4

20.1 Atributos intrnsecos
Quase todos os elementos do HTML possuem atributos. Os atributos
especficos de cada elemento so descritos junto descrio do prprio elemento na
Referncia de HTML. Os atributos apresentados na lista seguinte fazem parte do
ncleo ("core") da linguagem HTML e salvo raras excees podem ser usados em
todos os elementos do HTML 4 porque so atributos intrnsecos da linguagem.
20.2 Atributos nucleares ou intrnsecos ("Core Attributes")

No podem ser usados com os elementos base, head, html, meta, param,
script, style, e title.
Atributo
class
id
Valor
class_rule ou style_rule
id_name
style
style_definition
title
tooltip_text
Descrio
A classe (CSS) a que pertence o elemento
Um nome nico (no deve ser repetido no
mesmo documento) para o elemento
Definio de um estilo dentro do prprio corpo
do documento ("inline style definition")
Texto a apresentar como dica
20.3 Atributos lingsticos

No pode ser usado com os elementos base, br, frame, frameset, hr, iframe,
param e script.
Atributo
dir
lang
Valor
ltr | rtl
language_code
Descrio
Define a direo do texto
Define o cdigo da lngua usada na escrita dos
textos
20.4 Atributos de teclado

Atributo
Valor
accesskey caractere (corresponde
a uma tecla)
Descrio
Define um atalho do teclado (sequncia de
teclas) que permite aceder mais rapidamente a
113

tabindex
um elemento da pgina
Define o nmero de ordem ("tab order") do
elemento no acesso atravs da tecla tab
nmero
Atributos de eventos do HTML 4

20.5 Eventos de janela
A partir da verso 4 da linguagem HTML praticamente todos os elementos
podem desencadear eventos que tm como resposta a execuo de aes por parte
do browser, como por exemplo executar cdigo JavaScript quando o usurio clicar
num determinado elemento. A lista apresentada mais abaixo mostra os atributos que
podemos inserir nos elementos do HTML para definir aes de resposta a eventos.
S podem ser usados com os elementos <body> e <frameset>
Atributo
onload
Valor
script
onunload
script
Descrio
Script a executar quando o documento acabar de ser
carregado
Script a executar quando o documento for abandonado
20.6 Eventos para formulrios

S podem ser usados com elementos associados a um formulrio
Atributo
onchange
Valor
script
onsubmit
onreset
script
script
onselect
onblur
onfocus
script
script
script
Descrio
Script a executar quando o valor contido no elemento
sofrer uma alterao
Script a executar quando o formulrio for submetido
Script a executar quando o contedo do formulrio for
reposto nos valores iniciais
Script a executar quando o elemento for selecionado
Script a executar quando o elemento perder o foco
Script a executar quando o elemento ganhar o foco
20.7 Eventos de teclado

No podem ser usados com os elementos base, bdo, br, frame, frameset,
head, html, iframe, meta, param, script, style, e title.
Atributo
onkeydown
onkeypress
Valor
script
script
onkeyup
script
Descrio
Script a executar quando uma tecla pressionada
Script a executar quando uma tecla pressionada e
seguidamente libertada
Script a executar quando uma tecla libertada
20.8 Eventos do mouse

No podem ser usados com os elementos base, bdo, br, frame, frameset,
head, html, iframe, meta, param, script, style e title.
114

Atributo
onclick
Valor
script
ondblclick
script
onmousedown
script
onmousemove script
onmouseout
script
onmouseover
script
onmouseup
script
Descrio
Script a executar quando detectado um clique no
mouse
Script a executar quando detectado um clique duplo no
mouse
Script a executar quando o boto do mouse
pressionado
Script a executar quando o ponteiro do mouse muda de
posio
Script a executar quando o ponteiro do mouse deixa de
estar sobre um elemento
Script a executar quando o ponteiro do mouse passa a
estar sobre um elemento
Script a executar quando o boto do mouse libertado
21. O conjunto de caracteres ASCII de 7 bits

O HTML transmitido atravs da Internet usando cdigos numricos que
representam caracteres de texto. De entre todos estes caracteres tm especial
importncia aqueles que podem ser representados por cdigos de apenas 7 bits. Eles
formam o conjunto de caracteres padro ASCII de 7 bits. Utilizando apenas 7 bits, o
ASCII consegue representar apenas 128 caracteres diferentes (0-127).
21.1 Caracteres ASCII imprimveis

Resultado
!
"
#
$
%
&
'
(
)
*
+
,
.
/
0
1
2
3
4
5
6
Descrio
espao
ponto de exclamao
aspas
smbolo de cardinal
smbolo da moeda dlar
sinal de porcentagem
"e" comercial
apstrofo (tambm pode servir de aspas)
abre parntesis
fecha parntesis
asterisco
sinal mais
virgula
hfen
ponto final
barra
nmero 0
nmero 1
nmero 2
nmero 3
nmero 4
nmero 5
nmero 6
Cdigo Numrico

!
"
#
$
%
&
'
(
)
*
+
,
-
.
/
0
1
2
3
4
5
6
115

7
8
9
:
;
<
=
>
?
@
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Y
Z
[
\
]
^
_
`
a
b
c
d
e
nmero 7
nmero 8
nmero 9
dois pontos
ponto e virgula
menor do que
igual a
maior do que
ponto de interrogao
arroba (smbolo "at" do e-mail)
A maisculo
B maisculo
C maisculo
D maisculo
E maisculo
F maisculo
G maisculo
H maisculo
I maisculo
J maisculo
K maisculo
L maisculo
M maisculo
N maisculo
O maisculo
P maisculo
Q maisculo
R maisculo
S maisculo
T maisculo
U maisculo
V maisculo
W maisculo
X maisculo
Y maisculo
Z maisculo
abre colchete
barra inclinada para trs
fecha colchete
acento circunflexo
"underscore"
acento grave
a minsculo
b minsculo
c minsculo
d minsculo
e minsculo
7
8
9
:
;
<
=
>
?
@
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Y
Z
[
\
]
^
_
`
a
b
c
d
e
116

f
g
h
i
j
k
l
m
n
o
p
q
r
s
t
u
v
w
x
y
z
{
|
}
~
f minsculo
g minsculo
h minsculo
i minsculo
j minsculo
k minsculo
l minsculo
m minsculo
n minsculo
o minsculo
p minsculo
q minsculo
r minsculo
s minsculo
t minsculo
u minsculo
v minsculo
w minsculo
x minsculo
y minsculo
z minsculo
abre chaves
barra vertical
fecha chaves
til
f
g
h
i
j
k
l
m
n
o
p
q
r
s
t
u
v
w
x
y
z
{
|
}
~
21.2 Caracteres de controle ASCII (no imprimveis)

Os caracteres de controle ASCII foram concebidos para enviar comandos a
dispositivos de hardware como impressoras e gravadores de fita magntica. Estes s
fazem sentido dentro de um documento HTML em casos especiais que so raros,
como acontece com os caracteres "line feed" (cdigo 10), "carriage return" (cdigo 13)
e "horizontal tab" (cdigo 9). Apesar disso aqui fica a lista com os seus cdigos:
Resultado
NUL
SOH
STX
ETX
EOT
ENQ
ACK
BEL
BS
HT
LF
VT
Descrio
caractere nulo (no representa nada)
incio do cabealho ("start of header")
incio do texto ("start of text")
fim do texto ("end of text")
fim da transmisso ("end of transmission")
interrogao ("enquiry")
confirmao ("acknowledge")
toque de campainha (bell)
espao atrs ("backspace")
inserir vrios espaos na horizontal ("horizontal
tab")
passar para a linha seguinte ("line feed")
inserir vrios espaos na vertical ("vertical tab")
Cdigo Numrico

117

FF
CR
SO
SI
DLE
DC1
DC2
DC3
DC4
NAK
SYN
ETB
CAN
EM
SUB
ESC
FS
GS
RS
US
DEL
passar para a folha seguinte ("form feed")

terminar a linha atual ("carriage return")
fim de modificador ("shift out")
incio de modificador ("shift in")
caractere de escape ("data link escape")
controle de dispositivo ("device control 1")
confirmao negativa ("negative acknowledge")
sincronizar ("synchronize")
fim de bloco de transmisso ("end transmission
block")
cancelar
"end of medium"
substituir
escape
separador de arquivos ("file separator")
separador de grupos ("group separator")
separador de registros ("record separator")
separador de unidades ("unit separator")
apagar ("delete")

118

PARTE IV: Referncia de HTML 4 e XHTML 1

1. Introduo
Esta referncia descreve detalhadamente todos os elementos do HTML 4.01 e
do XHTML 1. Trata-se de material de consulta com um importante componente
prtico, til para quem est estudando HTML e para quem j sabe HTML mas precisa
tirar dvidas sobre um determinado elemento ou quer conhecer melhor os elementos
que constituem estas linguagens.
Esta referncia serve de apoio ao Curso de HTML 4 e est estruturada por forma a
facilitar a consulta rpida. Se ainda no sabe HTML estude primeiro Curso de HTML 4.
2. Comentrios 

Os comentrios usam-se para adicionar anotaes ao cdigo das pginas com
o objetivo de explicar o seu funcionamento e torn-lo mais claro. Os comentrios so
ignorados pelo browser e por isso no aparecem na apresentao grfica da pgina.
No entanto, eles podem ser bastante teis para avivar a memria quando mais tarde
precisar voltar a mexer nas pginas que escreveu antes.
Os comentrios tambm so usados por programas de software (como o
Macromedia Dreamweaver e outros) que produzem e manipulam HTML e precisam
fazer anotaes para realizar o seu trabalho. Outra prtica recomendada consiste em
colocar o cdigo JavaScript dentro de comentrios.
Exemplo
<p>Aqui temos um pargrafo</p>
Atributos: No se aplica
3. A declarao <!DOCTYPE>
A declarao <!DOCTYPE> no um elemento da linguagem. A sua finalidade
informar o web browser sobre qual a verso exata da linguagem em que a pgina
est escrita. A referncia verso vem dada atravs de uma DTD (Definio de Tipo
de Documento, ou "Document Type Definition".) Essa DTD define as regras
gramaticais da linguagem usada. Quando utilizada esta declarao deve ser a primeira
coisa que aparece no documento.
DOCTYPEs da Linguagem HTML

O HTML 4.01 especifica trs tipos de documento: Strict, Transitional e
Frameset.
DTD HTML Strict
Usa-se para escrever cdigo limpo, livre de misturas entre estilo e contedos.
usada em conjunto com estilos CSS ("Cascading Style Sheets"). Usa-se do seguinte
modo:
119

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
DTD HTML Transitional

A DTD HTML Transitional inclui tanto os elementos estruturais com os
elementos de apresentao (desaconselhados porque misturam estilo com
contedos.) Esta DTD deve ser usada quando somos obrigados a manter a
compatibilidade com browsers que no suportam os estilos CSS na perfeio. Usa-se
do seguinte modo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
DTD HTML Frameset

A DTD HTML Frameset deve ser usada quando o documento contm molduras
("frames".) Esta DTD consiste na DTD Transitional mais os elementos relacionados
com as molduras ("frames"). Usa-se do seguinte modo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
DOCTYPEs da Linguagem XHTML

O XHTML 1.0 especifica quatro tipos bsicos de documento XML: Strict,
Transitional, Frameset e Basic.
DTD XHTML Strict
Usa-se para escrever cdigo limpo, livre de misturas entre estilo e contedos.
usada em conjunto com estilos CSS ("Cascading Style Sheets").
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
DTD XHTML Transitional

A DTD XHTML Transitional junta os elementos estruturais com aqueles
elementos que o W3C quer eliminar da linguagem porque misturam o estilo com os
contedos. Esta DTD deve ser usada quando somos obrigados a manter a
compatibilidade com browsers que no suportam estilos CSS na perfeio.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
DTD XHTML Frameset

Usa-se em documentos que contm molduras ("frames")
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
DTD XHTML Basic

Verso bsica do XHTML. Contm apenas os elementos indispensveis para
construir pginas teis. Serve de base para construir outras linguagens da famlia
120

XHTML, como o XHTML Mobile Profile, que foi concebido para criar pginas para a
Internet Mvel.
Atributos: No se aplica.
4. Elemento <a>
O elemento <a> define uma ncora. As ncoras podem ser usadas de duas
formas:
1. Para criar uma ligao ("link") que conduz a outra pgina.
2. Para marcar um local no documento dando-lhe um nome (identificao nica.)
Diferenas entre o HTML e o XHTML
Nenhuma
Dicas e Notas
Nota: Ao clicar sobre um elemento <a> a nova pgina ser geralmente aberta
na janela que est sendo usada e substitui a pgina que contm a ncora. Se utilizar o
atributo target do elemento <a> para especificar o nome de outra janela, ento a nova
pgina ser aberta nessa janela e no substituir a pgina que contm a ncora.
Exemplo
<p>Visite o W3C: <a href="http://www.w3.org">W3C</a>
</p>
<p>Visite o W3C usando outra janela:
<a href="http://www.w3.org" target="_blank">W3C</a>
</p>
Atributos Opcionais
A coluna DTD indica as DTDs que aceitam o atributo: S=Strict, T=Transitional,
e F=Frameset.
Atributo
charset
Valor
character_encoding
coords
se shape="rect" ento
coords="esquerda,cima,
direita,baixo"
se shape="circ" ento
coords="centro_x,
centro_y, raio"
href
se shape="poly" ento
coords="x1,y1,x2,y2,..,xn,
yn"
URL
Descrio
Especifica o conjunto de caracteres
utilizado para escrever a pgina
para onde aponta a ligao
Especifica coordenadas
apropriadas para definir a forma
geomtrica (atributo "shape") de
uma regio "clicvel" no mapa de
imagem
DTD
STF
URL do recurso para onde aponta

a ligao ("link")
STF
STF
121

hreflang
language_code
name
section_name
rel
rev
shape
alternate
designates
stylesheet
start
next
prev
contents
index
glossary
copyright
chapter
section
subsection
appendix
help
bookmark
alternate
designates
stylesheet
start
next
prev
contents
index
glossary
copyright
chapter
section
subsection
appendix
help
bookmark
rect
rectangle
circ
Especifica o cdigo de lngua

correspondente ao idioma usado
para escrever os textos da pgina
para a qual aponta o URL
D um nome a uma ncora. Este
atributo usa-se para marcar um
local no documento.
Recomenda-se a utilizao do
atributo id em vez do atributo
name. No entanto, para manter a
compatibilidade com os browsers
menos modernos, correto usar
simultneamente estes dois
atributos e dar-lhe o mesmo valor.
Note que esta uma soluo de
transio, porque no futuro o
atributo name deve ser
abandonado!
Especifica a relao existente entre
o documento atual e o documento
para o qual aponta a ligao.
STF
STF
STF
Especifica a relao existente entre

o documento atual e o documento
para o qual aponta a ligao.
STF
Indica o tipo de regio definido

sobre o mapa de imagem. A forma
geomtrica exata especificada
STF
122

target
circle
poly
polygon
_blank
_parent
_self
_top
atravs do atributo coords.
Especifica a janela (ou a moldura)

onde se abre a ligao ao clicar.
x
x
type
mime_type
TF
_blank - a ligao abre-se

numa nova janela
_self - a ligao abre-se na
prpria janela que contm o
elemento <a>
_parent - (s para ligaes
que esto numa moldura,
ou "frame") a ligao abrese no documento que
contm a moldura (que ter
sido criada atravs de um
<frame> ou de um
<iframe>)
_top - a ligao abre-se no
documento que ocupa a
posio mais elevada na
hierarquia (aquele que no
est dentro de nenhum
<frameset> nem num
<iframe>)
Especifica o tipo MIME

(Multipurpose Internet Mail
Extensions) do recurso para o qual
aponta o URL
STF
Atributos Padro
id, class, title, style, dir, lang, xml:lang, tabindex, accesskey
Para ver uma descrio completa destes atributos consulte os Atributos
Padro.
Atributos de Eventos
onfocus, onblur, onclick, ondblclick, onmousedown, onmouseup, onmouseover,
onmousemove, onmouseout, onkeypress, onkeydown, onkeyup
Para ver uma descrio completa destes atributos consulte os Atributos de
Eventos.
5. Elemento <abbr>
Usa-se para escrever uma expresso abreviada, como "Lda." ou "etc.". A
utilizao deste elemento pode ajudar bastante a leitura da pgina, seja ela feita por
humanos ou por programas de software como, por exemplo: robots de indexao de
motores de pesquisa, corretores ortogrficos, sistemas de traduo e web browsers.
123


Nenhuma
Dicas e Notas
Nota: Alguns browsers modernos (aqueles baseados no Mozilla e o Opera 9
cumprem este requisito) mostram a totalidade do texto contido no atributo title (o qual
deve fornecer a descrio completa) sempre que o ponteiro do mouse passa sobre o
elemento.
Exemplo
<abbr title="File Transfer Protocol">FTP<abbr>
Atributos Padro
id, class, title, style, dir, lang, xml:lang
Padro.
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove,
onmouseout, onkeypress, onkeydown, onkeyup
Eventos.
6. Elemento <acronym>
O elemento <acronym> define um termo formado pela justaposio de letras ou
de slabas de outras palavras. "UNICEF, "ONU" e "UNESCO" so exemplos de
acrnimos. A utilizao deste elemento ajuda os leitores da pgina a compreender
melhor o seu contedo.
Nenhuma
Dicas e Notas
Nota: Alguns browsers modernos mostram a totalidade do texto contido no
atributo title (o qual deve fornecer a descrio completa) sempre que o ponteiro do
mouse passa sobre o elemento.
Exemplo
<acronym title="World Wide Web">WWW<acronym>
Atributos Padro
124


Padro.
Eventos.
7. Elemento <address>
O elemento <address> usa-se para escrever um endereo. Normalmente ele
usado para escrever um endereo postal, mas tambm pode servir para escrever uma
assinatura (daquelas que se colocam no fim das mensagens de e-mail) ou notas
relativas autoria de documentos.
Nenhuma
Dicas e Notas
Nota: Normalmente os browsers escrevem os contedos deste elemento em
itlico e acrescentam uma quebra de linha antes e depois do elemento. As mudanas
de linha no texto que est dentro do prprio elemento tm de ser inseridas
manualmente.
Exemplo
<address>
Robin dos Bosques<br>
Clareira dos Cucos<br>
Floresta de Sherwood
</address>
Atributos Padro
Padro.
Eventos.
8. Elemento <applet>
Insere na pgina uma miniaplicao (applet) escrita em Java.
125


O elemento applet foi desaprovado em HTML 4.01.
O elemento applet no suportado nas DTDs para HTML 4.01 Strict e XHTML
1.0 Strict.
Dicas e Notas
Nota: Para incluir um applet numa pgina, se possvel, use o elemento object.
Atributos Obrigatrios
e F=Frameset.
Atributo
height
width
Valor
Descrio
Define a altura do applet
Define a largura do applet
DTD
TF
TF
Valor
Descrio
Define a forma como se alinha o
texto ao redor do applet
DTD
TF
Texto alternativo a ser apresentado

no caso de o browser no
conseguir executar o applet
O URL do arquivo jar (Java
Archive,) cab (Cabinet file), ou zip
que contm o cdigo do applet
Nome da classe a partir da qual o
applet deve arrancar
Indica o URL base para os
recursos usados pelo applet
Define o espao em branco que
separa horizontalmente o applet da
sua envolvente
Define um nome nico a dar ao
applet (usado para comunicar com
scripts e eventualmente com outros
applets)
Define o nome do recurso que
contm uma representao
serializada do applet
TF
pixels
pixels
Atributos Opcionais
Atributo
align
alt
left
right
top
bottom
middle
baseline
texttop
absmiddle
absbottom
texto
archive
URL
code
texto
codebase
URL
hspace
pixels
name
unique_name
object
name
TF
TF
TF
TF
TF
TF
126

title
texto
vspace
pixels
Informao adicional para ser

mostrada como dica
Define o espao em branco que
separa verticalmente o applet da
sua envolvente
TF
TF
Atributos Padro
Padro.
accesskey, tabindex, onclick, ondblclick, onmousedown, onmouseup,
onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup
Eventos.
9. Elemento <area>
Define uma regio "clicvel" sobre um mapa de imagem.
Este um elemento vazio. Em HTML ele no possui etiqueta de finalizao.
Em XHTML o elemento <area> deve ser fechado.
Dicas e Notas
Este elemento fica sempre dentro de um elemento <map>.
Nota: O atributo usemap colocado num elemento <img> pode referir-se tanto
ao atributo id como ao atributo name do elemento <map> (depende do browser
usado). Por isso devemos escrever o elemento <map> com os dois atributos (id e
name) os quais devem ter o mesmo valor.
Exemplo
<img src ="ext/rects.gif" usemap ="#rectangulos" border="0">
<map id ="rectangulos" name="rectangulos">
<area shape="rect" coords="0,0,56,120" href="javascript:alert('rea 1')"
alt="rea 1">
alt="rea 2">
</map>
e F=Frameset.
127

Atributo
alt
Valor
text
Descrio
Texto alternativo
DTD
STF
Atributos Opcionais
Atributo
coords
Valor
Descrio
se shape="rect" ento
Especifica as coordenadas que
coords="left,top,right,bottom" definem a rea "clicvel"
DTD
STF
se shape="circ" ento
coords="centerx,centery,
radius"
href
nohref
shape
target
se shape="poly" ento
coords="x1,y1,x2,y2,..,xn,yn"
URL
Especifica o valor do URL atribudo
rea
true
Se false exclui uma rea do mapa
false
de imagem
rect
Define a forma geomtrica da rea
rectangle
(retngulo, circulo ou polgono)
circ
circle
poly
polygon
_blank
Especifica a janela (ou a moldura)
_parent
onde se abre a ligao ao clicar.
_self
_top
x _blank - a ligao abre-se
numa nova janela
x _self - a ligao abre-se na
prpria janela que contm o
elemento <a>
x _parent - (s para ligaes
que esto numa moldura, ou
"frame") a ligao abre-se
no documento que contm a
moldura (que ter sido
criada atravs de um
<frame> ou de um <iframe>)
x _top - a ligao abre-se no
documento que ocupa a
posio mais elevada na
hierarquia (aquele que no
est dentro de nenhum
<frameset> nem num
<iframe>)
STF
STF
STF
TF
Atributos Padro
128


Padro.
onmouseout, onkeypress, onkeydown, onkeyup, onfocus, onblur
Eventos.
10. Elemento <base>

O elemento <base> especifica o URL base para todas as ligaes ("links")
relativas da pgina.
Em HTML o elemento <base> no tem etiqueta de finalizao.
Em XHTML o elemento <base> deve ser obrigatoriamente fechado.
Dicas e Notas
Nota: O elemento <base> deve ficar dentro do elemento <head>.
Exemplo
Suponhamos que o endereo absoluto para uma imagem :
<img src="http://www.w3.org/Icons/WWW/w3c_home">
Agora vamos inserir o elemento <base> com o atributo href a apontar para a
pasta que contm a imagem:
<head>
<base href="http://www.w3.org/Icons/WWW/">
</head>
Agora, se inserirmos o cone do W3C usando um URL relativo, o browser vai

procur-lo na pasta indicada pelo atributo href do elemento <base>. Assim, para
obtermos o cone basta escrever:
<img src="w3c_home">
e F=Frameset.
Atributo
href
Valor
URL
Descrio
Especifica o URL a usar como base para as
ligaes relativas da pgina
DTD
STF
129

Atributos Opcionais
Atributo
target
Valor
_blank
_parent
_self
_top
Descrio
Especifica a janela do browser onde so abertas
todas as ligaes da pgina. Este atributo pode
ser corrigido especificando um valor diferente no
atributo target do elemento <a>.
x
x
x
DTD
TF
_blank - cada ligao ser aberta numa

nova janela
_self - as ligaes so abertas na prpria
janela que contm o elemento <a>
_parent - (s para ligaes que esto
numa moldura, ou "frame") as ligaes
so abertas no documento que contm a
moldura (que foi inserida atravs de um
<frame> ou de um <iframe>)
_top - as ligaes so abertas no
documento que ocupa a posio mais
elevada na hierarquia (aquele que no
est dentro de nenhum <frameset> nem
num <iframe>)
Atributos Padro e Eventos

Nenhum
11. Elemento <basefont>

Define o tipo de letra base para a pgina.
O elemento <basefont> foi desaprovado HTML 4.01 e em XHTML.
O elemento basefont no suportado nas DTDs para HTML 4.01 Strict e
XHTML 1.0 Strict.
Atributos Opcionais
Atributo
color
face
size
Valor
rgb(x,x,x)
#xxxxxx
nome_de_cor
list_of_fontnames
Descrio
Especifica a cor do texto. Desaprovado. Use
CSS.
Especifica o tipo de letra a usar.

Desaprovado. Use CSS.
tamanho_do_texto Tamanho do texto por omisso para o
(um nmero entre1 elemento <font>. Desaprovado. Use CSS.
e 7)
DTD
TF
TF
TF
Atributos Padro
130


Padro.
Nenhum
12. Elemento <bdo>

O elemento <bdo> altera a direo do texto.
Nenhuma
Exemplo
<bdo dir="rtl">Aqui temos texto escrito da direita para a esquerda</bdo>
e F=Frameset.
Atributo
dir
Valor
ltr
rtl
Descrio
Estabelece a direo do texto ("left to right" ou
"right to left")
DTD
STF
Atributos Padro
Padro.
13. Elemento <blockquote>

O elemento <blockquote> usa-se para fazer uma citao extensa.
O elemento <blockquote> deve ser usado nos casos em que a citao contm
elementos de bloco (pargrafos) e no apenas texto simples.
Para que a sua pgina passe no teste de validao para XHTML Strict ou
HTML 4.01 Strict, o elemento <blockquote> deve conter dentro de si um elemento de
bloco, assim:
<blockquote>
<p>Aqui devia estar uma citao extensa</p>
</blockquote>
131

Dicas e Notas
Nota: O elemento <blockquote> acrescenta quebras de linha antes e depois do
texto com a citao.
Exemplo
Aqui temos uma citao extensa:
<blockquote>
Esta devia ser uma citao extensa e ocupar um ou mais pargrafos.
</blockquote>
Atributos Opcionais
e F=Frameset.
Atributo
cite
Valor
URL
Descrio
Se o texto de onde foi retirada a citao
estiver disponvel na Web deve indicar aqui o
seu URL
DTD
STF
Atributos Padro
Padro.
Eventos.
14. Elemento <body>

O elemento <body> define o corpo do documento. dentro deste elemento que
so colocados todos os contedos visveis na tela (texto, imagens, filmes, etc.).
Em HTML 4.01 todos os atributos de apresentao do elemento <body> foram
desaprovados. Use CSS.
Os atributos de apresentao do elemento <body> no so suportados nas
DTDs para HTML 4.01 Strict e XHTML 1.0 Strict.
Exemplo
<html>
<head><title>...</title>
</head>
<body>
132

Contedo do documento...
</body>
</html>
Atributos Opcionais
e F=Frameset.
Atributo
alink
Valor
rgb(x,x,x)
#xxxxxx
nomeDeCor
background file_name
bgcolor
link
text
vlink
rgb(x,x,x)
#xxxxxx
nomeDeCor
rgb(x,x,x)
#xxxxxx
nomeDeCor
rgb(x,x,x)
#xxxxxx
nomeDeCor
rgb(x,x,x)
#xxxxxx
nomeDeCor
Descrio
Especifica a cor com que devem ser
mostradas as ligaes ativas ("active links")
do documento. Desaprovado. Use CSS.
Uma imagem de fundo para o documento.
Especifica a cor de fundo para o documento.
DTD
TF

mostradas as ligaes do documento.
mostrados os textos do documento.
mostradas as ligaes j visitadas ("visited
links") no documento. Desaprovado. Use
CSS.
TF
TF
TF
TF
TF
Atributos Padro
Padro.
onload, onunload, onclick, ondblclick, onmousedown, onmouseup,
Eventos.
15. Elemento <br>

O elemento <br> insere uma mudana de linha forada
Em XHTML o elemento <br> deve ser fechado, escrevendo-se assim: </br>.
133

Dicas e Notas
Nota: Use o elemento <br> para forar linhas em branco, mas no para
separar pargrafos.
Exemplo
Aqui temos uma mudana de linha<br>forada
Atributos Padro
id, class, title, style
Padro.
16. Elemento <button>

Define um boto que pode ser pressionado. Dentro do boto podemos colocar
contedos, como texto e imagens. A diferena mais importante entre os botes criados
com este elemento e aqueles criados com o elemento <input> (com atributo
type="button") que estes ltimos so vazios, no podem ter contedo.
Nenhuma
Exemplo
<button>Clique Aqui!</button>
Atributos Opcionais
e F=Frameset.
Atributo
disabled
(desativado)
name
type
value
Valor
disabled
(desativado)
button_name
button
reset
submit
some_value
Descrio
Desativa o boto
DTD
STF
Define um nome nico que identifica o boto

Define o tipo de boto
STF
STF
Especifica um valor inicial para o boto. Esse

valor pode ser alterado atravs de um script.
STF
Atributos Padro
id, class, title, style, dir, lang, xml:lang, accesskey, tabindex
Padro.
134

onfocus, onblur, onclick, ondblclick, onmousedown, onmouseup, onmouseover,
Eventos.
17. Elemento <caption>

Este elemento define uma legenda para a tabela. O elemento <caption> deve
vir imediatamente a seguir ao elemento <table>. permitido definir mais do que uma
legenda para uma tabela. Normalmente a legenda colocada ao centro e por cima da
tabela.
Em HTML 4.01 o atributo align foi desaprovado no elemento <caption>. Use
CSS.
O atributo align no elemento <caption> no suportado nas DTDs para HTML
4.01 Strict e XHTML 1.0 Strict.
Exemplo
<table border="1">
<caption>Isto uma legenda</caption>
<tr>
<td>Clula 1</td>
<td>Clula 2</td>
</tr>
</table>
Atributos Opcionais
e F=Frameset.
Atributo
align
Valor
left
right
top
bottom
Descrio
Como alinhar texto dentro de um elemento
<caption>. Desaprovado. Use CSS.
DTD
TF
Atributos Padro
Padro.
135


Eventos.
18. Elemento <center>

Alinha o texto horizontalmente ao centro.
O elemento center foi desaprovado em HTML 4.01.
O elemento center no suportado nas DTDs para HTML 4.01 Strict e XHTML
1.0 Strict.
Atributos Padro
Padro.
Eventos.
19. Elemento <col>

Define atributos para mais do que uma coluna de uma tabela. Este elemento
deve ser colocado dentro de um elemento <colgroup>. Use-o sempre que quer
especificar diversos tipos de formatao diferentes para as colunas de uma mesma
tabela.
Em XHTML o elemento <col> deve ser fechado.
Dicas e Notas
Nota: O elemento <col> um elemento vazio que apenas contm atributos.
Para criar as colunas coloque etiquetas que definem elementos <td> dentro de um
elemento <tr>.
Exemplo
Este exemplo mostra um <colgroup> com trs colunas de larguras diferentes:
<table border="1">
<colgroup span="3">
<col width="10">
<col width="20">
136

<col width="40">
</colgroup>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>
Atributos Opcionais
e F=Frameset.
Atributo
align
char
Valor
right
left
center
justify
char
caractere
charoff
pixels
%
span
nmero
valign
top
middle
bottom
baseline
%
pixels
relative_length
width
Descrio
Define o alinhamento horizontal para o
contedo da clula
DTD
STF
Define o caractere a partir do qual se alinha o

texto (usar com align="char")
Define o desvio ("offset") do alinhamento
para o primeiro caractere a partir do qual se
faz o alinhamento
Define quantas colunas so afetadas pelo
elemento <col>
Define o alinhamento vertical para o
contedo da clula
STF
Define a largura da coluna
STF
STF
STF
STF
Nota: Sobrepe-se ao atributo width de

<colgroup>
Atributos Padro
Padro.
Eventos.
137

20. Elemento <colgroup>

Define grupos de colunas numa tabela. Com este elemento podemos agrupar
colunas e aplicar a mesma formatao a todas elas. Este elemento s pode ser usado
sob o um elemento <table>.
Nenhuma
Dicas e Notas
Nota: O elemento <colgroup> apenas define atributos para as colunas. Para
inserir as colunas coloque etiquetas para criar elementos <td> dentro de elementos
<tr>.
Exemplo
Este exemplo cria uma tabela com quatro colunas. As primeiras trs colunas
pertencem a um colgroup e a ltima pertence a outro colgroup (no definido):
<table border="1">
<colgroup span="3" style="color:#0000FF;">
</colgroup>
<tr>
<td>1<td>
<td>2<td>
<td>3<td>
<td>4<td>
</tr>
<table>
Atributos Opcionais
e F=Frameset.
Atributo
align
char
Valor
right
left
center
justify
char
caractere
charoff
pixels
%
span
nmero
valign
top
middle
bottom
baseline
%
width
Descrio
Define o alinhamento horizontal para o
contedo das clulas do grupo
DTD
STF
Define o caractere a partir do qual se alinha

o texto (usar com align="char")
faz o alinhamento
Define quantas colunas so afetadas pelo
elemento <colgroup>
Define o alinhamento vertical para o
contedo das clulas do grupo
STF
Define a largura das colunas do grupo
STF
STF
STF
STF
138

pixels
relative_length
Nota: O valor do atributo width pode ser

alterado por outro valor especificado em
<col>
Atributos Padro
Padro.
Eventos.
21. Elemento <dd>

O elemento <dd> serve para apresentar descries de termos em listas de
definies.
Nenhuma
Exemplo
<dl>
<dt>Rum</dt>
<dt>Bagaceira</dt>
<dd>Bebida portuguesa com alto teor alcolico e extraordinrios poderes
medicinais</dd>
</dl>
Atributos Padro
Padro.
Eventos.
139

22. Elemento <del>

Define o texto que foi apagado no documento.
Nenhuma
Dicas e Notas
Dica: Use este elemento em conjunto com o elemento <ins> para descrever as
atualizaes e as modificaes feitas no documento.
Exemplo
Um quarteiro so <del>12<del> 25 unidades
Atributos Opcionais
e F=Frameset.
Atributo
cite
URL
Valor
datetime
YYYYMMDD
Descrio
Define o URL de outro documento que
explica as razes pelas quais o texto foi
apagado ou inserido
Define a data e a hora em que o texto foi
apagado
DTD
STF
STF
Atributos Padro
Padro.
Eventos.
23. Elemento <dir>

O elemento <dir> cria uma lista de diretrio.
O elemento dir foi desaprovado em HTML 4.01.
O elemento dir no suportado nas DTDs para HTML 4.01 Strict e XHTML 1.0
Strict.
140

Dicas e Notas
Dica: Use estilos CSS para especificar melhor o tipo de lista que quer.
Exemplo
<dir>
<li>html</li>
<li>xhtml</li>
</dir>
Atributos Opcionais
e F=Frameset.
Atributo
compact
Valor
compact_rendering
Descrio
DTD
TF
Atributos Padro
Padro.
onclick, ondblclick, onfocus, onblur, onmousedown, onmouseup, onmouseover,
Eventos.
24. Elemento <div>

O elemento <div> define uma seo ou uma diviso no documento.
Em HTML 4.01 o atributo align foi desaprovado no elemento <div>. Use CSS.
O atributo align no elemento <div> no suportado nas DTDs para HTML 4.01
Strict e XHTML 1.0 Strict.
Dicas e Notas
Nota: O elemento <div> um elemento de bloco ("block level element",) por
isso os browsers inserem uma quebra de linha antes e depois deste elemento.
Dica: Use o elemento <div> para agrupar outros elementos de bloco e formatlos com estilos CSS.
141

Exemplo
Isto algum texto
<div style="color: #0000FF;">
Aqui temos um cabealho de seo dentro de um elemento div
<p>Aqui temos um pargrafo dentro de um elemento div</p>
</div>
Atributos Opcionais
e F=Frameset.
Atributo
align
Valor
left
right
top
bottom
Descrio
Como alinhar texto dentro de um <div>.
DTD
TF
Atributos Padro
Padro.
Eventos.
25. Elemento <dl>

O elemento <dl> cria lista de definies.
Nenhuma
Exemplo
<dl>
<dt>Rum</dt>
<dt>Bagaceira</dt>
<dd>Bebida portuguesa com alto teor alcolico</dd>
</dl>
Atributos Padro
Padro.
142

Eventos.
26. Elemento <dt>

O elemento <dt> contm a definio de um termo numa lista de definies.
Nenhuma
Exemplo
<dl>
<dt>Rum</dt>
<dt>Bagaceira</dt>
<dd>Bebida portuguesa com alto teor alcolico</dd>
</dl>
Atributos Padro
Padro.
Eventos.
27. Elemento <fieldset>

O elemento <fieldset> agrupa elementos num formulrio e pode desenhar uma
linha ao redor do grupo.
Nenhuma
Exemplo
<fieldset>
Altura <input type="text" size="6">
Peso <input type="text" size="6">
</fieldset>
143

Atributos Padro
Padro.
accesskey, onclick, ondblclick, onmousedown, onmouseup, onmouseover,
Eventos.
28. Elemento <font>

O elemento <font> especifica o tipo de letra, o tamanho e a cor.
O elemento font foi desaprovado em HTML 4.01.
O elemento font no suportado nas DTDs para HTML 4.01 Strict e XHTML
1.0 Strict.
Dicas e Notas
Dica: Use estilos CSS para formatar o texto.
Exemplo
<font size="3" color="red">Isto algum texto</font>
<font size="1" color="blue">Isto algum texto</font>
<font face="arial" color="red">Isto algum texto</font>
Atributos Opcionais
e F=Frameset.
Atributo
color
face
size
Valor
rgb(x,x,x)
#xxxxxx
nomeDeCor
list_of_fontnames
Um nmero entre 1
e 7.
Se o elemento
<basefont> definir
um valor por
omisso este
nmero poder
Descrio
Define a cor do texto. Desaprovado. Use
CSS.
DTD
TF
Define o tipo de letra a usar. Desaprovado.

Use CSS.
Define o tamanho das letras. Desaprovado.
Use CSS.
TF
TF
144

situar-se entre -6 e
6
Atributos Padro
Padro.
Nenhum
29. Elementos <tt>, <i>, <b>, <big> e <small>

Estes elementos servem todos para controlar o tipo de letra com que o texto
escrito. Apesar de no terem sido desaprovados, note que possvel obter resultados
melhores usando estilos CSS.
<tt>
<i>
<b>
<big>
<small>
Apresenta texto parecido com o de uma mquina de escrever antiga

("teletype text")
Apresenta texto itlico
Apresenta texto carregado (negrito)
Texto com letra maior
Texto com letra menor

Nenhuma
Exemplo
<tt>"Teletype text"</tt><br>
<i>Texto itlico</i><br>
<b>Texto em negrito</b><br>
<big>Texto maior</big><br>
<small>Texto menor</small><br>
Atributos Padro
id, class, title, style, dir, lang
Padro.
onmouseout, onkeypress, onkeydown onkeyup
Eventos.
145

30. Elemento <form>

O elemento <form> cria um formulrio sobre a pgina para recolher dados
informados pelo usurio. O formulrio pode conter campos de texto, caixas de
validao, "radiobuttons" e outros elementos para introduzir dados. Os dados
recolhidos num formulrio so enviados para o servidor para processamento.
Nenhuma
Exemplo
<form action="processar.php" method="get">
Primeiro nome: <input type="text" name="pnome" value="Robin"><br>
ltimo nome: <input type="text" name="unome" value="dos Bosques"><br>
</form>
<p>
Ao clicar no boto "Submeter" (ou "Submit") o contedo do formulrio ser
enviado para a pgina processar.php para tratamento.
</p>
e F=Frameset.
Atributo
action
Valor
URL
Descrio
URL do recurso para onde vo ser enviados
os dados quando for pressionado o boto de
submisso.
DTD
STF
Descrio
Uma lista com os tipos de contedo
(separados por espaos) que o servidor
consegue processar corretamente.
Uma lista com os conjuntos de caracteres
(separados por espaos) que podem ser
utilizados para representar os dados do
formulrio. O valor por omisso "unknown".
O tipo MIME (Multipurpose Internet Mail
Extensions) usado para codificar o contedo
do formulrio.
DTD
STF
Atributos Opcionais
Atributo
accept
Valor
lista com tipos
de contedo
acceptcharset
charset_list
enctype
mimetype
method
get
post
Se o formulrio possuir campo para upload

de arquivos, especifique o atributo
enctype="multipart/form-data" para que os
arquivos sejam enviados.
Mtodo usado para enviar os dados para o
servidor. O valor por omisso "get".
STF
STF
STF
146

method="get": Este mtodo envia o

contedo do formulrio incorporado no URL
com que faz a chamada ao servidor. O
aspecto do URL algo parecido com isto:
URL?var1=valor1&var2=valor2.
Nota: Se o contedo do formulrio tiver mais
de 100 caracteres deve usar method="post".
name
form_name
target
_blank
_self
_parent
_top
method="post": Este mtodo envia os

dados do formulrio separadamente. Para
isso gerado um segundo pedido HTTP (com
o mtodo get o envio mais rpido pois faz
tudo numa nica operao).
Define um nome nico que identifica o
TF
formulrio.
Especifica a janela (ou a moldura) onde se
TF
abre a ligao ao clicar.
x
x
x
_blank - a ligao abre-se numa nova

janela
_self - a ligao abre-se na prpria
janela que contm o elemento
numa moldura, ou "frame") a ligao
abre-se no documento que contm a
moldura (que ter sido criada atravs
de um <frame> ou de um <iframe>)
_top - a ligao abre-se no documento
que ocupa a posio mais elevada na
hierarquia (aquele que no est
dentro de nenhum <frameset> nem
num <iframe>)
Atributos Padro
Padro.
onsubmit, onreset, onclick, ondblclick, onmousedown, onmouseup,
Eventos.
31. Elemento <frame>

Define uma subjanela ou moldura ("frame").
147


Em XHTML o elemento <frame> deve ser fechado.
Dicas e Notas
Nota: Se utilizar molduras e estiver interessado em que as suas pginas
passem no teste de validao do W3C deve usar a DTD do HTML Frameset.
Nota: No use o elemento <body> numa pgina que contm molduras
("frames"). Se o fizer as molduras no sero apresentadas.
Exemplo
<html>
<frameset cols="140, *">
<frame src ="nav_molduras.html">
<frame src ="moldura0.html" name="principal">
</frameset>
</html>
Atributos Opcionais
e F=Frameset.
Atributo
longdesc
Valor
URL
marginheight
pixels
marginwidth
pixels
name
frame_name
noresize
noresize
scrolling
yes
no
auto
src
URL
Descrio
URL de uma pgina que contm uma
descrio extensa do contedo da moldura.
til para ajudar os usurios de browsers que
no suportam molduras.
Define as espessuras das margens superior e
inferior da moldura
Define as espessuras das margens esquerda
e direita da moldura
Define um nome nico a dar moldura objeto
(usa-se para comunicar com os scripts, que
podem estar em outra moldura)
Quando utilizado (o valor "noresize" o nico
permitido), o tamanho da moldura deixa de
poder ser alterado.
Determina se existem ou no barras de
deslocamento ("scroll bars".) O valor "auto"
significa automtico (o browser decide se
deve ou no mostrar "scroll bars").
O URL da pgina que vai ser apresentada na
moldura
DTD
F
F
F
F
Atributos Padro
S so permitidos em documentos que usam a DTD XHTML 1.0 Frameset!
148


Padro.
32. Elemento <frameset>

O elemento <frameset> define um conjunto de molduras ("frames"). As
molduras so usadas para dividir a janela principal do browser em vrias subjanelas e
apresentar uma pgina diferente em cada uma delas.
Nenhuma
Dicas e Notas
passem no teste de validao deve usar a DTD do HTML Frameset.
Nota: No use o elemento <body> numa pgina que contm molduras
("frames"). Se o fizer as molduras no sero apresentadas.
Exemplo
<html>
</frameset>
</html>
Atributos Opcionais
e F=Frameset.
Atributo
border
frameborder
cols
rows
Valor
nmero
0
1
pixels
%
*
pixels
%
*
Descrio
Especifica a largura da borda do frame.
Indica se deve ser desenhada ou no uma
linha ao redor da moldura.
Define o nmero de colunas em que a janela
dividida e os seus tamanhos
DTD
F
F
Define o nmero de linhas em que a janela

dividida e os seus tamanhos
Atributos Padro
S so permitidos em documentos que usam a DTD XHTML 1.0 Frameset!
149


Padro.
Nenhum
33. Elemento <head>

O elemento <head> contm diversas informaes teis. O seu contedo no
deve ser apresentado graficamente pelo browser. Este elemento pode conter os
seguintes elementos: <base>, <link>, <meta>, <script>, <style> e <title>.
Nenhuma
Dicas e Notas
D sempre ttulos aos documentos!
Exemplo
<html>
<head>
<title>Ttulo do documento</title>
</head>
<body>
...
...
...
</body>
</html>
Atributos Opcionais
e F=Frameset.
Atributo
profile
Valor
URL
Descrio
Uma lista de URLs separadas por espaos
que contm meta-informao acerca do
contedo da pgina.
DTD
STF
Atributos Padro
dir, lang, xml:lang
Padro.
34. Elementos <h1> ... <h6>

Os elementos <h1> ... <h6> definem cabealhos no corpo do documento. <h1>
define o cabealho maior e <h6> define o cabealho menor.
150


Em HTML 4.01 o atributo align foi desaprovado nos elementos <h1> ... <h6>.
Use CSS.
O atributo align nos elementos <h1> ... <h6> no suportado nas DTDs para
HTML 4.01 Strict e XHTML 1.0 Strict.
Atributos Opcionais
e F=Frameset.
Atributo
align
Valor
left
center
right
justify
Descrio
Especifica o alinhamento do texto no
cabealho. Desaprovado. Use CSS.
DTD
TF
Atributos Padro
Padro.
Eventos.
35. Elemento <hr>

O elemento <hr> insere uma linha horizontal no documento
Em XHTML o elemento <hr> deve ser fechado, assim: </hr>.
Em HTML 4.01 todos os atributos de apresentao do elemento <hr> foram
Os atributos de apresentao do elemento <hr> no so suportados nas DTDs
para HTML 4.01 Strict e XHTML 1.0 Strict.
Exemplo
Isto algum texto <hr> Isto mais
Atributos Opcionais
151


e F=Frameset.
Atributo
align
noshade
size
Valor
center
left
right
true
false
pixels
%
pixels
%
width
Descrio
Especifica o alinhamento da linha horizontal.
DTD
TF
Quando contm o valor true, a linha ter uma

nica cor. Com false a linha ter duas cores
tentando dar uma impresso de relevo.
Especifica a espessura da linha horizontal.
Especifica a largura da linha horizontal.
TF
TF
TF
Atributos Padro
Padro.
Eventos.
36. Elemento <html>

Este elemento d ao browser a indicao de incio de um novo documento
HTML. dentro dele que se colocam todas as definies da pgina.
O atributo xmlns obrigatrio em XHTML mas no em HTML.
Exemplo
<html>
<head>
<title> ... </title>
</head>
<body>
...
...
...
</body>
</html>
152

Atributos Obrigatrios (apenas no XHTML)

e F=Frameset.
Atributo
xmlns
Valor
Descrio
http://www.w3.org/1999/xhtml Atributo que define o "espao de
nomes" XML utilizado pela
linguagem em que o documento
est escrito (neste caso HTML).
Em HTML este atributo pode ser
omitido, mas em XHTML ele
obrigatrio.
DTD
STF
Atributos Opcionais
e F=Frameset.
Atributo
lang
Valor
cdigo de
idioma
Descrio
Especifica o idioma principal usado para
escrever os textos da pgina. Para textos
escritos em lngua portuguesa use pt. Se
quiser ser mais especfico use pt-PT para a
verso usada em Portugal e pt-BR para a
verso do Brasil.
DTD
TF
Atributos Padro
dir, lang, xml:lang
Padro.
37. Elemento <iframe>

O elemento iframe insere uma subjanela, ou moldura, dentro de uma pgina da
Web ("inline frame"). A nova moldura contm a sua prpria pgina e assemelha-se a
uma moldura ("frame") criada com os elementos <frame> e <frameset>, mas est
dentro de uma pgina normal (no meio dos seus contedos) em vez de estar num
frameset.
Mesmo que no tenha
obrigatoriamente de ser fechado.
contedo,
em
XHTML
este
elemento
tem
Atributos Opcionais
e F=Frameset.
Atributo
align
Valor
left
Descrio
Especifica o modo como a moldura (ou
DTD
TF
153

longdesc
right
top
middle
bottom
nmero
1
0
pixels
%
URL
marginheight
pixels
marginwidth
pixels
name
frame_name
scrolling
yes
no
auto
URL
border
frameborder
height
src
width
pixels
%
subjanela) alinhada na pgina que a

contm.
Especifica a largura da borda do frame.

Indica se desenhada ou no uma linha ao
redor da moldura.
Define a altura da moldura
TF
TF

descrio extensa do contedo da moldura
Define as espessuras das margens superior e
inferior da moldura
Define as espessuras das margens esquerda
e direita da moldura
Define um nome nico a dar a moldura
(usado para comunicar com os scripts, que
podem estar em outras molduras)
Especifica como so apresentadas as barras
de deslocamento ("scroll bars")
TF
O URL da pgina que vai ser apresentada na

moldura
Define a largura da moldura
TF
TF
TF
TF
TF
TF
TF
Atributos Padro
Padro.
38. Elemento <img>

O elemento <img> insere uma imagem no documento.
Em XHTML o elemento <img> deve ser fechado.
Em HTML 4.01 os atributos align, border, hspace e vspace foram
desaprovados no elemento <img>. Use CSS.
Os atributos align, border, hspace e vspace do elemento <img> no so
suportados nas DTDs para HTML 4.01 Strict e XHTML 1.0 Strict.
Exemplo
<img src="ext/magoo.gif" alt="O Senhor Magoo">
154

e F=Frameset.
Atributo
alt
src
Valor
descrio
URL
Descrio
Define o texto de descrio da imagem
Especifica o endereo da imagem a ser
exibida
DTD
STF
STF
Descrio
Como alinhar a imagem relativamente ao
texto envolvente. Desaprovado. Use CSS.
DTD
TF
Define a linha de fonteira desenhada ao redor

da imagem. Desaprovado. Use CSS.
Define a altura da imagem
TF
Especifica a quantidade de espao em

branco a inserir esquerda e a direita da
imagem. Desaprovado. Use CSS.
Indica que a imagem tem um mapa definido
sobre a sua rea.
descrio extensa da imagem.
Define a imagem como tendo um mapa
definido sobre si. Para perceber a utilidade
disto consulte as explicaes dos elementos
<map> e <area>.
Especifica a quantidade de espao em
branco a inserir acima e abaixo da imagem.
Especifica a largura da imagem
TF
Atributos Opcionais
Atributo
align
border
height
Valor
top
bottom
middle
left
right
pixels
hspace
pixels
%
pixels
ismap
URL
longdesc
URL
usemap
URL
vspace
pixels
width
pixels
%
STF
STF
STF
STF
TF
STF
Atributos Padro
id, class, title, style, lang, xml:lang
Padro.
Eventos.
155

39. Elemento <input>

O elemento <input> contm uma rea em que o usurio pode inserir dados e
texto.
Em XHTML o elemento <input> deve ser fechado.
Dicas e Notas
Nota: Este um elemento vazio. Ele possui apenas atributos.
Exemplo
<form action="processar.html" method="get">
Primeiro nome: <input type="text" name="pnome" value="Robin"><br>
ltimo nome: <input type="text" name="unome" value="dos Bosques"><br>
</form>
<p>
Ao clicar no boto "Submeter" (ou "Submit") o contedo do formulrio ser
enviado para a pgina processar.php para tratamento.
</p>
Atributos Opcionais
e F=Frameset.
Atributo
accept
align
alt
checked
Valor
Descrio
list_of_mime_types Uma lista de tipos MIME ("Multipurpose
Internet Mail Extensions") separados por
espaos contendo o tipo de transferencia a
usar para enviar os dados para o servidor.
left
right
top
texttop
middle
absmiddle
baseline
bottom
absbottom
text
checked
Nota: S deve usar quando se tem

type="file"
Define o alinhamento do texto que vem a
seguir imagem.
DTD
STF
TF
Nota: S deve usar-se quando se tem

type="image"
Define texto alternativo.

type="image"
Indica que o elemento <input> deve ser
ativado no momento em que carregado
STF
STF
156

pelo browser
disabled
disabled
(desativado) (desativado)
maxlength
name
readonly
(apenas de
leitura)
size
src
type
value
nmero
Nota: Usa-se apenas com type="checkbox"

e type="radio"
Desativa o elemento <input> no momento
em que carregado. O usurio no pode
escrever nada nele ou selecion-lo.
Note: No pode ser usado quando
type="hidden"
Define o nmero mximo de caracteres que
podem ser inseridos no campo de texto.
STF
STF
field_name
Nota: No pode ser usado com

type="hidden"
Define um nome nico para o elemento.
readonly (apenas
de leitura)
Nota: este atributo obrigatrio quando se

tem type="button", type="checkbox",
type="file", type="hidden", type="image",
type="password", type="text", e
type="radio"
Indica que o valor contido no campo no
pode ser alterado.
number_of_char

type="text"
Define o tamanho do elemento.
STF
URL
Note: No pode ser usado com

type="hidden"
Indica o URL da imagem a mostrar.
STF
button
checkbox
file
hidden
image
password
radio
reset
submit
text
value

type="image"
Indica de que tipo o elemento <input>. Se
omitido fica do tipo "text".
STF
STF
STF
Nota: Este atributo no obrigatrio, mas

se deseja garantir o bom funcionamento
das suas aplicaes ento deve us-lo. Ao
omiti-lo corre o srio risco de browsers
diferentes escolherem tipos diferentes.
Quando usado em botes normais, botes
de "reset" e botes de submisso: define o
texto que aparece escrito no boto.
STF
Quando usado num boto com uma

imagem: define o valor do boto quando
157

lido por um script.

Para caixas de validao ("checkbox") e
"radio buttons": quando ativo define o valor
do elemento <input>. Este valor enviado
para processamento juntamente com os
valores dos restantes elementos do
formulrio.
Para campos de tipo oculto (type="hidden"),
de tipo password (type="password") e de
tipo texto (type="text"): define o valor que o
elemento possui por omisso.
Nota: este atributo obrigatrio quando se
tem type="checkbox" e type="radio"
Atributos Padro
Padro.
tabindex, accesskey, onfocus, onblur, onselect, onchange, onclick, ondblclick,
onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress,
onkeydown, onkeyup
Eventos.
40. Elemento <ins>

Texto que foi inserido.
Nenhuma
Dicas e Notas
Dica: Use este elemento em conjunto com o elemento <del> para descrever as
atualizaes e as modificaes feitas no documento.
Exemplo
Um quarteiro so <del>12</del> <ins>25</ins> unidades.
Atributos Opcionais
e F=Frameset.
158

Atributo
cite
Valor
URL
datetime
YYYYMMDD
Descrio
Define o URL de outro documento que
explica as razes pelas quais o texto foi
inserido.
Define a data e a hora em que o texto foi
inserido (formato Ano_Ms_Dia)
DTD
STF
STF
Atributos Padro
Padro.
Eventos.
41. Elemento <label>

D um nome a um controle na pgina. Ao clicarmos no texto contido no
elemento <label> o controle a ele associado deve ser focado.
Nenhuma
Dicas e Notas
Nota: O atributo "for" estabelece uma ligao entre o elemento <label> e um
outro elemento existente na pgina. D ao atributo "for" um valor igual ao valor do
atributo "id" do elemento que pretende controlar.
Exemplo
<label for="unome">ltimo Nome:<label>
<input type="text" name="unome" id="unome">
Atributos Opcionais
e F=Frameset.
Atributo
for
Valor
Descrio
id_of_another_field Define a qual elemento do formulrio est
ligado o elemento <label>. O valor deste
atributo "for" deve ser igual ao valor do
atributo "id" do elemento a ser controlado.
DTD
STF
159

Nota: Se este atributo no for especificado,

o elemento <label> fica associado ao seu
prprio contedo.
Atributos Padro
Padro.
accesskey, onfocus, onblur, onclick, ondblclick, onmousedown, onmouseup,
onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.
Eventos.
42. Elemento <legend>

O elemento <legend> define o texto descritivo para um elemento <fieldset>.
Nenhuma
Exemplo
<fieldset>
<legend>Informao financeira:</legend>
DJIA <input type="text" size="6">
NASDAQ <input type="text" size="6">
</fieldset>
Atributos Opcionais
e F=Frameset.
Atributo
align
Valor
left
center
right
Descrio
Define o alinhamento do contedo do
<fieldset>
DTD
STF
Atributos Padro
Padro.
160

accesskey, onclick, ondblclick, onmousedown, onmouseup, onmouseover,
Eventos.
43. Elemento <li>

O elemento <li> define um item numa lista com vrios itens. Este elemento
usado dentro de listas ordenadas (<ol>) e listas no ordenadas (<ul>).
Em HTML 4.01 os atributos type e value foram desaprovados no elemento <li>.
Use CSS.
Os atributos type e value no elemento <li> no so suportados nas DTDs para
HTML 4.01 Strict e XHTML 1.0 Strict.
Dicas e Notas
Exemplos
<ol>
<li>Rum</li>
<li>Bagaceira</li>
</ol>
<ul>
<li>Rum</li>
<li>Bagaceira</li>
</ul>
Atributos Opcionais
e F=Frameset.
Atributo
type
value
Valor
Descrio
Especifica o tipo de lista.
A
a
I
i
1
disc
square
circle
nmero_de_ordem_do_item Desaprovado. Use CSS.
DTD
TF
TF
161

Atributos Padro
Padro.
Eventos.
44. Elemento <link>

Este elemento define uma relao entre dois documentos e liga-os um ao
outro.
Em HTML o elemento <link> no tem etiqueta de finalizao.
Em XHTML o elemento <link> deve ser obrigatoriamente fechado.
Dicas e Notas
Nota: Este um elemento vazio. Ele possui apenas atributos.
Nota: Este elemento s pode ser usado na seo <head>, mas pode aparecer
mais de uma vez.
Exemplo
<head>
<link rel="stylesheet" type="text/css" href="meus_estilos.css">
<head>
Atributos Opcionais
e F=Frameset.
Atributo
charset
Valor
charset
href
URL
hreflang
language_code
media
all
Descrio
Especifica o conjunto de caracteres utilizado
para escrever a pgina para onde aponta a
ligao (o valor por omisso ISO-8859-1)
URL do recurso para onde aponta o elemento
<link>
Especifica o cdigo de lngua correspondente
ao idioma usado para escrever os textos da
pgina para a qual aponta o URL
Especifica em que tipo de dispositivo a
DTD
STF
STF
STF
STF
162

rel
rev
target
braille
print
projection
screen
speech
alternate
appendix
bookmark
chapter
contents
copyright
glossary
help
home
index
next
prev
section
start
stylesheet
subsection
alternate
appendix
bookmark
chapter
contents
copyright
glossary
help
home
index
next
prev
section
start
stylesheet
subsection
_blank
_self
_top
_parent
pgina deve ser apresentada.
Especifica a relao existente entre o

documento atual e o documento para o qual
aponta a ligao
STF
Especifica a relao existente entre o

documento para o qual aponta a ligao e o
documento atual (repare que no se trata da
mesma coisa que representa pelo atributo
anterior porque a direo da relao est
trocada).
STF
Especifica a janela (ou a moldura) qual a

ligao ser feita.
TF
x
x
x
_blank - a ligao abre-se numa nova

janela
_self - a ligao abre-se na prpria
janela que contm o elemento.
numa moldura, ou "frame") a ligao
abre-se no documento que contm a
moldura (que ter sido criada atravs
de um <frame> ou de um <iframe>)
_top - a ligao abre-se no documento
que ocupa a posio mais elevada na
hierarquia (aquele que no est
dentro de nenhum <frameset> nem
163

num <iframe>)
type
O MIME_type
pode ser, por
exemplo:
text/css
text/javascript
image/gif
Especifica o tipo MIME (Multipurpose Internet

Mail Extensions) do recurso para o qual
aponta o URL
STF
Atributos Padro
Padro.
Eventos.
45. Elemento <map>

Define um mapa com regies "clicveis" sobre uma imagem.
Nenhuma
Dicas e Notas
Nota: O elemento <area> deve ser sempre colocado dentro de um elemento
<map>. o elemento <map> que divide a imagem em regies.
Nota: O atributo usemap colocado num elemento <img> pode referir-se tanto
ao atributo id como ao atributo name do elemento <map> (depende do browser
usado.) Por isso devemos escrever o elemento <map> com os dois atributos (id e
name) os quais devem ter o mesmo valor.
Exemplo
<p>Clique sobre uma das reas:</p>
<img src ="rects.gif" usemap ="#rectangulos1" border="0">
<map id ="rectangulos1" name="rectangulos1">
alt="rea 1">
<area shape="rect" coords="56,0,248,42" href="javascript:alert('rea
2')" alt="rea 2">
</map>
164

e F=Frameset.
Atributo
id
Valor
unique_name
Descrio
Define um nome nico que identifica o mapa
DTD
STF
Descrio
Define um nome nico para o elemento
<map> (para manter a compatibilidade com os
browsers antigos).
DTD
STF
Atributos Opcionais
Atributo
name
Valor
unique_name
Atributos Padro
class, title, style, dir, lang, xml:lang
Padro.
tabindex, accesskey, onclick, ondblclick, onmousedown, onmouseup,
onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup,
onfocus, onblur
Eventos.
46. Elemento <menu>

O elemento <menu> define uma lista de menu.
O elemento menu foi desaprovado em HTML 4.01.
O elemento menu no suportado nas DTDs para HTML 4.01 Strict e XHTML
1.0 Strict.
Dicas e Notas
Exemplo
<menu>
<li>html</li>
<li>xhtml</li>
</menu>
165

Atributos Opcionais
e F=Frameset.
Atributo
compact
Valor
compact_rendering
Descrio
DTD
TF
Atributos Padro
Padro.
onclick, ondblclick, onfocus, onblur, onmousedown, onmouseup, onmouseover,
Eventos.
47. Elemento <meta>

O elemento <meta> fornece meta-informao, ou seja: d informao que
descreve a informao que est contida no corpo do documento. A informao
fornecida consiste principalmente em descries do contedo e palavras-chave.
Em HTML o elemento <meta> no tem etiqueta de finalizao.
Em XHTML o elemento <meta> deve ser fechado.
Dicas e Notas
Nota: O elemento <meta> deve ficar dentro do elemento <head>.
Nota: Os meta-dados so sempre fornecidos em pares nome/valor.
Exemplos
<meta name="keywords" content="HTML, DHTML, CSS, XML, XHTML, JavaScript, XML,
SVG">
<meta name="description" content="Tutoriais de HTML, CSS, XML, XHTML, SVG e
Flash">
<meta name="revised" content="Autor, 28/05/03">
<meta http-equiv="refresh" content="15">
166

e F=Frameset.
Atributo
content
Valor
algum_texto
Descrio
Define a meta-informao que deve ser
associada aos atributos http-equiv ou name
DTD
STF
Descrio
Liga o atributo content a um cabealho de
HTTP
DTD
STF
Liga o atributo content a um nome
STF
Define o formato a usar para interpretar o

valor contido no atributo content
STF
Atributos Opcionais
Atributo
http-equiv
Valor
content-type
expires
refresh
set-cookie
author
description
keywords
generator
revised
outros
algum_texto
name
scheme
Atributos Padro
dir, lang, xml:lang
Padro.
48. Elemento <noframes>

O elemento <noframes> deve conter texto que s ser mostrado no caso de o
browser no ser capaz de mostrar documentos contidos em molduras ("frames"). Este
elemento deve ficar dentro de um elemento <frameset>.
Nenhuma
Dicas e Notas
Nota: Quando o browser suporta molduras o texto contido no elemento
<noframes> no mostrado.
passem no teste de validao do W3C deve usar a DTD do HTML Frameset.
Nota: O elemento <noframes> s permitido se usar a DTD do HTML
Frameset.
167

Exemplo
<html>
<noframes>
<body>O seu browser no suporta molduras!</body>
</noframes>
</frameset>
</html>
Atributos Padro
Padro.
Nenhum
49. Elemento <noscript>

O elemento <noscript> usa-se para definir o texto alternativo que ser
mostrado quando o script no pode ser executado
Este elemento tambm usado pelos browsers que reconhecendo o elemento
<script> no suportam a verso ou a linguagem usada num caso especfico.
Nenhuma
Dicas e Notas
Nota: Quando o browser suporta scripts escritos na verso e linguagem
indicadas o texto contido no elemento <noscript> no ser mostrado.
Nota: Os browsers (muito, muito antigos) que no reconhecem o elemento
<script> apresentam o seu contedo como se este fosse texto normal. Para evitar que
isso acontea deve colocar todo o contedo do script dentro de um comentrio. Deste
modo os browsers que suportam scripts executaro o script corretamente, mas os
outros iro ignor-lo.
Exemplos
<body>
...
...
<!-document.write("Ol Mundo!")
//-->
</script>
<noscript>O seu browser no reconhece JavaScript!</noscript>
...
168

...
</body>
Atributos Padro
Padro.
Nenhum
50. Elemento <object>

Insere um objeto externo no documento. Este elemento pode ser usado para
inserir filmes em Flash, applets (miniaplicaes) escritos em Java e diversos recursos
multimedia que requerem um objeto especial para poderem ser utilizados. O elemento
<object> permite especificar parmetros para controlar a execuo do objeto.
Nenhuma
Dicas e Notas
Nota: Dependendo do tipo de recurso que utiliza, o elemento <object> pode ser
colocado tanto no cabealho (<head>) como no corpo do documento. Quando
colocado no corpo do documento podemos escrever texto alternativo entre <object> e
</object> com um aviso para ser mostrado pelos browsers que no conseguem
executar o objeto.
Exemplos
<html>
<head>
</head>
<body style="background-color: #003399">
<object type="application/x-shockwave-flash" data="logocubo.swf" width="26"
height="36">
<param name="movie" value="logocubo.swf">
</object>
</body>
</html>
Atributos Opcionais
e F=Frameset.
Atributo
align
Valor
left
right
top
bottom
Descrio
Define o alinhamento do texto ao redor do
objeto
DTD
TF
169

archive
URL
border
pixels
classid
class ID
codebase
URL
codetype
MIME type
data
URL
declare
declare
height
hspace
pixels
pixels
name
unique_name
standby
text
type
MIME_type
usemap
URL
vspace
pixels
width
pixels
Uma lista de URLs separados por espaos.

Cada URL aponta para um arquivo que
contm recursos utilizveis pelo objeto.
Define a linha de fonteira a desenhar ao redor
do objeto
Identificao de classe para o objeto de
acordo com a definio contida no Registo do
Windows ou no URL onde o objeto pode ser
obtido.
Indica o local (URL) onde pode ser obtido o
cdigo que define o objeto
Define o tipo MIME ("Multipurpose Internet
Mail Extensions") do cdigo referido no
atributo classid
Define o URL onde se encontram os dados
para o objeto
Indica que o objeto deve ser declarado, mas
a sua execuo s ter incio mais tarde,
quando ele for efetivamente necessrio.
Define a altura do objeto
Define o espao em branco que separa
horizontalmente o objeto da sua envolvente
Define um nome nico a dar ao objeto (usado
para comunicar com scripts e eventualmente
com outros objetos)
Texto a mostrar enquanto se espera que o
objeto acabe de carregar
Define o tipo MIME ("Multipurpose Internet
Mail Extensions") dos dados especificados no
atributo data
Especifica o URL de um mapa de imagem
para ser usado com o objeto
Define o espao em branco que separa
verticalmente o objeto da sua envolvente
Define a largura do objeto
STF
TF
STF
STF
STF
STF
STF
STF
TF
STF
STF
STF
STF
TF
STF
Atributos Padro
Padro.
accesskey, tabindex, onclick, ondblclick, onmousedown, onmouseup,
Eventos.
170

51. Elemento <ol>

O elemento <ol> contm os itens de uma lista ordenada ("ordered list").
Em HTML 4.01 os atributos compact, start e type foram desaprovados no
elemento <ol>. Use CSS.
Os atributos compact, start e type no elemento <ol> no so suportados nas
DTDs para HTML 4.01 Strict e XHTML 1.0 Strict.
Dicas e Notas
Exemplo
<ol>
<li>Rum</li>
<li>Bagaceira</li>
</ol>
Atributos Opcionais
e F=Frameset.
Atributo
compact
start
type
Valor
Descrio
compact_rendering Desaprovado. Use CSS.
start_on_number
Especifica o valor em que se inicia a
numerao dos itens. Desaprovado. Use
CSS.
A
Especifica o tipo de lista. Desaprovado. Use
a
CSS.
I
i
1
DTD
TF
TF
TF
Atributos Padro
Padro.
Eventos.
171

52. Elemento <optgroup>

Define um grupo de opes. Permite agrupar vrias escolhas. Quando tiver
uma lista de opes extensa, forme grupos com as opes que esto relacionadas
entre si para lidar melhor com elas.
Nenhuma
Exemplo
<select>
<optgroup label="Frutas Tropicais">
<option value ="Manga">Manga</option>
<option value ="Banana">Banana</option>
</optgroup>
<optgroup label="Frutas portuguesas">
<option value ="Cereja">Cereja</option>
<option value ="Ma">Ma</option>
</optgroup>
</select>
e F=Frameset.
Atributo
label
Valor
text_label
Descrio
Define uma marca ("label") para o grupo de
opes.
DTD
STF
Atributos Padro
Padro.
tabindex, onclick, ondblclick, onmousedown, onmouseup, onmouseover,
Eventos.
53. Elemento <option>

O elemento <option> insere uma opo numa lista com vrias opes
selecionveis.
172

Em XHTML o elemento <option> deve ser fechado.

Dicas e Notas
Nota: O elemento <option> pode ser usado sem atributos, mas na prtica
precisamos usar o atributo value para enviar os dados para processamento.
Nota: Use este elemento apenas sob o elemento <select>. Se for colocado em
qualquer outro lugar ele no tem utilidade.
Exemplo
<select>
<option
<option
<option
<option
</select>
value
value
value
value
="Manga">Manga</option>
="Banana">Banana</option>
="Goiaba" selected>Goiaba</option>
="Ma">Ma</option>
Atributos Opcionais
e F=Frameset.
Atributo
disabled
(desativado)
label
Valor
disabled
(desativado)
texto
selected
(selecionada)
selected
(selecionada)
value
texto
Descrio
Indica que a opo deve ser desativada no
momento em que carregada pelo browser
Define uma marca ("label") para ser usada
com o elemento <optgroup>
Indica que a opo deve ser pr-selecionada
(ao iniciar o formulrio ela aparece em
primeiro lugar na lista)
Define o valor a enviar para processamento
quando a opo selecionada
DTD
STF
STF
STF
STF
Atributos Padro
id, class, title, style, dir, lang, xml:lang, tabindex
Padro.
Eventos.
54. Elemento <p>

O elemento <p> define um pargrafo
173


Em HTML 4.01 todos os atributos de apresentao do elemento <p> foram
O atributos de apresentao do elemento <p> no so suportados nas DTDs
Exemplo
<p>Aqui temos um pargrafo curto</p>
Atributos Opcionais
e F=Frameset.
Atributo
align
Valor
left
right
center
justify
Descrio
Especifica o alinhamento do texto no
pargrafo. Desaprovado. Use CSS.
DTD
TF
Atributos Padro
Padro.
Eventos.
55. Elemento <param>

Este elemento permite enviar dados para um objeto externo que tenha sido
inserido no documento com os elementos <object> ou <applet>.
Em XHTML o elemento <param> deve ser fechado.
e F=Frameset.
174

Atributo
name
Valor
unique_name
Descrio
Define um nome nico que identifica o
parmetro
DTD
STF
Descrio
Especifica o tipo de recurso (se texto, som,
um filme, etc)
Especifica o valor a atribui ao parmetro
Especifica o tipo MIME ("Multipurpose Internet
Mail Extensions") a atribuir ao valor
DTD
STF
Atributos Opcionais
Atributo
type
Valor
MIME type
value
valuetype
value
dados
ref
object
STF
STF
Atributos Padro
id
Padro.
56. Elementos <em>, <strong>, <dfn>, <code>, <samp>, <kbd>,

<var> e <cite>
Os elementos seguintes so todos elementos de frase. Nenhum deles foi
desaprovado em nenhuma recomendao, mas possvel obter resultados mais ricos
usando estilos CSS.
<em>
<strong>
<dfn>
<code>
<samp>
<kbd>
<var>
<cite>
Apresenta texto enfatizado (itlico)

Apresenta texto forte (negrito)
Define um termo numa lista de definies
Texto que cdigo de computador
Amostra de cdigo de computador
Texto inserido com o teclado
Define uma varivel
Define uma citao

Nenhuma
Exemplo
<em>Texto enfatizado</em><br>
<strong>Texto forte</strong><br>
<dfn>Definio de um termo</dfn><br>
<code>Cdigo de computador</code><br>
<samp>Amostra de cdigo de computador</samp><br>
<kbd>Texto inserido com o teclado</kbd><br>
<var>Varivel</var><br>
<cite>Citao</cite>
175

Atributos Padro
Padro.
Para ver uma descrio completa consulte os Atributos de Eventos.
57. Elemento <pre>

O elemento <pre> define texto pr-formatado. O texto contido neste elemento
tratado de forma especial pelo browser, que apresenta todos os espaos e mudanas
de linha que ele contm sem aplicar as regras habituais (transformar espaos
adjacentes num nico espao e tratar as mudanas de linha como se fossem um
espao).
Em HTML 4.01 o atributo width foi desaprovado no elemento <pre>. Use CSS.
O atributo width no elemento <pre> no suportado nas DTDs para HTML 4.01
Exemplo
<pre>
Este texto
preserva os espaos
e
as mudanas de linha
</pre>
Atributos Opcionais
e F=Frameset.
Atributo
width
Valor
nmero
Descrio
Define o nmero mximo de caracteres que
podem ser inseridos numa linha.
DTD
TF
Atributos Padro
id, class, title, style, dir, lang, xml:lang, xml:space
Padro.
176

Eventos.
58. Elemento <q>

O elemento <q> usa-se para fazer uma citao curta.
Nenhuma
Dicas e Notas
Nota: O elemento <q> no faz com que o texto tenha nenhum aspecto
especial. A sua funo puramente lgica. Para obter a formatao que deseja use
estilos CSS.
Exemplo
Aqui temos uma citao curta: <q>Hoje vou chegar atrasado mais uma vez!<q>
Atributos Opcionais
e F=Frameset.
Atributo
cite
Valor
citation
Descrio
Define uma citao
DTD
STF
Atributos Padro
Padro.
Eventos.
59. Elemento <script>

Define um script
177


Antigamente usava-se o atributo language para especificar a linguagem em
que o script estava escrito. Este atributo foi desaprovado em HTML 4.01 e substitudo
pelo atributo type.
O atributo language no suportado nas DTDs para HTML 4.01 Strict e
XHTML 1.0 Strict.
Dicas e Notas
Nota: Se no for uma chamada de funo, o cdigo contido neste elemento
executado imediatamente aps a concluso do carregamento da pgina. Se o cdigo
chamar uma funo, a execuo ser feita logo que ela esteja disponvel. Todo o
cdigo que aparecer depois de um elemento <frameset> ser ignorado.
Exemplo
<!-document.write("Ol Mundo!");
-->
</script>
e F=Frameset.
Atributo
type
Valor
text/ecmascript
text/javascript
text/jscript
text/vbscript
text/vbs
text/xml
Descrio
Especifica o tipo MIME ("Multipurpose
Internet Mail Extensions") correspondente ao
script
DTD
STF
Descrio
Define o conjunto de caracteres usado para
escrever o script
Indica que o script no usado para escrever
contedos na pgina. O browser no precisa
de esperar pela concluso do carregamento
do script para continuar a desenhar os
contedos da pgina.
Especifica a linguagem em que est escrito o
script. Desaprovado. Use o atributo type.
DTD
STF
Define o URL de um arquivo externo que

contm o cdigo do script
STF
Atributos Opcionais
Atributo
charset
Valor
charset
defer
defer
language
javascript
livescript
vbscript
outro
URL
src
STF
TF
178

Atributos Padro
xml:space
Padro.
Nenhum
60. Elemento <select>

O elemento <select> cria uma lista de abrir com vrias opes selecionveis.
Nenhuma
Exemplo
<select>
<option
<option
<option
<option
</select>
value
value
value
value
="Manga">Manga</option>
="Banana">Banana</option>
="Goiaba">Goiaba</option>
="Ma">Ma</option>
Atributos Opcionais
e F=Frameset.
Atributo
disabled
(desativado)
multiple
name
Valor
disabled
(desativado)
true
false
unique_name
size
nmero
Descrio
Desativa a lista no momento em que
carregada.
Indica se permitido selecionar mais do que
um elemento de uma s vez.
Define um nome nico que identifica a lista de
opes
Especifica a quantidade de opes que
podem ser vistas ao mesmo tempo.
DTD
STF
STF
STF
STF
Atributos Padro
id, class, title, style, dir, lang, xml:lang, accesskey, tabindex
Padro.
onfocus, onblur, onchange
179


Eventos.
61. Elemento <span>

O elemento <span> usa-se para agrupar elementos mantendo a continuidade
das linhas. Enquanto que <div> um elemento de bloco, <span> um elemento
"inline".
Nenhuma
Dicas e Notas
Dica: Use o elemento <span> para agrupar outros elementos "inline" e
format-los com estilos CSS mantendo a continuidade das linhas.
Exemplo
<p>Isto um pargrafo
<span style="color:#FF0000;">Isto est no mesmo pargrafo</span> isto est
no
mesmo pargrafo.
</p>
<span style="color:#00DD45;">
<p>Aqui temos outro pargrafo</p>
<p>Aqui temos outro pargrafo</p>
</span>
Atributos Padro
Padro.
Eventos.
62. Elementos <s> e <strike>

Os elementos <s> e <strike> definem texto que se escreve com um trao
horizontal sobreposto ("strikethrough text").
Os elementos <s> e <strike> foram desaprovados em HTML 4.01.
180

Os elementos <s> e <strike> no so suportados nas DTDs para HTML 4.01

Dicas e Notas
Dica: Use o elemento <del> em sua substituio!
Exemplo
O novo modelo <s>ainda no est disponvel.</s> j est disponvel!<br><br>
O novo modelo <strike>ainda no est disponvel.</strike> j est disponvel!
Atributos Padro
Padro.
Eventos.
63. Elemento <style>

Define estilos CSS para aplicar ao documento.
O elemento <style> coloca-se na seo <head>. Para incluir uma folha de
estilos guardada num arquivo separado deve ser usado o elemento <link>.
Nenhuma
Dicas e Notas
Dica: Para aprender mais sobre estilos CSS faa o curso de CSS.
Exemplo
<head>
h1 { color: red }
h3 { color: blue }
</style>
</head>
e F=Frameset.
181

Atributo
media
Valor
screen
tty
tv
projection
handheld
print
braille
aural
all
Descrio
O tipo de media ao qual vo ser aplicados os
estilos
DTD
STF
Atributos Padro
title, dir, lang, xml:space
Padro.
64. Elementos <sub> e <sup>

O elemento <sub> define a texto para alinhar um pouco abaixo do texto normal.
O elemento <sup> define o texto para alinhar um pouco acima do texto normal.
Nenhuma
Exemplo
Este texto contm uma parte alinhada um pouco <sub>abaixo</sub>
Este texto contm uma parte alinhada um pouco <sup>acima</sup>
Atributos Padro
Padro.
Eventos.
65. Elemento <table>

O elemento <table> define uma tabela. Dentro de uma tabela podemos colocar
cabealhos, linhas, rodaps, clulas, pargrafos, outras tabelas e diversos elementos
do HTML.
182


Em HTML 4.01 os atributos align e bgcolor foram desaprovados no elemento
<table>. Use CSS.
Os atributos align e bgcolor no elemento <table> no so suportados nas DTDs
Exemplo
<table border="1">
<tr>
<td>Clula A</td>
<td>Clula B</td>
</tr>
</table>
Atributos Opcionais
e F=Frameset.
Atributo
align
bgcolor
border
cellpadding
cellspacing
frame
rules
summary
Valor
left
center
right
rgb(x,x,x)
#xxxxxx
nomeDeCor
pixels
pixels
%
pixels
%
void
above
below
hsides
lhs
rhs
vsides
box
border
none
groups
rows
cols
all
texto
Descrio
Alinha a tabela. Desaprovado. Use CSS.
DTD
TF
Especifica a cor de fundo para a tabela.

TF
Especifica a espessura da linha de contorno.
STF
Nota: Especifique border="0" para que no seja

desenhada nenhuma linha de contorno.
Especifica o espao em branco que fica entre o
contedo das clulas e a sua fronteira.
Especifica o espao em branco que fica entre
clulas adjacentes.
Especifica a forma como so apresentadas as
linhas de contorno.
STF
STF
STF
Nota: Deve usar-se em conjunto com o atributo

border.
D indicaes sobre as linhas divisrias

horizontais e verticais.
Nota: Deve usar-se em conjunto com o atributo
border.
Fornece um sumrio da tabela para ser lido por
software de sntese de voz em browsers no
visuais.
STF
STF
183

width
%
pixels
Especifica a largura da tabela.
STF
Atributos Padro
Padro.
Eventos.
66. Elemento <tbody>

Define um corpo de tabela.
Os elementos thead, tfoot e tbody ajudam-nos a agrupar as linhas de uma
tabela. Quando criamos uma tabela podemos precisar de uma linha de cabealho,
vrias linhas de dados e de uma linha com somas totais ao fundo. Esta forma de
dividir uma tabela permite ao browser fazer o deslocamento vertical ("scroll") da pgina
mantendo os cabealhos e os rodaps sempre visveis. Quando imprimimos uma
pgina escrita deste modo e a tabela ocupa mais do que uma pgina, os cabealhos e
os rodaps podem aparecer repetidos em todas as pginas que contm a tabela.
Nenhuma
Dicas e Notas
Nota: Se usar um dos elementos thead, tfoot ou tbody deve usar tambm os
restantes, embora eles possam estar vazios. Estes elementos devem aparecer sempre
na ordem <thead> <tfoot> <tbody> para que o browser j conhea os cabealhos e os
rodaps quando comear a desenhar a tabela.
Nota: Os elementos <thead>,<tbody> e <tfoot> so muito pouco usados
porque durante muito tempo no eram suportados pelos browsers. Tanto o Internet
Explorer 5 (e superior) como o Netscape 7 suportam estes elementos, deste modo,
atualmente j no existem motivos vlidos para continuar a evitar a sua utilizao.
Exemplo
<table border = "1">
<thead>
<tr>
<td>Este texto est sob um elemento thead</td>
</tr>
</thead>
<tfoot>
<tr>
184

<td>Este texto est sob um elemento tfoot</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Este texto est sob um elemento tbody</td>
</tr>
</tbody>
</table>
Atributos Opcionais
e F=Frameset.
Atributo
align
char
charoff
valign
Valor
right
left
center
justify
char
caractere
pixels
%
top
middle
bottom
baseline
Descrio
Define o alinhamento do texto nas clulas
DTD
STF
Especifica o caractere a partir do qual se faz o

alinhamento do texto.
STF
Nota: Usa-se apenas quando tambm se usar

align="char"
Define o desvio ("offset") do alinhamento para o
primeiro caractere a partir do qual se faz o
alinhamento
align="char"
Define o alinhamento vertical do texto nas
clulas
STF
STF
Atributos Padro
Padro.
Eventos.
67. Elemento <td>

Insere uma clula numa tabela
185


Os atributos "bgcolor", "height", "width", e "nowrap" do elemento <td> foram
desaprovados em HTML 4.01. Use CSS.
Os atributos bgcolor, height, width, e nowrap do elemento <td> no so
Exemplo
<tr>
<td>Clula A</td>
<td>Clula B</td>
</tr>
</table>
Atributos Opcionais
e F=Frameset.
Atributo
abbr
Valor
abbr_text
align
left
right
center
justify
char
category_names
rgb(x,x,x)
#xxxxxx
nomeDeCor
caractere
axis
bgcolor
char
charoff
pixels
%
colspan
nmero
headers
header_cells_id
height
pixels
Descrio
Especifica uma forma abreviada para o
contedo da clula
Especifica o alinhamento horizontal do
contedo da clula
DTD
STF
Atribui um nome clula

Especifica a cor de fundo para a clula.
STF
TF
Especifica o caractere a partir do qual se faz

o alinhamento do texto.
STF
Nota: Usa-se apenas quando tambm se

usar align="char"
faz o alinhamento
usar align="char"
Define quantas colunas so ocupadas pelo
elemento <td>
Uma lista de IDs separados por espaos. Os
IDs fornecem informao acerca dos
cabealhos das clulas e servem para ajudar
os browsers apenas de texto a representar
as clulas.
Especifica a altura de uma clula.
STF
STF
STF
STF
TF
186

nowrap
nowrap
rowspan
nmero
scope
row
col
rowgroup
colgroup
valign
top
middle
bottom
baseline
pixels
%
width

Indica se deve impedir que o browser insira
automaticamente mudanas de linha.
Define quantas linhas so ocupadas pelo
elemento <td>
Indica se a clula fornece informao de
cabealho relativa linha a que pertence, ou
relativa coluna a que pertence, ou relativa
ao grupo de linhas a que pertence (colgroup),
ou relativa ao grupo de colunas (colgroup) a
que pertence.
Especifica o alinhamento vertical do
contedo da clula
Especifica a largura de uma clula.

TF
STF
STF
STF
TF
Atributos Padro
Padro.
Eventos.
68. Elemento <textarea>

Define uma rea de texto com vrias linhas e que pode ter um nmero ilimitado
de caracteres. Os usurios podem escrever texto nessa rea.
Nenhuma
Exemplo
<textarea rows="2" cols="20">
O passeio de bicicleta estava a correr muito bem, mas de repente levantouse um grande vendaval e comeou a chover ...
</textarea>
e F=Frameset.
187

Atributo
cols
Valor
nmero
rows
nmero
Descrio
Especifica o nmero de colunas visveis num
dado momento na rea de texto.
Especifica o nmero de linhas visveis num
dado momento na rea de texto.
DTD
STF
STF
Atributos Opcionais
Atributo
disabled
(desativado)
name
readonly
(apenas de
leitura)
Valor
disabled
(desativado)
name_of_textarea
readonly (apenas
de leitura)
Descrio
Desativa a rea de texto logo aps o
carregamento
D um nome rea de texto
Indica que o usurio no pode modificar o
contedo da rea de texto
DTD
STF
STF
STF
Atributos Padro
Padro.
onfocus, onblur, onselect, onchange, onclick, ondblclick, onmousedown,
onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown,
onkeyup
Eventos.
69. Elemento <tfoot>

Define um rodap de tabela
Nenhuma
Dicas e Notas
restantes, embora eles possam estar vazios. Estes elementos devem aparecer sempre
188


Exemplos
<thead>
<tr>
</tr>
</thead>
<tfoot>
<tr>
</tr>
</tfoot>
<tbody>
<tr>
</tr>
</tbody>
</table>
Atributos Opcionais
e F=Frameset.
Atributo
align
char
charoff
valign
Valor
right
left
center
justify
char
caractere
pixels
%
top
middle
bottom
baseline
Descrio
DTD
STF

STF

align="char"
Define o desvio ("offset") do alinhamento para
o primeiro caractere a partir do qual se faz o
alinhamento
align="char"
clulas
STF
STF
Atributos Padro
189


Padro.
Eventos.
70. Elemento <th>

Insere uma clula com um cabealho.
Os atributos "bgcolor", "height", "width", e "nowrap" do elemento <th> foram
desaprovados em HTML 4.01. Use CSS.
Os atributos bgcolor, height, width, e nowrap do elemento <th> no so
Exemplo
<tr>
<th>Cabealho 1</th>
<th>Cabealho 2</th>
</tr>
<tr>
<td>Cabealho A</td>
<td>Cabealho B</td>
</tr>
</table>
Atributos Opcionais
e F=Frameset.
Atributo
abbr
Valor
abbr_text
align
left
right
center
justify
char
category_names
rgb(x,x,x)
#xxxxxx
nomeDeCor
caractere
axis
bgcolor
char
Descrio
Especifica uma forma abreviada para o
contedo da clula
Especifica o alinhamento horizontal do
contedo da clula
DTD
STF
Atribui um nome clula

STF
TF
Especifica o caractere a partir do qual se faz

o alinhamento do texto.
STF
STF
190

charoff
pixels
%
colspan
nmero
headers
header_cells_id
height
pixels
nowrap
nowrap
rowspan
nmero
scope
col
colgroup
row
rowgroup
valign
top
middle
bottom
baseline
pixels
%
width

usar align="char"
faz o alinhamento
usar align="char"
Define quantas colunas so ocupadas pelo
elemento <td>
Uma lista de IDs separados por espaos. Os
IDs fornecem informao acerca dos
cabealhos das clulas e servem para ajudar
os browsers apenas de texto a representar
as clulas.
Especifica a altura de uma clula.
Indica se deve impedir que o browser insira
automaticamente mudanas de linha.
Define quantas linhas so ocupadas pelo
elemento <td>
Indica se a clula fornece informao de
cabealho relativa linha a que pertence, ou
relativa coluna a que pertence, ou relativa
ao grupo de linhas a que pertence, ou
relativa ao grupo de colunas (colgroup) a que
pertence.
Especifica o alinhamento vertical do
contedo da clula
Especifica a largura de uma clula.

STF
STF
STF
TF
TF
STF
STF
STF
TF
Atributos Padro
Padro.
Eventos.
191

71. Elemento <thead>

Define um cabealho de tabela
Nenhuma
Dicas e Notas
restantes, embora eles possam estar vazios. Estes elemento devem aparecer sempre
Exemplo
<thead>
<tr>
</tr>
</thead>
<tfoot>
<tr>
</tr>
</tfoot>
<tbody>
<tr>
</tr>
</tbody>
</table>
Atributos Opcionais
e F=Frameset.
Atributo
align
Valor
right
left
center
justify
Descrio
DTD
STF
192

char
caractere
char
charoff
pixels
%
valign
top
middle
bottom
baseline

align="char"
alinhamento
align="char"
clulas
STF
STF
STF
Atributos Padro
Padro.
Eventos.
72. Elemento <title>

Este elemento define o ttulo do documento.
Nenhuma
Exemplo
<html>
<head>
<title>Referncia de HTML e XHTML</title>
</head>
<body>
Contedo do documento...
</body>
</html>
Atributos Padro
id, class, dir, lang, style, xml:lang
193


Padro.
73. Elemento <tr>

Insere uma linha numa tabela
Em HTML 4.01 o atributo bgcolor foi desaprovado para o elemento <tr>. Use
CSS.
O atributo bgcolor no elemento <tr> no suportado nas DTDs para HTML
4.01 Strict e XHTML 1.0 Strict.
Exemplo
<table border="1">
<tr>
<td>Clula A</td>
<td>Clula B</td>
</tr>
<table>
Atributos Opcionais
e F=Frameset.
Atributo
align
bgcolor
char
charoff
valign
Valor
right
left
center
justify
char
rgb(x,x,x)
#xxxxxx
nomeDeCor
caractere
pixels
%
top
middle
bottom
baseline
Descrio
pertencentes linha definida pelo elemento <tr>
DTD
STF

TF

STF

align="char"
alinhamento
align="char"
clulas
STF
STF
194

Atributos Padro
Padro.
Eventos.
74. Elemento <u>

O elemento <u> define texto sublinhado.
O elemento <u> foi desaprovado em HTML 4.01. Em sua substituio deve
usar estilos CSS.
O elemento <u> no suportado nas DTDs para HTML 4.01 Strict e XHTML
1.0 Strict.
Dicas e Notas
Dica: Evite sublinhar texto. Os leitores da pgina confundem-no com uma
ligao!
Exemplo
O novo modelo <u>j est disponvel!</u>
Atributos Padro
Padro.
Eventos.
75. Elemento <ul>

O elemento <ul> define uma lista no ordenada ("unordered list").
195


Em HTML 4.01 os atributos compact e type foram desaprovados no elemento
<ul>. Use CSS.
Os atributos compact e type no elemento <ul> no so suportados nas DTDs
Dicas e Notas
Exemplo
<ul>
<li>Rum</li>
<li>Bagaceira</li>
</ul>
Atributos Opcionais
e F=Frameset.
Atributo
compact
type
Valor
Descrio
compact_rendering Desaprovado. Use CSS.
disc
Especifica o tipo de lista. Desaprovado. Use
square
CSS.
circle
DTD
TF
TF
Atributos Padro
Padro.
Eventos.
196

Curso de HTML e Introducao Ao XHTML

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Curso de HTML e Introducao Ao XHTML

Caricato da

Copyright:

Formati disponibili

Curso de HTML 4.

<meta name="autor" content="Gregory Bevilaqua">

Curso de HTML 4.01 e Introduo ao XHTML 1.0

Cores seguras da Web ..................................................................................... 51

PARTE II HTML Avanado

<meta name="autor" content="Rafael Feitosa">

Curso de HTML 4.01 e Introduo ao XHTML 1.0

16 Molduras ("frames") ........................................................................................ 98

PARTE III Referncia Rpida e Reviso

PARTE IV: Referncia de HTML 4 e XHTML 1

<meta name="autor" content="Rafael Feitosa">

Curso de HTML 4.01 e Introduo ao XHTML 1.0

22. code ............................................................................................................... 175

<meta name="autor" content="Rafael Feitosa">

Curso de HTML 4.01 e Introduo ao XHTML 1.0

77. tbody .............................................................................................................. 184

<meta name="autor" content="Rafael Feitosa">

Curso de HTML 4.01 e Introduo ao XHTML 1.0

PARTE I: HTML Bsico

A World Wide Web (WWW), designada habitualmente apenas por a Web,

Como funciona a WWW?

Na Web a informao normalmente guardada em documentos designados

Como que o browser vai buscar as pginas?

Como que o browser faz a apresentao das pginas?

As pginas contm instrues que descrevem a forma como devem ser

Quem responsvel pela definio dos padres da Web?

<meta name="autor" content="Rafael Feitosa">

Curso de HTML 4.01 e Introduo ao XHTML 1.0

Os padres atuais da Web foram influenciados por aquilo que a Netscape e a

1.2 O que preciso para criar pginas para a Web?

Um editor de texto capaz

1.3 A sua primeira pgina escrita em HTML

Um arquivo HTML constitudo por um texto que define os elementos da

Experimente voc mesmo

Salve o arquivo com o nome "pagina.html".

<meta name="autor" content="Rafael Feitosa">

Curso de HTML 4.01 e Introduo ao XHTML 1.0

Curso de HTML 4.01 e Introduo ao XHTML 1.0

Dreamweaver MX, o Adobe GoLive ou o Microsoft FrontPage 2003. Estes editores

As "etiquetas de markup" do HTML so usadas para definir os elementos.

<meta name="autor" content="Rafael Feitosa">

Curso de HTML 4.01 e Introduo ao XHTML 1.0

As etiquetas do HTML escrevem-se usando os caracteres < e >, envolvendo o

Relembremos agora o exemplo apresentado antes:

O fragmento apresentado a seguir um elemento da linguagem HTML:

Repare nos aspectos seguintes deste fragmento:

O elemento comea com a etiqueta de incio (ou abertura): <b>

O elemento principal deste fragmento inicia-se com a etiqueta <body>, e

<meta name="autor" content="Rafael Feitosa">

Curso de HTML 4.01 e Introduo ao XHTML 1.0

Consideremos agora a etiqueta <table>, que define um elemento de tabela. Ao

<meta name="autor" content="Rafael Feitosa">

Curso de HTML 4.01 e Introduo ao XHTML 1.0

J no exemplo seguinte ns dizemos ao browser para desenhar uma linha de

Como acabou de ver os atributos aparecem sempre em pares nome/valor,

<meta name="autor" content="Rafael Feitosa">

Curso de HTML 4.01 e Introduo ao XHTML 1.0

Nota: Os atributos s podem aparecer nas etiquetas de incio. proibido

Se preferirmos usar apstrofos devemos escrever assim:

3. Elementos bsicos da linguagem HTML

<meta name="autor" content="Rafael Feitosa">

Curso de HTML 4.01 e Introduo ao XHTML 1.0

Nota: A iniciativa da Web Semntica d muita importncia aos elementos que

O HTML adiciona de forma automtica uma linha em branco antes e depois de