Escolar Documentos
Profissional Documentos
Cultura Documentos
INTRODUO AO
HYPERTEXT MARKUP LANGUAGE 4:
PARTE 2
OBJETIVOS
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
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#.
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.
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.
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>
68
69 </table>
70
71 </body>
72 </html>
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>
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.
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
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.
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.
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
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.
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
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.
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).
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).
Figura J.7 A figura com os links ancorados a um mapa de imagens. (Parte 2 de 2.)
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>
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)
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.
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.
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>
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.
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.
Figura J.10 Site Web com frames e um frameset aninhado. (Parte 1 de 2.)
J-112 C# Como Programar
Figura J.10 Site Web com frames e um frameset aninhado. (Parte 2 de 2.)
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
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.
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.