Web completas com texto links

No apêndice anterior apresentamos o XHTML. Criamos diversas páginas Web completas com texto, links, imagens, réguas
horizontais e quebras de linha. Neste apêndice discutiremos recursos mais substanciais do XHTML, entre eles a apresentação
das informações nas tabelas e a incorporação dos formulários para reunir informações de um visitante da página Web.
Também apresentaremos os links internos e os mapas de imagens para melhorar a navegação na página Web e os frames
para exibir diversos documentos no navegador. No fi nal deste apêndice, você estará familiarizado com os recursos mais usados
do XHTML e poderá criar documentos da Web mais complexos. Aqui não apresentaremos nenhuma programação C#.
L.2 Tabelas XHTML básicas
Esta seção apresenta a tabelo XHTML — um recurso muito usado e que organiza os dados em linhas e colunas. Nosso
primeiro exemplo (Figura L.1) usa uma tabela com seis linhas e duas colunas para exibir as informações de preços de
frutas.
As tabelas são defi nidas com o elemento table. As linhas 16 a 18 especifi cam a tag inicial de um elemento de
tabela com diversos atributos. O atributo border especifi ca a largura da borda da tabela em pixels. Para criar uma tabela
sem uma borda defi na border como “0”. Esse exemplo designa o atributo width “40%” para defi nir a largura da tabela
como 40% da largura do navegador. Um desenvolvedor também pode defi nir o atributo width com um número específi co
de pixels.

1 <?xml version = “1.0”?>
2 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
3 “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
4
5 <!– Fig. L.1: table1.html –>
6 <!– Criando uma tabela básica. –>
7
8 <html xmlns = “http://www.w3.org/1999/xhtml”>
9 <head>
10 <title>A simple XHTML table</title>
Figura L.1 Tabela XHTML. (Parte 1 de 3.)

11 </head>
12
13 <body>
14
15 <!– a tag <table> inicia a tabela –>
16 <table border = “1” width = “40%”
17 summary = “This table provides information about
18 the price of fruit”>
19
20 <!– a tag <caption> resume o conteúdo da tabela –>
21 <!– para ajudar os defi cientes visuais –>
22 <caption><strong>Price of Fruit</strong></caption>
23
24 <!– <thead> é a primeira seção da tabela –>
25 <!– ela formata a área de cabeçalho da tabela –>
26 <thead>
27 <tr> <!– <tr> insere uma linha de tabela –>
28 <th>Fruit</th> <!– insere a célula de título –>
29 <th>Price</th>
30 </tr>
31 </thead>
32
33 <!– todo o conteúdo da tabela está incluído dentro de <tbody> –>
34 <tbody>
35 <tr>
36 <td>Apple</td> <!– insere a célula de dados –>
37 <td>$0.25</td>
38 </tr>
39
40 <tr>
41 <td>Orange</td>
42 <td>$0.50</td>
43 </tr>
44
45 <tr>
46 <td>Banana</td>
47 <td>$1.00</td>
48 </tr>
49
50 <tr>
51 <td>Pineapple</td>
52 <td>$2.00</td>
53 </tr>
54 </tbody>
55
56 <!– <tfoot> é a última seção da tabela –>
57 <!– ele formata o rodapé da tabela –>
58 <tfoot>
59 <tr>
60 <th>Total</th>
61 <th>$3.75</th>
62 </tr>
63 </tfoot>
64
65 </table>
66
67 </body>
68 </html>
Figura L.1 Tabela XHTML. (Parte 2 de 3.)

iiiiusam esse atributo para tornar a tabela mais acessível aos usuários portadores de defi ciências visuais. O elemento caption
(linha 22) descreve o conteúdo da tabela e ajuda os navegadores baseados em texto a interpretarem os dados da tabela. O
texto que está dentro da tag <caption> é convertido acima da tabela pela maioria dos navegadores. O atributo summary
e o elemento caption são dois dos muitos recursos do XHTML que tornam as páginas Web mais acessíveis aos usuários
portadores de defi ciência física. Discutimos a programação da acessibilidade com detalhes no Capítulo 24.
Uma tabela possui três seções distintas — head, body e foot. A seção head (ou célula de cabeçalho) é defi nida com o
elemento thead (linhas 26 a 31), a qual contém as informações do cabeçalho, como os nomes das colunas. Cada elemento
tr (linhas 27 a 30) defi ne uma linha de tabela individual. As colunas da seção de título são defi nidas com os elementos th.
A maioria dos navegadores centraliza o texto formatado pelos elementos th (coluna de título de tabela) e o exibe em negrito.
Os elementos do cabeçalho de tabela são aninhados nos elementos de linha de tabela.
A seção body, ou corpo de tabela, contém os dados primários da tabela. O corpo da tabela (linhas 34 a 54) são identifi
cados em um elemento tbody. As células de dados contêm dados individuais que são defi nidos com os elementos td
(dados de tabela).
A seção de rodapé (linhas 58 a 63) é defi nida com um elemento tfoot (rodapé de tabela) e representa um rodapé.
O texto colocado normalmente no rodapé inclui resultados de cálculos e notas de rodapé. Assim como as outras seções, ela
pode conter linhas de tabela, as quais contêm colunas.
L.3 Tabelas e formatação intermediárias em XHTML
Na seção anterior exploramos a estrutura de uma tabela básica. Na Figura L.2 ampliamos a discussão sobre as tabelas e apresentamos
os elementos e atributos que permitem ao autor do documento criar tabelas mais complexas.
A tabela começa na linha 17. O elemento colgroup (linhas 22 a 27) agrupa e formata as colunas. O elemento col
(linha 26) especifi ca dois atributos nesse exemplo. O atributo align determina o alinhamento do texto na coluna. O atributo
span determina o número de colunas que o elemento col formata. Nesse caso, defi nimos o valor de align como “right”
e o valor de span como “1”, para alinhar o texto à direita na primeira coluna (a coluna que contém a fi gura do camelo na
tela capturada de exemplo).
As células de tabela são dimensionadas para se ajustar aos dados que elas contêm. Os autores de documentos podem
criar células de dados maiores usando os atributos rowspan e colspan. Os valores designados a esses atributos especifi –
cam o número de linhas ou colunas ocupadas por uma célula. O elemento th das linhas 36 a 39 usa o atributo rowspan=“2”
para permitir que a célula da fi gura do camelo use duas células verticais adjacentes [desse modo, a célula spans (entende-se
por) duas linhas]. O elemento th das linhas 42 a 45 usa o atributo colspan = “4” para ampliar a célula de cabeçalho (contendo
Camelid comparison e Approximates as of 9/2002) e abranger quatro células.

<?xml version = “1.0”?>
2 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
3 “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
4
5 <!– Fig. L.2: table2.html –>
6 <!– Desenho de tabela intermediária. –>
7
8 <html xmlns = “http://www.w3.org/1999/xhtml”>
9 <head>
10 <title>C# How to Program – Tables</title>
11 </head>
12
13 <body>
14
15 <h1>Table Example Page</h1>
16
17 <table border = “1”>
18 <caption>Here is a more complex sample table.</caption>
19
20 <!– as tags <colgroup> e <col> são –>
21 <!– usadas para formatar colunas inteiras –>
22 <colgroup>
23
24 <!– o atributo span determina quantas –>
25 <!– colunas a tag <col> afeta –>
26 <col align = “right” span = “1” />
27 </colgroup>
28
29 <thead>
30
31 <!– rowspan e colspan incorporam o número especifi cado de –>
32 <!– células na vertical ou horizontal –>
33 <tr>
34
35 <!– junta duas linhas –>
36 <th rowspan = “2”>
37 <img src = “camel.gif” width = “205”
38 height = “167” alt = “Picture of a camel” />
39 </th>
40
41 <!– junta quatro colunas –>
42 <th colspan = “4” valign = “top”>
43 <h1>Camelid comparison</h1><br />
44 <p>Approximate as of 9/2002</p>
45 </th>
46 </tr>
47
48 <tr valign = “bottom”>
49 <th># of Humps</th>
50 <th>Indigenous region</th>
51 <th>Spits?</th>
52 <th>Produces Wool?</th>
53 </tr>
54
55 </thead>
56
57 <tbody>

59 <tr>
60 <th>Camels (bactrian)</th>
61 <td>2</td>
62 <td>Africa/Asia</td>
63 <td rowspan = “2”>Llama</td>
64 <td rowspan = “2”>Llama</td>
65 </tr>
66
67 <tr>
68 <th>Llamas</th>
69 <td>1</td>
70 <td>Andes Mountains</td>
71 </tr>
72
73 </tbody>
74
75 </table>
76
77 </body>
78 </html>

eee

Erro de programação comum L.1
Ao usar colspan e rowspan para ajustar o tamanho das células de dados da tabela, você deve se lembrar de que as células
modifi cadas ocuparão mais de uma coluna ou linha; as outras linhas ou colunas da tabela devem compensar as linhas ou colunas
extras incluídas nas células individuais. Se não fi zer isso, a formatação de sua tabela será distorcida e você poderá criar sem
querer mais colunas e linhas do que pretendia originariamente.
A linha 42 introduz o atributo valign, o qual alinha os dados verticalmente e pode receber um entre quatro valores:
“top” alinha os dados com a parte superior da célula, “middle” centraliza os dados verticalmente (o padrão de todas as
células de dados e cabeçalho), “bottom” alinha os dados com a parte inferior da célula, e “baseline” ignora as fontes
usadas para os dados de linha e defi ne a parte inferior de todo o texto da linha em uma linha de base comum (ou seja, a linha
horizontal na qual cada caractere de uma palavra é alinhado).

L.4 Formulários XHTML básicos
Ao pesquisarem os sites Web os usuários quase sempre precisam fornecer informações como os endereços de correio eletrônico,
palavras-chave de pesquisa e códigos postais. O XHTML fornece um mecanismo, chamado formulário, que reúne
essas informações.
Os dados que os usuários inserem em uma página Web normalmente são enviados para um servidor da Web que fornece
acesso aos recursos de um site (ou seja, os documentos ou as imagens XHTML). Esses recursos estão localizados na mesma
máquina do servidor da Web ou em uma máquina que o servidor pode acessar por meio da rede. Quando um navegador
solicita uma página ou um arquivo da Web que está localizado em um servidor, este processa a requisição e retorna o recurso
solicitado. Uma requisição contém o nome e o caminho do recurso desejado e o método de comunicação (chamado de protocolo).
Os documentos XHTML usam o HTTP (HyperText Transfer Protocol — protocolo de transferência de hipertexto).
A Figura L.3 envia os dados do formulário para o servidor da Web, o qual passa os dados do formulário para um script
CGI (Common Gateway Interface — interface de interconexão comum), ou seja, um programa. Ele é escrito em Perl, C ou
em alguma outra linguagem. O script processa os dados recebidos do servidor da Web e geralmente retorna as informações
para o servidor. Em seguida, o servidor da Web envia as informações na forma de um documento XHTML para o navegador
da Web. (Observação: esse exemplo demonstra a funcionalidade no lado do cliente. Se o formulário for enviado — dando um
clique em Submit Your Entries —, ocorrerá um erro).
Os formulários podem conter componentes visuais e não-visuais. Os componentes visuais incluem botões para clicar
e outros componentes da interface com o usuário gráfi ca, com a qual os usuários interagem. Os componentes não-visuais,
chamados entradas ocultas, armazenam todos os dados que o autor do documento especifi ca, como endereços de e-mail e
nomes de arquivos de documentos XHTML que agem como links. O formulário começa na linha 23 com o elemento form.
O atributo method especifi ca o modo como os dados do formulário são enviados para o servidor da Web.
Figura L.3 Formulário simples com campos ocultos e uma caixa de texto. (Parte 1 de 2.)
1 <?xml version = “1.0”?>
2 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
3 “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
4
5 <!– Fig. L.3: form.html –>
6 <!– Exemplo 1 de desenho de formulário –>
7
8 <html xmlns = “http://www.w3.org/1999/xhtml”>
9 <head>
10 <title>C# How to Program – Forms</title>
11 </head>
12
13 <body>
14
15 <h1>Feedback Form</h1>
16
17 <p>Please fi ll out this form to help
18 us improve our site.</p>
19
20 <!– a tag <form> inicia o formulário, fornece o –>
21 <!– método de envio das informações e a –>
22 <!– localização dos scripts de formulário –>
23 <form method = “post” action = “/cgi-bin/formmail”>
24
25 <p>
26
27 <!– as entradas ocultas contêm informações –>
28 <!– não-visuais –>
29 <input type = “hidden” name = “recipient”
30 value = “deitel@deitel.com” />

<input type = “hidden” name = “subject”
33 value = “Feedback Form” />
34
35 <input type = “hidden” name = “redirect”
36 value = “main.html” />
37 </p>
38
39 <!– <input type = “text”> inclui uma caixa de texto –>
40 <p>
41 <label>Name:
42 <input name = “name” type = “text” size = “25”
43 maxlength = “30” />
44 </label>
45 </p>
46
47 <p>
48
49 <!– os tipos de entrada “submit” e “reset” –>
50 <!– inserem botões para o envio –>
51 <!– e a limpeza do conteúdo do formulário –>
52 <input type = “submit” value =
53 “Submit Your Entries” />
54
55 <input type = “reset” value =
56 “Clear Your Entries” />
57 </p>
58
59 </form>
60
61 </body>
62 </html>

ooo

Usando method = “post” é possível anexar os dados de formulário requisitados pelo navegador, os quais contêm o
protocolo (ou seja, o HTTP) e o URL do recurso solicitado. Os scripts localizados no computador do servidor da Web (ou em
um computador que pode ser acessado pela rede) podem acessar os dados do formulário enviados como parte da requisição.
Por exemplo, um script pode assumir as informações do formulário e atualizar uma mailing list eletrônica. O outro valor
possível, method = “get”, anexa os dados do formulário diretamente ao fi nal do URL. Por exemplo, o URL /cgi-bin/
formmail teria as informações de formulário name = bob anexadas a ele.

O atributo action da tag <form> especifi ca o URL de um script do servidor da Web. Nesse caso, ele especifi ca
um script que envia por e-mail os dados de formulário para um endereço. A maioria dos prevedores de acesso à Internet tem um
script como esse em seus sites; pergunte ao administrador de sistemas do site Web como um documento XHTML é confi gurado
para usar o script corretamente.
As linhas 29 a 36 defi nem três elementos input especifi cando os dados a serem fornecidos ao script que processa
o formulário (também chamado de handler de formulário). Esses três elementos input têm o atributo type confi gurado
como “hidden”, o que permite que o autor do documento envie os dados de formulário que não são inseridos por um usuário
para um script.
As três entradas ocultas são 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 navegador será redirecionado após o envio do formulário. Os dois outros atributos input são
name, que identifi ca o elemento input, e value, o qual fornece o valor que será enviado (ou postado) para o servidor
da Web.
Boa prática de programação L.1
Coloque os elementos input ocultos no início de um formulário, imediatamente após a tag inicial <form>. Isso permite que os
autores de documentos localizem rapidamente os elementos input ocultos.
Apresentamos outro tipo de entrada nas linhas 38 e 39. A input “text” insere uma caixa de texto no formulário. Os
usuários podem digitar os dados nas caixas de texto. O elemento label (linhas 37 a 40) fornece aos usuários as informações
sobre a fi nalidade do elemento input.
Erro de programação comum L.2
Esquecer de incluir um elemento label em cada elemento do formulário é um erro de projeto. Sem esses rótulos, os usuários
não podem determinar a fi nalidade dos elementos individuais do formulário.
O atributo size do elemento input especifi ca o número de caracteres visíveis na caixa de texto. O atributo opcional
maxlength limita o número da entrada de caracteres na caixa de texto. Nesse caso, o usuário não pode digitar mais do que
30 caracteres na caixa de texto.
Existem dois tipos de elementos input nas linhas 52 a 56. O elemento input “submit” é um botão que, quando
pressionado, faz o navegador enviar os dados do formulário para o servidor da Web para processamento. O atributo value
defi ne o texto que é exibido no botão (o valor padrão é Submit). O elemento input “reset” permite que um usuário
reinicialize todos os elementos de form com seus valores padrão. O atributo value do elemento input do tipo “reset”
confi gura o texto que é exibido no botão (o valor padrão é Reset).
L.5 Formulários XHTML mais complexos
Na seção anterior apresentamos os formulários básicos. Nesta seção apresentaremos os elementos e os atributos para a criação
de formulários mais complexos. A Figura L.4 contém um formulário que solicita retorno do usuário sobre um site Web.
O elemento textarea (linhas 42 a 44) insere uma caixa de texto de múltiplas linhas, chamada textarea (área de
texto), no formulário. O número de linhas é especifi cado como o atributo rows, e o número de colunas é especifi cado como
o atributo cols. Nesse exemplo, a textarea tem quatro linhas de altura por 36 caracteres de largura. Para exibir o texto
padrão na área de texto, coloque-o entre as tags <textarea> e </textarea>. O texto padrão pode ser especifi cado em
outros tipos de input, como as caixas de texto, usando o atributo value.
A entrada “password” das linhas 52 e 53 insere uma caixa de senha com o size especifi cado. Uma caixa de senha
permite que os usuários insiram informações confi denciais, como números e senhas de cartões de crédito, e cria uma “máscara”
de entrada das informações com asteriscos. O valor real de input é enviado para o servidor da Web, não os asteriscos
que mascaram a entrada.
As linhas 60 a 78 apresentam a caixa de seleção do elemento form. As caixas de seleção permitem que os usuários
selecionem um conjunto de opções. Quando um usuário seleciona uma caixa de seleção, uma marca de seleção aparece na
caixa; caso contrário, a caixa permanece vazia. Cada input “checkbox” cria uma nova caixa de seleção. Elas podem ser
usadas individualmente ou em grupos. Aquelas que pertencem a um grupo são designadas com o mesmo name (nesse caso,
“thingsliked”).

<?xml version = “1.0”?>
2 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
3 “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
4
5 <!– Fig. L.4: form2.html –>
6 <!– Exemplo 2 de desenho de formulário –>
7
8 <html xmlns = “http://www.w3.org/1999/xhtml”>
9 <head>
10 <title>C# How to Program – Forms</title>
11 </head>
12
13 <body>
14
15 <h1>Feedback Form</h1>
16
17 <p>Please fi ll out this form to help
18 us improve our site.</p>
19
20 <form method = “post” action = “/cgi-bin/formmail”>
21
22 <p>
23 <input type = “hidden” name = “recipient”
24 value = “deitel@deitel.com” />
25
26 <input type = “hidden” name = “subject”
27 value = “Feedback Form” />
28
29 <input type = “hidden” name = “redirect”
30 value = “main.html” />
31 </p>
32
33 <p>
34 <label>Name:
35 <input name = “name” type = “text” size = “25” />
36 </label>
37 </p>
38
39 <!– <textarea> creates multiline textbox –>
40 <p>
41 <label>Comments:<br />
42 <textarea name = “comments” rows = “4”
43 cols = “36”>Enter your comments here.
44 </textarea>
45 </label></p>
46
47 <!– <input type = “password”> insere –>
48 <!– a caixa de texto cuja exibição é marcada –>
49 <!– com caracteres de asterisco –>
50 <p>
51 <label>E-mail Address:
52 <input name = “e-mail” type = “password”
53 size = “25” />
54 </label>
55 </p>
56
57 <p>
58 <strong>Things you liked:</strong><br />

<label>Site design
61 <input name = “thingsliked” type = “checkbox”
62 value = “Design” /></label>
63
64 <label>Links
65 <input name = “thingsliked” type = “checkbox”
66 value = “Links” /></label>
67
68 <label>Ease of use
69 <input name = “thingsliked” type = “checkbox”
70 value = “Ease” /></label>
71
72 <label>Images
73 <input name = “thingsliked” type = “checkbox”
74 value = “Images” /></label>
75
76 <label>Source code
77 <input name = “thingsliked” type = “checkbox”
78 value = “Code” /></label>
79 </p>
80
81 <p>
82 <input type = “submit” value =
83 “Submit Your Entries” />
84
85 <input type = “reset” value =
86 “Clear Your Entries” />
87 </p>
88
89 </form>
90
91 </body>
92 </html>

sss

ffff

Erro de programação comum L.3
Quando seu form tem diversas caixas de seleção com o mesmo name, você deve ter certeza de que elas têm values diferentes;
caso contrário, os scripts executados no servidor da Web não poderão distingui-las.
Continuamos nossa discussão sobre os formulários apresentando um terceiro exemplo com diversos outros elementos
de formulário para as seleções dos usuários (Figura L.5). Nesse exemplo apresentamos dois novos tipos de input. O primeiro
é o botão de rádio (ou, no jargão da Microsoft, botões de opção; linhas 90 a 113) especifi cado com o tipo “radio”. Os botões
de rádio são semelhantes às caixas de seleção, exceto que apenas um botão de um grupo de botões pode ser selecionado
de cada vez. Todos os botões de rádio de um grupo têm o mesmo atributo name; eles se distinguem por seus atributos value
diferentes. O par atributo-valor checked = “checked” (linha 92) indica qual botão de rádio, se houver, será selecionado
inicialmente. O atributo checked também se aplica às caixas de seleção.
Erro de programação comum L.4
Ao usar um grupo de botões de rádio em um formulário, um erro lógico é esquecer de confi gurar os atributos name com o mesmo
nome, o que permite ao usuário poder selecionar todos os botões de rádio ao mesmo tempo.
O elemento select (linhas 123 a 126) fornece uma lista suspensa na qual o usuário pode selecionar um item. O
atributo name identifi ca a lista suspensa. O elemento option (linhas 124 a 135) inclui os itens na lista suspensa. O atributo
selected do elemento option especifi ca qual item é exibido inicialmente como o item selecionado do elemento
select.
Figura L.5 Formulário incluindo botões de rádio e listas suspensas. (Parte 1 de 4.)
1 <?xml version = “1.0”?>
2 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
3 “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
4
5 <!– Fig. L.5: form3.html –>
6 <!– Exemplo 3 de desenho de formulário –>
7
8 <html xmlns = “http://www.w3.org/1999/xhtml”>
9 <head>
10 <title>C# How to Program – Forms</title>
11 </head>
12
13 <body>
14
15 <h1>Feedback Form</h1>
16
17 <p>Please fi ll out this form to help
18 us improve our site.</p>
19
20 <form method = “post” action = “/cgi-bin/formmail”>
21
22 <p>
23 <input type = “hidden” name = “recipient”
24 value = “deitel@deitel.com” />
25
26 <input type = “hidden” name = “subject”
27 value = “Feedback Form” />
28
29 <input type = “hidden” name = “redirect”
30 value = “main.html” />
31 </p>
32
33 <p>
34 <label>Name:

<input name = “name” type = “text” size = “25” />
36 </label>
37 </p>
38
39 <p>
40 <label>Comments:<br />
41 <textarea name = “comments” rows = “4”
42 cols = “36”></textarea>
43 </label>
44 </p>
45
46 <p>
47 <label>E-mail Address:
48 <input name = “e-mail” type = “password”
49 size = “25” />
50 </label>
51 </p>
52
53 <p>
54 <strong>Things you liked:</strong><br />
55
56 <label>Site design
57 <input name = “thingsliked” type = “checkbox”
58 value = “Design” />
59 </label>
60
61 <label>Links
62 <input name = “thingsliked” type = “checkbox”
63 value = “Links” />
64 </label>
65
66 <label>Ease of use
67 <input name = “thingsliked” type = “checkbox”
68 value = “Ease” />
69 </label>
70
71 <label>Images
72 <input name = “thingsliked” type = “checkbox”
73 value = “Images” />
74 </label>
75
76 <label>Source code
77 <input name = “thingsliked” type = “checkbox”
78 value = “Code” />
79 </label>
80
81 </p>
82
83 <!– <input type = “radio” /> cria um botão de rádio. –>
84 <!– A diferença entre os botões de rádio e as caixas –>
85 <!– de seleção é que apenas um botão de rádio de um –>
86 <!– grupo pode ser selecionado. –>
87 <p>
88 <strong>How did you get to our site?:</strong><br />
89
90 <label>Search engine
91 <input name = “howtosite” type = “radio”
92 value = “search engine” checked = “checked” />

</label>
94
95 <label>Links from another site
96 <input name = “howtosite” type = “radio”
97 value = “link” />
98 </label>
99
100 <label>Deitel.com Web site
101 <input name = “howtosite” type = “radio”
102 value = “deitel.com” />
103 </label>
104
105 <label>Reference in a book
106 <input name = “howtosite” type = “radio”
107 value = “book” />
108 </label>
109
110 <label>Other
111 <input name = “howtosite” type = “radio”
112 value = “other” />
113 </label>
114
115 </p>
116
117 <p>
118 <label>Rate our site:
119
120 <!– a tag <select> apresenta uma lista suspensa –>
121 <!– com as opções indicadas pelas –>
122 <!– tags <option> –>
123 <select name = “rating”>
124 <option selected = “selected”>Amazing</option>
125 <option>10</option>
126 <option>9</option>
127 <option>8</option>
128 <option>7</option>
129 <option>6</option>
130 <option>5</option>
131 <option>4</option>
132 <option>3</option>
133 <option>2</option>
134 <option>1</option>
135 <option>Awful</option>
136 </select>
137
138 </label>
139 </p>
140
141 <p>
142 <input type = “submit” value =
143 “Submit Your Entries” />
144
145 <input type = “reset” value = “Clear Your Entries” />
146 </p>
147
148 </form>
149
150 </body>
151 </html>

aaaaa

L.6 Links internos
No Apêndice K discutimos como fazer o link de uma página Web para outra. A Figura L.6 apresenta os links internos — um
mecanismo que permite ao usuário pular entre as localizações do mesmo documento. Os links internos são úteis nos documentos
longos que contêm muitas seções. Um clique em um link interno permite que os usuários encontrem uma seção sem
ter de rolar todo o documento.

<?xml version = “1.0”?>
2 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
3 “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
4
5 <!– Fig. L.6: links.html –>
6 <!– Links internos –>
7
8 <html xmlns = “http://www.w3.org/1999/xhtml”>
9 <head>
10 <title>C# How to Program – List</title>
11 </head>
12
13 <body>
14
15 <!– <a name = “..”></a> cria o link interno –>
16 <p><a name = “features”></a></p>
17
18 <h1>The Best Features of the Internet</h1>

<!– address of internal link is “#linkname” –>
21 <p>
22 <a href = “#ceos”>Go to <em>Favorite CEOs</em></a>
23 </p>
24
25 <ul>
26 <li>You can meet people from countries
27 around the world.</li>
28
29 <li>You have access to new media as it becomes public:
30
31 <ul>
32 <li>New games</li>
33 <li>New applications
34
35 <ul>
36 <li>For Business</li>
37 <li>For Pleasure</li>
38 </ul>
39
40 </li>
41
42 <li>Around the clock news</li>
43 <li>Search Engines</li>
44 <li>Shopping</li>
45 <li>Programming
46
47 <ul>
48 <li>XHTML</li>
49 <li>Java</li>
50 <li>Dynamic HTML</li>
51 <li>Scripts</li>
52 <li>New languages</li>
53 </ul>
54
55 </li>
56 </ul>
57
58 </li>
59
60 <li>Links</li>
61 <li>Keeping in touch with old friends</li>
62 <li>It is the technology of the future!</li>
63 </ul>
64
65 <!– âncora nomeada –>
66 <p><a name = “ceos”></a></p>
67
68 <h1>My 3 Favorite <em>CEOs</em></h1>
69
70 <p>
71
72 <!– internal hyperlink to features –>
73 <a href = “#features”>
74 Go to <em>Favorite Features</em>
75 </a>
76 </p>

<ol>
79 <li>Lawrence J. Ellison</li>
80 <li>Steve Jobs</li>
81 <li>Michael Dell</li>
82 </ol>
83
84 </body>
85 </html>

nnnnnn

bbbbbb

A linha 16 contém uma âncora nomeada (chamada features) para um link interno. Para vincular-se a esse tipo de
âncora dentro da mesma página Web, o atributo href de outro elemento de âncora inclui a âncora nomeada precedida de um
sinal de cerquilha (como em #features). As linhas 73 e 74 contêm um link com a âncora features como seu destino.
A seleção desse link em um navegador da Web rola a janela do navegador para a âncora features da linha 16.

Os links internos são úteis nos documentos XHTML que contêm grandes quantidades de informações. Os links internos com diversas
seções da página facilitam a navegação: os usuários não precisam rolar a página para encontrar uma seção específi ca.
Embora esse exemplo não demonstre, um link pode especifi car um link interno em outro documento fornecendo o
nome do documento seguido por um sinal de cerquilha e a âncora nomeada:
href = “página.html#nome”
Por exemplo, para vincular uma âncora nomeada chamada booklist em books.html, href recebe a designação
“books.html#booklist”.
L.7 Criando e usando mapas de imagens
No Apêndice K demonstramos como as imagens podem ser usadas como links com outros recursos da Internet. Nesta seção
apresentaremos outra técnica para a vinculação de imagens chamada mapa de imagens, o qual designa determinadas áreas de
uma imagem (chamadas de áreas ativas, ou hotspots) como links. A Figura L.7 apresenta os mapas de imagens e áreas ativas.
As linhas 19 a 50 defi nem uma mapa de imagens por meio de um elemento map. O atributo id (linha 19) identifi ca
o mapa de imagem. Se id for omitido, o mapa não poderá ser referenciado por uma imagem. Em breve discutiremos como
referenciar um mapa de imagens. As áreas ativas são defi nidas com elementos area (como mostram as linhas 24 a 26). Os
atributos href (linha 24) especifi cam o destino do link (ou seja, o recurso com o qual será feito o link). Os atributos shape
(linha 24) e coords (linha 25) especifi cam a forma e as coordenadas da área ativa, respectivamente. O atributo alt (linha
26) fornece texto alternativo para o link.

<?xml version = “1.0” ?>
2 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
3 “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
4
5 <!– Fig. L.7: picture.html –>
6 <!– Criando e usando os mapas de imagens. –>
7
8 <html xmlns = “http://www.w3.org/1999/xhtml”>
9 <head>
10 <title>C# How to Program – Image Map
11 </title>
12 </head>
13
14 <body>
15
16 <p>
17
18 <!– a tag <map> defi ne o mapa de imagens –>
19 <map id = “picture”>
20
21 <!– shape = “rect” indica a área retangular, –>
22 <!– com as coordenadas para os cantos superior –>
23 <!– esquerdo e inferior direito –>
24 <area href = “form.html” shape = “rect”
25 coords = “2,123,54,143”
26 alt = “Go to the feedback form” />
27
28 <area href = “contact.html” shape = “rect”
29 coords = “126,122,198,143”
30 alt = “Go to the contact page” />
31
32 <area href = “main.html” shape = “rect”
33 coords = “3,7,61,25” alt = “Go to the homepage” />
34
35 <area href = “links.html” shape = “rect”
36 coords = “168,5,197,25”
37 alt = “Go to the links page” />
38
39 <!– o valor “poly” cria uma área ativa com a forma –>
40 <!– de um polígono, defi nido pelas coordenadas –>
41 <area shape = “poly” alt = “E-mail the Deitels”
42 coords = “162,25,154,39,158,54,169,51,183,39,161,26”
43 href = “mailto:deitel@deitel.com” />
44
45 <!– shape = “circle” indica uma área circular –>
46 <!– com o centro e o raio determinados –>
47 <area href = “mailto:deitel@deitel.com”
48 shape = “circle” coords = “100,36,33”
49 alt = “E-mail the Deitels” />
50 </map>
51
52 <!– <img src =… usemap = “#id”> indica que –>
53 <!– o mapa de imagens especifi cado é usado com essa imagem –>
54 <img src = “deitel.gif” width = “200” height = “144”
55 alt = “Deitel logo” usemap = “#picture” />
56 </p>
57
58 </body>
59 </html>

É ISSO AI GALÉRA O RESTO THÁ AQUI E LOGO EU COLOCO BLZ!!

por Paulista Postado em HTML Com a tag