Curso de HTML 41.1 e Introducao Ao XHTML 1 PDF

Curso de HTML 4.01 e Introduo ao XHTML 1.
0
Desenvolvimento, aplicaes e referncias de acordo com as normas do W3C

<meta name="autor" content="Rafael Feitosa"> 3
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
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


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?

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?

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?

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?

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?


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?

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?

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:

<ht ml >
<head>
<t i t l e>T t ul o da pgi na</ t i t l e>
</ head>
<body>
Est a a mi nha pr i mei r a pgi na da Web.
<b>Est e t ext o est emnegr i t o</ b>
</ body>
</ ht ml >

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

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:

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

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:

<ht ml >
<head>
<t i t l e>T t ul o da pgi na</ t i t l e>
</ head>
<body>
</ body>
</ ht ml >

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 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?


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:

<ht ml >
<body bgcol or =" r ed" >
</ body>
</ ht ml >

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):

<ht ml >
<body>
<t abl e bor der =" 0" >
<t r >
<t d>

Est a a mi nha pr i mei r a t abel a.
</ t d>
</ t r >
</ t abl e>
</ body>
</ ht ml >

J no exemplo seguinte ns dizemos ao browser para desenhar uma linha de
contorno com espessura 2 (border="2").

<ht ml >
<body>
<t r >
<t d>
Est a a mi nha segunda t abel a.
</ t d>
</ t r >
</ t abl e>
</ body>
</ ht ml >

Como acabou de ver os atributos aparecem sempre em pares nome/valor,
assim: nome="valor".


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:

al t =' El e di sse: " No! " '

Se preferirmos usar apstrofos devemos escrever assim:

al t =" El e di sse: ' 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:

<ht ml >
<head>
<t i t l e>Exempl o</ t i t l e>
</ head>
<body>
<p>I st o umpar gr af o. </ p>

<p>I st o out r o par gr af o. </ p>

<p>
Os par gr af os def i nem- se como el ement o &l t ; p&gt ;
</ p>
</ body>
</ ht ml >



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>I st o umcabeal ho</ h1>

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>I st o umpar gr af o</ p>
<p>I st o out r o par gr af o</ 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>
I st o<br > umpar - <br >gr af o
comquebr as de l i nha
</ p>


O exerccio seguinte d uma oportunidade para experimentar:

<ht ml >
<head>
</ head>
<body>
<p>
I st o<br > umpar - <br >gr af o
comquebr as de l i nha
</ p>
</ body>
</ ht ml >

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

<! - - I st o umcoment r i o - - >

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

<br> Provoca uma mudana de linha forada
<hr> Insere uma linha horizontal
 Insere um comentrio no cdigo fonte

Exemplos de Aplicao

Mais pargrafos

<ht ml >
<head>
</ head>

<body>
<p>
No cdi go f ont e est e par gr af o t emt r s
l i nhas, mas o br owser i gnor a i sso e pode
apr esent ar out r o nmer o.
</ p>

<p>No cdi go f ont e o t ext o dest e par gr af o t em
vr i os espaos segui dos, mas o
br owser t r at a- os como se el es f or massem
um ni co espao.
</ p>

<p>O nmer o de l i nhas de umpar gr af o depende
do t amanho da j anel a do br owser . Ao al t er ar
a l ar gur a dest a pr ovocar al t er aes no
nmer o de l i nhas
</ p>

</ body>
</ ht ml >

Elementos de cabealho

<ht ml >
<head>
</ head>
<body>
<h1>I st o umcabeal ho de n vel 1</ h1>





<p>Os el ement os h1- h6 devemser
usados apenas par a escr ever cabeal hos. No os use
par a out r os f i ns. Exi st emout r os el ement os concebi dos especi f i cament e par a
out r as f i nal i dades. </ p>

</ body>
</ ht ml >

Cabealho alinhado ao centro

<ht ml >
<head>
</ head>
<body>
<h1 al i gn=" cent er "
>Est e umcabeal ho
de n vel 1</ h1>

<p>Est e cabeal ho most r ado mai s aci ma
est al i nhado ao cent r o da pgi na.
</ p>
</ body>
</ ht ml >



Inserir uma linha horizontal

<ht ml >
<head>
</ head>
<body>
<p>O el ement o hr desenha uma l i nha hor i zont al : </ p>
<hr >



</ body>
</ ht ml >

Comentrios no cdigo fonte de uma pgina HTML

<ht ml >
<body>
<! - - Est e coment r i o no ser vi s vel - - >
<p>I st o umpar gr af o nor mal </ p>
</ body>

</ ht ml >

Utilizando uma cor de fundo

<ht ml >
<head>
</ head>
<body bgcol or =" yel l ow" >
<h2>Umf undo col or i do</ h2>
</ body>
</ ht ml >

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

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:


<ht ml >
<body>
Est e exempl o t emt ext o em<i >i t l i co</ i >, <b>negr i t o</ b>,
<em>enf at i zado</ em>, <u>subl i nhado</ u> e t i po
<code>cdi go de comput ador </ code>.
</ body>
</ ht ml >

4.1 Elementos para formatao de texto

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

4.2 Elementos para o " output de cdigo de computador"

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

4.3 Elementos para citaes e listas de definies

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

<address> Define um endereo (postal)
<bdo> Define a direo de escrita do texto
<blockquote> Citao longa
<q> Citao curta
<cite> Citao
<dfn> Apresenta a definio de um termo

Exemplos de Aplicao

Formatao de Texto

<ht ml >
<head>
</ head>
<body>
<b>I st o t ext o emnegr i t o</ b> <br >
<st r ong>I st o t ext o f or t e</ st r ong> <br >
<bi g>I st o t ext o mai or </ bi g> <br >
<em>I st o t ext o enf at i zado</ em> <br >
<i >I st o t ext o i t l i co</ i > <br >
<smal l >I st o t ext o mai s pequeno</ smal l > <br >
Est e t ext o cont muma par t e al i nhada mai s <sub>abai xo</ sub>
<br >
Est e t ext o cont muma par t e al i nhada mai s <sup>aci ma</ sup>
</ body>
</ ht ml >

Texto pr-formatado (controla rigorosamente as mudanas de linha e a insero
de espaos)

<ht ml >
<head>
</ head>
<body>
<pr e>
I st o t ext o
pr f or mat ado.
el e pr eser va os espaos
e as quebr as de l i nha.
</ pr e>

<p>O el ement o pr e t i l par a r epr esent ar
cdi go de comput ador : </ p>
<pr e>
f or ( var i = 0; i < 20; i ++)
document . wr i t e( i ) ;
</ pr e>
</ body>
</ ht ml >

Diversos elementos para mostrar cdigo de computador

<ht ml >
<head>
</ head>
<body>
<code>Cdi go de comput ador </ code><br >
<kbd>Keyboar d i nput </ kbd><br >
<t t >Tel et ype t ext </ t t ><br >
<samp>Amost r a de t ext o</ samp><br >
<var >Var i vel de cdi go de comput ador </ var ><br >
<p> <b>Not a: </ b> Est es el ement os so nor mal ment e usados
par a apr esent ar t ext o que cdi go de comput ador
</ p>
</ body>
</ ht ml >


Inserir um endereo

<ht ml >
<head>
</ head>
<body>
<addr ess>Robi n dos Bosques<br >
Cl ar ei r a dos Cucos<br >
Fl or est a de Sher wood<br >
Not t i ngham</ addr ess>
</ body>
</ ht ml >

Abreviaes e acrnimos

<ht ml >
<head>
</ head>
<body>
<abbr t i t l e=" Uni t ed Nat i ons" >UN</ abbr ><br >
<br >
<acr onymt i t l e=" Wor l d Wi de Web" >WWW</ acr onym>

<p>O at r i but o " t i t l e" deve ser usado par a dar a conhecer o
si gni f i cado do acr ni mo ou da
abr evi ao. O seu cont edo most r ado
quando o pont ei r o do mouse pr a sobr e o el ement o
( Al gumas ver ses do MSI E no r espei t amas nor mas e s f azemi st o como
el ement o &l t ; acr onym&gt ; )
</ p>
</ body>
</ ht ml >



Citaes extensas e curtas

<ht ml >
<head>
</ head>
<body>
Aqui t emos uma ci t ao l onga:

<bl ockquot e>I st o uma ci t ao ext ensa. Ou
pel o menos devi a ser . </ bl ockquot e>

Aqui t emos uma ci t ao cur t a: <q>Est a mesmo
cur t a. </ q>

<p><b>Not a: </ b> O el ement o &l t ; bl ockquot e&gt ; i nser e
aut omat i cament e mar gens e quebr as de l i nha. J o el ement o
&l t ; q&gt ; no pr oduz nada de especi al par a al mde
col ocar o t ext o ent r e aspas. </ p>

<br >
</ body>
</ ht ml >

Como indicar texto que foi apagado e texto que foi inserido em substituio

<ht ml >
<head>

</ head>
<body>
<p>Umquar t ei r o so

<del >12</ del >

<i ns>25</ i ns> uni dades. </ p>

<p><b>Not a: </ b> A mai or i a dos br owser s escr eve umt r ao
hor i zont al a mei a al t ur a sobr e o t ext o apagado e subl i nha o t ext o
i nser i do, mas al guns br owser s ant i gos podemapr esent ar o t ext o
apenas como t ext o nor mal . </ p>

<br >
</ body>
</ ht ml >

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 hr ef =" ur l " >Text o a most r ar </ 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 hr ef =" ht t p: / / www. w3. or g/ " >S t i o do Wor l d Wi de Web Consor t i um</ a>


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

Site do World Wide Web Consortium

Exemplos de Aplicao

Como inserir ligaes (links)

<ht ml >
<head>
</ head>

<body>
<p><a hr ef =" pagi na. ht m" >I st o uma l i gao</ a>
par a out r a pgi na dest e websi t e.
</ p>

<p><a hr ef =" ht t p: / / www. w3. or g/ " >I st o out r a l i gao</ a>,
mas par a out r o websi t e
</ p>
</ body>
</ ht ml >

Colocar uma ligao sobre uma imagem

<ht ml >
<head>
</ head>
<body>
<p>
Uma i magemcomuma l i gao ( " l i nk" ) :
<a hr ef =" j avascr i pt : al er t ( ' Bemvi ndo ao par a so' ) " >
<i mg al t =" Par a so" sr c=" pr ai a. j pg" bor der =" 0" ></ a>
</ p>
</ body>
</ ht ml >



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 hr ef =" ht t p: / / www. w3. or g/ " t ar get =" _bl ank" >Wor l d Wi de Web Consor t i um</ 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" >Text o a most r ar </ 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=" t oc" >Tabel a de Cont edos</ 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 hr ef =" #t oc" >I r par a a t abel a de cont edos da especi f i cao HTML 4. 01</ a>


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 hr ef =" ht t p: / / www. w3. or g/ TR/ 1999/ REC- ht ml 401- 19991224/ cover . ht ml #t oc" >I r
par a a t abel a de cont edos da especi f i cao 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 Descrio
<a> Define uma ncora ou uma ligao de hipertexto

Exemplos de Aplicao

Abrir uma pgina numa nova janela do browser

<ht ml >
<head>
</ head>
<body>
<a t ar get =" _bl ank" hr ef =" pagi na. ht m" >Sal t ar par a a pgi na de t est e</ a>
<p>
Se col ocar o val or " _bl ank" no at r i but o t ar get a
l i gao ser aber t a numa nova j anel a do br owser .
</ p>
</ body>
</ ht ml >



Saltar para um outro local dentro da mesma pgina

<ht ml >
<head>
</ head>
<body>
<p><a hr ef =" #C3" >Vej a t ambmo Cap t ul o 3</ a></ p>

<h1>Manual de I ni ci ao Tor t ur a Chi nesa</ h1>

<h3>Cap t ul o 1</ h3>

<p>
Nest e cap t ul o vamos descr ever as qual i dades
necessr i as par a poder t or nar - se numTcni co Super i or
de Tor t ur a Chi nesa. Est a nobr e ar t e, desenvol vi da ao l ongo
de mui t os scul os por gr andes mest r es da cul t ur a or i ent al ,
assent a numa f i l osof i a de r espei t o pel os val or es da
t ol er nci a e amor pel o pr xi mo.
</ p>


<p>
Par a desenvol ver as apt i des necessr i as
a umbomexer c ci o dest a nobr e ar t e voc pr eci sa de
ar r anj ar umespao f si co par a i nst al ar o seu
l abor at r i o. Est a escol ha uma das deci ses
mai s i mpor t ant es par a o sucesso das suas i nci at i vas de t or t ur a
chi nesa.
</ p>

<h3><a name=" C3" i d=" C3" >Cap t ul o 3</ a></ h3>

<p>
Agor a chegado o moment o de r ecr ut ar al guns col abor ador es e t est ar
os conheci ment os j adqui r i dos. Comece por t ent ar per suadi r
al gumas pessoas de quemgost e menos par a
par t i ci par emnas suas sesses de i ni ci ao t or t ur a chi nesa
na qual i dade de v t i mas i ndef esas. No caso de el as se most r ar emr et i cent es
ser obr i gado a nome- l os como vol unt r i os f or a, o
que j ser umexcel ent e exer c ci o de i ni ci ao.
</ p>
</ body>
</ ht ml >



Como libertar uma pgina que est dentro de uma subjanela (" frame" )

<ht ml >
<head>
</ head>
<body>
<p>Est a pgi na est dent r o de uma mol dur a ( " f r ame" ) ?</ p>
<a t ar get =" _t op" hr ef =" j avascr i pt : al er t ( ' I st o apenas uma \ si mul ao.
\ nNuma si t uao r eal aqui \ est ar i a o ver dadei r o ender eo da pgi na' ) " >
Cl i que aqui par a sai r del e! </ a>
</ body>
</ ht ml >

Como fazer uma ligao para enviar e-mail

<ht ml >
<head>
</ head>
<body>
<p>
Li gao:
<a hr ef =" mai l t o: ze_das_couves@nabal . com?Subj ect =As couves est avamboas" >
Envi ar e- mai l </ a>
</ p>
</ body>
</ ht ml >


" 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 hr ef =" pagi na. ht ml " >Uma Pgi na</ 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 hr ef =" ht t p: / / www. w3school s. com/ i mages/ " >

Um URL composto pelas seguintes partes:

pr ot ocol o: / / subdomi ni o. domi ni o: por t a/ past a/ ar qui vo

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

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 hr ef =" f t p: / / um_ser vi dor . com/ pub/ ar qui vo. zi p" >Downl oad de Ar qui vo</ a>

Abrir o Programa de E-mail

O seguinte cdigo HTML cria uma ligao que faz abrir o seu programa de e-
mail, normalmente o outllook, com o e-mail do destinatrio j escrito.

<a hr ef =" mai l t o: ze_das_couves@hor t a. com" >ze_das_couves@hor t a. 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 >
<l i >Rum</ l i >
<l i >Bagao</ l i >
</ ul >

Este o aspecto com que fica no seu browser:

Rum
Bagao

Dentro de uma lista no ordenada podemos colocar pargrafos, quebras de
linha, imagens, outras listas, etc.


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 >
<l i >Rum</ l i >
<l i >Bagao</ l i >
</ 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>Bebi da espi r i t uosa mui t o apr eci ada pel os pi r at as das Car a bas</ dd>

<dt >Bagao</ dt >
<dd>Bebi da comel evado cont edo al col i co. A sabedor i a popul ar
at r i bui - l he f or t es pr opr i edades t er aput i cas. </ dd>
</ dl >


Rum
Bebi da espi r i t uosa mui t o apr eci ada pel os pi r at as das Car a bas
Bagao
Bebi da comel evado cont edo al col i co. A sabedor i a popul ar r econhece- l he
f or t es pr opr i edades t er aput i cas.

Dentro de um elemento <dd> podemos colocar pargrafos, quebras de linha,
imagens, outras listas, etc.

6.4 Elementos para Listas

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


Exemplos de Aplicao

Uma lista ordenada

<ht ml >
<head>
</ head>
<body>
<h4>Uma l i st a or denada: </ h4>
<ol >
<l i >Rum</ l i >
<l i >gua do Luso</ l i >
<l i >Bagacei r a</ l i >
</ ol >
</ body>
</ ht ml >

Diferentes tipos de listas ordenadas

<ht ml >
<head>
</ head>
<body>
<h4>Li st a Or denada comnmer os: </ h4>

<ol >
<l i >Espi naf r es</ l i >
<l i >Er vi l has</ l i >
<l i >Cenour as</ l i >
<l i >Al f aces</ l i >
</ ol >

<h4>Li st a Or denada coml et r as mai scul as: </ h4>

<ol t ype=" A" >
</ ol >

<h4>Li st a Or denada coml et r as mi nscul as: </ h4>

<ol t ype=" a" >

</ ol >

<h4>Li st a Or denada comnmer os r omanos ( mai scul as) : </ h4>

<ol t ype=" I " >
</ ol >

<h4>Li st a Or denada comnmer os r omanos ( mi nscul as) : </ h4>

<ol t ype=" i " >
</ ol >
</ body>
</ ht ml >

Diferentes tipos de listas no ordenadas

<ht ml >
<head>
</ head>
<body>
<h4>Li st a comdi scos como mar ca: </ h4>

<ul t ype=" di sc" >
<l i >Aguar dent e de Medr onho</ l i >
<l i >Cachaa</ l i >
<l i >Gi nj a comEl as</ l i >
</ ul >

<h4>Li st a comani s como mar ca: </ h4>
<ul t ype=" ci r cl e" >
</ ul >

<h4>Li st a comquadr ados como mar ca: </ h4>
<ul t ype=" squar e" >
</ ul >
</ body>
</ ht ml >

Listas encaixadas

<ht ml >
<head>
</ head>
<body>
<h4>Li st as encai xadas: </ h4>

<ul >

<l i >Bagao</ l i >

<l i >Bebi das de meni na
<ul >
<l i >Chazi nho</ l i >
<l i >Lei t i nho</ l i >
</ ul >
</ l i >
<l i >Rum</ l i >
</ ul >
</ body>
</ ht ml >

Uma lista de definies

<ht ml >
<head>
</ head>
<body>
<h4>Uma Li st a de Def i ni es: </ h4>
<dl >
<dt >Rum</ dt >
<dd>Bebi da comal t o t eor al col i co. Revi gor ant e poder oso par a quem
sof r e de f r aqueza f si ca. </ dd>

<dt >gua das pedr as</ dt >
<dd>Bebi da par a senhor as e meni nos f r acos. </ dd>

<dt >Bagao</ dt >
<dd>Bebi da par a Homens e Mul her es de bar ba. </ dd>
</ dl >
</ body>
</ ht ml >



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:

<ht ml >
<body>
<i mg sr c=" magoo. gi f " >
</ body>
</ ht ml >

A forma genrica mais simples deste elemento a seguinte:


<i mg sr c=" ur l " >

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:

<i mg sr c=" ht t p: / / www. w3. or g/ I cons/ WWW/ w3c_home" al t =" cone do W3C" >
<i mg sr c=" ht t p: / / www. w3. or g/ I cons/ WWW/ w3c_home" t i t l e=" 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:

<i mg sr c=" ht t p: / / www. w3. or g/ I cons/ WWW/ w3c_home" al t =" cone do W3C"
t i t l e=" 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 Descrio
<img> Insere uma imagem
<map> Define um mapa sobre uma imagem ("image map")
<area> Define uma rea clicvel sobre um mapa de imagem

Exemplos de Aplicao

Como inserir imagens

<ht ml >
<head>
</ head>
<body>
<p>Uma i magememf or mat o gi f : <i mg al t =" Senhor Magoo" sr c=
" magoo. gi f " wi dt h=" 90" hei ght =" 99" ></ p>

<p>Uma i magememf or mat o j pg: <i mg al t =" O Par a so" sr c=

" pr ai a. j pg" ></ p>

<p>Repar e que emambos os casos a i magem i nser i da do mesmo
modo. </ p>
</ body>
</ ht ml >

Utilizando uma imagem de fundo

<ht ml >
<head>
</ head>
<body backgr ound=" bg- pegadas. j pg" >
<h3>Uma i magemde f undo</ h3>

<p>Os f undos de i magemt ant o podemser cr i ados comi magens do t i po
j pg como gi f ou png. <br >
</ p>

<p>Se a i magemde f undo t i ver di menses i nf er i or es s
da j anel a do br owser el a ser r epet i da ( f or mando ummosai co)
at pr eencher t odo o f undo da pgi na. </ p>
</ body>
</ ht ml >


Como alinhar uma imagem com o texto

<ht ml >
<head>
</ head>
<body>
<p>Uma i magem<i mg al t =" O Par a so" sr c=" pr ai a. j pg" al i gn=
" bot t om" > mi st ur ada comt ext o</ p>

" mi ddl e" > mi st ur ada comt ext o</ p>

" t op" > mi st ur ada comt ext o</ p>

<p><b>Not a: </ b> O val or do al i nhament o por omi sso
al i gn=" bot t om" </ p>

" bot t om" > mi st ur ada comt ext o</ p>

<p><i mg al t =" O Par a so" sr c=" pr ai a. j pg" al i gn=" bot t om" >
Uma i magemant es do t ext o</ p>

<p>Uma i magemdepoi s do t ext o <i mg al t =" O Par a so" sr c=
" pr ai a. j pg" al i gn=" bot t om" ></ p>
</ body>
</ ht ml >


Como fazer com que uma imagem flutue esquerda ou direita de um pargrafo

<ht ml >
<head>
</ head>
<body>
<p><i mg al t =" Magoo" sr c=" magoo. gi f " al i gn=" l ef t " > Aqui t emos um
par gr af o comuma i magem. O at r i but o al i gn t emo val or
" l ef t " , dest e modo, a i magemdeve f l ut ar esquer da do
t ext o. </ p>

<p><i mg al t =" Magoo" sr c=" magoo. gi f " al i gn=" r i ght " > Aqui t emos um
par gr af o comuma i magem. O at r i but o al i gn t emo val or
" r i ght " , dest e modo, a i magemdeve f l ut ar di r ei t a do
t ext o. </ p>
</ body>
</ ht ml >

Como ajustar o tamanho de uma imagem

<ht ml >
<head>
</ head>
<body>
<p><i mg al t =" Cami nho par a pees" sr c=" cami nho. j pg" wi dt h=
" 75" hei ght =" 50" ></ p>

" 150" hei ght =" 100" ></ p>

" 300" hei ght =" 200" ></ p>

<p><b>Not a: </ b> Par a al t er ar o t amanho de uma i magemut i l i ze os
at r i but os " hei ght " ( al t ur a) e " wi dt h" ( l ar gur a) . </ p>
</ body>
</ ht ml >



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

<ht ml >
<head>
</ head>
<body>
<p><i mg al t =" Magoo o pi t osga" sr c=" magoo. f i f " al i gn=" l ef t " >
O web br owser no consegue encont r ar a i magem" magoo. f i f " . Por
i sso escr eve o t ext o al t er nat i vo dado at r avs do at r i but o al t .
</ p>
</ body>
</ ht ml >

Colocar uma ligao sobre uma imagem

<ht ml >
<head>
</ head>
<body>

<p>
Uma i magemcomuma l i gao ( " l i nk" ) :
<a hr ef =" ht t p: / / www. um_par ai so. com" >
<i mg al t =" Par a so" sr c=" pr ai a. j pg" bor der =" 0" ></ a>
</ p>
</ body>
</ ht ml >

Crie um mapa sobre uma imagem com diferentes reas sensveis a cliques

<ht ml >
<head>
</ head>
<body>
<p>Cl i que sobr e a r ea 1. </ p>
<i mg sr c=" r ect s. gi f " usemap=" #r ect angul os" bor der =" 0" >
<map i d=" r ect angul os" name=" r ect angul os" >
<ar ea shape=" r ect " coor ds=" 0, 0, 56, 120" hr ef =
" j avascr i pt : al er t ( ' r ea 1' ) " al t =" r ea 1" >
<ar ea shape=" r ect " coor ds=" 56, 0, 248, 42" hr ef =
" j avascr i pt : al er t ( ' r ea 2' ) " al t =" r ea 2" >
</ map>
<p><b>Not a: </ b> O at r i but o " usemap" ut i l i zado como el ement o
i mg r ef er e- se ao at r i but o " i d" ou ao at r i but o
" name" ( depende do br owser ) exi st ent e numel ement o map. Por
i sso t emos, se quer emos gar ant i r a compat i bi l i dade da pgi na
comt odos os br owser s, devemos apl i car ambos os at r i but os ( " i d" e
" name" ) ao el ement o <map>. </ p>
</ body>
</ ht ml >


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

<ht ml >
<head>
</ head>
<body st yl e=" backgr ound- col or : #d0d0d0; col or : bl ack" >
<p>Nest e exempl o a cor escol hi da par a o f undo
adequada por que per mi t e l er o t ext o
comf aci l i dade.
</ p>
</ body>
</ ht ml >

Uma m escolha para as cores de fundo e do texto

<ht ml >
<head>
</ head>
<body st yl e=" backgr ound- col or : whi t e; col or : yel l ow" >
<p>Nest e exempl o a cor escol hi da par a o f undo
desadequada por que no per mi t e l er o t ext o
comf aci l i dade.
</ p>
</ body>
</ ht ml >


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 bgcol or =" #000000" >
<body bgcol or =" r gb( 0, 0, 0) " >
<body bgcol or =" bl ack" >

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 backgr ound=" cl ouds. gi f " >
<body backgr ound=" ht t p: / / www. meusi t e. com/ cl ouds. gi f " >

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:

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.


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 baseia-
se 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:


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.


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 00 51 102 153 204 255
Hex 00 33 66 99 CC 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):



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 exprime-
se 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:


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:



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.











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.


9.1 Entidades de caracteres mais importantes:

Resultado Descrio Entidade Cdigo
inserir espao sem mudar de linha ("non-
breaking space")

< menor do que < <
> maior do que > >
& "e" comercial & &
" aspas " "
Euro € €

Outras entidades importantes:

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.

<ht ml >
<body>
<p>A segui r
t emos 5 espaos nor mai s. </ p>
<p>A segui r
t emos 5 espaos especi ai s. </ p>

</ body>
</ ht ml >


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 Nome da Entidade Cdigo Numrico
" aspas " "
& "e" comercial & &
< menor do que < <
> maior do que > >

9.4 Entidades para caracteres do conjunto ISO 8859-1 (no ASCII)

inserir espao sem mudar de linha ("non-
breaking 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 ° °

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) Þ Þ

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 → →

seta para a esquerda ← ←
ligao OE grande &OElig; Œ
ligao oe pequena &oelig; œ
s grande com um caron &Scaron; Š
s pequeno com um caron &scaron; š
y grande com direse &Yuml; Ÿ
caractere modificador para acento
circunflexo
&circ; ˆ
til pequeno &tilde; ˜
trao "en dash" – –
trao "em dash" — —
aspa esquerda simples ‘ ‘
aspa direita simples ’ ’

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

<ht ml >
<head>
</ head>
<body>
<h4>Uma col una: </ h4>

<t body>
<t r >
<t d>100</ t d>
</ t r >
</ t body>
</ t abl e>

<h4>Uma l i nha e t r s col unas: </ h4>

<t body>
<t r >
<t d>100</ t d>
<t d>200</ t d>
<t d>300</ t d>
</ t r >
</ t body>
</ t abl e>

<h4>Duas l i nhas e t r s col unas: </ h4>

<t body>
<t r >

<t d>100</ t d>
<t d>200</ t d>
<t d>300</ t d>
</ t r >
<t r >
<t d>400</ t d>
<t d>500</ t d>
<t d>600</ t d>
</ t r >
</ t body>
</ t abl e>

<p>As t abel as const r oem- se como el ement o &l t ; t abl e&gt ; . As l i nhas da
t abel a obt m- se como el ement o &l t ; t r &gt ; . As cl ul as de dados
cr i am- se como el ement o &l t ; t d&gt ; . </ p>
</ body>
</ ht ml >

Decorao dos limites da tabela

<ht ml >
<head>
</ head>
<body>
<h4>Uma l i nha de f r ont ei r a nor mal : </ h4>

<t body>
<t r >
<t d>Pr i mei r a</ t d>
<t d>Li nha</ t d>
</ t r >
<t r >
<t d>Segunda</ t d>
<t d>Li nha</ t d>
</ t r >
</ t body>
</ t abl e>


<h4>Uma l i nha de f r ont ei r a mai s espessa: </ h4>

<t body>
<t r >
<t d>Li nha</ t d>
</ t r >
<t r >
<t d>Segunda</ t d>
<t d>Li nha</ t d>
</ t r >
</ t body>
</ t abl e>

<h4>Uma l i nha de f r ont ei r a mui t o espessa: </ h4>

<t body>
<t r >
<t d>Li nha</ t d>
</ t r >
<t r >
<t d>Segunda</ t d>
<t d>Li nha</ t d>
</ t r >
</ t body>
</ t abl e>
</ body>
</ ht ml >

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

pode conter dados, texto, imagens e outros elementos do HTML. O exemplo seguinte
mostra cdigo que cria uma tabela:

<t r >
<t d>l i nha 1, cl ul a 1</ t d>
</ t r >
<t r >
</ t r >
</ t abl e>

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:

<t r >
<t d>Li nha 1, cl ul a 1</ t d>
<t d>Li nha 1, cl ul a 2</ t d>
</ t r >
</ t abl e>

10. Cabealhos numa tabela

O cabealho de uma tabela define-se com o elemento <th>.

<t h>Cabeal ho</ t h>
<t h>Out r o cabeal ho</ t h>
<t r >
</ t r >
<t r >
</ t r >
</ t abl e>

Esta tabela ter o seguinte aspecto quando visualizada no seu browser:


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.

<t r >
</ t r >
<t r >
<t d></ t d>
</ t r >
</ t abl e>

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:

<t r >
</ t r >
<t r >
<t d> </ t d>
</ t r >
</ t abl e>

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 Descrio
<table> Define uma tabela

<th> Define um cabealho para uma tabela
<tr> Insere uma nova linha numa tabela
<td> Insere uma clula numa tabela
<caption> Define uma legenda para uma tabela
<colgroup> Agrupa colunas numa tabela
<col> Define os valores dos atributos para uma ou mais colunas da tabela
<thead> Define um cabealho de uma tabela
<tbody> Define um corpo numa tabela
<tfoot> Define o rodap de uma tabela

Exemplos de Aplicao

Colocar um cabealho numa tabela

<ht ml >
<head>
</ head>
<body>
<h4>Cabeal hos de t abel a: </ h4>

<t body>
<t r >
<t h>Nome</ t h>
<t h>Nmer o de sci o do Bel enenses</ t h>
<t h>Ar t i st a Favor i t o</ t h>
</ t r >
<t r >
<t d>Z das Couves</ t d>
<t d>31</ t d>
<t d>Z Kabr a</ t d>
</ t r >
</ t body>
</ t abl e>

<h4>Cabeal hos al i nhados ao cent r o: </ h4>

<t body>
<t r >
<t h>Nome: </ t h>
</ t r >
<t r >
<t h>Nmer o de sci o do Bel enenses: </ t h>
<t d>31</ t d>
</ t r >
<t r >
<t h>Ar t i st a Favor i t o: </ t h>
<t d>Z Kabr a</ t d>
</ t r >
</ t body>
</ t abl e>
</ body>
</ ht ml >



Problemas com as clulas vazias

<ht ml >
<head>
</ head>
<body>
<t body>
<t r >
<t d>Al gumt ext o</ t d>
</ t r >
<t r >
<t d></ t d>
</ t r >
</ t body>
</ t abl e>
<p>Como voc pode ver , uma das cl ul as no t eml i nhas de
f r ont ei r a desenhadas. I sso deve- se ao f at o de a cl ul a
est ar vazi a. Se i nser i r umespao vai ver que el a
cont i nuar vazi a. </ p>
<p>Par a r esol ver o pr obl ema deve i nser i r umespao
" nobr eaki ng space" na cl ul a que est vazi a. </ p>
<p>O espao " nobr eaki ng space" uma ent i dade de
car act er e do HTML e escr eve- se na f or ma " & nbsp; " . </ p>
</ body>
</ ht ml >


Uma tabela com legenda

<ht ml >
<head>
</ head>
<body>
<h4>Est a t abel a t emuma l egenda: </ h4>

<capt i on>A Mi nha Legenda</ capt i on>
<t body>
<t r >
<t d>100</ t d>
<t d>200</ t d>
<t d>300</ t d>
</ t r >
<t r >
<t d>400</ t d>
<t d>500</ t d>
<t d>600</ t d>
</ t r >
</ t body>
</ t abl e>
</ body>
</ ht ml >

Clulas que se estendem por mais do que do que uma linha ou coluna

<ht ml >
<head>
</ head>
<body>
<h4>Uma cl ul a que ocupa duas col unas: </ h4>

<t body>
<t r >
<t h>Nome</ t h>
<t h col span=" 2" >Nmer o de sci o do Bel enenses</ t h>
</ t r >
<t r >
<t d>31</ t d>
<t d>31</ t d>
</ t r >
</ t body>
</ t abl e>


<h4>Uma cl ul a que ocupa duas l i nhas: </ h4>

<t body>
<t r >
<t h>Nome: </ t h>
</ t r >
<t r >
<t h r owspan=" 2" >Nmer o de sci o do Bel enenses: </ t h>
<t d>31</ t d>
</ t r >
<t r >
<t d>31</ t d>
</ t r >
</ t body>
</ t abl e>
</ body>
</ ht ml >

Utilizao de elementos dentro de uma tabela

<ht ml >
<head>
</ head>
<body>
<t body>
<t r >
<t d>
<p>I st o out r o par gr af o</ p>
</ t d>
<t d>Est a cl ul a cont muma t abel a:
<t body>
<t r >
<t d>A</ t d>
<t d>B</ t d>
</ t r >
<t r >
<t d>C</ t d>
<t d>D</ t d>
</ t r >

</ t body>
</ t abl e>
</ t d>
</ t r >
<t r >
<t d>Est a cl ul a cont muma l i st a:
<ul >
<l i >l i vr os</ l i >
<l i >r evi st as</ l i >
<l i >j or nai s</ l i >
</ ul >
</ t d>
<t d>Est a cont mapenas t ext o. </ t d>
</ t r >
</ t body>
</ t abl e>
</ body>
</ ht ml >

Como alinhar o contedo dentro de uma clula

<ht ml >
<head>
</ head>
<body>
<h3>Pont os acumul ados</ h3>

<t abl e wi dt h=" 400" bor der =" 1" >
<t body>
<t r >
<t h al i gn=" l ef t " >Ti po de compr a</ t h>
<t h al i gn=" r i ght " >Dezembr o</ t h>
<t h al i gn=" cent er " >J anei r o</ t h>
</ t r >
<t r >
<t d al i gn=" l ef t " >Gasol i na</ t d>
<t d al i gn=" r i ght " >28</ t d>
<t d al i gn=" cent er " >16</ t d>
</ t r >
<t r >
<t d al i gn=" l ef t " >Super mer cado</ t d>
<t d al i gn=" r i ght " >17</ t d>
<t d al i gn=" cent er " >21</ t d>
</ t r >
<t r >
<t d al i gn=" l ef t " >Doces</ t d>

<t d al i gn=" r i ght " >5<br ></ t d>
<t d al i gn=" cent er " >9<br >
</ t d>
</ t r >
<t r >
<t h al i gn=" l ef t " >Tot ai s</ t h>
<t h al i gn=" r i ght " >50</ t h>
<t h al i gn=" cent er " >46</ t h>
</ t r >
</ t body>
</ t abl e>
</ body>
</ ht ml >

O atributo " frame"

<ht ml >
<head>
</ head>
<body>
<p>Se no consegui r ver uma mol dur a desenhada ao r edor da
t abel a ent o o seu br owser deve ser mui t o ant i go ou t emuma
def i ci nci a no supor t e par a HTML 4. 01. </ p>

<h4>Comf r ame=" bor der " : </ h4>

<t abl e f r ame=" bor der " >
<t body>
<t r >
<t d>Li nha</ t d>
</ t r >
<t r >
<t d>Segunda</ t d>
<t d>Li nha</ t d>
</ t r >
</ t body>
</ t abl e>

<h4>Comf r ame=" box" : </ h4>

<t abl e f r ame=" box" >
<t body>
<t r >
<t d>Li nha</ t d>
</ t r >
<t r >

<t d>Segunda</ t d>
<t d>Li nha</ t d>
</ t r >
</ t body>
</ t abl e>

<h4>Comf r ame=" voi d" : </ h4>

<t abl e f r ame=" voi d" >
<t body>
<t r >
<t d>Li nha</ t d>
</ t r >
<t r >
<t d>Segunda</ t d>
<t d>Li nha</ t d>
</ t r >
</ t body>
</ t abl e>

<h4>Comf r ame=" above" : </ h4>

<t abl e f r ame=" above" >
<t body>
<t r >
<t d>Li nha</ t d>
</ t r >
<t r >
<t d>Segunda</ t d>
<t d>Li nha</ t d>
</ t r >
</ t body>
</ t abl e>

<h4>Comf r ame=" bel ow" : </ h4>

<t abl e f r ame=" bel ow" >
<t body>
<t r >
<t d>Li nha</ t d>
</ t r >
<t r >
<t d>Segunda</ t d>
<t d>Li nha</ t d>
</ t r >
</ t body>
</ t abl e>

<h4>Comf r ame=" hsi des" : </ h4>

<t abl e f r ame=" hsi des" >
<t body>
<t r >
<t d>Li nha</ t d>
</ t r >
<t r >
<t d>Segunda</ t d>
<t d>Li nha</ t d>
</ t r >
</ t body>
</ t abl e>

<h4>Comf r ame=" vsi des" : </ h4>


<t abl e f r ame=" vsi des" >
<t body>
<t r >
<t d>Li nha</ t d>
</ t r >
<t r >
<t d>Segunda</ t d>
<t d>Li nha</ t d>
</ t r >
</ t body>
</ t abl e>

<h4>Comf r ame=" l hs" : </ h4>

<t abl e f r ame=" l hs" >
<t body>
<t r >
<t d>Li nha</ t d>
</ t r >
<t r >
<t d>Segunda</ t d>
<t d>Li nha</ t d>
</ t r >
</ t body>
</ t abl e>

<h4>Comf r ame=" r hs" : </ h4>

<t abl e f r ame=" r hs" >
<t body>
<t r >
<t d>Li nha</ t d>
</ t r >
<t r >
<t d>Segunda</ t d>
<t d>Li nha</ t d>
</ t r >
</ t body>
</ t abl e>
</ body>
</ ht ml >




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>
<l i nk r el =" st yl esheet " t ype=" t ext / css" hr ef =" meu_est i l o. 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:


<head>
<st yl e t ype=" t ext / css" >
body { backgr ound- col or : r ed }
p { mar gi n- l ef t : 20px }
</ st yl e>
</ 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 st yl e=" col or : bl ue; mar gi n- l ef t : 20px" >I st o umpar gr af o</ p>

Para aprender estilos CSS faa o curso de Folhas de Estilos em Cascata.

12.5 Elementos para estilos

Elemento Descrio
<style> Define estilos CSS
<link> Define uma referncia para um recurso externo
<div> Insere uma seo no documento
<span> 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

<ht ml >
<head>
h1 {col or : r ed}
h3 {col or : bl ue}
</ st yl e>
</ head>
<body>
</ body>
</ ht ml >



Utilizao de estilos definidos numa folha de estilos externa

est i l os. css

h1, h2 { f ont - f ami l y: sans- ser i f ; col or : #666666; }
p { f ont - f ami l y: cur si ve; }

<ht ml >
<head>
<l i nk hr ef =" est i l os. css" t ype=" t ext / css" r el =" st yl esheet " >
</ head>
<body>
<h1>Est e cabeal ho f oi f or mat ado comuma f ol ha de est i l os. </ h1>
<p>Est e par gr af o t ambm! </ p>
</ body>
</ ht ml >

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:


<ht ml >
<body>
<p>
<f ont si ze=" 2" f ace=" Ver dana" >I st o umpar gr af o. </ f ont >
</ p>
<p>
<f ont si ze=" 3" f ace=" Ti mes" >I st o out r o par gr af o. </ f ont >
</ p>
</ body>
</ ht ml >

Atributos do Elemento <font>

Atributo Exemplo Finalidade
size="nmero" size="2" Define o tamanho do texto
size="+nmero" size="+1" Aumenta o tamanho do texto
size="-nmero" size="-1" Diminui o tamanho do texto
face="face-name" face="Times" Define o nome do tipo de letra a usar
para escrever o texto
color="color-value" color="#eeff00" Define a cor do texto
color="color-name" color="red" 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

<ht ml >
<head>
</ head>
<body>
<p>
O t ext o segui nt e t em<f ont f ace=" Tahoma" >t i po de l et r a t ahoma. </ f ont >

</ p>
<p>
O t ext o segui nt e t em<f ont f ace=" Ti mes" >t i po de l et r a t i mes. </ f ont >
</ p>
<p>
O t ext o segui nt e t em<f ont f ace=" Ar i al " >t i po de l et r a ar i al . </ f ont >
</ p>
</ body>
</ ht ml >

Definir o tamanho da letra

<ht ml >
<head>
</ head>
<body>
<p>
O t ext o segui nt e t em<f ont si ze=" 2" >t amanho 2. </ f ont >
</ p>
<p>
O t ext o segui nt e t em<f ont si ze=" 4" >t amanho 4. </ f ont >
</ p>
<p>
O t ext o segui nt e est <f ont si ze=" +1" >umt amanho aci ma do nor mal . </ f ont >
</ p>
<p>
O t ext o segui nt e est <f ont si ze=" - 1" >um t amanho abai xo do
nor mal . </ f ont >
</ p>
</ body>
</ ht ml >


Definir a cor do texto

<ht ml >
<head>
</ head>
<body>
<p>
O t ext o segui nt e t em<f ont col or =" r ed" >cor ver mel ha. </ f ont >
</ p>
<p>
O t ext o segui nt e t em<f ont col or =" bl ue" >cor azul . </ f ont >
</ p>
<p>
O t ext o segui nt e t em<f ont col or =" #00cc00" >cor ver de. </ f ont >
</ p>
</ body>
</ ht ml >

Definir o tipo de letra, o tamanho e a cor

<ht ml >
<head>
</ head>
<body>
<p>
O t ext o segui nt e t em
<f ont col or =" r ed" si ze=" +1" f ace=" t ahoma" >cor ver mel ha,
t emt amanho aci ma do nor mal e t i po de l et r a t ahoma. </ f ont >
</ p>
</ body>
</ ht ml >


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.

<f or m>
<i nput >
.
.
.
<i nput >
</ f or m>

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:

<f or mact i on=" pr ocessar . php" met hod=" post " >
Pr i mei r o nome:
<i nput t ype=" t ext " name=" pr i mei r o_nome" ><br >
l t i mo nome:
<i nput t ype=" t ext " name=" ul t i mo_nome" >
</ f or m>

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.


<f or mact i on=" pr ocessament o. asp" >
<i nput t ype=" r adi o" name=" sexo" val ue=" mascul i no" > Mascul i no<br >
<i nput t ype=" r adi o" name=" sexo" val ue=" f emi ni no" > Femi ni no
<f or m>

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.

<f or m>
<i nput t ype=" checkbox" name=" pat i ns" >Eu t enho pat i ns eml i nha<br >
<i nput t ype=" checkbox" name=" skat e" >Eu t enho umskat e
<f or m>


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.

<f or mname=" i nput " act i on=" exempl os/ act i on. php" met hod=" get " >
Nome de ut i l i zador :
<i nput t ype=" t ext " name=" ut i l i zador " >
<i nput t ype=" submi t " val ue=" Submet er " >
<f or m>


13.6 Elementos para Formulrios

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

nmero ilimitado de caracteres)
<label> Define um nome para um elemento
<fieldset> Agrupa elementos num formulrio
<legend> Define uma legenda para um grupo de elementos do formulrio
<select> Define uma lista com vrias opes selecionveis
<optgroup> Define um grupo de opes
<option> Insere mais uma opo numa lista com vrias opes selecionveis
<button> Define um boto que pode ser pressionado

Exemplos de Aplicao

Como criar campos para insero de texto ou dados

<ht ml >
<head>
</ head>
<body>
<f or mact i on=" pr ocessar . php" >
Escr eva o seu pr i mei r o nome: <i nput name=" f i r st name" ><br >
Escr eva o seu l t i mo o nome: <i nput name=" l ast name" ><br >
<i nput t ype=" submi t " >
</ f or m>
</ body>
</ ht ml >

Campos para senhas (" password" )

<ht ml >
<head>
</ head>
<body>
Escr eva o seu nome de usur i o: <i nput name=" user " ><br >
Escr eva a sua senha ( segr edo) : <i nput t ype=" passwor d" val ue=" "
name=" passwor d" ><br >
</ f or m>

<p><b>Not a: </ b> Quando se di gi t a uma senha o br owser most r a
ast er i scos ou bol i nhas emvez dos car act er es que i nt r oduz. Dest e
modo se al gumest i ver espi onando por ci ma do seu ombr o enquant o
escr eve no vai consegui r l er a sua senha. </ p>
</ body>
</ ht ml >



Caixas de validao (" checkboxes" )

<ht ml >
<head>
</ head>
<body>
Eu t enho uma bi ci cl et a: <i nput t ype=" checkbox" val ue=" ON"
name=" bi ci cl et a" ><br >
Eu t enho pat i ns em l i nha: <i nput t ype=" checkbox" val ue=" ON"
name=" pat i ns" >
<br >
</ f or m>
</ body>
</ ht ml >

" Radiobuttons" (grupos de botes em que apenas um pode estar ativo)

<ht ml >
<head>
</ head>
<body>
Mascul i no: <i nput t ype=" r adi o" checked val ue=" macho" name=" Sexo" ><br >
Femi ni no: <i nput t ype=" r adi o" val ue=" f mea" name=" Sexo" ><br >
</ f or m>

<p><b>Not a: </ b> Quando o usur i o cl i ca sobr e um" r adi obut t on"
el e passa a ser a sua escol ha ( passa ao est ado " checked" ) e os

r est ant es " r adi obut t ons" per t encent es ao mesmo gr upo passamao
est ado " unchecked" . </ p>
</ body>
</ ht ml >

Lista com vrios itens para selecionar

<ht ml >
<head>
</ head>
<body>
<h3>Ti mes</ h3>

<sel ect name=" cl ubes" >
<opt i on val ue=" Benf i ca" sel ect ed=" sel ect ed" >Benf i ca</ opt i on>
<opt i on val ue=" FCP" >F. C. P</ opt i on>
<opt i on val ue=" Boavi st a" >Boavi st a</ opt i on>
<opt i on val ue=" Spor t i ng" >Spor t i ng</ opt i on>
</ sel ect ><br >
</ f or m>
</ body>
</ ht ml >

Lista com vrios itens selecionveis, mas com um valor pr-selecionado

<ht ml >
<head>
</ head>
<body>

<h3>Ti mes</ h3>

<sel ect name=" cl ubes" >
<opt i on val ue=" Benf i ca" sel ect ed=" sel ect ed" >Benf i ca</ opt i on>
<opt i on val ue=" FCP" >F. C. P</ opt i on>
<opt i on val ue=" Boavi st a" sel ect ed>Boavi st a</ opt i on>
<opt i on val ue=" Spor t i ng" >Spor t i ng</ opt i on>
</ sel ect ><br >
</ f or m>
Repar e que aqui t emos umi t empr - sel eci onado de f or ma expl ci t a.
</ body>
</ ht ml >

Como criar um boto

<ht ml >
<head>
</ head>
<body>
<i nput t ype=" but t on" val ue=" Car r egue Aqui ! " >
</ f or m>
</ body>
</ ht ml >


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

<ht ml >
<head>
</ head>
<body>
<f or mname=" i nput " act i on=" pr ocessar . php" met hod=" get " >
Escr eva o seu pr i mei r o nome: <i nput val ue=" Robi n"
name=" Pr i mei r oNome" ><br >
Escr eva o seu l t i mo o nome: <i nput val ue=" dos Bosques"
name=" Ul t i moNome" ><br >
</ f or m>

<p>Se cl i car sobr e o bot o " Submet er " os dados do f or mul r i o ser o envi ados
par a a pgi na " pr ocessar . php" . </ p>
</ body>
</ ht ml >

Formulrio com caixas de validao e um boto para submeter

<ht ml >
<head>
</ head>
<body>
Eu t enho uma bi ci cl et a: <i nput t ype=" checkbox" checked val ue=" ON"
name=" Bi ke" ><br >
Eu t enho pat i ns eml i nha: <i nput t ype=" checkbox" val ue=" ON"
name=" Pat i ns" ><br >
</ f or m>

</ body>
</ ht ml >



Formulrio com " radiobuttons" e um boto para submeter

<ht ml >
<head>
</ head>
<body>
Mascul i no: <i nput t ype=" r adi o" checked val ue=" Mascul i no"
name=" Sexo" ><br >
Femi ni no: <i nput t ype=" r adi o" val ue=" Femi ni no" name=" Sexo" ><br >
</ f or m>

</ body>
</ ht ml >

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:



ou

<ul ><l i >I st o umi t emnuma l i st a no or denada</ l i ></ 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 :


<! DOCTYPE HTML PUBLI C " - / / W3C/ / DTD HTML 4. 01/ / EN"
" ht t p: / / www. w3. or g/ TR/ ht ml 4/ st r i ct . dt d" >

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 PUBLI C " - / / W3C/ / DTD HTML 4. 01 Tr ansi t i onal / / EN"
" ht t p: / / www. w3. or g/ TR/ ht ml 4/ l oose. dt d" >

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

<ht ml >
<head>
<t i t l e>O t t ul o no apr esent ado pel o br owser </ t i t l e>
</ head>
<body>
<p>Est e t ext o apr esent ado por que est dent r o de umpar gr af o. </ p>
</ body>
</ ht ml >

Definir um nico alvo para todas as ligaes da pgina

<ht ml >
<head>
<base t ar get =" _bl ank" >
</ head>
<body>
<p><a t ar get =" _bl ank" hr ef =" ht t p: / / www. w3. or g" >W3C</ a> - Est a
l i gao se abr e numa nova j anel a por que o at r i but o

" t ar get " possui o val or " _bl ank" . </ p>

<p><a hr ef =" ht t p: / / www. w3. or g" >W3C</ a> - Apesar de o at r i but o
t ar get no t er si do usado no el ement o a, est a
l i gao se abr e numa nova j anel a por que o at r i but o
" t ar get " do el ement o &l t ; base&gt ; possui o val or " _bl ank" . </ p>
</ body>
</ ht ml >

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 t emos al gumt ext o</ p>
</ head>

Numa situao destas o browser pode reagir de duas formas:

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 Descrio
<head> Contm informao importante a respeito do documento, mas que

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

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 Descrio
<!DOCTYPE> 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:

<met a name=" descr i pt i on" cont ent =" Tut or i ai s e r ef er nci as t cni cas de HTML,
CSS, J avaScr i pt , XML, XSLT, SVG" >

No fragmento de cdigo seguinte o elemento <meta> contm palavras-chave
para indexar a pgina:

<met a name=" keywor ds" cont ent =" HTML, DHTML, CSS, XML, XHTML, J avaScr i pt , 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.


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:

<met a name=" secur i t y" cont ent =" l ow" >

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

<ht ml >
<head>
<met a name=" descr i pt i on" cont ent = " Tut or i ai s de HTML, CSS, XML, XHTML, SVG e
Fl ash di spon vei s par a downl oad" >
<met a name=" keywor ds" cont ent = " HTML, DHTML, CSS, XML, XHTML, J avaScr i pt , XML,
SVG" >
</ head>
<body>
<p>Os at r i but os do el ement o met a pr esent es nest e document o descr evemo seu
cont edo e f or necemal gumas pal avr as- chave. </ p>
</ body>
</ ht ml >

A descrio do documento

<ht ml >
<head>
<met a name=" aut hor " cont ent =" Manel Ambr si o" >
<met a name=" r evi sed" cont ent =" Xi ko Ambr si o, 26/ 05/ 03" >
<met a name=" gener at or " cont ent =" UmSof t war e Qual quer " >
</ head>
<body>
<p>Os at r i but os do el ement o <met a> pr esent es nest e document o i dent i f i camo
aut or e o sof t war e usado par a cr i ar a pgi na. </ p>
</ body>

</ ht ml >

Redirecionar para outra pgina

<ht ml >
<head>
<met a ht t p- equi v=" Ref r esh" cont ent =" 10; ur l =ht t p: / / www. w3. or g" >
</ head>
<body>
<p>Se o nosso websi t e est i vesse emr emodel ao ser i a envi ado par a o websi t e
do w3c: <a hr ef =" ht t p: / / www. w3. or g" >ht t p: / / www. w3. or g/ </ a></ p>
<p>Dent r o de 10 segundos ser envi ado par a o websi t e do W3C. </ p>

<p>Se est a mensagemper manecer vi s vel por mai s de 10 segundos, por f avor
cl i que na l i gao mai s aci ma! </ p>
</ body>
</ ht ml >

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".


Exemplos de Aplicao

Como criar um conjunto de subjanelas com trs documentos dispostos na
vertical

Moldura A

<ht ml >
<head>
<t i t l e></ t i t l e>
</ head>
<body>
<p>Est a a mol dur a <span st yl e=" col or : r ed; f ont - si ze: 150%" >A</ span></ p>
</ body>
</ ht ml >

Moldura B

<ht ml >
<head>
</ head>
<body>
<p>Est a a mol dur a <span st yl e=" col or : bl ue; f ont - si ze: 150%" >B</ span></ p>
</ body>
</ ht ml >

Moldura C

<ht ml >
<head>
</ head>
<body>
<p>Est a a mol dur a <span st yl e=" col or : t eal ; f ont - si ze: 150%" >C</ span></ p>
</ body>
</ ht ml >

<ht ml >
<head>
</ head>
<f r ameset col s=" 25%, 50%, 25%" >
<f r ame sr c=" mol dur a_a. ht ml " >
<f r ame sr c=" mol dur a_b. ht ml " >
<f r ame sr c=" mol dur a_c. ht ml " >
</ f r ameset >
</ ht ml >


Como criar um conjunto de subjanelas com trs documentos dispostos na
horizontal

<ht ml >
<head>
</ head>
<f r ameset r ows=" 25%, 50%, 25%" >
</ f r ameset >
</ ht ml >

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:

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

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.


O Elemento <frame>

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:

<f r ameset col s=" 25%, 75%" >
<f r ameset >

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.

<ht ml >
<head>
</ head>
<f r ameset r ows=" 25%, 50%, 25%" f r amebor der =" 0" f r amespaci ng=" 0" >
<f r ame name=" a" nor esi ze sr c=" mol dur a_a. ht ml " scr ol l i ng=" no" >
<f r ame name=" b" sr c=" mol dur a_b. ht ml " >
<f r ame name=" c" sr c=" mol dur a_c. ht ml " scr ol l i ng=" yes" >
</ f r ameset >
</ ht ml >


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 Descrio
<frameset> Define um conjunto de molduras
<frame> Define o contedo de uma subjanela (moldura, ou "frame")
<noframes> Define uma seo "noframes" para ser usada pelos browsers que no
suportam molduras
<iframe> Define uma subjanela (moldura) interior ("inline frame")

Exemplos de Aplicao

Como criar subjanelas com partes dispostas na vertical e outras na horizontal

<ht ml >
<head>
</ head>
<f r ameset r ows=" 50%, 50%" >
<f r ameset col s=" 25%, 75%" >
</ f r ameset >
</ f r ameset >
</ ht ml >

Como usar subjanelas para organizar a navegao no seu site

Moldura de Navegao

<ht ml >
<body>
<br ><b>Bar r a de Navegao</ b>
<hr >
<a hr ef =" mol dur a0. ht ml " t ar get =" pr i nci pal " >HOME</ a><br ><br >
<a hr ef =" mol dur a_a. ht ml " t ar get =" pr i nci pal " >Document o A</ a><br >
<a hr ef =" mol dur a_b. ht ml " t ar get =" pr i nci pal " >Document o B</ a><br >
<a hr ef =" mol dur a_c. ht ml " t ar get =" pr i nci pal " >Document o C</ a><br >
</ body>
</ ht ml >


Moldura de Contedo

<ht ml >
<head>
</ head>
<body>
Est e o document o de ent r ada ( " home" ) do conj unt o de mol dur as. <br ><br >
</ body>
</ ht ml >

<ht ml >
<head>
</ head>
<f r ameset col s=" 120, *" >
<f r ame sr c=" nav_mol dur as. ht ml " >
<f r ame name=" pr i nci pal " sr c=" mol dur a0. ht ml " >
</ f r ameset >
</ ht ml >

Como colocar uma subjanela interior (" inline frame" ) dentro de uma pgina

Moldura iframe

<ht ml >
<head>
<t i t l e>Uma mol dur a " i nl i ne" </ t i t l e>
</ head>
<body>
Est a par t e per t ence a uma mol dur a " i nl i ne" ( i f r ame) <br >
El a est numdocument o HTML separ ado. <br ><br >
Vej a que se o document o no couber t odo dent r o da sua j anel a
apar ecembar r as de desl ocament o. <br ><br >
A di f er ena mai s i mpor t ant e r el at i va s mol dur as nor mai s
est no f at o de umi f r ame poder ser col ocado dent r o de uma
pgi na, mi st ur ado comos cont edos dest a e no si t e que qui ser mos. <br >
</ body>
</ ht ml >

<ht ml >
<head>
</ head>
<body>
<h3>Uma mol dur a " i nl i ne" ( i f r ame) </ h3>
<i f r ame sr c=" i f r ame. ht ml " wi dt h=" 400" hei ght =" 150" f r amebor der =" 1"
mar gi nhei ght =" 0" mar gi nwi dt h=" 0" ></ i f r ame>

<p>Al guns br owser s ant i gos no supor t ami f r ames. </ p>
</ body>
</ ht ml >

Saltar para um local especfico de uma pgina que se encontra numa outra
subjanela (" frame" )

Moldura de Navegao

<ht ml >
<body>
<p><a hr ef =" l i nk_bookmar k. ht ml #C3" t ar get =" pr i nci pal " >Vej a
t amb&eacut e; mo Cap&i acut e; t ul o 3</ a></ p>
</ body>
</ ht ml >

Moldura de Contedo

<! DOCTYPE ht ml PUBLI C " - / / W3C/ / DTD HTML 4. 01 Tr ansi t i onal / / EN" >
<ht ml >
<head>
</ head>
<body>
<p><a hr ef =" #C3" >Vej a t ambmo Cap t ul o 3</ a></ p>
<h1>Manual de I ni ci ao Tor t ur a Chi nesa</ h1>
<p>
Nest e cap t ul o vamos descr ever as qual i dades necessr i as par a poder t or nar -
se
umTcni co Super i or de Tor t ur a Chi nesa. Est a nobr e ar t e, desenvol vi da ao
l ongo de mui t os scul os por gr andes mest r es da cul t ur a or i ent al , assent a
numa
f i l osof i a de r espei t o pel os val or es da t ol er nci a e amor pel o pr xi mo.
</ p>


<p>
Par a desenvol ver as apt i des necessr i as a um bom exer c ci o dest a nobr e
ar t e
voc pr eci sa ar r anj ar umespao f si co par a i nst al ar o seu l abor at r i o.
Est a escol ha uma das deci ses mai s i mpor t ant es par a o sucesso das suas
i ni ci at i vas de t or t ur a chi nesa.
</ p>


<h3><a name=" C3" i d=" C3" >Cap t ul o 3</ a></ h3>

<p>
Agor a chegado o moment o de r ecr ut ar al guns col abor ador es e t est ar os
conheci ment os j adqui r i dos. Comece por t ent ar per suadi r al gumas pessoas de
quemgost e menos par a par t i ci par emnas suas sesses de i ni ci ao t or t ur a
chi nesa na qual i dade de v t i mas i ndef esas. No caso de el as se most r ar em
r et i cent es ser obr i gado a nome- l os como vol unt r i os f or a, o que j
ser
umexcel ent e exer c ci o de i ni ci ao.
</ p>
</ body>
</ ht ml >

<ht ml >
<head>
</ head>
<f r ame sr c=" mol dur a_sal t ar . ht ml " >
<f r ame sr c=" l i nk_bookmar k. ht ml #C3" name=" pr i nci pal " >
</ f r ameset >
</ ht ml >

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>.

<ht ml >
<head>
</ head>
<body>
<scr i pt t ype=" t ext / j avascr i pt " >
document . wr i t e( " Ol Mundo! " ) ;
</ scr i pt >
</ body>
</ ht ml >


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 . 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

<ht ml >
<head>
<head>
<body>
<! - -
document . wr i t e( " Ol mundo! " )
- - >
</ scr i pt >
<noscr i pt >
O seu br owser no supor t a J avaScr i pt !
</ noscr i pt >
</ body>

</ ht ml >

17.3 Elementos para inserir scripts e cdigo

Elemento Descrio
<script> Define um bloco que contm um script
<noscript> Define texto alternativo para ser apresentado sempre que o script no
executado
<object> Insere um objeto na pgina
<param> Define parmetros para controlar o objeto

Exemplos de Aplicao

Como inserir um script

<ht ml >
<head>
</ head>
<body>
document . wr i t e( ' <h1>Ol Mundo! </ h1>' )
</ scr i pt >
<h1>Ol Mundo! </ h1>
</ body>
</ ht ml >

Como lidar com um browser que no suporta scripts

<ht ml >
<head>

</ head>
<body>
<! - -
document . wr i t e( " Se voc v est e t ext o o seu br owser supor t a
scr i pt s! " )
- - >
</ scr i pt >
<noscr i pt >No h supor t e par a J avaScr i pt ! </ noscr i pt >
<p>Se o br owser no supor t ar J avaScr i pt ser most r ado o t ext o pr esent e no
el ement o &l t ; noscr i pt &gt ; . </ p>
</ body>
</ ht ml >


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

<ht ml >
<head>
<t i t l e>Aqui col ocamos o t t ul o</ t i t l e>
</ head>
<body>
Aqui col ocamos os cont edos vi s vei s
</ body>
<ht ml >

Elementos de cabealho (para captulos ou sees)

<h1>Cabeal ho mai or </ h1>
<h2>. . . </ h2>
<h3>. . . </ h3>
<h4>. . . </ h4>
<h5>. . . </ h5>
<h6>Cabeal ho menor </ h6>

Elementos para texto

<br > ( mudana f or ada de l i nha)
<hr > ( l i nha hor i zont al )
<pr e>I st o t ext o pr - f or mat ado</ pr e>

Estilos lgicos

<em>I st o t ext o enf at i zado</ em>
<st r ong>I st o t ext o f or t e</ st r ong>
<code>I st o cdi go de comput ador </ code>

Estilos fsicos

<b>I st o t ext o emnegr i t o</ b>
<i >I st o t ext o emi t l i co</ i >

Ligaes e ncoras

<a hr ef =" ht t p: / / www. w3. or g/ " >I st o uma Li gao</ a>
<a hr ef =" ht t p: / / www. w3. or g/ " ><i mg sr c=" URL" al t =" Text o al t er nat i vo" ></ a>
<a hr ef =" mai l t o: bi l l @gai t as. com" >Envi ar e- mai l </ a>

Uma ncora com nome:

<a name=" di cas" i d=" di cas" >Di cas t ei s</ a>
<a hr ef =" #di cas" >Sal t ar par a a Seo de Di cas</ a>

Lista no ordenada

<ul >
<l i >Pr i mei r o i t em</ l i >
<l i >I t emsegui nt e</ l i >

</ ul >

Lista ordenada

<ol >
<l i >Pr i mei r o i t em</ l i >
<l i >I t emsegui nt e</ l i >
</ ol >

Lista de definies

<dl >
<dt >Pr i mei r o t er mo</ dt >
<dd>Def i ni o</ dd>
<dt >Ter mo segui nt e</ dt >
<dd>Def i ni o</ dd>
</ dl >

Tabelas

<t r >
<t h>umcabeal ho</ t h>
<t h>out r o cabeal ho</ t h>
</ t r >
<t r >
<t d>al gumt ext o</ t d>
<t d>mai s t ext o</ t d>
</ t r >
</ t abl e>

Subjanelas (molduras, ou " frames" )

<f r ameset col s=" 25%, 75%" >
<f r ame sr c=" pagi na1. ht ml " >
<f r ame sr c=" pagi na2. ht ml " >
<f r ameset >

Formulrios

<f or mact i on=" ht t p: / / www. o_meu_si t e. com/ pr ocessar . php" met hod=" post / get " >
<i nput t ype=" t ext " name=" l ast name" val ue=" Nabo" si ze=" 30" maxl engt h=" 50" >
<i nput t ype=" passwor d" >
<i nput t ype=" checkbox" checked=" checked" >
<i nput t ype=" r adi o" checked=" checked" >
<i nput t ype=" r eset " >
<i nput t ype=" hi dden" >

<sel ect >
<opt i on>Rabanet es
<opt i on sel ect ed>Al hos
<opt i on>Cebol as
</ sel ect >
<t ext ar ea name=" Coment ar i o" r ows=" 60" col s=" 20" ></ t ext ar ea>
</ f or m>

Entidades

&l t ; r epr esent a o mesmo que <
&gt ; r epr esent a o mesmo que >
© r epr esent a o mesmo que


Outros Elementos


<bl ockquot e>
Text o ci t ado a par t i r de uma f ont e ext er na.
</ bl ockquot e>

<addr ess>
Ender eo ( 1 l i nha) <br >
Ender eo ( 2 l i nha) <br >
Ci dade<br >
</ addr ess>

19. Referncia rpida de HTML 4.01

19.1 Todos os elementos ordenados alfabeticamente

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

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

<td> Define uma diviso, ou clula, numa tabela
<textarea> Define uma rea para insero de texto num formulrio
<tfoot> Define o rodap de uma tabela
<th> Define o cabealho de uma coluna numa tabela
<thead> Define o cabealho de uma clula numa tabela
<title> Define o ttulo da pgina
<tr> Define uma linha de clulas numa tabela
<tt> Define texto que imita o de uma mquina de escrever antiga
("teletype text")
<u> Define texto sublinhado ("underlined.")
<ul> Define uma lista no ordenada ("unordered list")
<var> 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 Valor Descrio
class class_rule ou style_rule A classe (CSS) a que pertence o elemento
id id_name Um nome nico (no deve ser repetido no
mesmo documento) para o elemento
style style_definition Definio de um estilo dentro do prprio corpo
do documento ("inline style definition")
title tooltip_text 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.

dir ltr | rtl Define a direo do texto
lang language_code Define o cdigo da lngua usada na escrita dos
textos

20.4 Atributos de teclado

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

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

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>

onload script Script a executar quando o documento acabar de ser
carregado
onunload script Script a executar quando o documento for abandonado

20.6 Eventos para formulrios

S podem ser usados com elementos associados a um formulrio

onchange script Script a executar quando o valor contido no elemento
sofrer uma alterao
onsubmit script Script a executar quando o formulrio for submetido
onreset script Script a executar quando o contedo do formulrio for
reposto nos valores iniciais
onselect script Script a executar quando o elemento for selecionado
onblur script Script a executar quando o elemento perder o foco
onfocus script 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.

onkeydown script Script a executar quando uma tecla pressionada
onkeypress script Script a executar quando uma tecla pressionada e
seguidamente libertada
onkeyup script 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.


onclick script Script a executar quando detectado um clique no
mouse
ondblclick script Script a executar quando detectado um clique duplo no
mouse
onmousedown script Script a executar quando o boto do mouse
pressionado
onmousemove script Script a executar quando o ponteiro do mouse muda de
posio
onmouseout script Script a executar quando o ponteiro do mouse deixa de
estar sobre um elemento
onmouseover script Script a executar quando o ponteiro do mouse passa a
estar sobre um elemento
onmouseup script 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 Descrio Cdigo Numrico
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 /
0 nmero 0 0
1 nmero 1 1
2 nmero 2 2
3 nmero 3 3
4 nmero 4 4
5 nmero 5 5
6 nmero 6 6

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

f f minsculo f
g g minsculo g
h h minsculo h
i i minsculo i
j j minsculo j
k k minsculo k
l l minsculo l
m m minsculo m
n n minsculo n
o o minsculo o
p p minsculo p
q q minsculo q
r r minsculo r
s s minsculo s
t t minsculo t
u u minsculo u
v v minsculo v
w w minsculo w
x x minsculo x
y y minsculo y
z z minsculo z
{ abre chaves {
| barra vertical |
} fecha chaves }
~ til ~

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 Descrio Cdigo Numrico
NUL caractere nulo (no representa nada)
SOH incio do cabealho ("start of header")
STX incio do texto ("start of text")
ETX fim do texto ("end of text")
EOT fim da transmisso ("end of transmission")
ENQ interrogao ("enquiry")
ACK confirmao ("acknowledge")
BEL toque de campainha (bell)
BS espao atrs ("backspace")
HT inserir vrios espaos na horizontal ("horizontal
tab")

LF passar para a linha seguinte ("line feed")

VT inserir vrios espaos na vertical ("vertical tab")

FF passar para a folha seguinte ("form feed")
CR terminar a linha atual ("carriage return")
SO fim de modificador ("shift out")
SI incio de modificador ("shift in")
DLE caractere de escape ("data link escape")
DC1 controle de dispositivo ("device control 1")
NAK confirmao negativa ("negative acknowledge")
SYN sincronizar ("synchronize")
ETB fim de bloco de transmisso ("end transmission
block")

CAN cancelar
EM "end of medium"
SUB substituir
ESC escape
FS separador de arquivos ("file separator")
GS separador de grupos ("group separator")
RS separador de registros ("record separator")
US separador de unidades ("unit separator")
DEL apagar ("delete")


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 t emos umpar gr af o</ 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:


<! DOCTYPE HTML PUBLI C " - / / W3C/ / DTD HTML 4. 01/ / EN"
" ht t p: / / www. w3. or g/ TR/ ht ml 4/ st r i ct . dt d" >

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 PUBLI C " - / / W3C/ / DTD HTML 4. 01 Tr ansi t i onal / / EN"
" ht t p: / / www. w3. or g/ TR/ ht ml 4/ l oose. dt d" >

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 PUBLI C " - / / W3C/ / DTD HTML 4. 01 Fr ameset / / EN"
" ht t p: / / www. w3. or g/ TR/ ht ml 4/ f r ameset . dt d" >

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 ht ml PUBLI C " - / / W3C/ / DTD XHTML 1. 0 St r i ct / / EN"
" ht t p: / / www. w3. or g/ TR/ xht ml 1/ DTD/ xht ml 1- st r i ct . dt d" >

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 ht ml PUBLI C " - / / W3C/ / DTD XHTML 1. 0 Tr ansi t i onal / / EN"
" ht t p: / / www. w3. or g/ TR/ xht ml 1/ DTD/ xht ml 1- t r ansi t i onal . dt d" >

DTD XHTML Frameset

Usa-se em documentos que contm molduras ("frames")

<! DOCTYPE ht ml PUBLI C " - / / W3C/ / DTD XHTML 1. 0 Fr ameset / / EN"
" ht t p: / / www. w3. or g/ TR/ xht ml 1/ DTD/ xht ml 1- f r ameset . dt d" >

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

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>Vi si t e o W3C: <a hr ef =" ht t p: / / www. w3. or g" >W3C</ a>
</ p>

<p>Vi si t e o W3C usando out r a j anel a:
<a hr ef =" ht t p: / / www. w3. or g" t ar get =" _bl ank" >W3C</ a>
</ p>

Atributos Opcionais

A coluna DTD indica as DTDs que aceitam o atributo: S=Strict, T=Transitional,
e F=Frameset.

Atributo Valor Descrio DTD
charset character_encoding Especifica o conjunto de caracteres
utilizado para escrever a pgina
para onde aponta a ligao
STF
coords se shape="rect" ento
coords="esquerda,cima,
direita,baixo"
se shape="circ" ento
coords="centro_x,
centro_y, raio"
se shape="poly" ento
coords="x1,y1,x2,y2,..,xn,
yn"
Especifica coordenadas
apropriadas para definir a forma
geomtrica (atributo "shape") de
uma regio "clicvel" no mapa de
imagem
STF
href URL URL do recurso para onde aponta
a ligao ("link")
STF

hreflang language_code Especifica o cdigo de lngua
correspondente ao idioma usado
para escrever os textos da pgina
para a qual aponta o URL
STF
name section_name 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!
STF
rel alternate
designates
stylesheet
start
next
prev
contents
index
glossary
copyright
chapter
section
subsection
appendix
help
bookmark
Especifica a relao existente entre
o documento atual e o documento
para o qual aponta a ligao.
STF
rev alternate
designates
stylesheet
start
next
prev
contents
index
glossary
copyright
chapter
section
subsection
appendix
help
bookmark
Especifica a relao existente entre
o documento atual e o documento
para o qual aponta a ligao.
STF
shape rect
rectangle
circ
Indica o tipo de regio definido
sobre o mapa de imagem. A forma
geomtrica exata especificada
STF

circle
poly
polygon
atravs do atributo coords.
target _blank
_parent
_self
_top
Especifica a janela (ou a moldura)
onde se abre a ligao ao clicar.
_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 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>)
TF
type mime_type 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.



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 t i t l e=" Fi l e Tr ansf er Pr ot ocol " >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

<acr onymt i t l e=" Wor l d Wi de Web" >WWW<acr onym>

Atributos Padro



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

<addr ess>
Robi n dos Bosques<br >
Cl ar ei r a dos Cucos<br >
Fl or est a de Sher wood
</ addr ess>

Atributos Padro


Padro.



Eventos.

8. Elemento <applet>

Insere na pgina uma miniaplicao (applet) escrita em Java.



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.

height pixels Define a altura do applet TF
width pixels Define a largura do applet TF

Atributos Opcionais

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

title texto Informao adicional para ser
mostrada como dica
TF
vspace pixels Define o espao em branco que
separa verticalmente o applet da
sua envolvente
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

<i mg sr c =" ext / r ect s. gi f " usemap =" #r ect angul os" bor der =" 0" >

<map i d =" r ect angul os" name=" r ect angul os" >
<ar ea shape=" r ect " coor ds=" 0, 0, 56, 120" hr ef =" j avascr i pt : al er t ( ' r ea 1' ) "
al t =" r ea 1" >
al t =" r ea 2" >
</ map>


e F=Frameset.


alt text Texto alternativo STF

Atributos Opcionais

coords se shape="rect" ento
coords="left,top,right,bottom"
se shape="circ" ento
coords="centerx,centery,
radius"
se shape="poly" ento
coords="x1,y1,x2,y2,..,xn,yn"
Especifica as coordenadas que
definem a rea "clicvel"
STF
href URL Especifica o valor do URL atribudo
rea
STF
nohref true
false
Se false exclui uma rea do mapa
de imagem
STF
shape rect
rectangle
circ
circle
poly
polygon
Define a forma geomtrica da rea
(retngulo, circulo ou polgono)
STF
target _blank
_parent
_self
_top
Especifica a janela (ou a moldura)
onde se abre a ligao ao clicar.
_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 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>)
TF

Atributos Padro



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 :

<i mg sr c=" ht t p: / / www. w3. or g/ I cons/ WWW/ w3c_home" >

Agora vamos inserir o elemento <base> com o atributo href a apontar para a
pasta que contm a imagem:

<head>
<base hr ef =" ht t p: / / www. w3. or g/ I cons/ 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:

<i mg sr c=" w3c_home" >


e F=Frameset.

href URL Especifica o URL a usar como base para as
ligaes relativas da pgina
STF


Atributos Opcionais

target _blank
_parent
_self
_top
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>.
_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>)
TF

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

color rgb(x,x,x)
#xxxxxx
nome_de_cor
Especifica a cor do texto. Desaprovado. Use
CSS.
TF
face list_of_fontnames Especifica o tipo de letra a usar.
Desaprovado. Use CSS.
TF
size tamanho_do_texto
(um nmero entre1
e 7)
Tamanho do texto por omisso para o
elemento <font>. Desaprovado. Use CSS.
TF

Atributos Padro



Padro.


Nenhum

12. Elemento <bdo>

O elemento <bdo> altera a direo do texto.


Nenhuma

Exemplo

<bdo di r =" r t l " >Aqui t emos t ext o escr i t o da di r ei t a par a a esquer da</ bdo>


e F=Frameset.

dir ltr
rtl
Estabelece a direo do texto ("left to right" ou
"right to left")
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:

<bl ockquot e>
<p>Aqui devi a est ar uma ci t ao ext ensa</ p>
</ bl ockquot e>


Dicas e Notas

Nota: O elemento <blockquote> acrescenta quebras de linha antes e depois do
texto com a citao.

Exemplo

Aqui t emos uma ci t ao ext ensa:
<bl ockquot e>
Est a devi a ser uma ci t ao ext ensa e ocupar umou mai s par gr af os.
</ bl ockquot e>

Atributos Opcionais

e F=Frameset.

cite URL Se o texto de onde foi retirada a citao
estiver disponvel na Web deve indicar aqui o
seu URL
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

<ht ml >
<head><t i t l e>. . . </ t i t l e>
</ head>
<body>

Cont edo do document o. . .
</ body>
</ ht ml >

Atributos Opcionais

e F=Frameset.

alink rgb(x,x,x)
#xxxxxx
nomeDeCor
Especifica a cor com que devem ser
mostradas as ligaes ativas ("active links")
do documento. Desaprovado. Use CSS.
TF
background file_name Uma imagem de fundo para o documento.
TF
bgcolor rgb(x,x,x)
#xxxxxx
nomeDeCor
Especifica a cor de fundo para o documento.
TF
link rgb(x,x,x)
#xxxxxx
nomeDeCor
mostradas as ligaes do documento.
TF
text rgb(x,x,x)
#xxxxxx
nomeDeCor
mostrados os textos do documento.
TF
vlink rgb(x,x,x)
#xxxxxx
nomeDeCor
mostradas as ligaes j visitadas ("visited
links") no documento. Desaprovado. Use
CSS.
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>.


Dicas e Notas

Nota: Use o elemento <br> para forar linhas em branco, mas no para
separar pargrafos.

Exemplo

Aqui t emos uma mudana de l i nha<br >f or ada

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

<but t on>Cl i que Aqui ! </ but t on>

Atributos Opcionais

e F=Frameset.

disabled
(desativado)
disabled
(desativado)
Desativa o boto STF
name button_name Define um nome nico que identifica o boto STF
type button
reset
submit
Define o tipo de boto STF
value some_value 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.



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

<capt i on>I st o uma l egenda</ capt i on>
<t r >
<t d>Cl ul a 1</ t d>
<t d>Cl ul a 2</ t d>
</ t r >
</ t abl e>

Atributos Opcionais

e F=Frameset.

align left
right
top
bottom
Como alinhar texto dentro de um elemento
<caption>. Desaprovado. Use CSS.
TF

Atributos Padro


Padro.




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

Est e exempl o most r a um<col gr oup> comt r s col unas de l ar gur as di f er ent es:
<col gr oup span=" 3" >
<col wi dt h=" 10" >

</ col gr oup>
<t r >
<t d>1</ t d>
<t d>2</ t d>
<t d>3</ t d>
<t d>4</ t d>
</ t r >
</ t abl e>

Atributos Opcionais

e F=Frameset.

align right
left
center
justify
char
Define o alinhamento horizontal para o
contedo da clula
STF
char caractere Define o caractere a partir do qual se alinha o
texto (usar com align="char")
STF
charoff pixels
%
Define o desvio ("offset") do alinhamento
para o primeiro caractere a partir do qual se
faz o alinhamento
STF
span nmero Define quantas colunas so afetadas pelo
elemento <col>
STF
valign top
middle
bottom
baseline
Define o alinhamento vertical para o
contedo da clula
STF
width %
pixels
relative_length
Define a largura da coluna
Nota: Sobrepe-se ao atributo width de
<colgroup>
STF

Atributos Padro


Padro.



Eventos.


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):

<col gr oup span=" 3" st yl e=" col or : #0000FF; " >
</ col gr oup>
<t r >
<t d>1<t d>
<t d>2<t d>
<t d>3<t d>
<t d>4<t d>
</ t r >
<t abl e>

Atributos Opcionais

e F=Frameset.

align right
left
center
justify
char
Define o alinhamento horizontal para o
contedo das clulas do grupo
STF
char caractere Define o caractere a partir do qual se alinha
o texto (usar com align="char")
STF
charoff pixels
%
faz o alinhamento
STF
span nmero Define quantas colunas so afetadas pelo
elemento <colgroup>
STF
valign top
middle
bottom
baseline
Define o alinhamento vertical para o
contedo das clulas do grupo
STF
width % Define a largura das colunas do grupo STF

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 >Bagacei r a</ dt >
<dd>Bebi da por t uguesa comal t o t eor al col i co e ext r aor di nr i os poder es
medi ci nai s</ dd>
</ dl >

Atributos Padro


Padro.



Eventos.


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

Umquar t ei r o so <del >12<del > 25 uni dades

Atributos Opcionais

e F=Frameset.

cite URL Define o URL de outro documento que
explica as razes pelas quais o texto foi
apagado ou inserido
STF
datetime YYYYMMDD Define a data e a hora em que o texto foi
apagado
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.


Dicas e Notas

Dica: Use estilos CSS para especificar melhor o tipo de lista que quer.

Exemplo

<di r >
<l i >ht ml </ l i >
<l i >xht ml </ l i >
</ di r >

Atributos Opcionais

e F=Frameset.

compact compact_rendering Desaprovado. Use CSS. 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 format-
los com estilos CSS.


Exemplo

I st o al gumt ext o
<di v st yl e=" col or : #0000FF; " >
Aqui t emos umcabeal ho de seo dent r o de umel ement o di v
<p>Aqui t emos umpar gr af o dent r o de umel ement o di v</ p>
</ di v>

Atributos Opcionais

e F=Frameset.

align left
right
top
bottom
Como alinhar texto dentro de um <div>.
TF

Atributos Padro


Padro.



Eventos.

25. Elemento <dl>

O elemento <dl> cria lista de definies.


Nenhuma

Exemplo

<dl >
<dt >Rum</ dt >
<dd>Bebi da por t uguesa comal t o t eor al col i co</ dd>
</ dl >

Atributos Padro


Padro.




Eventos.

26. Elemento <dt>

O elemento <dt> contm a definio de um termo numa lista de definies.


Nenhuma

Exemplo

<dl >
<dt >Rum</ dt >
<dd>Bebi da por t uguesa comal t o t eor al col i co</ 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

<f i el dset >
Al t ur a <i nput t ype=" t ext " si ze=" 6" >
Peso <i nput t ype=" t ext " si ze=" 6" >
</ f i el dset >


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

<f ont si ze=" 3" col or =" r ed" >I st o al gumt ext o</ f ont >
<f ont si ze=" 1" col or =" bl ue" >I st o al gumt ext o</ f ont >
<f ont f ace=" ar i al " col or =" r ed" >I st o al gumt ext o</ f ont >

Atributos Opcionais

e F=Frameset.

color rgb(x,x,x)
#xxxxxx
nomeDeCor
Define a cor do texto. Desaprovado. Use
CSS.
TF
face list_of_fontnames Define o tipo de letra a usar. Desaprovado.
Use CSS.
TF
size Um nmero entre 1
e 7.
Se o elemento
<basefont> definir
um valor por
omisso este
nmero poder
Define o tamanho das letras. Desaprovado.
Use CSS.
TF

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> Apresenta texto parecido com o de uma mquina de escrever antiga
("teletype text")
<i> Apresenta texto itlico
<b> Apresenta texto carregado (negrito)
<big> Texto com letra maior
<small> Texto com letra menor


Nenhuma

Exemplo

<t t >" Tel et ype t ext " </ t t ><br >
<i >Text o i t l i co</ i ><br >
<b>Text o emnegr i t o</ b><br >
<bi g>Text o mai or </ bi g><br >
<smal l >Text o menor </ smal l ><br >

Atributos Padro

id, class, title, style, dir, lang

Padro.


onmouseout, onkeypress, onkeydown onkeyup

Eventos.


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

<f or mact i on=" pr ocessar . php" met hod=" get " >
Pr i mei r o nome: <i nput t ype=" t ext " name=" pnome" val ue=" Robi n" ><br >
l t i mo nome: <i nput t ype=" t ext " name=" unome" val ue=" dos Bosques" ><br >
</ f or m>

<p>
Ao cl i car no bot o " Submet er " ( ou " Submi t " ) o cont edo do f or mul r i o ser
envi ado par a a pgi na pr ocessar . php par a t r at ament o.
</ p>


e F=Frameset.

action URL URL do recurso para onde vo ser enviados
os dados quando for pressionado o boto de
submisso.
STF

Atributos Opcionais

accept lista com tipos
de contedo
Uma lista com os tipos de contedo
(separados por espaos) que o servidor
consegue processar corretamente.
STF
accept-
charset
charset_list 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".
STF
enctype mimetype O tipo MIME (Multipurpose Internet Mail
Extensions) usado para codificar o contedo
do formulrio.

Se o formulrio possuir campo para upload
de arquivos, especifique o atributo
enctype=" multipart/form-data" para que os
arquivos sejam enviados.
STF
method get
post
Mtodo usado para enviar os dados para o
servidor. O valor por omisso "get".
STF

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".
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).
name form_name Define um nome nico que identifica o
formulrio.
TF
target _blank
_self
_parent
_top
Especifica a janela (ou a moldura) onde se
abre a ligao ao clicar.
_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>)
TF

Atributos Padro


Padro.


onsubmit, onreset, onclick, ondblclick, onmousedown, onmouseup,

Eventos.

31. Elemento <frame>

Define uma subjanela ou moldura ("frame").




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

<ht ml >
<f r ame sr c =" nav_mol dur as. ht ml " >
<f r ame sr c =" mol dur a0. ht ml " name=" pr i nci pal " >
</ f r ameset >
</ ht ml >

Atributos Opcionais

e F=Frameset.

longdesc URL URL de uma pgina que contm uma
descrio extensa do contedo da moldura.
til para ajudar os usurios de browsers que
no suportam molduras.
F
marginheight pixels Define as espessuras das margens superior e
inferior da moldura
F
marginwidth pixels Define as espessuras das margens esquerda
e direita da moldura
F
name frame_name Define um nome nico a dar moldura objeto
(usa-se para comunicar com os scripts, que
podem estar em outra moldura)
F
noresize noresize Quando utilizado (o valor "noresize" o nico
permitido), o tamanho da moldura deixa de
poder ser alterado.
F
scrolling yes
no
auto
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").
F
src URL O URL da pgina que vai ser apresentada na
moldura
F

Atributos Padro

S so permitidos em documentos que usam a DTD XHTML 1.0 Frameset!



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

<ht ml >
</ f r ameset >
</ ht ml >

Atributos Opcionais

e F=Frameset.

border nmero Especifica a largura da borda do frame. F
frameborder 0
1
Indica se deve ser desenhada ou no uma
linha ao redor da moldura.
F
cols pixels
%
*
Define o nmero de colunas em que a janela
dividida e os seus tamanhos
F
rows pixels
%
*
Define o nmero de linhas em que a janela
dividida e os seus tamanhos
F

Atributos Padro

S so permitidos em documentos que usam a DTD XHTML 1.0 Frameset!



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

<ht ml >
<head>
<t i t l e>T t ul o do document o</ t i t l e>
</ head>
<body>
. . .
. . .
. . .
</ body>
</ ht ml >

Atributos Opcionais

e F=Frameset.

profile URL Uma lista de URLs separadas por espaos
que contm meta-informao acerca do
contedo da pgina.
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.



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.

align left
center
right
justify
Especifica o alinhamento do texto no
cabealho. Desaprovado. Use CSS.
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

I st o al gumt ext o <hr > I st o mai s

Atributos Opcionais


e F=Frameset.

align center
left
right
Especifica o alinhamento da linha horizontal.
TF
noshade true
false
Quando contm o valor true, a linha ter uma
nica cor. Com false a linha ter duas cores
tentando dar uma impresso de relevo.
TF
size pixels
%
Especifica a espessura da linha horizontal.
TF
width pixels
%
Especifica a largura da linha horizontal.
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

<ht ml >
<head>
<t i t l e> . . . </ t i t l e>
</ head>
<body>
. . .
. . .
. . .
</ body>
</ ht ml >


Atributos Obrigatrios (apenas no XHTML)

e F=Frameset.

xmlns 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.
STF

Atributos Opcionais

e F=Frameset.

lang cdigo de
idioma
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.
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 contedo, em XHTML este elemento tem
obrigatoriamente de ser fechado.

Atributos Opcionais

e F=Frameset.

align left Especifica o modo como a moldura (ou TF

right
top
middle
bottom
subjanela) alinhada na pgina que a
contm.
border nmero Especifica a largura da borda do frame. TF
frameborder 1
0
Indica se desenhada ou no uma linha ao
redor da moldura.
TF
height pixels
%
Define a altura da moldura TF
descrio extensa do contedo da moldura
TF
marginheight pixels Define as espessuras das margens superior e
inferior da moldura
TF
marginwidth pixels Define as espessuras das margens esquerda
e direita da moldura
TF
name frame_name Define um nome nico a dar a moldura
(usado para comunicar com os scripts, que
podem estar em outras molduras)
TF
scrolling yes
no
auto
Especifica como so apresentadas as barras
de deslocamento ("scroll bars")
TF
src URL O URL da pgina que vai ser apresentada na
moldura
TF
width pixels
%
Define a largura da moldura 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

<i mg sr c=" ext / magoo. gi f " al t =" O Senhor Magoo" >



e F=Frameset.

alt descrio Define o texto de descrio da imagem STF
src URL Especifica o endereo da imagem a ser
exibida
STF

Atributos Opcionais

align top
bottom
middle
left
right
Como alinhar a imagem relativamente ao
texto envolvente. Desaprovado. Use CSS.
TF
border pixels Define a linha de fonteira desenhada ao redor
da imagem. Desaprovado. Use CSS.
TF
height pixels
%
Define a altura da imagem STF
hspace pixels Especifica a quantidade de espao em
branco a inserir esquerda e a direita da
imagem. Desaprovado. Use CSS.
TF
ismap URL Indica que a imagem tem um mapa definido
sobre a sua rea.
STF
descrio extensa da imagem.
STF
usemap URL Define a imagem como tendo um mapa
definido sobre si. Para perceber a utilidade
disto consulte as explicaes dos elementos
<map> e <area>.
STF
vspace pixels Especifica a quantidade de espao em
branco a inserir acima e abaixo da imagem.
TF
width pixels
%
Especifica a largura da imagem STF

Atributos Padro

id, class, title, style, lang, xml:lang

Padro.



Eventos.

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

<f or mact i on=" pr ocessar . ht ml " met hod=" get " >
Pr i mei r o nome: <i nput t ype=" t ext " name=" pnome" val ue=" Robi n" ><br >
l t i mo nome: <i nput t ype=" t ext " name=" unome" val ue=" dos Bosques" ><br >
</ f or m>

<p>
Ao cl i car no bot o " Submet er " ( ou " Submi t " ) o cont edo do f or mul r i o ser
envi ado par a a pgi na pr ocessar . php par a t r at ament o.
</ p>

Atributos Opcionais

e F=Frameset.

accept 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.
Nota: S deve usar quando se tem
type="file"
STF
align left
right
top
texttop
middle
absmiddle
baseline
bottom
absbottom
Define o alinhamento do texto que vem a
seguir imagem.
Nota: S deve usar-se quando se tem
type="image"
TF
alt text Define texto alternativo.
type="image"
STF
checked checked Indica que o elemento <input> deve ser
ativado no momento em que carregado
STF

pelo browser
Nota: Usa-se apenas com type="checkbox"
e type="radio"
disabled
(desativado)
disabled
(desativado)
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"
STF
maxlength nmero Define o nmero mximo de caracteres que
podem ser inseridos no campo de texto.
Nota: No pode ser usado com
type="hidden"
STF
name field_name Define um nome nico para o elemento.
Nota: este atributo obrigatrio quando se
tem type="button", type="checkbox",
type="file", type="hidden", type="image",
type="password", type="text", e
type="radio"
STF
readonly
(apenas de
leitura)
readonly (apenas
de leitura)
Indica que o valor contido no campo no
pode ser alterado.
type="text"
STF
size number_of_char Define o tamanho do elemento.
Note: No pode ser usado com
type="hidden"
STF
src URL Indica o URL da imagem a mostrar.
type="image"
STF
type button
checkbox
file
hidden
image
password
radio
reset
submit
text
Indica de que tipo o elemento <input>. Se
omitido fica do tipo "text".
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.
STF
value value Quando usado em botes normais, botes
de "reset" e botes de submisso: define o
texto que aparece escrito no boto.
Quando usado num boto com uma
imagem: define o valor do boto quando
STF

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

Umquar t ei r o so <del >12</ del > <i ns>25</ i ns> uni dades.

Atributos Opcionais

e F=Frameset.


cite URL Define o URL de outro documento que
explica as razes pelas quais o texto foi
inserido.
STF
datetime YYYYMMDD Define a data e a hora em que o texto foi
inserido (formato Ano_Ms_Dia)
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

<l abel f or =" unome" >l t i mo Nome: <l abel >
<i nput t ype=" t ext " name=" unome" i d=" unome" >

Atributos Opcionais

e F=Frameset.

for 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.
STF

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

<f i el dset >
<l egend>I nf or mao f i nancei r a: </ l egend>
DJ I A <i nput t ype=" t ext " si ze=" 6" >
NASDAQ <i nput t ype=" t ext " si ze=" 6" >
</ f i el dset >

Atributos Opcionais

e F=Frameset.

align left
center
right
Define o alinhamento do contedo do
<fieldset>
STF

Atributos Padro


Padro.



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 >
<l i >Rum</ l i >
</ ol >

<ul >
<l i >Rum</ l i >
</ ul >

Atributos Opcionais

e F=Frameset.

type A
a
I
i
1
disc
square
circle
Especifica o tipo de lista.
TF
value nmero_de_ordem_do_item Desaprovado. Use CSS. TF


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>
<l i nk r el =" st yl esheet " t ype=" t ext / css" hr ef =" meus_est i l os. css" >
<head>

Atributos Opcionais

e F=Frameset.

charset charset Especifica o conjunto de caracteres utilizado
para escrever a pgina para onde aponta a
ligao (o valor por omisso ISO-8859-1)
STF
href URL URL do recurso para onde aponta o elemento
<link>
STF
hreflang language_code Especifica o cdigo de lngua correspondente
ao idioma usado para escrever os textos da
pgina para a qual aponta o URL
STF
media all Especifica em que tipo de dispositivo a STF

braille
print
projection
screen
speech
pgina deve ser apresentada.
rel alternate
appendix
bookmark
chapter
contents
copyright
glossary
help
home
index
next
prev
section
start
stylesheet
subsection
Especifica a relao existente entre o
documento atual e o documento para o qual
aponta a ligao
STF
rev alternate
appendix
bookmark
chapter
contents
copyright
glossary
help
home
index
next
prev
section
start
stylesheet
subsection
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
target _blank
_self
_top
_parent
Especifica a janela (ou a moldura) qual a
ligao ser feita.
_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
TF

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>Cl i que sobr e uma das r eas: </ p>
<i mg sr c =" r ect s. gi f " usemap =" #r ect angul os1" bor der =" 0" >
<map i d =" r ect angul os1" name=" r ect angul os1" >
al t =" r ea 1" >
<ar ea shape=" r ect " coor ds=" 56, 0, 248, 42" hr ef =" j avascr i pt : al er t ( ' r ea
2' ) " al t =" r ea 2" >
</ map>



e F=Frameset.

id unique_name Define um nome nico que identifica o mapa STF

Atributos Opcionais

name unique_name Define um nome nico para o elemento
<map> (para manter a compatibilidade com os
browsers antigos).
STF

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>
<l i >ht ml </ l i >
<l i >xht ml </ l i >
</ menu>


Atributos Opcionais

e F=Frameset.


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

<met a name=" keywor ds" cont ent =" HTML, DHTML, CSS, XML, XHTML, J avaScr i pt , XML,
SVG" >

<met a name=" descr i pt i on" cont ent =" Tut or i ai s de HTML, CSS, XML, XHTML, SVG e
Fl ash" >

<met a name=" r evi sed" cont ent =" Aut or , 28/ 05/ 03" >

<met a ht t p- equi v=" r ef r esh" cont ent =" 15" >



e F=Frameset.

content algum_texto Define a meta-informao que deve ser
associada aos atributos http-equiv ou name
STF

Atributos Opcionais

http-equiv content-type
expires
refresh
set-cookie
Liga o atributo content a um cabealho de
HTTP
STF
name author
description
keywords
generator
revised
outros
Liga o atributo content a um nome STF
scheme algum_texto Define o formato a usar para interpretar o
valor contido no atributo content
STF

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.


Exemplo

<ht ml >
<nof r ames>
<body>O seu br owser no supor t a mol dur as! </ body>
</ nof r ames>
</ f r ameset >
</ ht ml >

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 . wr i t e( " Ol Mundo! " )
/ / - - >
</ scr i pt >
<noscr i pt >O seu br owser no r econhece J avaScr i pt ! </ noscr i pt >
. . .

. . .
</ 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

<ht ml >
<head>
</ head>
<body st yl e=" backgr ound- col or : #003399" >
<obj ect t ype=" appl i cat i on/ x- shockwave- f l ash" dat a=" l ogocubo. swf " wi dt h=" 26"
hei ght =" 36" >
<par amname=" movi e" val ue=" l ogocubo. swf " >
</ obj ect >
</ body>
</ ht ml >

Atributos Opcionais

e F=Frameset.

align left
right
top
bottom
Define o alinhamento do texto ao redor do
objeto
TF

archive URL Uma lista de URLs separados por espaos.
Cada URL aponta para um arquivo que
contm recursos utilizveis pelo objeto.
STF
border pixels Define a linha de fonteira a desenhar ao redor
do objeto
TF
classid class ID 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.
STF
codebase URL Indica o local (URL) onde pode ser obtido o
cdigo que define o objeto
STF
codetype MIME type Define o tipo MIME ("Multipurpose Internet
Mail Extensions") do cdigo referido no
atributo classid
STF
data URL Define o URL onde se encontram os dados
para o objeto
STF
declare declare Indica que o objeto deve ser declarado, mas
a sua execuo s ter incio mais tarde,
quando ele for efetivamente necessrio.
STF
height pixels Define a altura do objeto STF
hspace pixels Define o espao em branco que separa
horizontalmente o objeto da sua envolvente
TF
name unique_name Define um nome nico a dar ao objeto (usado
para comunicar com scripts e eventualmente
com outros objetos)
STF
standby text Texto a mostrar enquanto se espera que o
objeto acabe de carregar
STF
type MIME_type Define o tipo MIME ("Multipurpose Internet
Mail Extensions") dos dados especificados no
atributo data
STF
usemap URL Especifica o URL de um mapa de imagem
para ser usado com o objeto
STF
vspace pixels Define o espao em branco que separa
verticalmente o objeto da sua envolvente
TF
width pixels Define a largura do objeto STF

Atributos Padro


Padro.


accesskey, tabindex, onclick, ondblclick, onmousedown, onmouseup,

Eventos.


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 >
<l i >Rum</ l i >
</ ol >

Atributos Opcionais

e F=Frameset.

start start_on_number Especifica o valor em que se inicia a
numerao dos itens. Desaprovado. Use
CSS.
TF
type A
a
I
i
1
Especifica o tipo de lista. Desaprovado. Use
CSS.
TF

Atributos Padro


Padro.



Eventos.


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

<sel ect >
<opt gr oup l abel =" Fr ut as Tr opi cai s" >
<opt i on val ue =" Manga" >Manga</ opt i on>
<opt i on val ue =" Banana" >Banana</ opt i on>
</ opt gr oup>
<opt gr oup l abel =" Fr ut as por t uguesas" >
<opt i on val ue =" Cer ej a" >Cer ej a</ opt i on>
<opt i on val ue =" Ma" >Ma</ opt i on>
</ opt gr oup>
</ sel ect >


e F=Frameset.

label text_label Define uma marca ("label") para o grupo de
opes.
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.




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

<sel ect >
<opt i on val ue =" Goi aba" sel ect ed>Goi aba</ opt i on>
</ sel ect >

Atributos Opcionais

e F=Frameset.

disabled
(desativado)
disabled
(desativado)
Indica que a opo deve ser desativada no
momento em que carregada pelo browser
STF
label texto Define uma marca ("label") para ser usada
com o elemento <optgroup>
STF
selected
(selecionada)
selected
(selecionada)
Indica que a opo deve ser pr-selecionada
(ao iniciar o formulrio ela aparece em
primeiro lugar na lista)
STF
value texto Define o valor a enviar para processamento
quando a opo selecionada
STF

Atributos Padro

id, class, title, style, dir, lang, xml:lang, tabindex

Padro.



Eventos.

54. Elemento <p>

O elemento <p> define um pargrafo



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 t emos umpar gr af o cur t o</ p>

Atributos Opcionais

e F=Frameset.

align left
right
center
justify
Especifica o alinhamento do texto no
pargrafo. Desaprovado. Use CSS.
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.


name unique_name Define um nome nico que identifica o
parmetro
STF

Atributos Opcionais

type MIME type Especifica o tipo de recurso (se texto, som,
um filme, etc)
STF
value value Especifica o valor a atribui ao parmetro STF
valuetype dados
ref
object
Especifica o tipo MIME ("Multipurpose Internet
Mail Extensions") a atribuir ao valor
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> Apresenta texto enfatizado (itlico)
<strong> Apresenta texto forte (negrito)
<dfn> Define um termo numa lista de definies
<code> Texto que cdigo de computador
<samp> Amostra de cdigo de computador
<kbd> Texto inserido com o teclado
<var> Define uma varivel
<cite> Define uma citao


Nenhuma

Exemplo

<em>Text o enf at i zado</ em><br >
<st r ong>Text o f or t e</ st r ong><br >
<df n>Def i ni o de umt er mo</ df n><br >
<code>Cdi go de comput ador </ code><br >
<samp>Amost r a de cdi go de comput ador </ samp><br >
<kbd>Text o i nser i do como t ecl ado</ kbd><br >
<var >Var i vel </ var ><br >
<ci t e>Ci t ao</ ci t e>


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

<pr e>
Est e t ext o

pr eser va os espaos
e
as mudanas de l i nha
</ pr e>

Atributos Opcionais

e F=Frameset.

width nmero Define o nmero mximo de caracteres que
podem ser inseridos numa linha.
TF

Atributos Padro

id, class, title, style, dir, lang, xml:lang, xml:space

Padro.



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 t emos uma ci t ao cur t a: <q>Hoj e vou chegar at r asado mai s uma vez! <q>

Atributos Opcionais

e F=Frameset.

cite citation Define uma citao STF

Atributos Padro


Padro.



Eventos.

59. Elemento <script>

Define um script



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 . wr i t e( " Ol Mundo! " ) ;
- - >
</ scr i pt >


e F=Frameset.

type text/ecmascript
text/javascript
text/jscript
text/vbscript
text/vbs
text/xml
Especifica o tipo MIME ("Multipurpose
Internet Mail Extensions") correspondente ao
script
STF

Atributos Opcionais

charset charset Define o conjunto de caracteres usado para
escrever o script
STF
defer defer 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.
STF
language javascript
livescript
vbscript
outro
Especifica a linguagem em que est escrito o
script. Desaprovado. Use o atributo type.
TF
src URL Define o URL de um arquivo externo que
contm o cdigo do script
STF


Atributos Padro

xml:space

Padro.


Nenhum

60. Elemento <select>

O elemento <select> cria uma lista de abrir com vrias opes selecionveis.


Nenhuma

Exemplo

<sel ect >
<opt i on val ue =" Goi aba" >Goi aba</ opt i on>
</ sel ect >

Atributos Opcionais

e F=Frameset.

disabled
(desativado)
disabled
(desativado)
Desativa a lista no momento em que
carregada.
STF
multiple true
false
Indica se permitido selecionar mais do que
um elemento de uma s vez.
STF
name unique_name Define um nome nico que identifica a lista de
opes
STF
size nmero Especifica a quantidade de opes que
podem ser vistas ao mesmo tempo.
STF

Atributos Padro

id, class, title, style, dir, lang, xml:lang, accesskey, tabindex

Padro.


onfocus, onblur, onchange


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>I st o umpar gr af o
<span st yl e=" col or : #FF0000; " >I st o est no mesmo par gr af o</ span> i st o est
no
mesmo par gr af o.
</ p>

<span st yl e=" col or : #00DD45; " >
<p>Aqui t emos out r o par gr af o</ p>
<p>Aqui t emos out r o par gr af o</ 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.


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 model o <s>ai nda no est di spon vel . </ s> j est di spon vel ! <br ><br >
O novo model o <st r i ke>ai nda no est di spon vel . </ st r i ke> j est di spon vel !

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 { col or : r ed }
h3 { col or : bl ue }
</ st yl e>
</ head>


e F=Frameset.


media screen
tty
tv
projection
handheld
print
braille
aural
all
O tipo de media ao qual vo ser aplicados os
estilos
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

Est e t ext o cont muma par t e al i nhada umpouco <sub>abai xo</ sub>
Est e t ext o cont muma par t e al i nhada umpouco <sup>aci ma</ 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.



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

<t r >
<t d>Cl ul a A</ t d>
<t d>Cl ul a B</ t d>
</ t r >
</ t abl e>

Atributos Opcionais

e F=Frameset.

align left
center
right
Alinha a tabela. Desaprovado. Use CSS. TF
bgcolor rgb(x,x,x)
#xxxxxx
nomeDeCor
Especifica a cor de fundo para a tabela.
TF
border pixels Especifica a espessura da linha de contorno.
Nota: Especifique border="0" para que no seja
desenhada nenhuma linha de contorno.
STF
cellpadding pixels
%
Especifica o espao em branco que fica entre o
contedo das clulas e a sua fronteira.
STF
cellspacing pixels
%
Especifica o espao em branco que fica entre
clulas adjacentes.
STF
frame void
above
below
hsides
lhs
rhs
vsides
box
border
Especifica a forma como so apresentadas as
linhas de contorno.
Nota: Deve usar-se em conjunto com o atributo
border.
STF
rules none
groups
rows
cols
all
D indicaes sobre as linhas divisrias
horizontais e verticais.
Nota: Deve usar-se em conjunto com o atributo
border.
STF
summary texto Fornece um sumrio da tabela para ser lido por
software de sntese de voz em browsers no
visuais.
STF

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

<t abl e bor der = " 1" >
<t head>
<t r >
<t d>Est e t ext o est sob umel ement o t head</ t d>
</ t r >
</ t head>
<t f oot >
<t r >

<t d>Est e t ext o est sob umel ement o t f oot </ t d>
</ t r >
</ t f oot >
<t body>
<t r >
<t d>Est e t ext o est sob umel ement o t body</ t d>
</ t r >
</ t body>
</ t abl e>

Atributos Opcionais

e F=Frameset.

align right
left
center
justify
char
Define o alinhamento do texto nas clulas STF
char caractere Especifica o caractere a partir do qual se faz o
alinhamento do texto.
Nota: Usa-se apenas quando tambm se usar
align="char"
STF
charoff pixels
%
Define o desvio ("offset") do alinhamento para o
primeiro caractere a partir do qual se faz o
alinhamento
align="char"
STF
valign top
middle
bottom
baseline
Define o alinhamento vertical do texto nas
clulas
STF

Atributos Padro


Padro.



Eventos.

67. Elemento <td>

Insere uma clula numa tabela



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

<t r >
</ t r >
</ t abl e>

Atributos Opcionais

e F=Frameset.

abbr abbr_text Especifica uma forma abreviada para o
contedo da clula
STF
align left
right
center
justify
char
Especifica o alinhamento horizontal do
contedo da clula
STF
axis category_names Atribui um nome clula STF
bgcolor rgb(x,x,x)
#xxxxxx
nomeDeCor
Especifica a cor de fundo para a clula.
TF
char caractere Especifica o caractere a partir do qual se faz
o alinhamento do texto.
Nota: Usa-se apenas quando tambm se
usar align="char"
STF
charoff pixels
%
faz o alinhamento
usar align="char"
STF
colspan nmero Define quantas colunas so ocupadas pelo
elemento <td>
STF
headers header_cells_id 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.
STF
height pixels Especifica a altura de uma clula. TF

nowrap nowrap Indica se deve impedir que o browser insira
automaticamente mudanas de linha.
TF
rowspan nmero Define quantas linhas so ocupadas pelo
elemento <td>
STF
scope row
col
rowgroup
colgroup
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.
STF
valign top
middle
bottom
baseline
Especifica o alinhamento vertical do
contedo da clula
STF
width pixels
%
Especifica a largura de uma clula.
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

<t ext ar ea r ows=" 2" col s=" 20" >
O passei o de bi ci cl et a est ava a cor r er mui t o bem, mas de r epent e l evant ou-
se umgr ande vendaval e comeou a chover . . .
</ t ext ar ea>


e F=Frameset.


cols nmero Especifica o nmero de colunas visveis num
dado momento na rea de texto.
STF
rows nmero Especifica o nmero de linhas visveis num
dado momento na rea de texto.
STF

Atributos Opcionais

disabled
(desativado)
disabled
(desativado)
Desativa a rea de texto logo aps o
carregamento
STF
name name_of_textarea D um nome rea de texto STF
readonly
(apenas de
leitura)
readonly (apenas
de leitura)
Indica que o usurio no pode modificar o
contedo da rea de texto
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



Exemplos

<t head>
<t r >
</ t r >
</ t head>
<t f oot >
<t r >
</ t r >
</ t f oot >
<t body>
<t r >
</ t r >
</ t body>
</ t abl e>

Atributos Opcionais

e F=Frameset.

align right
left
center
justify
char
align="char"
STF
charoff pixels
%
Define o desvio ("offset") do alinhamento para
o primeiro caractere a partir do qual se faz o
alinhamento
align="char"
STF
valign top
middle
bottom
baseline
clulas
STF

Atributos Padro



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

<t r >
<t h>Cabeal ho 1</ t h>
<t h>Cabeal ho 2</ t h>
</ t r >
<t r >
<t d>Cabeal ho A</ t d>
<t d>Cabeal ho B</ t d>
</ t r >
</ t abl e>

Atributos Opcionais

e F=Frameset.

abbr abbr_text Especifica uma forma abreviada para o
contedo da clula
STF
align left
right
center
justify
char
Especifica o alinhamento horizontal do
contedo da clula
STF
axis category_names Atribui um nome clula STF
bgcolor rgb(x,x,x)
#xxxxxx
nomeDeCor
TF
char caractere Especifica o caractere a partir do qual se faz
o alinhamento do texto.
STF

usar align="char"
charoff pixels
%
faz o alinhamento
usar align="char"
STF
colspan nmero Define quantas colunas so ocupadas pelo
elemento <td>
STF
headers header_cells_id 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.
STF
height pixels Especifica a altura de uma clula.
TF
nowrap nowrap Indica se deve impedir que o browser insira
automaticamente mudanas de linha.
TF
rowspan nmero Define quantas linhas so ocupadas pelo
elemento <td>
STF
scope col
colgroup
row
rowgroup
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.
STF
valign top
middle
bottom
baseline
Especifica o alinhamento vertical do
contedo da clula
STF
width pixels
%
Especifica a largura de uma clula.
TF

Atributos Padro


Padro.



Eventos.


71. Elemento <thead>

Define um cabealho de tabela



Nenhuma

Dicas e Notas

restantes, embora eles possam estar vazios. Estes elemento devem aparecer sempre


Exemplo

<t head>
<t r >
</ t r >
</ t head>
<t f oot >
<t r >
</ t r >
</ t f oot >
<t body>
<t r >
</ t r >
</ t body>
</ t abl e>

Atributos Opcionais

e F=Frameset.

align right
left
center
justify

char
align="char"
STF
charoff pixels
%
alinhamento
align="char"
STF
valign top
middle
bottom
baseline
clulas
STF

Atributos Padro


Padro.



Eventos.

72. Elemento <title>

Este elemento define o ttulo do documento.


Nenhuma

Exemplo

<ht ml >
<head>
<t i t l e>Ref er nci a de HTML e XHTML</ t i t l e>
</ head>
<body>
Cont edo do document o. . .
</ body>
</ ht ml >

Atributos Padro

id, class, dir, lang, style, xml:lang


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

<t r >
</ t r >
<t abl e>

Atributos Opcionais

e F=Frameset.

align right
left
center
justify
char
Define o alinhamento do texto nas clulas
pertencentes linha definida pelo elemento <tr>
STF
bgcolor rgb(x,x,x)
#xxxxxx
nomeDeCor
TF
align="char"
STF
charoff pixels
%
alinhamento
align="char"
STF
valign top
middle
bottom
baseline
clulas
STF


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 model o <u>j est di spon vel ! </ u>

Atributos Padro


Padro.



Eventos.

75. Elemento <ul>

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



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 >
<l i >Rum</ l i >
</ ul >

Atributos Opcionais

e F=Frameset.

type disc
square
circle
Especifica o tipo de lista. Desaprovado. Use
CSS.
TF

Atributos Padro


Padro.



Eventos.

Curso de HTML 41.1 e Introducao Ao XHTML 1 PDF

Caricato da

Informazioni sul documento

Titolo originale

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 41.1 e Introducao Ao XHTML 1 PDF

Caricato da

Copyright:

Formati disponibili

Curso de HTML 4.01 e Introduo ao XHTML 1.

Potrebbero piacerti anche