Você está na página 1de 29

J

INTRODUO AO
HYPERTEXT MARKUP LANGUAGE 4:
PARTE 2
OBJETIVOS

Ser capaz de criar tabelas com linhas e colunas de dados.


Ser capaz de controlar a exibio e formatao das tabelas.
Ser capaz de criar e usar os mapas de imagens para auxiliar
nos links.
Ser capaz de tornar as pginas Web acessveis para
os mecanismos de busca.
Ser capaz de usar o elemento frameset para criar pginas
Web mais interessantes.

Sim, da tabela de minha memria


eu varrerei todos os registros queridos e triviais.
William Shakespeare
J-90 C# Como Programar

Resumo
J.1 Introduo
J.2 Tabelas HTML bsicas
J.3 Tabelas e formatao HTML intermedirias
J.4 Formulrios HTML bsicos
J.5 Formulrios HTML mais complexos
J.6 Links internos
J.7 Criando e usando mapas de imagens
J.8 Tags <meta>
J.9 Elemento frameset
J.10 framesets aninhados
J.11 Recursos da Internet e da World Wide Web

Resumo Terminologia Exerccios de auto-reviso Respostas dos exerccios de auto-reviso Exerccios

J.1 Introduo
No Apndice I, discutimos alguns recursos bsicos do HTML. Criamos diversas pginas Web que apresentam texto, links,
imagens e ferramentas de formatao, como as rguas horizontais e as quebras de linhas.
Neste apndice discutiremos os elementos e recursos mais substanciais do HTML. Veremos como inserir informa-
es em tabelas e discutiremos como usar os formulrios para reunir as informaes das pessoas que navegam em um site.
Explicaremos como usar os links internos e os mapas de imagens para tornar as pginas mais navegveis. Tambm discutire-
mos como usar os frames (quadros) para facilitar a navegao nos sites Web. No final deste apndice voc estar familiarizado
com as tags e os recursos mais usados do HTML. Em seguida, voc poder criar sites Web mais complexos. Aqui no apresen-
tamos nenhuma programao em C#.

J.2 Tabelas HTML bsicas


As tabelas do HTML 4.0 so usadas para marcar os dados tabulares, como os dados armazenados em um banco de dados. A
tabela da Figura J.1 organiza os dados em linhas e colunas.

1 <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN


2 http://www.w3.org/TR/html4/strict.dtd>
3 <html>
4
5 <!-- Fig. J.1: table.html -->
6 <!-- Desenho de tabela bsico. -->
7
8 <head>
9 <title>C# How to Program - Tables</title>
10 </head>
11
12 <body>
13
14 <h1>Table Example Page</h1>
15
16 <!-- a tag <table> abre uma tabela nova e permite que voc -->
17 <!-- inclua opes de projeto e instrues -->
18 <table border = 1 width = 40%>
19
20 <!-- use a tag <caption> para resumir o contedo da tabela -->
21 <!-- (isso ajuda os deficientes visuais) -->
Figura J.1 Tabela HTML. (Parte 1 de 2.)
Apndice J Introduo ao HyperText Markup Language 4: Parte 2 J-91

22 <caption>Here is a small sample table.</caption>


23
24 <!-- <thead> a primeira seo (no-rolante) -->
25 <!-- horizontal. <th> insere um ttulo -->
26 <!-- de clula e exibe o texto em negrito -->
27 <thead>
28 <tr><th>This is the head.</th></tr>
29 </thead>
30
31 <!-- Todo o seu contedo importante entra em <tbody>. -->
32 <!-- Use esta tag para formatar toda a seo -->
33 <!-- <td> insere uma clula de dados com o texto regular -->
34 <tbody>
35 <tr><td>This is the body.</td></tr>
36 </tbody>
37
38 </table>
39
40 </body>
41 </html>

Figura J.1 Tabela HTML. (Parte 2 de 2.)

Todas as tags e o texto que se aplica tabela ficam dentro do elemento <table>, o qual comea na linha 18:
<table border = 1 width = 40%>

O atributo border permite configurar a largura da borda da tabela em pixels. Se quiser que a borda fique invisvel, voc
pode especificar border = 0. Na tabela mostrada na Figura J.1, o valor do atributo border est configurado como 1. O
atributo width configura a largura da tabela como um nmero de pixels ou uma porcentagem da largura da tela.
A linha 22
<caption>Here is a small sample table.</caption>

insere um elemento caption na tabela. O texto dentro do elemento caption colocado diretamente acima da tabela na
maioria dos navegadores visuais. O texto da legenda tambm usado para ajudar os navegadores baseados em texto a inter-
pretar os dados da tabela.
As tabelas podem ser divididas em sees distintas horizontais ou verticais. A primeira dessas sees (a rea head)
aparece nas linhas 27 a 29.
J-92 C# Como Programar

<thead>
<tr><th>This is the head.</th></tr>
</thead>

Coloque todas as informaes de ttulo (por exemplo, os ttulos da tabela e os cabealhos de coluna) dentro do elemento
thead. O tr, ou elemento de linha de tabela, usado para criar linhas de clulas da tabela. Todas as clulas de uma linha
pertencem ao elemento <tr> daquela linha.
A menor unidade da tabela a clula de dados. Existem dois tipos de clulas de dados: o elemento th, que est lo-
calizado no cabealho da tabela, e o elemento td que est localizado no corpo da tabela. O exemplo de cdigo da Figura J.1
insere uma clula de header usando o elemento th. As clulas de cabealho, as quais so colocadas no elemento <thead>,
so adequadas para os ttulos de colunas.
A segunda seo de agrupamento, o elemento tbody, aparece nas linhas 34 a 36.
<tbody>
<tr><td>This is the body.</td></tr>
</tbody>

Assim como thead, o elemento tbody usado para fins de formatao e agrupamento. Embora exista apenas uma linha e
uma clula (a linha 35) no exemplo acima, a maioria das tabelas usa tbody para agrupar a maior parte de seu contedo em
diversas linhas e clulas.

Observao de aparncia e comportamento J.1


Use as tabelas para exibir os dados tabulares em suas pginas HTML.

Erro de programao comum J.1


Esquecer de fechar um dos elementos dentro do elemento table um erro que pode distorcer o formato da tabela. Verifique se
cada elemento est aberto e fechado em seu local apropriado, para ter certeza de que a tabela est estruturada como voc quer.

J.3 Tabelas e formatao HTML intermedirias


No exemplo de cdigo e na seo anterior exploramos a estrutura de uma tabela bsica. Na Figura J.2 estendemos nosso exem-
plo de tabela com mais elementos estruturais e atributos.
A tabela comea na linha 16. O elemento colgroup usado para agrupar colunas mostrado nas linhas 22 a 25.
<colgroup>
<col align = right>
<col span = 4>
</colgroup>

O elemento colgroup pode ser usado para agrupar e formatar colunas. Cada elemento col das tags <colgroup>...</
colgroup> pode formatar qualquer nmero de colunas (especificadas com o atributo span). Toda formatao a ser aplicada
a uma coluna ou a um grupo de colunas pode ser especificada nas tags colgroup e col. Nesse caso, alinhamos o texto
direita dentro da coluna mais esquerda. Outro atributo til a ser usado aqui width, o qual especifica a largura da coluna.

1 <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN


2 http://www.w3.org/TR/html4/strict.dtd>
3 <html>
4
5 <!-- Fig. J.2: table.html -->
6 <!-- Desenho de tabela intermedirio. -->
7
8 <head>
9 <title>C# How to Program - Tables</title>
Figura J.2 Tabela HTML complexa. (Parte 1 de 3.)
Apndice J Introduo ao HyperText Markup Language 4: Parte 2 J-93

10 </head>
11
12 <body>
13
14 <h1>Table Example Page</h1>
15
16 <table border = 1>
17 <caption>Here is a more complex sample table.</caption>
18
19 <!-- <colgroup> e <col> so usados para formatar -->
20 <!-- colunas inteiras de uma s vez. SPAN determina quantas -->
21 <!-- colunas so afetadas pela tag <col> -->
22 <colgroup>
23 <col align = right>
24 <col span = 4>
25 </colgroup>
26
27 <thead>
28
29 <!-- rowspan e colspan combinam o nmero de clulas indicadas -->
30 <!-- na vertical ou horizontal -->
31 <tr>
32 <th rowspan = 2>
33 <img src = camel.gif width = 205
34 height = 167 alt = Picture of a camel>
35 </th>
36 <th colspan = 4 valign = top>
37 <h1>Camelid comparison</h1><br>
38 <p>Approximate as of 8/99</p>
39 </th>
40 </tr>
41
42 <tr valign = bottom>
43 <th># of Humps</th>
44 <th>Indigenous region</th>
45 <th>Spits?</th>
46 <th>Produces Wool?</th>
47 </tr>
48
49 </thead>
50
51 <tbody>
52
53 <tr>
54 <th>Camels (bactrian)</th>
55 <td>2</td>
56 <td>Africa/Asia</td>
57 <td rowspan = 2>Llama</td>
58 <td rowspan = 2>Llama</td>
59 </tr>
60
61 <tr>
62 <th>Llamas</th>
63 <td>1</td>
64 <td>Andes Mountains</td>
65 </tr>
66
67 </tbody>

Figura J.2 Tabela HTML complexa. (Parte 2 de 3.)


J-94 C# Como Programar

68
69 </table>
70
71 </body>
72 </html>

Figura J.2 Tabela HTML complexa. (Parte 3 de 3.)

A maioria dos navegadores da Web visuais formata automaticamente o tamanho das clulas de dados para que ele se
ajuste aos dados que contm. Entretanto, possvel tornar algumas clulas de dados maiores do que outras. Esse efeito rea-
lizado com os atributos rowspan e colspan, os quais podem ser colocados dentro de qualquer elemento clula de dados. O
valor do atributo especifica o nmero de linhas ou colunas a ser ocupadas pela clula, respectivamente. Por exemplo, rowspan
= 2 diz ao navegador que essa clula de dados abranger a rea das duas clulas verticalmente adjacentes. Essas clulas
sero associadas verticalmente (e, portanto, abrangero mais de duas linhas). Um exemplo de colspan aparece na linha 36,
<th colspan = 4 valign = top>

na qual a clula de cabealho ampliada para abranger quatro clulas.


Aqui ns tambm vemos um exemplo da formatao de alinhamento vertical. O atributo valign aceita estes valores:
top, middle, bottom e baseline. Todas as clulas de uma linha cujo atributo valign est configurado
como baseline tm a primeira linha de texto em uma linha de base comum. O alinhamento vertical padro de todos os
dados e clulas de cabealho valign = middle.
O cdigo restante da Figura J.2 demonstra os outros usos dos atributos table e os elementos de tabela destacados
acima.

Erro de programao comum J.2


Quando colspan e rowspan so usados nas clulas de dados de tabela, as clulas modificadas cobrem as reas das outras c-
lulas. Seu cdigo deve compensar isso reduzindo o nmero de clulas daquela linha ou coluna. Se voc no fizer isso, a formatao
de sua tabela ser distorcida e voc poder criar sem querer mais colunas e/ou linhas do que pretendia originariamente.
Apndice J Introduo ao HyperText Markup Language 4: Parte 2 J-95

J.4 Formulrios HTML bsicos


O HTML fornece diversos mecanismos para reunir informaes das pessoas que visualizam seu site. Um desses mecanismos
o formulrio (Figura J.3).
O formulrio comea na linha 21
<form method = post action = /cgi-bin/formmail>

com o elemento form. O atributo method indica a maneira pela qual as informaes reunidas no formulrio sero enviadas
para o servidor da Web para processamento. Use method = post em um formulrio que causa alteraes nos dados do
servidor, por exemplo, ao atualizar um banco de dados. Os dados do formulrio so enviados para o servidor como uma va-
rivel de ambiente, a qual pode ser acessada por scripts. O outro valor possvel (method = get) deve ser usado quando
seu formulrio no causar nenhuma alterao nos dados no lado do servidor, por exemplo, quando se faz uma requisio a
um banco de dados. Os dados de formulrio de method = get so anexados no final do URL (por exemplo, /cgi-bin/
formmail?name=bob&order=5). Da mesma maneira, voc deve saber que method = get se limita aos caracteres
padro e no pode enviar nenhum caractere especial.

1 <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN


2 http://www.w3.org/TR/html4/strict.dtd>
3 <html>
4
5 <!-- Fig. J.3: form.html -->
6 <!-- Exemplo 1 de desenho de formulrio -->
7
8 <head>
9 <title>C# How to Program - Tables</title>
10 </head>
11
12 <body>
13
14 <h1>Feedback Form</h1>
15
16 <p>Please fill out this form to help us improve our site.</p>
17
18 <!-- Esta tag inicia o formulrio, d o mtodo de envio -->
19 <!-- das informaes e a localizao dos scripts de formulrio. -->
20 <!-- Os elementos input ocultos do ao servidor informaes no-visuais -->
21 <form method = post action = /cgi-bin/formmail>
22
23 <p>
24 <input type = hidden name = recipient
25 value = deitel@deitel.com>
26
27 <input type = hidden name = subject
28 value = Feedback Form>
29
30 <input type = hidden name = redirect
31 value = main.html>
32 </p>
33
34 <!-- <input type = text> inclui uma caixa de texto -->
35 <p><label>Name:
36 <input name = name type = text size = 25>
37 </label></p>
38
39 <p>
Figura J.3 Formulrio simples com campos ocultos e uma caixa de texto. (Parte 1 de 2.)
J-96 C# Como Programar

40 <!-- os input type submite reset inserem botes -->


41 <!-- para enviar ou limpar o contedo do formulrio -->
42 <input type = submit value = Submit Your Entries>
43 <input type = reset value = Clear Your Entries>
44 </p>
45
46 </form>
47
48 </body>
49 </html>

Figura J.3 Formulrio simples com campos ocultos e uma caixa de texto. (Parte 2 de 2.)

Um servidor da Web uma mquina que executa um pacote de software como o PWS (Personal Web Server) da
Microsoft, o IIS (Internet Information Server) da Microsoft ou o Apache. Os servidores da Web tratam das requisies do
navegador. Quando um navegador requisita uma pgina ou um arquivo em algum lugar de um servidor, este processa a re-
quisio e retorna uma resposta para o navegador. Nesse exemplo, os dados do formulrio vo para um script CGI (Common
Gateway Interface interface de interconexo comum), o que um meio de fazer a interface entre uma pgina HTML e um
script (ou seja, um programa) escrito em Perl, C, Tcl ou outra linguagem. Em seguida, o script trata dos dados enviados para
ele pelo servidor e geralmente retorna alguma informao para o usurio. O atributo action da tag form o URL desse
script. Nesse caso, ele um script simples que envia os dados de formulrio para um endereo. A maioria dos provedores
de acesso Internet tem um script como esse em seu site, e voc pode pedir ao administrador de seu sistema para configurar
sua HTML para usar o script corretamente.
Nesse script em particular h diversas informaes (as quais no so vistas pelo usurio) necessrias no formulrio.
As linhas 24 a 31
<input type = hidden name = recipient
value = deitel@deitel.com>
<input type = hidden name = subject
value = Feedback Form>
<input type = hidden name = redirect
value = main.html>

especificam essas informaes usando os elementos de entrada ocultos. O elemento input comum nos formulrios e sem-
pre exige o atributo type. Dois outros atributos so name, que fornece um identificador exclusivo para o elemento input,
e value, o qual indica o valor que o elemento input manda para o servidor no envio.
Como foi mostrado acima, as entradas ocultas sempre tm o atributo type = hidden. As trs entradas ocultas
mostradas so tpicas desse tipo de script CGI: um endereo de e-mail para o qual os dados sero enviados, a linha de assunto
do e-mail e um URL para o qual o usurio redirecionado aps o envio do formulrio.
Apndice J Introduo ao HyperText Markup Language 4: Parte 2 J-97

Boa prtica de programao J.1


Coloque os elementos input ocultos no incio de um formulrio, bem depois da tag inicial <form>. Isso torna mais fcil loca-
lizar e identificar esses elementos.

O uso de um elemento input definido pelo valor de seu atributo type. Apresentamos outras dessas opes nas
linhas 35 a 37:
<p><label>Name:
<input name = name type = text size = 25>
</label></p>

A entrada type = text insere uma caixa de texto de uma linha no formulrio (linha 36). Um bom uso para o elemento
input textual so os nomes ou outras informaes de uma linha. O elemento label das linhas 35 a 37 fornecem uma des-
crio do elemento input da linha 36.
Tambm usamos o atributo size do elemento input para especificar a largura da entrada de texto medida em caracte-
res. Voc tambm pode definir um nmero mximo de caracteres que a entrada de texto aceita usando o atributo maxlength.

Boa prtica de programao J.2


Quando voc usar os elementos input nos formulrios, verifique com o atributo maxlength se voc deixou espao suficiente
para os usurios entrarem as informaes pertinentes.

Erro de programao comum J.3


Esquecer de incluir um elemento label para cada elemento do formulrio um erro de projeto. Sem esses rtulos, os usurios
no tm como saber qual a funo dos elementos individuais do formulrio.

Existem dois tipos de elementos input nas linhas 42 e 43:


<input type = submit value = Submit Your Entries>
<input type = reset value = Clear Your Entries>

que devem ser includos em todo formulrio. O elemento input type = submit permite que o usurio envie os dados
fornecidos no formulrio para processamento no servidor. A maioria dos navegadores visuais da Web coloca no formulrio um
boto que quando clicado envia os dados. O atributo value altera o texto exibido na parte inferior (o valor padro sub-
mit). O elemento input type = reset permite que um usurio reinicialize todos os elementos do formulrio com os
valores padro. Isso pode ajudar o usurio a corrigir erros ou apenas recomear. Assim como acontece com a entrada submit,
o atributo value reset do elemento input afeta o texto da parte inferior da tela, mas no afeta sua funcionalidade.

Erro de programao comum J.4


Verifique se voc encerrou o cdigo de seu formulrio com a tag </form>. A falta dessa tag um erro e pode afetar a funciona-
lidade dos outros formulrios da mesma pgina.

J.5 Formulrios HTML mais complexos


Apresentamos opes adicionais de entrada de formulrio na Figura J.4.

1 <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN


2 http://www.w3.org/TR/html4/strict.dtd>
3 <html>
4
5 <!-- Fig. J.4: form.html -->
6 <!-- Exemplo 2 de desenho de formulrio. -->
7
8 <head>
9 <title>C# How to Program - Tables</title>
Figura J.4 Formulrio incluindo reas de texto, caixas de senha e caixas de seleo. (Parte 1 de 3.)
J-98 C# Como Programar

10 </head>
11
12 <body>
13
14 <h1>Feedback Form</h1>
15
16 <p>Please fill out this form to help us improve our site.</p>
17
18 <form method = post action = /cgi-bin/formmail>
19
20 <p>
21 <input type = hidden name = recipient
22 value = deitel@deitel.com>
23
24 <input type = hidden name = subject
25 value = Feedback Form>
26
27 <input type = hidden name = redirect
28 value = main.html>
29 </p>
30
31 <p><label>Name:
32 <input name = name type = text size = 25>
33 </label></p>
34
35 <!-- <textarea> cria uma caixa de texto com o tamanho dado -->
36 <p><label>Comments:
37 <textarea name = comments rows = 4 cols = 36>
38 </textarea>
39 </label></p>
40
41 <!-- <input type = password> inclui uma caixa de texto cuja -->
42 <!-- exibio ser em *** e no em caracteres regulares -->
43 <p><label>Email Address:
44 <input name = email type = password size = 25>
45 </label></p>
46
47 <p>
48 <strong>Things you liked:</strong><br>
49
50 <label>Site design
51 <input name = thingsliked type = checkbox
52 value = Design></label>
53
54 <label>Links
55 <input name = thingsliked type = checkbox
56 value = Links></label>
57
58 <label>Ease of use
59 <input name = thingsliked type = checkbox
60 value = Ease></label>
61
62 <label>Images
63 <input name = thingsliked type = checkbox
64 value = Images></label>
65
66 <label>Source code
67 <input name = thingsliked type = checkbox

Figura J.4 Formulrio incluindo reas de texto, caixas de senha e caixas de seleo. (Parte 2 de 3.)
Apndice J Introduo ao HyperText Markup Language 4: Parte 2 J-99

68 value = Code></label>
69 </p>
70
71 <p>
72 <input type = submit value = Submit Your Entries>
73 <input type = reset value = Clear Your Entries>
74 </p>
75
76 </form>
77
78 </body>
79 </html>

Figura J.4 Formulrio incluindo reas de texto, caixas de senha e caixas de seleo. (Parte 3 de 3.)

As linhas 37 e 38
<textarea name = comments rows = 4 cols = 36>
</textarea>

introduzem o elemento textarea, que insere uma caixa de texto no formulrio. Voc especifica o tamanho da caixa com
o atributo rows, o qual define o nmero de linhas que aparecero na textarea. Com o atributo cols voc especifica a
largura que a textarea deve ter. Essa textarea tem quatro linhas de caracteres de altura por 36 caracteres de largura.
Todo o texto padro que voc quer colocar dentro da textarea deve estar contido no elemento textarea.
A entrada type = password (linha 44)
<input name = email type = password size = 25>

insere uma caixa de texto com o tamanho indicado. O campo de entrada password fornece um modo pelo qual os usurios
podem fornecer informaes que o usurio no quer que as outras pessoas leiam na tela. Nos navegadores visuais, os dados que
o usurio digita em um campo de entrada de senha so mostrados com asteriscos. Entretanto, o valor real que o usurio fornece
enviado para o servidor. Os navegadores no-visuais podem converter de forma diferente esse tipo de campo de entrada.
As linhas 50 a 68 apresentam outro tipo de elemento de formulrio: a caixa de seleo. Cada elemento input com
type = checkbox cria um item novo de caixa de seleo no formulrio. As caixas de seleo podem ser usadas individual-
mente ou em grupos. Cada caixa de seleo de um grupo deve ter o mesmo atributo name (nesse caso, name = thingsli-
ked). Isso notifica o script que est tratando do formulrio de que todas as caixas de seleo esto relacionadas entre si.
J-100 C# Como Programar

Erro de programao comum J.5


Quando seu formulrio tem mltiplas caixas de seleo com o mesmo name, elas devem necessariamente ter value s diferentes;
caso contrrio, o script no ter como distinguir entre elas.

Os elementos adicionais de formulrio so apresentados na Figura J.5. Nesse exemplo de formulrio apresentamos
dois tipos novos de opes de entrada. O primeiro o boto de rdio (ou, na terminologia da Microsoft, boto de opo),
o qual apresentado nas linhas 80 a 97. Inseridos nos formulrios com o atributo input type = radio, os botes de
rdio so semelhantes, em funo e uso, s caixas de seleo. Os botes de rdio so diferentes, porque apenas um elemento
do grupo pode ser selecionado de cada vez. Todos os atributos name de um grupo de entradas de rdio devem ser iguais e
todos os atributos value devem ser diferentes. Insira o atributo checked para indicar qual boto de rdio voc gostaria de
selecionar inicialmente. O atributo checked tambm pode ser aplicado s caixas de seleo.

Erro de programao comum J.6


Quando voc usa um grupo de entradas de rdio em um formulrio, se os valores name no estiverem configurados da mesma
maneira, o usurio selecionar todos os botes de rdio ao mesmo tempo o que um resultado indesejado.

1 <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN


2 http://www.w3.org/TR/html4/strict.dtd>
3 <html>
4
5 <!-- Fig. J.5: form.html -->
6 <!-- Exemplo 3 de desenho de formulrio. -->
7
8 <head>
9 <title>C# How to Program - Tables</title>
10 </head>
11
12 <body>
13
14 <h1>Feedback Form</h1>
15
16 <p>Please fill out this form to help us improve our site.</p>
17
18 <form method = post action = /cgi-bin/formmail>
19
20 <p>
21 <input type = hidden name = recipient
22 value = deitel@deitel.com>
23
24 <input type = hidden name = subject
25 value = Feedback Form>
26
27 <input type = hidden name = redirect
28 value = main.html>
29 </p>
30
31 <p><label>Name:
32 <input name = name type = text size = 25>
33 </label></p>
34
35 <p><label>Comments:
36 <textarea name = comments rows = 4 cols = 36>
37 </textarea>
38 </label></p>
39
40 <p><label>Email Address:

Figura J.5 Formulrio com botes de rdio e listas suspensas. (Parte 1 de 3.)
Apndice J Introduo ao HyperText Markup Language 4: Parte 2 J-101

41 <input name = email type = password size = 25>


42 </label></p>
43
44 <p>
45 <strong>Things you liked:</strong><br>
46
47 <label>Site design
48 <input name = things type = checkbox
49 value = Design>
50 </label>
51
52 <label>Links
53 <input name = things type = checkbox
54 value = Links>
55 </label>
56
57 <label>Ease of use
58 <input name = things type = checkbox
59 value = Ease>
60 </label>
61
62 <label>Images
63 <input name = things type = checkbox
64 value = Images>
65 </label>
66
67 <label>Source code
68 <input name = things type = checkbox
69 value = Code>
70 </label>
71 </p>
72
73 <!-- <input type = radio> cria um boto de rdio -->
74 <!-- os botes de rdio e as caixas de seleo diferem porque apenas -->
75 <!-- um boto de rdio de um grupo pode ser selecionado -->
76 <p>
77 <strong>How did you get to our site?:</strong><br>
78
79 <label>Search engine
80 <input name = how get to site type = radio
81 value = search engine checked></label>
82
83 <label>Links from another site
84 <input name = how get to site type = radio
85 value = link></label>
86
87 <label>Deitel.com Web site
88 <input name = how get to site type = radio
89 value = deitel.com></label>
90
91 <label>Reference in a book
92 <input name = how get to site type = radio
93 value = book></label>
94
95 <label>Other
96 <input name = how get to site type = radio
97 value = other></label>
98

Figura J.5 Formulrio com botes de rdio e listas suspensas. (Parte 2 de 3.)
J-102 C# Como Programar

99 </p>
100
101 <!-- as tags <select> apresentam menus suspensos -->
102 <!-- com as opes indicadas pelas tags <option> -->
103 <p>
104 <label>Rate our site:
105
106 <select name = rating>
107 <option selected>Amazing:-)</option>
108 <option>10</option>
109 <option>9</option>
110 <option>8</option>
111 <option>7</option>
112 <option>6</option>
113 <option>5</option>
114 <option>4</option>
115 <option>3</option>
116 <option>2</option>
117 <option>1</option>
118 <option>The Pits:-(</option>
119 </select>
120
121 </label>
122 </p>
123
124 <p>
125 <input type = submit value = Submit Your Entries>
126 <input type = reset value = Clear Your Entries>
127 </p>
128
129 </form>
130
131 </body>
132 </html>

Figura J.5 Formulrio com botes de rdio e listas suspensas. (Parte 3 de 3.)
Apndice J Introduo ao HyperText Markup Language 4: Parte 2 J-103

O ltimo tipo de entrada de formulrio que apresentamos aqui o elemento select (linhas 106 a 119). Isso coloca
uma lista de itens selecionveis dentro de seu formulrio.
<select name = rating>
<option selected>Amazing:-)</option>
<option>10</option>
<option>9</option>
<option>8</option>
<option>7</option>
<option>6</option>
<option>5</option>
<option>4</option>
<option>3</option>
<option>2</option>
<option>1</option>
<option>The Pits:-(</option>
</select>

Esse tipo de entrada de formulrio criado com um elemento select. Verifique se voc incluiu o atributo name dentro da
tag inicial <select>.
Para adicionar um item na lista, inclua no elemento select um elemento option que contenha o texto a ser exibido.
O atributo selected, assim como o atributo checked dos botes de rdio e caixas de seleo, aplica uma seleo padro
a sua lista.
O cdigo acima gera uma lista suspensa de opes na maioria dos navegadores virtuais, como mostra a Figura J.5.
Voc pode alterar o nmero de opes de lista visveis de cada vez usando o atributo size do elemento select. Use esse
atributo se preferir uma verso expandida da lista em vez da lista expansvel de uma linha.

J.6 Links internos


No Apndice I discutimos como vincular uma pgina Web a outra com ncoras de texto e imagem. A Figura J.6 apresenta
links internos, que permitem a criao de ncoras nomeadas para links com determinadas partes de um documento HTML.

1 <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN


2 http://www.w3.org/TR/html4/strict.dtd>
3 <html>
4
5 <!-- Fig. J.6: links.html -->
6 <!-- Links internos. -->
7
8 <head>
9 <title>C# How to Program - Tables</title>
10 </head>
11
12 <body>
13
14 <!-- <a name = ..></a> cria os links internos -->
15 <p>
16 <a name = features></a>
17 </p>
18
19 <h1>The Best Features of the Internet</h1>
20
21 <!-- o endereo do link interno xx.html#linkname-->
22 <p>
Figura J.6 Usando links internos para tornar suas pginas mais navegveis. (Parte 1 de 3.)
J-104 C# Como Programar

23 <a href = #ceos>Go to <em>Favorite CEOs</em></a>


24 </p>
25
26 <ul>
27 <li>You can meet people from countries around the world.
28 </li>
29
30 <li>You have access to new media as it becomes public:
31
32 <ul>
33 <li>New games</li>
34 <li>New applications
35
36 <ul>
37 <li>For Business</li>
38 <li>For Pleasure</li>
39 </ul>
40
41 </li>
42
43 <li>Around the Clock news</li>
44 <li>Search Engines</li>
45 <li>Shopping</li>
46 <li>Programming
47
48 <ul>
49 <li>HTML</li>
50 <li>Java</li>
51 <li>Dynamic HTML</li>
52 <li>Scripts</li>
53 <li>New languages</li>
54 </ul>
55
56 </li>
57 </ul>
58
59 </li>
60
61 <li>Links</li>
62 <li>Keeping In touch with old friends</li>
63 <li>It is the technology of the future!</li>
64 </ul>
65
66 <p><a name = ceos></a></p>
67
68 <h1>My 3 Favorite <em>CEOs</em></h1>
69
70 <p>
71 <a href = #features>Go to <em>Favorite Features</em></a>
72 </p>
73
74 <ol>
75 <li>Lawrence J. Ellison</li>
76 <li>Steve Jobs</li>
77 <li>Michael Dell</li>
78 </ol>
79
80 </body>
81 </html>
Figura J.6 Usando links internos para tornar suas pginas mais navegveis. (Parte 2 de 3.)
Apndice J Introduo ao HyperText Markup Language 4: Parte 2 J-105

Figura J.6 Usando links internos para tornar suas pginas mais navegveis. (Parte 3 de 3.)

As linhas 15 a 17
<p>
<a name = features></a>
</p>

mostram uma ncora nomeada para um link interno. Uma ncora nomeada criada por meio de um elemento a com um atri-
buto name. A linha 15 cria uma ncora chamada features. Como o nome da pgina list.html, o URL dessa ncora
na pgina Web list.html#features. A linha 71
<a href = #features>Go to<em>Favorite Features</em></a>

mostra um link com a ncora features como seu destino. A seleo desse link em um navegador visual faz rolar a janela
do navegador at a ncora features (a linha 16). A Figura J.6 tem exemplos disso. Ela tem duas capturas diferentes de telas
da mesma pgina, uma em cada ncora. Voc tambm pode criar um vnculo com uma ncora de outra pgina usando o URL
daquela localizao (usando o formato href = pgina.html#nome).

Observao de aparncia e comportamento J.2


Os links internos so mais teis em grandes arquivos HTML com muitas informaes. Voc pode criar links para diversos pontos
da pgina para evitar que o usurio tenha de rolar a pgina para encontrar uma localizao especfica.

J.7 Criando e usando mapas de imagens


J vimos que as imagens podem ser usadas como links para outros lugares de seu site ou outra parte da Internet. Agora dis-
cutiremos como criar os mapas de imagens (Figura J.7), os quais permitem designar determinadas sees da imagem como
reas ativas (hotspots) e, em seguida, us-las como links.
Todos os elementos de um mapa de imagem esto contidos nas tags <map>...</map>. O atributo exigido pelo ele-
mento map name (linha 18):
<map name = picture>

Como veremos, esse atributo necessrio para fins de referncia. Uma rea ativa de uma imagem definida com o
elemento area. Cada elemento area tem estes atributos: href define o destino do link naquele local, shape e coords
definem as caractersticas da rea, e alt funciona como no elemento img.
A marcao das linhas 23 a 25
<area href = form.htmlshape = rect
coords = 3, 122, 73, 143 alt = Go to the feedback form>
J-106 C# Como Programar

faz com que uma rea ativa retangular seja desenhada ao redor das coordenadas dadas no elemento coords. Um par de
coordenadas consiste em dois nmeros, os quais so as localizaes do ponto nos eixos x e y. O eixo x se estende na horizontal
a partir do canto superior esquerdo, e o eixo y se estende na vertical. Cada ponto de uma imagem tem uma coordenada x-y
exclusiva. No caso de uma rea ativa retangular, o canto superior esquerdo do retngulo est localizado a 3 no eixo x e 122
no eixo y, o que anotado como (3, 122). O canto inferior direito do retngulo est a (73, 143).

1 <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN


2 http://www.w3.org/TR/html4/strict.dtd>
3 <html>
4
5 <!-- Fig. J.7: picture.html -->
6 <-- Criando e usando mapas de imagem. -->
7
8 <head>
9 <title>C# How to Program - Tables</title>
10 </head>
11
12 <body>
13
14 <p>
15
16 <1-- <map> abre e d nome rea de formatao -->
17 <!-- do mapa de imagem para referncia posterior -->
18 <map name = picture>
19
20 <!-- shape = rect indica a rea retangular -->
21 <!-- com as coordenadas dos cantos superior -->
22 <!-- esquerdo e inferior direito -->
23 <area href = form.html shape = rect
24 coords = 3, 122, 73, 143
25 alt = Go to the feedback form>
26
27 <area href = contact.html shape = rect
28 coords = 109, 123, 199, 142
29 alt = Go to the contact page>
30
31 <area href = main.html shape = rect
32 coords = 1, 2, 72, 17
33 alt = Go to the homepage>
34
35 <area href = links.html shape = rect
36 coords = 155, 0, 199, 18
37 alt = Go to the links page>
38
39 <!-- shape = polygon indica uma rea de forma geomtrica -->
40 <!-- personalizvel, com as coordenadas -->
41 <!-- de cada vrtice relacionado -->
42 <area href = mailto:deitel@deitel.com shape = poly
43 coords = 28, 22, 24, 68, 46, 114, 84, 111, 99, 56, 86, 13
44 alt = Email the Deitels>
45
46 <!-- shape = circle indica uma rea circular -->
47 <!-- com o centro e o raio relacionados -->
48 <area href = mailto:deitel@deitel.com shape = circle
49 coords = 146, 66, 42 alt = Email the Deitels>
50 </map>
51
Figura J.7 A figura com os links ancorados a um mapa de imagens. (Parte 1 de 2.)
Apndice J Introduo ao HyperText Markup Language 4: Parte 2 J-107

52 <!-- <img src=... usemap = #name> diz que -->


53 <!-- o mapa de imagens indicado ser usado com a imagem -->
54 <img src = deitel.gif width = 200 height = 144
55 alt = Harvey and Paul Deitel usemap = #picture>
56 </p>
57
58 </body>
59 </html>

Figura J.7 A figura com os links ancorados a um mapa de imagens. (Parte 2 de 2.)

Outra rea de mapa est nas linhas 42 a 44


<area href = mailto:deitel@deitel.com shape = poly
coords = 28, 22, 24, 68, 46, 114, 84, 111, 99, 56, 86, 13
alt = Email the Deitels>

Nesse caso, usamos o valor poly para o atributo shape. Isso cria uma rea ativa na forma de um polgono usando as co-
ordenadas do atributo coords. Essas coordenadas representam cada vrtice ou canto do polgono. O navegador conecta
automaticamente esses pontos com as linhas para formar a rea da rea ativa.
shape = circle o ltimo atributo; assim, normalmente usado nos mapas de imagens. Ele cria uma rea ativa
circular e exige ambas as coordenadas do centro do crculo e o raio do crculo em pixels.
Para usar o mapa de imagem com um elemento img, voc deve inserir o atributo usemap = #name no elemento
img, no qual name o valor do atributo name do elemento map. As linhas 54 e 55
<img src = deitel.gif width = 200 height= 144 alt =
Harvey and Paul Deitel usemap = #picture>

mostram como o mapa de imagem name = picture aplicado ao elemento img.

J.8 Tags <meta>


As pessoas usam os mecanismos de busca para encontrar sites Web interessantes. Os mecanismos de busca em geral catalo-
gam os sites seguindo os links de uma pgina para outra e salvando as informaes de identificao e classificao de cada
pgina visitada. O principal elemento da HTML que os mecanismos de busca usam para catalogar as pginas a tag meta
(Figura J.8).
Uma tag meta contm dois atributos que sempre devem ser usados. O primeiro deles (name) identifica o tipo de tag
meta que voc est incluindo. O atributo content fornece as informaes que o mecanismo de busca vai catalogar sobre
seu site.
J-108 C# Como Programar

1 <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN


2 http://www.w3.org/TR/html4/strict.dtd>
3 <html>
4
5 <!-- Fig. J.8: main.html -->
6 <!-- <meta> e <!doctype> tags. -->
7
8 <head>
9 <!-- as tags <meta> fornecem aos mecanismos de busca informaes -->
10 <!-- de que eles precisam para catalogar seu site -->
11 <meta name = keywords content = Webpage, design, HTML,
12 tutorial, personal, help, index, form, contact, feedback,
13 list, links, frame, deitel>
14
15 <meta name = description content = This Web site will help
16 you learn the basics of HTML and Webpage design through the
17 use of interactive examples and instruction.>
18
19 <title>C# How to Program - Tables</title>
20 </head>
21
22 <body>
23
24 <h1>Welcome to Our Web Site!</h1>
25
26 <p>
27 We have designed this site to teach about the wonders of
28 <em>HTML</em>. We have been using <em>HTML</em> since
29 version <strong>2.0</strong>, and we enjoy the features
30 that have been added recently. It seems only a short
31 time ago that we read our first <em>HTML</em> book.
32 Soon you will know about many of the great new
33 features of HTML 4.01.
34 </p>
35
36 <p>Have Fun With the Site!</p>
37
38 </body>
39 </html>

Figura J.8 Usando meta para fornecer palavras-chave e uma descrio.

As linhas 11 a 13 demonstram a tag meta.

<meta name = keywords content = Webpage, design, HTML,


tutorial, personal, help, index, form, contact, feedback,
list, links, frame, deitel>

O content de uma tag meta com name = keywords fornece aos mecanismos de busca uma lista de palavras que des-
creve os principais aspectos de seu site. Essas palavras so usadas para comparar as pesquisas se algum pesquisar algum
dos termos de sua tag keywords meta, ter mais chances de ser notificado sobre seu site na sada do mecanismo de busca.
Assim, a incluso das tags meta e de suas informaes content levaro mais visitantes para seu site.
O valor do atributo description (linhas 15 a 17)

<meta name = description content = This Web site will help


you learn the basics of HTML and Webpage design through the
use of interactive examples and instruction.>
Apndice J Introduo ao HyperText Markup Language 4: Parte 2 J-109

bastante semelhante ao valor de keywords. Em vez de fornecer uma lista de palavras que descrevem sua pgina, o con-
tents do elemento meta das palavras-chave deve ser uma descrio fcil de trs a quatro linhas de seu site escrita na forma
de sentena. Essa descrio tambm usada pelos mecanismos de busca para catalogar e exibir seu site.

Observao de engenharia de software J.1


Os elementos meta no so visveis para os usurios do site e devem ser colocados dentro da seo de cabealho de seu docu-
mento HTML.

J.9 Elemento frameset


Todas as pginas Web que foram criadas at agora tm a capacidade de estabelecer links com outras pginas, mas s podem
exibir uma pgina de cada vez. A Figura J.9 apresenta os frames (quadros), os quais podem ajud-lo a exibir mais de um arquivo
HTML por vez. Os frames, quando usados adequadamente, podem tornar seu site mais fcil de ler e til para seus usurios.
Nas linhas 1 e 2,
<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Frameset//EN
http://www.w3.org/TR/html14/frameset.dtd>

encontramos um novo tipo de documento. O tipo de documento especificado aqui indica que esse documento HTML usa os
frames. Voc deve usar esse tipo de documento sempre que usar os frames em seu documento HTML.

1 <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Frameset//EN


2 http://www.w3.org/TR/html4/frameset.dtd>
3 <html>
4
5 <!-- Fig. J.9: index.html -->
6 <!-- Frames em HTML I. -->
7
8 <head>
9 <meta name = keywords content = Webpage, design, HTML,
10 tutorial, personal, help, index, form, contact, feedback,
11 list, links, frame, deitel>
12
13 <meta name = description content = This Web site will help
14 you learn the basics of HTML and Webpage design through the
15 use of interactive examples and instruction.>
16
17 <title>C# How to Program - Tables</title>
18 </head>
19
20 <!-- a tag <frameset> d as dimenses de seu frame -->
21 <frameset cols = 110,*>
22
23 <!-- os elementos individuais de frame especificam -->
24 <!-- quais pginas aparecem em determinados frames -->
25 <frame name = nav src = nav.html>
26 <frame name = main src = main.html>
27
28 <noframes>
29 <p>
30 This page uses frames, but your browser
31 does not support them.
32 </p>
33
34 <p>
35 Please, <a href = nav.html>follow this link to
Figura J.9 Uma pgina Web usando dois frames navegao e contedo. (Parte 1 de 2.)
J-110 C# Como Programar

36 browse our site without frames</a>.


37 </p>
38 </noframes>
39
40 </frameset>
41 </html>

Figura J.9 Uma pgina Web usando dois frames navegao e contedo. (Parte 2 de 2.)

A pgina com frames comea com a tag inicial frameset na linha 21:
<frameset cols = 110,*>

Essa tag diz ao navegador que a pgina contm frames. O atributo cols da tag inicial frameset d o layout do frameset.
O valor de cols (ou rows se voc vai escrever um frameset com um layout horizontal) d a largura de cada frame, seja
em pixels ou como uma porcentagem da tela. Neste caso, o atributo cols = 110,* diz ao navegador que h dois frames.
O primeiro se estende a 110 pixels a partir do lado esquerdo da tela, e o segundo frame preenche o restante da tela (como
indica o asterisco).
Agora que definimos o layout da pgina, especificaremos os arquivos que formaro o frameset (conjunto de quadros).
Fazemos isso com o elemento frame das linhas 25 e 26:
<frame name = nav src = nav.html>
<frame name = main src = main.html>

Em cada elemento frame, o atributo src d o URL da pgina que ser exibida no frame. No exemplo anterior, o primeiro
frame (que cobre 110 pixels no lado esquerdo do frameset) exibir a pgina nav.html e tem o atributo name = nave.
O segundo frame exibir a pgina main.html e tem o atributo name = main.
A finalidade de um atributo name do elemento frame identificar o frame, permitindo que os links de um frameset
sejam carregados em seu frame de destino pretendido. Por exemplo:
<a href = links.html target = main>

carregaria links.html no frame cujo atributo name main.


Um destino em um elemento ncora tambm pode ser definido com um nmero de valores pr-configurados: target=_
blank carrega a pgina em uma janela de navegador nova em branco; target=_self carrega a pgina na mesma janela
Apndice J Introduo ao HyperText Markup Language 4: Parte 2 J-111

do elemento ncora; target=_parent carrega a pgina no frameset pai (ou seja, no frameset que contm o frame
atual); e target=_top carrega a pgina na janela completa do navegador (a pgina carregada sobre o frameset).
Nas linhas 28 a 38 do exemplo de cdigo da Figura J.9, o elemento noframes exibe a HTML naqueles navegadores
que no suportam frames.

Dica de portabilidade J.1


Nem todos usam um navegador que suporta frames. Use o elemento noframes dentro de frameset para encaminhar os usu-
rios para uma verso sem frames de seu site.

Observao de aparncia e comportamento J.3


Os frames podem aperfeioar sua pgina, mas quase sempre so mal utilizados. Nunca use os frames para realizar aquilo que
voc poderia fazer com outra formatao HTML mais simples.

J.10 framesets aninhados


Voc pode usar o elemento frameset para criar layouts mais complexos em um site Web com frames aninhando as reas
frameset como na Figura J.10.
O primeiro nvel de tags frameset est nas linhas 21 e 22:
<frameset cols = 110,*>
<frame name = nav src = nav.html>

Os elementos frameset e frame aqui so construdos da mesma maneira que na Figura J.9. Temos um frame que se es-
tende sobre os primeiros 110 pixels, a partir da lateral esquerda.
O segundo nvel (aninhado) do elemento frameset cobre apenas a rea frame restante que no foi includa no
frameset primrio. Assim sendo, todos os frames includos no segundo frameset no incluiro os 110 pixels mais
esquerda da tela. As linhas 26 a 29 mostram o segundo nvel de tags frameset:
<frameset rows = 175,*>
<frame name = picture src = picture.html>
<frame name = main src = main.html>
</frameset>

Na rea frameset, o primeiro frame se estende 175 pixels a partir da parte superior da tela, como indica o elemento rows
= 175,*. Verifique se incluiu o nmero correto de elementos frame dentro da segunda rea frameset. Verifique tam-
bm se incluiu um elemento noframes e se fechou ambas as reas frameset no final da pgina Web.

1 <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Frameset//EN


2 http://www.w3.org/TR/html4/frameset.dtd>
3 <html>
4
5 <!-- Fig. J.10: index.html -->
6 <!-- Frames em HTML II. -->
7
8 <head>
9
10 <meta name = keywords content = Webpage, design, HTML,
11 tutorial, personal, help, index, form, contact, feedback,
12 list, links, frame, deitel>
13
14 <meta name = description content = This Web site will help
15 you learn the basics of HTML and Webpage design through
16 the use of interactive examples and instruction.>
17

Figura J.10 Site Web com frames e um frameset aninhado. (Parte 1 de 2.)
J-112 C# Como Programar

18 <title>C# How to Program - Tables</title>


19 </head>
20
21 <frameset cols = 110,*>
22 <frame name = nav src = nav.html>
23
24 <!-- os framesets aninhados so usados para alterar a formatao -->
25 <!-- e o espaamento do frameset como um todo -->
26 <frameset rows = 175,*>
27 <frame name = picture src = picture.html>
28 <frame name = main src = main.html>
29 </frameset>
30
31 <noframes>
32 <p>
33 This page uses frames, but your browser does
34 not support them.
35 </p>
36
37 <p>
38 Please, <a href = nav.html>follow this link
39 to browse our site without frames</a>.
40 </p>
41 </noframes>
42
43 </frameset>
44 </html>

Figura J.10 Site Web com frames e um frameset aninhado. (Parte 2 de 2.)

Dica de teste e depurao J.1


Ao usar os elementos frameset aninhados, recue cada nvel da tag frame. Isso tornar a pgina mais clara e fcil de depurar.

Observao de aparncia e comportamento J.4


Os frameset s aninhados podem ajudar a criar sites Web visualmente agradveis e fceis de depurar.
Apndice J Introduo ao HyperText Markup Language 4: Parte 2 J-113

J.11 Recursos da Internet e da World Wide Web


Existem muitos sites Web que abordam os recursos mais avanados e difceis do HTML. Diversos desses sites so apresen-
tados aqui.
www.geocities.com/SiliconValley/Orchard/5212
A Adams Advanced HTML Page destina-se queles que procuram dominar as tcnicas do HTML mais avanadas. Ele inclui
instrues para a criao de tabelas, frames, marquees e outros tpicos avanados.
www.w3scripts.com/html
Esse site (originado no W3Schools) um repositrio de exemplos de cdigo que exibe todos os recursos do HTML, desde o
nvel bsico at o avanado.
www.blooberry.com/indexdot/html
Index Dot HTML, The Advance HTML Reference... O nome fala por si mesmo. Esse site tem um timo diretrio e trs ndices
baseados em rvore de todos os elementos HTML e muito mais.
www.neiljohan.com/html/advancedhtml.htm
O Advanced HTML Guide fornece idias para melhorar seu site usando o HTML de maneiras que voc nunca imaginou.

Resumo
As tabelas HTML organizam os dados em linhas e colunas. Todas as tags e o texto que se aplicam a uma tabela ficam dentro das tags
<table>...</table>. O atributo border permite definir a largura da borda da tabela em pixels. O atributo width define a largura
da tabela voc especifica um nmero de pixels ou uma porcentagem de largura de tela.
O texto que est dentro das tags <caption>...</caption> inserido diretamente acima da tabela na janela do navegador. O texto
da legenda tambm usado para ajudar os navegadores baseados em texto a interpretar os dados da tabela.
As tabelas podem ser divididas em sees horizontais e verticais distintas. Coloque todas as informaes de cabealho (como os
ttulos e os cabealhos de coluna da tabela) dentro das tags </thead>...</thead>. O elemento tr (table row linha de tabela)
usado para formatar as clulas de linhas individuais. Todas as clulas de uma linha pertencem s tags <tr>...</tr> daquela linha.
A menor rea da tabela que podemos formatar a clula de dados. Existem dois tipos de clulas de dados: aquelas localizadas no
cabealho (<th>...</th>) e aquelas localizadas no corpo da tabela (<td>...</td>). As clulas de cabealho (em geral colocadas
na rea <thead>) so adequadas para os ttulos.
Assim como thead, o elemento tbody usado para fins de formatao e agrupamento. A maioria das tabelas usa tbody para
abrigar a maior parte de seu contedo.
As clulas de dados da tabela td so alinhadas esquerda como padro. As clulas th so centralizadas como padro.
Assim como voc pode usar os elementos thead e tbody para formatar grupos de linhas de tabela, pode tambm usar o elemento
colgroup para agrupar e formatar colunas. Na tag inicial de colgroup definido o nmero de colunas que ele afeta e a formatao
que ele impe naquele grupo de colunas.
Cada elemento col contido dentro das tags <colgroup>...</colgroup> pode formatar um nmero de colunas especfico de
cada vez.
Voc pode incluir uma cor ou imagem de segundo plano em qualquer linha de tabela ou clula com os atributos bgcolor ou back-
ground, os quais so usados da mesma maneira que no elemento body.
possvel tornar algumas clulas de dados da tabela maiores do que outras usando os atributos rowspan e colspan. O valor do
atributo estende a clula de dados para abranger o nmero especificado de clulas.
O atributo valign (alinhamento vertical) de uma clula de dados de tabela aceita estes valores: top, middle, bottom e
baseline.
Todas as clulas de uma linha de tabela cujo atributo valign definido como baseline tero a primeira linha de texto em uma
linha de base comum.
O alinhamento vertical padro de todas as clulas de dados e cabealho valign=middle.
O HTML fornece diversos mecanismos incluindo o formulrio para reunir informaes de pessoas que visualizam seu site.
Use method = post em um formulrio para alterar os dados do servidor, por exemplo, ao atualizar um banco de dados. Os dados
do formulrio sero enviados para o servidor como uma varivel de ambiente, a qual pode ser acessada por scripts. O outro valor
J-114 C# Como Programar

possvel (method = get) deve ser usado quando seu formulrio no causar nenhuma alterao nos dados no lado do servidor; por
exemplo, quando se faz uma solicitao de banco de dados. Os dados do formulrio de method = get so anexados no final do
URL. Por causa disso, a quantidade de dados enviada com esse mtodo limitada a 4KB. Tome cuidado tambm com o fato de que
method = get se limita aos caracteres padro e no pode enviar nenhum caractere especial.
Um servidor da Web uma mquina que executa um pacote de software como o Apache ou IIS; os servidores so criados para lidar
com as requisies do navegador. Quando um usurio utiliza um navegador para solicitar uma pgina ou arquivo de algum lugar do
servidor, este processa a solicitao e retorna uma resposta para ele.
O atributo action da tag form o caminho para um script que processa os dados do formulrio.
O elemento input comum nos formulrios e sempre exige o atributo type. Dois outros atributos so name, que fornece uma
identificao exclusiva para input, e value, o qual indica o valor que o elemento input envia para o servidor.
O input type= text coloca uma caixa de texto de uma linha para o formulrio. O valor desse elemento input e as informa-
es que o servidor envia para voc desse input so o texto que o usurio digita na caixa. O atributo size determina a largura da
entrada de texto medida em caracteres. Voc tambm define um nmero mximo de caracteres que a entrada de texto aceitar inserin-
do o atributo maxlength=length.
Voc deve ter certeza de que incluiu um elemento label para cada elemento de formulrio para indicar a funo do elemento.
O elemento type=submit input coloca um boto no formulrio, o qual envia os dados para o servidor quando clicado. O
atributo value do input submit altera o texto exibido na parte inferior.
O elemento input type=reset coloca um boto no formulrio, o qual, quando clicado, limpa todas as entradas que o usurio
inseriu no formulrio.
O elemento textarea insere uma caixa no formulrio. Voc especifica o tamanho da caixa (que pode ser rolada) dentro da tag
inicial <textarea> com os atributos rows e cols.
Os dados inseridos em um elemento input type=password aparecem na tela como asteriscos. A senha usada para enviar
informaes confidenciais que o usurio no quer que outras pessoas leiam. Somente o navegador exibe os asteriscos os dados reais
do formulrio ainda so enviados para o servidor.
Cada elemento input com type=checkbox cria uma caixa de seleo no formulrio. As caixas de seleo podem ser usadas
individualmente ou em grupos. Cada caixa de seleo de um grupo deve ter o mesmo name (nesse caso, name=things).
Os botes de rdio so inseridos nos formulrios por meio do atributo input type=radio e so diferentes das caixas de seleo,
pois apenas um boto do grupo pode ser selecionado de cada vez. Todos os atributos name de um grupo de entradas de rdio devem
ser iguais e todos os atributos value devem ser diferentes.
Insira o atributo checked para indicar qual boto de rdio voc quer selecionar inicialmente.
shape = poly cria uma rea ativa do formato no predefinido voc especifica o formato da rea ativa no atributo coords
listando as coordenadas de cada vrtice, ou canto da rea ativa.
O elemento select coloca uma lista selecionvel de itens dentro de seu formulrio. Para incluir um item na lista insira um elemento
option na rea <select>...</select> e digite aquilo que o item da lista deve exibir na mesma linha. Voc pode alterar o n-
mero de opes de lista visveis de cada vez incluindo o atributo size=size dentro da tag <select>. Use esse atributo se voc
preferir uma verso expandida da lista em vez da lista expansvel de uma linha.
Uma localizao em uma pgina marcada com a incluso de um atributo name em um elemento a. Um clique nesse link de um
navegador rola a janela do navegador at aquele ponto da pgina.
Um mapa de imagens permite designar determinadas sees da imagem como reas ativas e, em seguida, usar essas reas ativas como
ncoras de vinculao.
Todos os elementos de um mapa de imagens esto contidos nas tags <map>...</map>. O atributo exigido para o elemento map name.
Uma rea ativa da imagem definida com o elemento area. Cada tag <area> tem estes atributos: href define o destino do link
naquele local, shape e coords definem as caractersticas da rea e da funo alt como nas tags <img>.
shape=rect cria uma rea ativa retangular ao redor das coordenadas de um elemento coords.
Um par de coordenadas consiste em dois nmeros, os quais so as localizaes do ponto nos eixos x e y. O eixo x se estende na
horizontal desde o canto superior esquerdo, e o eixo y se estende na vertical. Cada ponto de uma imagem tem uma coordenada x-y
exclusiva, a qual indicada como (x, y).
No caso de uma rea ativa retangular, as coordenadas exigidas so aquelas dos cantos superior esquerdo e inferior direito do retngulo.
O elemento shape=circle cria uma rea ativa circular. Ele requer as coordenadas do centro do crculo e o comprimento do raio
em pixels.
Apndice J Introduo ao HyperText Markup Language 4: Parte 2 J-115

Para usar um mapa de imagens com uma figura em sua pgina, voc deve inserir o atributo usemap=#name no elemento img, no
qual name o valor do atributo name do elemento map.
O elemento principal que interage com os mecanismos de busca o elemento meta.
As tags meta contm dois atributos que devem ser usados sempre. O primeiro deles (name) uma identificao do tipo de tag meta
que voc est incluindo. O atributo content fornece as informaes que o mecanismo de busca catalogar.
O elemento content de uma tag meta com name=keywords fornece aos mecanismos de busca uma lista de palavras que
descrevem os principais aspectos de seu site. Ao incluir as tags meta e suas informaes de contedo, voc pode dar informaes
precisas sobre seu site para os mecanismos de busca. Isso o ajudar a criar um pblico mais especfico para seu site.
O valor description do atributo name da tag meta deve ser uma descrio de trs a quatro linhas de seu site escrita na forma de
sentena. Essa descrio usada pelo mecanismo de busca para catalogar e exibir seu site.
Os elementos meta no so visveis para os usurios do site e devem ser colocados na seo cabealho de seu documento HTML.
A tag frameset diz ao navegador que a pgina contm frames.
cols ou rows fornecem a largura de cada cabealho em pixels ou como uma porcentagem da tela.
Em cada elemento frame, o atributo src d o URL da pgina que ser exibida no frame especificado.
A finalidade de um atributo name no elemento frame dar uma identidade para aquele cabealho especfico para permitir que os
links de um frameset carreguem seu frame pretendido. O atributo target de um elemento ncora definido com o name do
frame no qual a pgina nova deve ser carregada.
Um destino de um elemento ncora pode ser definido com vrios valores predefinidos: target=_blank carrega a pgina em
uma janela de navegador nova em branco; target=self carrega a pgina na mesma janela do elemento ncora; target=_
parent carrega a pgina no frameset pai; e target=_top carrega a pgina na janela completa do navegador.
Nem todos os que visualizam uma pgina tm um navegador que possa entender os frames. Assim sendo, preciso incluir um
elemento noframes dentro do frameset. Voc deve incluir as tags HTML e os elementos regulares nas tags <noframes>...</
noframes>. Use essa rea para conduzir o usurio a uma verso sem frames do site.
Aninhando os elementos frameset voc pode criar layouts mais complexos.

Terminologia
<!doctype...> checked
<option> coluna de uma tabela
area elemento caption
rea ativa elemento col
rea ativa circular elemento colgroup
rea ativa retangular elemento frame (<frame>...</frame>)
atributo ACTION do elemento form elemento frameset
atributo cols do elemento table elemento input (<input>...</input>)
atributo colspan do elemento td elemento map
atributo coords dentro do elemento area elemento ol (lista ordenada) (<ol>...</ol>)
atributo name do elemento input elemento select (<select>...</select>)
atributo noresize em frame elemento table (<table>...</table>)
atributo rowspan do elemento td elemento td (dados de tabela) (<td>...</td>)
atributo scrolling em frame elemento th (clula de cabealho) (<th>...</th>)
atributo shape dentro do elemento area elemento thead (<thead>...</thead>)
atributo size de select elemento tr (coluna de tabela) (<tr>...</tr>)
atributo src do elemento frame elemento ul (lista no-ordenada) (<ul>...</ul>)
atributo type=1 de <ol> formulrio
atributo type=a de <ol> input type=button
atributo type=A de <ol> input type=checkbox
atributo type=i de <ol> input type=password
atributo type=I de <ol> input type=radio
atributo usemap=name de img input type=reset
atributo value do elemento input inpyt type=submit
clula de dados input type=text
clula de cabealho input type=textarea
clula de uma tabela linha de uma tabela
J-116 C# Como Programar

links externos <option>


lista propriedade border do elemento table
listas aninhadas recuo de listas
mapa de imagens script CGI
maxlenght=# servidor da Web
method=get tabela
method=post tag <meta>
name=recipient do elemento input target=_blank
name=redirect do elemento input target=_parent
name=subject no elemento input target=_top
navegador baseado em texto tbody
noframes varivel de ambiente

Exerccios de auto-reviso
J.1 Diga se estas afirmaes so verdadeiras ou falsas. Se elas forem falsas justifique.
a) A largura de todas as clulas de dados de uma tabela precisa ser igual.
b) O elemento thead obrigatrio em uma table.
c) Voc tem um limite mximo de 100 links internos por pgina.
d) Todos os navegadores podem interpretar os framesets.
J.2 Preencha os espaos em branco de cada uma destas declaraes.
a) O atributo __________________ de um elemento input insere um boto que, quando clicado, limpa o contedo do formulrio.
b) O espaamento de um frameset definido pela incluso do atributo __________________ ou do atributo __________________
dentro da tag <frameset>.
c) O elemento __________________ insere um item novo em uma lista.
d) O elemento __________________ diz ao navegador qual verso do HTML est includa na pgina. Dois tipos desse elemento
so __________________ e __________________ .
e) As formas geomtricas comuns usadas nos mapas de imagem so ________________ , ________________ e _______________.
J.3 Escreva as tags HTML para realizar estas tarefas:
a) Crie uma pgina Web com frames com o primeiro frame se estendendo 300 pixels pela pgina a partir do lado esquerdo.
b) Crie uma lista ordenada que tenha numerao com algarismos romanos minsculos.
c) Crie uma lista que possa ser rolada (em um formulrio) e sempre exiba quatro entradas da lista.
d) Crie um mapa de imagens em uma pgina usando deitel.gif como uma imagem e map com name=hello como o mapa
de imagem e faa com que hello seja o texto alt.

Respostas dos exerccios de auto-reviso


J.1 a) Falsa. Voc pode especificar a largura de qualquer coluna em pixels ou como uma porcentagem da largura total da tabela. b) Falsa.
O elemento thead usado apenas para fins de formatao e opcional (mas recomendamos que voc o inclua). c) Falsa. Voc
pode ter um nmero ilimitado de localizaes de link em qualquer pgina. d) Falsa. Os navegadores baseados em texto no podem
interpretar um frameset e, portanto, devem usar as informaes que voc inclui na tag <noframes>...</noframes>.
J.2 a) type = reset. b) cols, rows. c) li. d) <!doctype...>, transitional, frameset. e) poly, circle, rect.
J.3 a) <frameset cols = 300,*>...</frameset> b) <ol type = i>...</ol> c) <select size = 4>...</select>
d) <img src = deitel.gif alt = hello usemap = #hello>

Exerccios
J.4 Categorize cada uma destas opes como um elemento ou um atributo:
a) width
b) td
c) th
d) frame
e) name
f) select
g) type
Apndice J Introduo ao HyperText Markup Language 4: Parte 2 J-117

J.5 Como ser o frameset produzido pelo cdigo a seguir? Vamos assumir que as pginas importadas estejam em branco, com se-
gundo plano em branco, e que as dimenses da tela sejam de 800 por 600. Crie o layout com as dimenses aproximadas.
<frameset rows = 20%,*>
<frame src = hello.html name = hello>
<frameset cols = 150,*>
<frame src = nav.html name = nav>
<frame src = deitel.html name = deitel>
</frameset>
</frameset>
J.6 Vamos supor que voc tenha um documento com muitas subsees. Escreva a marcao HTML para criar um frame com um ndice
no lado esquerdo da janela e faa cada entrada do ndice usar links internos para rolar o frame de documento at a subseo apro-
priada.

Você também pode gostar