apostila C#7

•
UNIP

Flavio Loss
26/10/2018
E aí, curtiu este material?
Ajude a incentivar outros estudantes a melhorar o conteúdo
Gostou desse material? Compartilhe! 🧡
Programação C#

406 Materiais compartilhados
Baixe o app para aproveitar ainda mais
Leia os materiais offline, sem usar a internet. Além de vários outros recursos!
Prévia do material em texto
J
INTRODUÇÃO AO 
HYPERTEXT MARKUP LANGUAGE 4:
PARTE 2
OBJETIVOS
 Ser capaz de criar tabelas com linhas e colunas de dados.
 Ser capaz de controlar a exibição e formatação das tabelas.
 Ser capaz de criar e usar os mapas de imagens para auxiliar 
nos links.
 Ser capaz de tornar as páginas Web acessíveis para 
os mecanismos de busca.
 Ser capaz de usar o elemento frameset para criar páginas 
Web mais interessantes.
 � 
Sim, da tabela de minha memória 
eu varrerei todos os registros queridos e triviais.
William Shakespeare
C# — Como ProgramarJ-90
J.1 Introdução
No Apêndice I, discutimos alguns recursos básicos do HTML. Criamos diversas páginas Web que apresentam texto, links, 
imagens e ferramentas de formatação, como as réguas horizontais e as quebras de linhas.
Neste apêndice discutiremos os elementos e recursos mais substanciais do HTML. Veremos como inserir informa-
ções em tabelas e discutiremos como usar os formulários para reunir as informações das pessoas que navegam em um site. 
Explicaremos como usar os links internos e os mapas de imagens para tornar as páginas mais navegáveis. Também discutire-
mos como usar os frames (quadros) para facilitar a navegação nos sites Web. No fi nal deste apêndice você estará familiarizado 
com as tags e os recursos mais usados do HTML. Em seguida, você poderá criar sites Web mais complexos. Aqui não apresen-
tamos nenhuma programação em C#.
J.2 Tabelas HTML básicas
As tabelas do HTML 4.0 são 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.
Resumo
J.1 Introdução
J.2 Tabelas HTML básicas
J.3 Tabelas e formatação HTML intermediárias
J.4 Formulários HTML básicos
J.5 Formulários 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  Exercícios de auto-revisão  Respostas dos exercícios de auto-revisão  Exercícios
Figura J.1 Tabela HTML. (Parte 1 de 2.)
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 básico. -->
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 opções de projeto e instruções -->
18 <table border = “1” width = “40%”>
19 
20 <!-- use a tag <caption> para resumir o conteúdo da tabela -->
21 <!-- (isso ajuda os defi cientes visuais) -->
Apêndice J Introdução ao HyperText Markup Language 4: Parte 2 J-91
Todas as tags e o texto que se aplica à tabela fi cam dentro do elemento <table>, o qual começa na linha 18:
<table border = “1” width = “40%”>
O atributo border permite confi gurar a largura da borda da tabela em pixels. Se quiser que a borda fi que invisível, você 
pode especifi car border = “0”. Na tabela mostrada na Figura J.1, o valor do atributo border está confi gurado como 1. O 
atributo width confi gura a largura da tabela como um número 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 também é usado para ajudar os navegadores baseados em texto a inter-
pretar os dados da tabela.
As tabelas podem ser divididas em seções distintas horizontais ou verticais. A primeira dessas seções (a área head) 
aparece nas linhas 27 a 29.
22 <caption>Here is a small sample table.</caption>
23 
24 <!-- <thead> é a primeira seção (não-rolante) -->
25 <!-- horizontal. <th> insere um título -->
26 <!-- de célula e exibe o texto em negrito -->
27 <thead>
28 <tr><th>This is the head.</th></tr>
29 </thead>
30 
31 <!-- Todo o seu conteúdo importante entra em <tbody>. -->
32 <!-- Use esta tag para formatar toda a seção -->
33 <!-- <td> insere uma célula 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.)
C# — Como ProgramarJ-92
<thead>
 <tr><th>This is the head.</th></tr>
</thead>
Coloque todas as informações de título (por exemplo, os títulos da tabela e os cabeçalhos de coluna) dentro do elemento 
thead. O tr, ou elemento de linha de tabela, é usado para criar linhas de células da tabela. Todas as células de uma linha 
pertencem ao elemento <tr> daquela linha.
A menor unidade da tabela é a célula de dados. Existem dois tipos de células de dados: o elemento th, que está lo-
calizado no cabeçalho da tabela, e o elemento td que está localizado no corpo da tabela. O exemplo de código da Figura J.1 
insere uma célula de header usando o elemento th. As células de cabeçalho, as quais são colocadas no elemento <thead>, 
são adequadas para os títulos de colunas.
A segunda seção 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 fi ns de formatação e agrupamento. Embora exista apenas uma linha e 
uma célula (a linha 35) no exemplo acima, a maioria das tabelas usa tbody para agrupar a maior parte de seu conteúdo em 
diversas linhas e células.
 Observação de aparência e comportamento J.1
Use as tabelas para exibir os dados tabulares em suas páginas HTML.
 Erro de programação comum J.1
Esquecer de fechar um dos elementos dentro do elemento table é um erro que pode distorcer o formato da tabela. Verifi que 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 formatação HTML intermediárias
No exemplo de código e na seção anterior exploramos a estrutura de uma tabela básica. Na Figura J.2 estendemos nosso exem-
plo de tabela com mais elementos estruturais e atributos.
A tabela começa 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 número de colunas (especifi cadas com o atributo span). Toda formatação a ser aplicada 
a uma coluna ou a um grupo de colunas pode ser especifi cada 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 especifi ca 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 intermediário. -->
7 
8 <head>
9 <title>C# How to Program - Tables</title>
Figura J.2 Tabela HTML complexa. (Parte 1 de 3.)
Apêndice J Introdução 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> são usados para formatar -->
20 <!-- colunas inteiras de uma só vez. SPAN determina quantas -->
21 <!-- colunas são 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 número de células 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.)
C# — Como ProgramarJ-94
A maioria dos navegadores da Web visuais formata automaticamente o tamanho das células de dados para que ele se 
ajuste aos dados que contém. Entretanto, é possível tornar algumas células 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 célula de dados. O 
valor do atributo especifi ca o número de linhas ou colunas a ser ocupadas pela célula, respectivamente. Por exemplo, rowspan 
= “2” diz ao navegador que essa célula de dados abrangerá a área das duas células verticalmente adjacentes. Essas células 
serão associadas verticalmente (e, portanto, abrangerão mais de duas linhas). Um exemplo de colspan aparece na linha 36,
<th colspan = “4” valign = “top”>
na qual a célula de cabeçalho é ampliada para abranger quatro células.
Aqui nós também vemos um exemplo da formatação de alinhamento vertical. O atributo valign aceita estes valores: 
“top”, “middle”, “bottom” e “baseline”. Todas as células de uma linha cujo atributo valign está confi gurado 
como “baseline” têm a primeira linha de texto em uma linha de base comum. O alinhamento vertical padrão de todos os 
dados e células de cabeçalho é valign = “middle”.
O código restante da Figura J.2 demonstra os outros usos dos atributos table e os elementos de tabela destacados 
acima.
 Erro de programação comum J.2
Quando colspan e rowspan são usados nas células de dados de tabela, as células modifi cadas cobrem as áreas das outras cé-
lulas. Seu código deve compensar isso reduzindo o número de células daquela linha ou coluna. Se você não fi zer isso, a formatação 
de sua tabela será distorcida e você poderá criar sem querer mais colunas e/ou linhas do que pretendia originariamente.
Figura J.2 Tabela HTML complexa. (Parte 3 de 3.)
68 
69 </table>
70 
71 </body>
72 </html>
Apêndice J Introdução ao HyperText Markup Language 4: Parte 2 J-95
J.4 Formulários HTML básicos
O HTML fornece diversos mecanismos para reunir informações das pessoas que visualizam seu site. Um desses mecanismos 
é o formulário (Figura J.3).
O formulário começa na linha 21
<form method = “post” action = “/cgi-bin/formmail”>
com o elemento form. O atributo method indica a maneira pela qual as informações reunidas no formulário serão enviadas 
para o servidor da Web para processamento. Use method = “post” em um formulário que causa alterações nos dados do 
servidor, por exemplo, ao atualizar um banco de dados. Os dados do formulário são enviados para o servidor como uma va-
riável de ambiente, a qual pode ser acessada por scripts. O outro valor possível (method = “get”) deve ser usado quando 
seu formulário não causar nenhuma alteração nos dados no lado do servidor, por exemplo, quando se faz uma requisição a 
um banco de dados. Os dados de formulário de method = “get” são anexados no fi nal do URL (por exemplo, /cgi-bin/
formmail?name=bob&order=5). Da mesma maneira, você deve saber que method = “get” se limita aos caracteres 
padrão e não pode enviar nenhum caractere especial.
Figura J.3 Formulário simples com campos ocultos e uma caixa de texto. (Parte 1 de 2.)
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 formulário -->
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 fi ll out this form to help us improve our site.</p>
17 
18 <!-- Esta tag inicia o formulário, dá o método de envio -->
19 <!-- das informações e a localização dos scripts de formulário. -->
20 <!-- Os elementos input ocultos dão ao servidor informações não-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>
C# — Como ProgramarJ-96
Um servidor da Web é uma máquina 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 requisições do 
navegador. Quando um navegador requisita uma página ou um arquivo em algum lugar de um servidor, este processa a re-
quisição e retorna uma resposta para o navegador. Nesse exemplo, os dados do formulário vão para um script CGI (Common 
Gateway Interface — interface de interconexão comum), o que é um meio de fazer a interface entre uma página 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 informação para o usuário. O atributo action da tag form é o URL desse 
script. Nesse caso, ele é um script simples que envia os dados de formulário para um endereço. 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 confi gurar 
sua HTML para usar o script corretamente.
Nesse script em particular há diversas informações (as quais não são vistas pelo usuário) necessárias no formulário. 
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”>
especifi cam essas informações usando os elementos de entrada ocultos. O elemento input é comum nos formulários e sem-
pre exige o atributo type. Dois outros atributos são name, que fornece um identifi cador 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 têm o atributo type = “hidden”. As três entradas ocultas 
mostradas são típicas desse tipo de script CGI: um endereço de e-mail para o qual os dados serão enviados, a linha de assunto 
do e-mail e um URL para o qual o usuário é redirecionado após o envio do formulário.
Figura J.3 Formulário simples com campos ocultos e uma caixa de texto. (Parte 2 de 2.)
40 <!-- os input type “submit”e “reset” inserem botões -->
41 <!-- para enviar ou limpar o conteúdo do formulário -->
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>
Apêndice J Introdução ao HyperText Markup Language 4: Parte 2 J-97
 Boa prática de programação J.1
Coloque os elementos input ocultos no início de um formulário, bem depois da taginicial <form>. Isso torna mais fácil loca-
lizar e identifi car esses elementos.
O uso de um elemento input é defi nido pelo valor de seu atributo type. Apresentamos outras dessas opções 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 formulário (linha 36). Um bom uso para o elemento 
input textual são os nomes ou outras informações de uma linha. O elemento label das linhas 35 a 37 fornecem uma des-
crição do elemento input da linha 36.
Também usamos o atributo size do elemento input para especifi car a largura da entrada de texto medida em caracte-
res. Você também pode defi nir um número máximo de caracteres que a entrada de texto aceita usando o atributo maxlength.
 Boa prática de programação J.2
Quando você usar os elementos input nos formulários, verifi que com o atributo maxlength se você deixou espaço sufi ciente 
para os usuários entrarem as informações pertinentes.
 Erro de programação comum J.3
Esquecer de incluir um elemento label para cada elemento do formulário é um erro de projeto. Sem esses rótulos, os usuários 
não têm como saber qual é a função dos elementos individuais do formulário.
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 incluídos em todo formulário. O elemento input type = “submit” permite que o usuário envie os dados 
fornecidos no formulário para processamento no servidor. A maioria dos navegadores visuais da Web coloca no formulário um 
botão que quando clicado envia os dados. O atributo value altera o texto exibido na parte inferior (o valor padrão é “sub-
mit”). O elemento input type = “reset” permite que um usuário reinicialize todos os elementos do formulário com os 
valores padrão. Isso pode ajudar o usuário a corrigir erros ou apenas recomeçar. Assim como acontece com a entrada submit, 
o atributo value reset do elemento input afeta o texto da parte inferior da tela, mas não afeta sua funcionalidade.
 Erro de programação comum J.4
Verifi que se você encerrou o código de seu formulário com a tag </form>. A falta dessa tag é um erro e pode afetar a funciona-
lidade dos outros formulários da mesma página. 
J.5 Formulários HTML mais complexos
Apresentamos opções adicionais de entrada de formulário na Figura J.4.
Figura J.4 Formulário incluindo áreas de texto, caixas de senha e caixas de seleção. (Parte 1 de 3.)
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 formulário. -->
7 
8 <head>
9 <title>C# How to Program - Tables</title>
C# — Como ProgramarJ-98
Figura J.4 Formulário incluindo áreas de texto, caixas de senha e caixas de seleção. (Parte 2 de 3.)
10 </head>
11 
12 <body>
13 
14 <h1>Feedback Form</h1>
15 
16 <p>Please fi ll 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 <!-- exibição será em *** e não 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” 
Apêndice J Introdução ao HyperText Markup Language 4: Parte 2 J-99
As linhas 37 e 38
<textarea name = “comments” rows = “4” cols = “36”>
</textarea>
introduzem o elemento textarea, que insere uma caixa de texto no formulário. Você especifi ca o tamanho da caixa com 
o atributo rows, o qual defi ne o número de linhas que aparecerão na textarea. Com o atributo cols você especifi ca a 
largura que a textarea deve ter. Essa textarea tem quatro linhas de caracteres de altura por 36 caracteres de largura. 
Todo o texto padrão 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 usuários 
podem fornecer informações que o usuário não quer que as outras pessoas leiam na tela. Nos navegadores visuais, os dados que 
o usuário digita em um campo de entrada de senha são mostrados com asteriscos. Entretanto, o valor real que o usuário fornece 
é enviado para o servidor. Os navegadores não-visuais podem converter de forma diferente esse tipo de campo de entrada.
As linhas 50 a 68 apresentam outro tipo de elemento de formulário: a caixa de seleção. Cada elemento input com 
type = “checkbox” cria um item novo de caixa de seleção no formulário. As caixas de seleção podem ser usadas individual-
mente ou em grupos. Cada caixa de seleção de um grupo deve ter o mesmo atributo name (nesse caso, name = “thingsli-
ked”). Isso notifi ca o script que está tratando do formulário de que todas as caixas de seleção estão relacionadas entre si.
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 Formulário incluindo áreas de texto, caixas de senha e caixas de seleção. (Parte 3 de 3.)
C# — Como ProgramarJ-100
 Erro de programação comum J.5
Quando seu formulário tem múltiplas caixas de seleção com o mesmo name, elas devem necessariamente ter values diferentes; 
caso contrário, o script não terá como distinguir entre elas.
Os elementos adicionais de formulário são apresentados na Figura J.5. Nesse exemplo de formulário apresentamos 
dois tipos novos de opções de entrada. O primeiro é o botão de rádio (ou, na terminologia da Microsoft, botão de opção), 
o qual é apresentado nas linhas 80 a 97. Inseridos nos formulários com o atributo input type = “radio”, os botões de 
rádio são semelhantes, em função e uso, às caixas de seleção. Os botões de rádio são diferentes, porque apenas um elemento 
do grupo pode ser selecionado de cada vez. Todos os atributos name de um grupo de entradas de rádio devem ser iguais e 
todos os atributos value devem ser diferentes. Insira o atributo checked para indicar qual botão de rádio você gostaria de 
selecionar inicialmente. O atributo checked também pode ser aplicado às caixas de seleção.
 Erro de programação comum J.6
Quando você usa um grupo de entradas de rádio em um formulário, se os valores name não estiverem confi gurados da mesma 
maneira, o usuário selecionará todos os botões de rádio ao mesmo tempo — oque é um resultado indesejado.
Figura J.5 Formulário com botões de rádio e listas suspensas. (Parte 1 de 3.)
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 formulário. -->
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 fi ll 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: 
Apêndice J Introdução 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 botão de rádio -->
74 <!-- os botões de rádio e as caixas de seleção diferem porque apenas -->
75 <!-- um botão de rádio 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 Formulário com botões de rádio e listas suspensas. (Parte 2 de 3.)
C# — Como ProgramarJ-102
99 </p>
100 
101 <!-- as tags <select> apresentam menus suspensos -->
102 <!-- com as opções 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 Formulário com botões de rádio e listas suspensas. (Parte 3 de 3.)
Apêndice J Introdução ao HyperText Markup Language 4: Parte 2 J-103
O último tipo de entrada de formulário que apresentamos aqui é o elemento select (linhas 106 a 119). Isso coloca 
uma lista de itens selecionáveis dentro de seu formulário.
<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 formulário é criado com um elemento select. Verifi que 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 botões de rádio e caixas de seleção, aplica uma seleção padrão 
a sua lista.
O código acima gera uma lista suspensa de opções na maioria dos navegadores virtuais, como mostra a Figura J.5. 
Você pode alterar o número de opções de lista visíveis de cada vez usando o atributo size do elemento select. Use esse 
atributo se preferir uma versão expandida da lista em vez da lista expansível de uma linha.
J.6 Links internos
No Apêndice I discutimos como vincular uma página Web a outra com âncoras de texto e imagem. A Figura J.6 apresenta 
links internos, que permitem a criação de âncoras nomeadas para links com determinadas partes de um documento HTML.
Figura J.6 Usando links internos para tornar suas páginas mais navegáveis. (Parte 1 de 3.)
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 endereço do link interno é “xx.html#linkname”-->
22 <p>
C# — Como ProgramarJ-104
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 páginas mais navegáveis. (Parte 2 de 3.)
Apêndice J Introdução ao HyperText Markup Language 4: Parte 2 J-105
Figura J.6 Usando links internos para tornar suas páginas mais navegáveis. (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 página é list.html, o URL dessa âncorana página 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 seleção 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 página, uma em cada âncora. Você também pode criar um vínculo com uma âncora de outra página usando o URL 
daquela localização (usando o formato href = “página.html#nome”).
 Observação de aparência e comportamento J.2
Os links internos são mais úteis em grandes arquivos HTML com muitas informações. Você pode criar links para diversos pontos 
da página para evitar que o usuário tenha de rolar a página para encontrar uma localização específi ca.
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 seções da imagem como 
áreas ativas (hotspots) e, em seguida, usá-las como links.
Todos os elementos de um mapa de imagem estão contidos nas tags <map>...</map>. O atributo exigido pelo ele-
mento map é name (linha 18):
<map name = “picture”>
Como veremos, esse atributo é necessário para fi ns de referência. Uma área ativa de uma imagem é defi nida com o 
elemento area. Cada elemento area tem estes atributos: href defi ne o destino do link naquele local, shape e coords 
defi nem as características da área, e alt funciona como no elemento img.
A marcação das linhas 23 a 25
<area href = “form.html”shape = “rect”
 coords = “3, 122, 73, 143” alt = “Go to the feedback form”>
C# — Como ProgramarJ-106
faz com que uma área ativa retangular seja desenhada ao redor das coordenadas dadas no elemento coords. Um par de 
coordenadas consiste em dois números, os quais são as localizações 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 retângulo está localizado a 3 no eixo x e 122 
no eixo y, o que é anotado como (3, 122). O canto inferior direito do retângulo está a (73, 143).
Figura J.7 A fi gura com os links ancorados a um mapa de imagens. (Parte 1 de 2.)
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 formatação -->
17 <!-- do mapa de imagem para referência 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 geométrica -->
40 <!-- personalizável, com as coordenadas -->
41 <!-- de cada vértice 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 
Apêndice J Introdução ao HyperText Markup Language 4: Parte 2 J-107
Figura J.7 A fi gura com os links ancorados a um mapa de imagens. (Parte 2 de 2.)
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>
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 polígono usando as co-
ordenadas do atributo coords. Essas coordenadas representam cada vértice ou canto do polígono. 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 círculo e o raio do círculo 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 página para outra e salvando as informações de identifi cação e classifi cação de cada 
página visitada. O principal elemento da HTML que os mecanismos de busca usam para catalogar as páginas é a tag meta 
(Figura J.8).
Uma tag meta contém dois atributos que sempre devem ser usados. O primeiro deles (name) identifi ca o tipo de tag 
meta que você está incluindo. O atributo content fornece as informações que o mecanismo de busca vai catalogar sobre 
seu site.
C# — Como ProgramarJ-108
Figura J.8 Usando meta para fornecer palavras-chave e uma descrição. 
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 informações -->
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 fi rst <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>
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 são usadas para comparar as pesquisas — se alguém pesquisar algum 
dos termos de sua tag keywords meta, terá mais chances de ser notifi cado sobre seu site na saída do mecanismo de busca. 
Assim, a inclusão das tags meta e de suas informações content levarão 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.”>
Apêndice J Introdução 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 página, o con-
tents do elemento meta das palavras-chave deve ser uma descrição fácil de três a quatro linhas de seu site escrita na forma 
de sentença. Essa descrição também é usada pelos mecanismos de busca para catalogar e exibir seu site.
 Observação de engenharia de software J.1
Os elementos meta não são visíveis para os usuários do site e devem ser colocados dentro da seção de cabeçalho de seu docu-
mento HTML.
J.9 Elemento frameset
Todas as páginas Web que foram criadas até agora têm a capacidade de estabelecer links com outras páginas, mas só podem 
exibir uma página 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 fácil de ler e útil para seus usuários.
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 especifi cado 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 dimensões de seu frame -->
21 <frameset cols = “110,*”>
22 
23 <!-- os elementos individuais de frame especifi cam -->
24 <!-- quais páginas 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 página Web usando dois frames — navegação e conteúdo. (Parte 1 de 2.)
C# — Como ProgramarJ-110
36 browse our site without frames</a>.
37 </p>
38 </noframes>
39 
40 </frameset>
41 </html>
Figura J.9 Uma página Web usando dois frames — navegação e conteúdo. (Parte 2 de 2.)
A página com frames começa com a tag inicial frameset na linha 21:
<frameset cols = “110,*”>
Essa tag diz ao navegador que a página contém 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 defi nimos o layout da página, especifi caremos os arquivos que formarão 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 página que será exibida no frame. No exemplo anterior, o primeiro 
frame (que cobre 110 pixels no lado esquerdo do frameset) exibirá a página nav.html e tem o atributo name = “nave”. 
O segundo frame exibirá a página main.html e tem o atributo name = “main”.
A fi nalidade de um atributo name do elemento frame é identifi car 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 também pode ser defi nido com um número de valores pré-confi gurados: target=”_
blank” carrega a página em uma janela de navegador nova em branco; target=”_self” carrega a página na mesma janela 
Apêndice J Introdução ao HyperText Markup Language 4: Parte 2 J-111
do elemento âncora; target=”_parent” carrega a página no frameset pai (ou seja, no frameset que contém o frame 
atual); e target=”_top” carrega a página na janela completa do navegador (a página é carregada sobre o frameset).
Nas linhas 28 a 38 do exemplo de código da Figura J.9, o elemento noframes exibe a HTML naqueles navegadores 
que não 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 versão sem frames de seu site.
 Observação de aparência e comportamento J.3
Os frames podem aperfeiçoar sua página, mas quase sempre são mal utilizados. Nunca use os frames para realizar aquilo que 
você poderia fazer com outra formatação 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 nível de tags frameset está nas linhas 21 e 22:
<frameset cols = “110,*”>
 <frame name = “nav” src = “nav.html”>
Os elementos frameset e frame aqui são construídos 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 nível (aninhado) do elemento frameset cobre apenas a área frame restante que não foi incluída no 
frameset primário. Assim sendo, todos os frames incluídos no segundo frameset não incluirão os 110 pixels mais à 
esquerda da tela. As linhas 26 a 29 mostram o segundo nível 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,*”. Verifi que se incluiu o número correto de elementos frame dentro da segunda área frameset. Verifi que tam-
bém se incluiu um elemento noframes e se fechou ambas as áreas frameset no fi nal da página 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.)
C# — Como ProgramarJ-11218 <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 são usados para alterar a formatação -->
25 <!-- e o espaçamento 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 depuração J.1
Ao usar os elementos frameset aninhados, recue cada nível da tag frame. Isso tornará a página mais clara e fácil de depurar.
 Observação de aparência e comportamento J.4
Os framesets aninhados podem ajudar a criar sites Web visualmente agradáveis e fáceis de depurar.
Apêndice J Introdução 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 avançados e difíceis do HTML. Diversos desses sites são apresen-
tados aqui.
www.geocities.com/SiliconValley/Orchard/5212
A Adam’s Advanced HTML Page destina-se àqueles que procuram dominar as técnicas do HTML mais avançadas. Ele inclui 
instruções para a criação de tabelas, frames, marquees e outros tópicos avançados.
www.w3scripts.com/html
Esse site (originado no W3Schools) é um repositório de exemplos de código que exibe todos os recursos do HTML, desde o 
nível básico até o avançado.
www.blooberry.com/indexdot/html
Index Dot HTML, The Advance HTML Reference... O nome fala por si mesmo. Esse site tem um ótimo diretório e três índices 
baseados em árvore de todos os elementos HTML e muito mais.
www.neiljohan.com/html/advancedhtml.htm
O Advanced HTML Guide fornece idéias 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 fi cam dentro das tags 
<table>...</table>. O atributo border permite defi nir a largura da borda da tabela em pixels. O atributo width defi ne a largura 
da tabela — você especifi ca um número 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 também é usado para ajudar os navegadores baseados em texto a interpretar os dados da tabela.
 As tabelas podem ser divididas em seções horizontais e verticais distintas. Coloque todas as informações de cabeçalho (como os 
títulos e os cabeçalhos de coluna da tabela) dentro das tags </thead>...</thead>. O elemento tr (table row — linha de tabela) é 
usado para formatar as células de linhas individuais. Todas as células de uma linha pertencem às tags <tr>...</tr> daquela linha.
 A menor área da tabela que podemos formatar é a célula de dados. Existem dois tipos de células de dados: aquelas localizadas no 
cabeçalho (<th>...</th>) e aquelas localizadas no corpo da tabela (<td>...</td>). As células de cabeçalho (em geral colocadas 
na área <thead>) são adequadas para os títulos.
 Assim como thead, o elemento tbody é usado para fi ns de formatação e agrupamento. A maioria das tabelas usa tbody para 
abrigar a maior parte de seu conteúdo.
 As células de dados da tabela td são alinhadas à esquerda como padrão. As células th são centralizadas como padrão.
 Assim como você pode usar os elementos thead e tbody para formatar grupos de linhas de tabela, pode também usar o elemento 
colgroup para agrupar e formatar colunas. Na tag inicial de colgroup é defi nido o número de colunas que ele afeta e a formatação 
que ele impõe naquele grupo de colunas.
 Cada elemento col contido dentro das tags <colgroup>...</colgroup> pode formatar um número de colunas específi co de 
cada vez.
 Você pode incluir uma cor ou imagem de segundo plano em qualquer linha de tabela ou célula com os atributos bgcolor ou back-
ground, os quais são usados da mesma maneira que no elemento body.
 É possível tornar algumas células de dados da tabela maiores do que outras usando os atributos rowspan e colspan. O valor do 
atributo estende a célula de dados para abranger o número especifi cado de células.
 O atributo valign (alinhamento vertical) de uma célula de dados de tabela aceita estes valores: “top”, “middle”, “bottom” e 
“baseline”.
 Todas as células de uma linha de tabela cujo atributo valign é defi nido como “baseline” terão a primeira linha de texto em uma 
linha de base comum.
 O alinhamento vertical padrão de todas as células de dados e cabeçalho é valign=”middle”.
 O HTML fornece diversos mecanismos — incluindo o formulário — para reunir informações de pessoas que visualizam seu site.
 Use method = “post” em um formulário para alterar os dados do servidor, por exemplo, ao atualizar um banco de dados. Os dados 
do formulário serão enviados para o servidor como uma variável de ambiente, a qual pode ser acessada por scripts. O outro valor 
C# — Como ProgramarJ-114
possível (method = “get”) deve ser usado quando seu formulário não causar nenhuma alteração nos dados no lado do servidor; por 
exemplo, quando se faz uma solicitação de banco de dados. Os dados do formulário de method = “get” são anexados no fi nal do 
URL. Por causa disso, a quantidade de dados enviada com esse método é limitada a 4KB. Tome cuidado também com o fato de que 
method = “get” se limita aos caracteres padrão e não pode enviar nenhum caractere especial.
 Um servidor da Web é uma máquina que executa um pacote de software como o Apache ou IIS; os servidores são criados para lidar 
com as requisições do navegador. Quando um usuário utiliza um navegador para solicitar uma página ou arquivo de algum lugar do 
servidor, este processa a solicitação e retorna uma resposta para ele.
 O atributo action da tag form é o caminho para um script que processa os dados do formulário.
 O elemento input é comum nos formulários e sempre exige o atributo type. Dois outros atributos são name, que fornece uma 
identifi cação 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 formulário. O valor desse elemento input e as informa-
ções que o servidor envia para você desse input são o texto que o usuário digita na caixa. O atributo size determina a largura da 
entrada de texto medida em caracteres. Você também defi ne um número máximo 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 formulário para indicar a função do elemento.
 O elemento type=”submit” input coloca um botão no formulário, 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 botão no formulário, o qual, quando clicado, limpa todas as entradas que o usuário 
inseriu no formulário.
 O elemento textarea insere uma caixa no formulário. Você especifi ca 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 
informações confi denciais que o usuário não quer que outras pessoas leiam. Somente o navegador exibe os asteriscos — os dados reais 
do formulário ainda são enviados para o servidor.
 Cada elemento input com type=”checkbox” cria uma caixa de seleçãono formulário. As caixas de seleção podem ser usadas 
individualmente ou em grupos. Cada caixa de seleção de um grupo deve ter o mesmo name (nesse caso, name=”things”).
 Os botões de rádio são inseridos nos formulários por meio do atributo input type=”radio” e são diferentes das caixas de seleção, 
pois apenas um botão do grupo pode ser selecionado de cada vez. Todos os atributos name de um grupo de entradas de rádio devem 
ser iguais e todos os atributos value devem ser diferentes.
 Insira o atributo checked para indicar qual botão de rádio você quer selecionar inicialmente.
 shape = “poly” cria uma área ativa do formato não predefi nido — você especifi ca o formato da área ativa no atributo coords 
listando as coordenadas de cada vértice, ou canto da área ativa.
 O elemento select coloca uma lista selecionável de itens dentro de seu formulário. 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 opções de lista visíveis de cada vez incluindo o atributo size=“size” dentro da tag <select>. Use esse atributo se você 
preferir uma versão expandida da lista em vez da lista expansível de uma linha.
 Uma localização em uma página é marcada com a inclusão de um atributo name em um elemento a. Um clique nesse link de um 
navegador rola a janela do navegador até aquele ponto da página.
 Um mapa de imagens permite designar determinadas seções da imagem como áreas ativas e, em seguida, usar essas áreas ativas como 
âncoras de vinculação.
 Todos os elementos de um mapa de imagens estão contidos nas tags <map>...</map>. O atributo exigido para o elemento map é name.
 Uma área ativa da imagem é defi nida com o elemento area. Cada tag <area> tem estes atributos: href defi ne o destino do link 
naquele local, shape e coords defi nem as características da área e da função 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 números, os quais são as localizações 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 são aquelas dos cantos superior esquerdo e inferior direito do retângulo.
 O elemento shape=“circle” cria uma área ativa circular. Ele requer as coordenadas do centro do círculo e o comprimento do raio 
em pixels.
Apêndice J Introdução ao HyperText Markup Language 4: Parte 2 J-115
 Para usar um mapa de imagens com uma fi gura em sua página, 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 contêm dois atributos que devem ser usados sempre. O primeiro deles (name) é uma identifi cação do tipo de tag meta 
que você está incluindo. O atributo content fornece as informações 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 informações de conteúdo, você pode dar informações 
precisas sobre seu site para os mecanismos de busca. Isso o ajudará a criar um público mais específi co para seu site.
 O valor description do atributo name da tag meta deve ser uma descrição de três a quatro linhas de seu site escrita na forma de 
sentença. Essa descrição é usada pelo mecanismo de busca para catalogar e exibir seu site.
 Os elementos meta não são visíveis para os usuários do site e devem ser colocados na seção cabeçalho de seu documento HTML.
 A tag frameset diz ao navegador que a página contém frames.
 cols ou rows fornecem a largura de cada cabeçalho em pixels ou como uma porcentagem da tela.
 Em cada elemento frame, o atributo src dá o URL da página que será exibida no frame especifi cado.
 A fi nalidade de um atributo name no elemento frame é dar uma identidade para aquele cabeçalho específi co para permitir que os 
links de um frameset carreguem seu frame pretendido. O atributo target de um elemento âncora é defi nido com o name do 
frame no qual a página nova deve ser carregada.
 Um destino de um elemento âncora pode ser defi nido com vários valores predefi nidos: target=”_blank” carrega a página em 
uma janela de navegador nova em branco; target=”self” carrega a página na mesma janela do elemento âncora; target=”_
parent” carrega a página no frameset pai; e target=”_top” carrega a página na janela completa do navegador.
 Nem todos os que visualizam uma página têm 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 usuário a uma versão sem frames do site. 
 Aninhando os elementos frameset você pode criar layouts mais complexos.
Terminologia
<!doctype...>
<option>
area
área ativa 
área ativa circular
área ativa retangular
atributo ACTION do elemento form
atributo cols do elemento table
atributo colspan do elemento td
atributo coords dentro do elemento area
atributo name do elemento input
atributo noresize em frame
atributo rowspan do elemento td
atributo scrolling em frame
atributo shape dentro do elemento area
atributo size de select
atributo src do elemento frame
atributo type=1 de <ol>
atributo type=a de <ol>
atributo type=A de <ol>
atributo type=i de <ol>
atributo type=I de <ol>
atributo usemap=”name” de img
atributo value do elemento input
célula de dados
célula de cabeçalho
célula de uma tabela
checked
coluna de uma tabela
elemento caption
elemento col
elemento colgroup
elemento frame (<frame>...</frame>)
elemento frameset
elemento input (<input>...</input>)
elemento map
elemento ol (lista ordenada) (<ol>...</ol>)
elemento select (<select>...</select>)
elemento table (<table>...</table>)
elemento td (dados de tabela) (<td>...</td>)
elemento th (célula de cabeçalho) (<th>...</th>)
elemento thead (<thead>...</thead>)
elemento tr (coluna de tabela) (<tr>...</tr>)
elemento ul (lista não-ordenada) (<ul>...</ul>)
formulário
input type=”button”
input type=”checkbox”
input type=”password”
input type=”radio” 
input type=”reset”
inpyt type=”submit”
input type=”text”
input type=”textarea”
linha de uma tabela
C# — Como ProgramarJ-116
links externos
lista
listas aninhadas
mapa de imagens
maxlenght=“#”
method=“get”
method=“post”
name=“recipient” do elemento input
name=“redirect” do elemento input
name=“subject” no elemento input
navegador baseado em texto
noframes
<option>
propriedade border do elemento table
recuo de listas
script CGI
servidor da Web
tabela
tag <meta>
target=“_blank
target=“_parent
target=“_top”
tbody
variável de ambiente
Exercícios de auto-revisão
J.1 Diga se estas afi rmações são verdadeiras ou falsas. Se elas forem falsas justifi que.
a) A largura de todas as células de dados de uma tabela precisa ser igual.
b) O elemento thead é obrigatório em uma table.
c) Você tem um limite máximo de 100 links internos por página.
d) Todos os navegadores podem interpretar os framesets.
J.2 Preencha os espaços em branco de cada uma destas declarações.
a) O atributo __________________ de um elemento input insere um botão que, quando clicado, limpa o conteúdo do formulário.
b) O espaçamento de um frameset é defi nido pela inclusão do atributo __________________ ou do atributo __________________ 
dentro da tag <frameset>.
c) O elemento __________________ insere um item novo em uma lista.
d) Oelemento __________________ diz ao navegador qual versão do HTML está incluída na página. Dois tipos desse elemento 
são __________________ e __________________ .
e) As formas geométricas comuns usadas nos mapas de imagem são ________________ , ________________ e _______________.
J.3 Escreva as tags HTML para realizar estas tarefas:
a) Crie uma página Web com frames com o primeiro frame se estendendo 300 pixels pela página a partir do lado esquerdo.
b) Crie uma lista ordenada que tenha numeração com algarismos romanos minúsculos.
c) Crie uma lista que possa ser rolada (em um formulário) e sempre exiba quatro entradas da lista.
d) Crie um mapa de imagens em uma página usando deitel.gif como uma imagem e map com name=”hello” como o mapa 
de imagem e faça com que “hello” seja o texto alt.
Respostas dos exercícios de auto-revisão
J.1 a) Falsa. Você pode especifi car a largura de qualquer coluna em pixels ou como uma porcentagem da largura total da tabela. b) Falsa. 
O elemento thead é usado apenas para fi ns de formatação e é opcional (mas recomendamos que você o inclua). c) Falsa. Você 
pode ter um número ilimitado de localizações de link em qualquer página. d) Falsa. Os navegadores baseados em texto não podem 
interpretar um frameset e, portanto, devem usar as informações 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”>
Exercícios
J.4 Categorize cada uma destas opções como um elemento ou um atributo:
a) width
b) td
c) th
d) frame
e) name
f) select
g) type
Apêndice J Introdução ao HyperText Markup Language 4: Parte 2 J-117
J.5 Como será o frameset produzido pelo código a seguir? Vamos assumir que as páginas importadas estejam em branco, com se-
gundo plano em branco, e que as dimensões da tela sejam de 800 por 600. Crie o layout com as dimensões 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 subseções. Escreva a marcação HTML para criar um frame com um índice 
no lado esquerdo da janela e faça cada entrada do índice usar links internos para rolar o frame de documento até a subseção apro-
priada.