Cs HTP - App L PDF

L
INTRODUO AO XHTML:
PARTE 2
OBJETIVOS
Ser capaz de criar tabelas com linhas e colunas de dados.

Ser capaz de controlar a formatao de tabelas.
Ser capaz de criar e usar formulrios.
Ser capaz de criar e usar os mapas de imagens para auxiliar
na navegao em pginas Web.
Ser capaz de tornar pginas Web acessveis para os
mecanismos de busca por meio das tags <meta>.
Ser capaz de usar o elemento frameset para exibir
diversas pginas Web em uma nica janela de navegador.
Sim, da tabela de minha memria

eu varrerei todos os registros queridos e triviais.
William Shakespeare
L-142 C# Como Programar
Resumo
L.1 Introduo
L.2 Tabelas XHTML bsicas
L.3 Tabelas e formatao intermedirias em XHTML
L.4 Formulrios XHTML bsicos
L.5 Formulrios XHTML mais complexos
L.6 Links internos
L.7 Criando e usando mapas de imagens
L.8 Elementos meta
L.9 Elemento frameset
L.10 Framesets aninhados
L.11 Recursos da Internet e da World Wide Web
Resumo Terminologia Exerccios de auto-reviso Respostas dos exerccios de auto-reviso Exerccios
L.1 Introduo
No apndice anterior apresentamos o XHTML. Criamos diversas pginas Web completas com texto, links, imagens, rguas
horizontais e quebras de linha. Neste apndice discutiremos recursos mais substanciais do XHTML, entre eles a apresenta-
o das informaes nas tabelas e a incorporao dos formulrios para reunir informaes de um visitante da pgina Web.
Tambm apresentaremos os links internos e os mapas de imagens para melhorar a navegao na pgina Web e os frames
para exibir diversos documentos no navegador. No final deste apndice, voc estar familiarizado com os recursos mais usa-
dos do XHTML e poder criar documentos da Web mais complexos. Aqui no apresentaremos nenhuma programao C#.
L.2 Tabelas XHTML bsicas

Esta seo 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 informaes de preos de
frutas.
As tabelas so definidas com o elemento table. As linhas 16 a 18 especificam a tag inicial de um elemento de
tabela com diversos atributos. O atributo border especifica a largura da borda da tabela em pixels. Para criar uma tabela
sem uma borda defina border como 0. Esse exemplo designa o atributo width 40% para definir a largura da tabela
como 40% da largura do navegador. Um desenvolvedor tambm pode definir o atributo width com um nmero especfico
de pixels.
Dica de teste e depurao L.1

Tente redimensionar a janela do navegador para ver como a largura da janela afeta a largura da tabela.
Como diz o nome, o atributo summary (linha 17) descreve o contedo da tabela. Os dispositivos de gerao de fala
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 
6 
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.)

Apndice L Introduo ao XHTML: Parte 2 L-143
11 </head>
12
13 <body>
14
15 
16 <table border = 1 width = 40%
17 summary = This table provides information about
18 the price of fruit>
19
20 
21 
22 <caption><strong>Price of Fruit</strong></caption>
23
24 
25 
26 <thead>
27 <tr> 
28 <th>Fruit</th> 
29 <th>Price</th>
30 </tr>
31 </thead>
32
33 
34 <tbody>
35 <tr>
36 <td>Apple</td> 
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 
57 
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>
Ttulo da tabela
Corpo da tabela
Rodap da tabela
Borda da tabela
usam esse atributo para tornar a tabela mais acessvel aos usurios portadores de deficincias visuais. O elemento caption
(linha 22) descreve o contedo 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 so dois dos muitos recursos do XHTML que tornam as pginas Web mais acessveis aos usurios
portadores de deficincia fsica. Discutimos a programao da acessibilidade com detalhes no Captulo 24.
Uma tabela possui trs sees distintas head, body e foot. A seo head (ou clula de cabealho) definida com o
elemento thead (linhas 26 a 31), a qual contm as informaes do cabealho, como os nomes das colunas. Cada elemento
tr (linhas 27 a 30) define uma linha de tabela individual. As colunas da seo de ttulo so definidas com os elementos th.
A maioria dos navegadores centraliza o texto formatado pelos elementos th (coluna de ttulo de tabela) e o exibe em negrito.
Os elementos do cabealho de tabela so aninhados nos elementos de linha de tabela.
A seo body, ou corpo de tabela, contm os dados primrios da tabela. O corpo da tabela (linhas 34 a 54) so iden-
tificados em um elemento tbody. As clulas de dados contm dados individuais que so definidos com os elementos td
(dados de tabela).
A seo de rodap (linhas 58 a 63) definida com um elemento tfoot (rodap de tabela) e representa um rodap.
O texto colocado normalmente no rodap inclui resultados de clculos e notas de rodap. Assim como as outras sees, ela
pode conter linhas de tabela, as quais contm colunas.
L.3 Tabelas e formatao intermedirias em XHTML

Na seo anterior exploramos a estrutura de uma tabela bsica. Na Figura L.2 ampliamos a discusso sobre as tabelas e apre-
sentamos os elementos e atributos que permitem ao autor do documento criar tabelas mais complexas.
A tabela comea na linha 17. O elemento colgroup (linhas 22 a 27) agrupa e formata as colunas. O elemento col
(linha 26) especifica dois atributos nesse exemplo. O atributo align determina o alinhamento do texto na coluna. O atributo
span determina o nmero de colunas que o elemento col formata. Nesse caso, definimos o valor de align como right
e o valor de span como 1, para alinhar o texto direita na primeira coluna (a coluna que contm a figura do camelo na
tela capturada de exemplo).
As clulas de tabela so dimensionadas para se ajustar aos dados que elas contm. Os autores de documentos podem
criar clulas de dados maiores usando os atributos rowspan e colspan. Os valores designados a esses atributos especifi-
cam o nmero de linhas ou colunas ocupadas por uma clula. O elemento th das linhas 36 a 39 usa o atributo rowspan=2
para permitir que a clula da figura do camelo use duas clulas verticais adjacentes [desse modo, a clula spans (entende-se
por) duas linhas]. O elemento th das linhas 42 a 45 usa o atributo colspan = 4 para ampliar a clula de cabealho (con-
tendo Camelid comparison e Approximates as of 9/2002) e abranger quatro clulas.

4
5 
6 
7
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 
21 
22 <colgroup>
23
24 
25 
26 <col align = right span = 1 />
27 </colgroup>
28
29 <thead>
30
31 
32 
33 <tr>
34
35 
36 <th rowspan = 2>
37 <img src = camel.gif width = 205
38 height = 167 alt = Picture of a camel />
39 </th>
40
41 
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>
58
Figura L.2 Tabela XHTML complexa. (Parte 1 de 2.)

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>
Figura L.2 Tabela XHTML complexa. (Parte 2 de 2.)
Erro de programao comum L.1

Ao usar colspan e rowspan para ajustar o tamanho das clulas de dados da tabela, voc deve se lembrar de que as clulas
modificadas ocuparo mais de uma coluna ou linha; as outras linhas ou colunas da tabela devem compensar as linhas ou colunas
extras includas nas clulas individuais. Se no fizer isso, a formatao 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 clula, middle centraliza os dados verticalmente (o padro de todas as
clulas de dados e cabealho), bottom alinha os dados com a parte inferior da clula, e baseline ignora as fontes
usadas para os dados de linha e define 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 Formulrios XHTML bsicos

Ao pesquisarem os sites Web os usurios quase sempre precisam fornecer informaes como os endereos de correio ele-
trnico, palavras-chave de pesquisa e cdigos postais. O XHTML fornece um mecanismo, chamado formulrio, que rene
essas informaes.
Os dados que os usurios inserem em uma pgina Web normalmente so enviados para um servidor da Web que forne-
ce acesso aos recursos de um site (ou seja, os documentos ou as imagens XHTML). Esses recursos esto localizados na mes-
ma mquina do servidor da Web ou em uma mquina que o servidor pode acessar por meio da rede. Quando um navegador
solicita uma pgina ou um arquivo da Web que est localizado em um servidor, este processa a requisio e retorna o recur-
so solicitado. Uma requisio contm o nome e o caminho do recurso desejado e o mtodo de comunicao (chamado de pro-
tocolo). Os documentos XHTML usam o HTTP (HyperText Transfer Protocol protocolo de transferncia de hipertexto).
A Figura L.3 envia os dados do formulrio para o servidor da Web, o qual passa os dados do formulrio para um script
CGI (Common Gateway Interface interface de interconexo 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 informaes
para o servidor. Em seguida, o servidor da Web envia as informaes na forma de um documento XHTML para o navegador
da Web. (Observao: esse exemplo demonstra a funcionalidade no lado do cliente. Se o formulrio for enviado dando um
clique em Submit Your Entries , ocorrer um erro).
Os formulrios podem conter componentes visuais e no-visuais. Os componentes visuais incluem botes para clicar
e outros componentes da interface com o usurio grfica, com a qual os usurios interagem. Os componentes no-visuais,
chamados entradas ocultas, armazenam todos os dados que o autor do documento especifica, como endereos de e-mail e
nomes de arquivos de documentos XHTML que agem como links. O formulrio comea na linha 23 com o elemento form.
O atributo method especifica o modo como os dados do formulrio so enviados para o servidor da Web.

4
5 
6 
7
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 fill out this form to help
18 us improve our site.</p>
19
20 
21 
22 
23 <form method = post action = /cgi-bin/formmail>
24
25 <p>
26
27 
28 
29 <input type = hidden name = recipient
30 value = deitel@deitel.com />
31
Figura L.3 Formulrio simples com campos ocultos e uma caixa de texto. (Parte 1 de 2.)
32 <input type = hidden name = subject

33 value = Feedback Form />
34
35 <input type = hidden name = redirect
36 value = main.html />
37 </p>
38
39 
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 
50 
51 
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>
Figura L.3 Formulrio simples com campos ocultos e uma caixa de texto. (Parte 2 de 2.)
Usando method = post possvel anexar os dados de formulrio requisitados pelo navegador, os quais contm 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 formulrio enviados como parte da requisio.
Por exemplo, um script pode assumir as informaes do formulrio e atualizar uma mailing list eletrnica. O outro valor
possvel, method = get, anexa os dados do formulrio diretamente ao final do URL. Por exemplo, o URL /cgi-bin/
formmail teria as informaes de formulrio name = bob anexadas a ele.
O atributo action da tag <form> especifica o URL de um script do servidor da Web. Nesse caso, ele especifica
um script que envia por e-mail os dados de formulrio para um endereo. 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 configu-
rado para usar o script corretamente.
As linhas 29 a 36 definem trs elementos input especificando os dados a serem fornecidos ao script que processa
o formulrio (tambm chamado de handler de formulrio). Esses trs elementos input tm o atributo type configurado
como hidden, o que permite que o autor do documento envie os dados de formulrio que no so inseridos por um usu-
rio para um script.
As trs entradas ocultas so 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 navegador ser redirecionado aps o envio do formulrio. Os dois outros atributos input so
name, que identifica o elemento input, e value, o qual fornece o valor que ser enviado (ou postado) para o servidor
da Web.
Boa prtica de programao L.1

Coloque os elementos input ocultos no incio de um formulrio, imediatamente aps 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 formulrio. Os
usurios podem digitar os dados nas caixas de texto. O elemento label (linhas 37 a 40) fornece aos usurios as informaes
sobre a finalidade do elemento input.

Esquecer de incluir um elemento label em cada elemento do formulrio um erro de projeto. Sem esses rtulos, os usurios
no podem determinar a finalidade dos elementos individuais do formulrio.
O atributo size do elemento input especifica o nmero de caracteres visveis na caixa de texto. O atributo opcional
maxlength limita o nmero da entrada de caracteres na caixa de texto. Nesse caso, o usurio no 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 boto que, quando
pressionado, faz o navegador enviar os dados do formulrio para o servidor da Web para processamento. O atributo value
define o texto que exibido no boto (o valor padro Submit). O elemento input reset permite que um usurio
reinicialize todos os elementos de form com seus valores padro. O atributo value do elemento input do tipo reset
configura o texto que exibido no boto (o valor padro Reset).
L.5 Formulrios XHTML mais complexos

Na seo anterior apresentamos os formulrios bsicos. Nesta seo apresentaremos os elementos e os atributos para a cria-
o de formulrios mais complexos. A Figura L.4 contm um formulrio que solicita retorno do usurio sobre um site Web.
O elemento textarea (linhas 42 a 44) insere uma caixa de texto de mltiplas linhas, chamada textarea (rea de
texto), no formulrio. O nmero de linhas especificado como o atributo rows, e o nmero de colunas especificado como
o atributo cols. Nesse exemplo, a textarea tem quatro linhas de altura por 36 caracteres de largura. Para exibir o texto
padro na rea de texto, coloque-o entre as tags <textarea> e </textarea>. O texto padro pode ser especificado 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 especificado. Uma caixa de senha
permite que os usurios insiram informaes confidenciais, como nmeros e senhas de cartes de crdito, e cria uma ms-
cara de entrada das informaes com asteriscos. O valor real de input enviado para o servidor da Web, no os asteriscos
que mascaram a entrada.
As linhas 60 a 78 apresentam a caixa de seleo do elemento form. As caixas de seleo permitem que os usurios
selecionem um conjunto de opes. Quando um usurio seleciona uma caixa de seleo, uma marca de seleo aparece na
caixa; caso contrrio, a caixa permanece vazia. Cada input checkbox cria uma nova caixa de seleo. Elas podem ser
usadas individualmente ou em grupos. Aquelas que pertencem a um grupo so designadas com o mesmo name (nesse caso,
thingsliked).

4
5 
7
9 <head>
11 </head>
12
13 <body>
14
16
19
21
22 <p>
25
28
31 </p>
32
33 <p>
34 <label>Name:
35 <input name = name type = text size = 25 />
36 </label>
37 </p>
38
39 
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 
48 
49 
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 />
Figura L.4 Formulrio com reas de texto, caixas de senha e caixas de seleo. (Parte 1 de 2.)
59
60 <label>Site design
61 <input name = thingsliked type = checkbox
62 value = Design /></label>
63
64 <label>Links
66 value = Links /></label>
67
68 <label>Ease of use
70 value = Ease /></label>
71
72 <label>Images
74 value = Images /></label>
75
76 <label>Source code
78 value = Code /></label>
79 </p>
80
81 <p>
84
85 <input type = reset value =
86 Clear Your Entries />
87 </p>
88
89 </form>
90
91 </body>
92 </html>
Figura L.4 Formulrio com reas de texto, caixas de senha e caixas de seleo. (Parte 2 de 2.)

Quando seu form tem diversas caixas de seleo com o mesmo name, voc deve ter certeza de que elas tm values diferentes;
caso contrrio, os scripts executados no servidor da Web no podero distingui-las.
Continuamos nossa discusso sobre os formulrios apresentando um terceiro exemplo com diversos outros elementos
de formulrio para as selees dos usurios (Figura L.5). Nesse exemplo apresentamos dois novos tipos de input. O primei-
ro o boto de rdio (ou, no jargo da Microsoft, botes de opo; linhas 90 a 113) especificado com o tipo radio. Os bo-
tes de rdio so semelhantes s caixas de seleo, exceto que apenas um boto de um grupo de botes pode ser selecionado
de cada vez. Todos os botes de rdio de um grupo tm o mesmo atributo name; eles se distinguem por seus atributos value
diferentes. O par atributo-valor checked = checked (linha 92) indica qual boto de rdio, se houver, ser selecionado
inicialmente. O atributo checked tambm se aplica s caixas de seleo.

Ao usar um grupo de botes de rdio em um formulrio, um erro lgico esquecer de configurar os atributos name com o mesmo
nome, o que permite ao usurio poder selecionar todos os botes de rdio ao mesmo tempo.
O elemento select (linhas 123 a 126) fornece uma lista suspensa na qual o usurio pode selecionar um item. O
atributo name identifica a lista suspensa. O elemento option (linhas 124 a 135) inclui os itens na lista suspensa. O atri-
buto selected do elemento option especifica qual item exibido inicialmente como o item selecionado do elemento
select.

4
5 
7
9 <head>
11 </head>
12
13 <body>
14
16
19
21
22 <p>
25
28
31 </p>
32
33 <p>
34 <label>Name:
Figura L.5 Formulrio incluindo botes de rdio e listas suspensas. (Parte 1 de 4.)
35 <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
58 value = Design />
59 </label>
60
61 <label>Links
63 value = Links />
64 </label>
65
66 <label>Ease of use
68 value = Ease />
69 </label>
70
71 <label>Images
73 value = Images />
74 </label>
75
76 <label>Source code
78 value = Code />
79 </label>
80
81 </p>
82
83 
84 
85 
86 
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 />
93 </label>
94
95 <label>Links from another site
97 value = link />
98 </label>
99
100 <label>Deitel.com Web site
102 value = deitel.com />
103 </label>
104
105 <label>Reference in a book
107 value = book />
108 </label>
109
110 <label>Other
112 value = other />
113 </label>
114
115 </p>
116
117 <p>
118 <label>Rate our site:
119
120 
121 
122 
123 <select name = rating>
124 <option selected = selected>Amazing</option>
125 <option>10</option>
135 <option>Awful</option>
136 </select>
137
138 </label>
139 </p>
140
141 <p>
144
145 <input type = reset value = Clear Your Entries />
146 </p>
147
148 </form>
149
150 </body>
151 </html>
L.6 Links internos

No Apndice K discutimos como fazer o link de uma pgina Web para outra. A Figura L.6 apresenta os links internos um
mecanismo que permite ao usurio pular entre as localizaes do mesmo documento. Os links internos so teis nos docu-
mentos longos que contm muitas sees. Um clique em um link interno permite que os usurios encontrem uma seo sem
ter de rolar todo o documento.

4
5 
6 
7
9 <head>
10 <title>C# How to Program - List</title>
11 </head>
12
13 <body>
14
15 
16 <p><a name = features></a></p>
17
18 <h1>The Best Features of the Internet</h1>
19
Figura L.6 Usando os links internos para tornar as pginas mais fceis de navegar. (Parte 1 de 3.)
20 

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 
66 <p><a name = ceos></a></p>
67
68 <h1>My 3 Favorite <em>CEOs</em></h1>
69
70 <p>
71
72 
73 <a href = #features>
74 Go to <em>Favorite Features</em>
75 </a>
76 </p>
77
78 <ol>
79 <li>Lawrence J. Ellison</li>
80 <li>Steve Jobs</li>
81 <li>Michael Dell</li>
82 </ol>
83
84 </body>
85 </html>
A linha 16 contm uma ncora nomeada (chamada features) para um link interno. Para vincular-se a esse tipo de
ncora dentro da mesma pgina 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 contm um link com a ncora features como seu destino.
A seleo desse link em um navegador da Web rola a janela do navegador para a ncora features da linha 16.
Observao de aparncia e comportamento L.1

Os links internos so teis nos documentos XHTML que contm grandes quantidades de informaes. Os links internos com diver-
sas sees da pgina facilitam a navegao: os usurios no precisam rolar a pgina para encontrar uma seo especfica.
Embora esse exemplo no demonstre, um link pode especificar um link interno em outro documento fornecendo o
nome do documento seguido por um sinal de cerquilha e a ncora nomeada:
href = pgina.html#nome
Por exemplo, para vincular uma ncora nomeada chamada booklist em books.html, href recebe a designao
books.html#booklist.
L.7 Criando e usando mapas de imagens

No Apndice K demonstramos como as imagens podem ser usadas como links com outros recursos da Internet. Nesta seo
apresentaremos outra tcnica para a vinculao 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 definem uma mapa de imagens por meio de um elemento map. O atributo id (linha 19) identifica
o mapa de imagem. Se id for omitido, o mapa no poder ser referenciado por uma imagem. Em breve discutiremos como
referenciar um mapa de imagens. As reas ativas so definidas com elementos area (como mostram as linhas 24 a 26). Os
atributos href (linha 24) especificam o destino do link (ou seja, o recurso com o qual ser feito o link). Os atributos shape
(linha 24) e coords (linha 25) especificam a forma e as coordenadas da rea ativa, respectivamente. O atributo alt (linha
26) fornece texto alternativo para o link.
1 <?xml version = 1.0 ?>

4
5 
6 
7
9 <head>
10 <title>C# How to Program - Image Map
11 </title>
12 </head>
13
14 <body>
15
16 <p>
17
18 
19 <map id = picture>
20
21 
22 
23 
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 
40 
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 
46 
47 <area href = mailto:deitel@deitel.com
48 shape = circle coords = 100,36,33
49 alt = E-mail the Deitels />
50 </map>
51
52 
53 
54 <img src = deitel.gif width = 200 height = 144
55 alt = Deitel logo usemap = #picture />
56 </p>
57
58 </body>
59 </html>
Figura L.7 Imagem com links ancorados a um mapa de imagens. (Parte 1 de 2.)
Figura L.7 Imagem com links ancorados a um mapa de imagens. (Parte 2 de 2.)

A no-especificao de um atributo id para um elemento map evita que um elemento img use os elementos area do mapa para
definir as reas ativas.
A marcao das linhas 24 a 26 cria uma rea ativa retangular (shape = rect) para as coordenadas especificadas
no atributo coords. Um par de coordenadas consiste em dois nmeros que representam a localizao de um ponto no eixo
x e no eixo y, respectivamente. O eixo x estende-se horizontalmente e o eixo y estende-se verticalmente a partir do canto
superior esquerdo da imagem. Cada ponto de uma imagem tem uma coordenada x-y exclusiva. Para as reas ativas retangu-
lares, as coordenadas requeridas so aquelas do canto superior esquerdo e inferior direito do retngulo. Nesse caso, o canto
inferior esquerdo do retngulo est localizado em 2 no eixo x e em 123 no eixo y. Isso indicado como (2, 123). O canto infe-
rior direito do retngulo est em (54, 143). As coordenadas so medidas em pixels.

A sobreposio das coordenadas de um mapa de imagens faz o navegador converter a primeira rea ativa que ele encontrar para
a rea.
A rea de mapa (linhas 41 a 43) designa o atributo shape poly com o fim de criar uma rea ativa com a forma de
um polgono usando as coordenadas do atributo coords. Essas coordenadas representam cada vrtice ou canto do polgono.
O navegador conecta esses pontos com as linhas para formar a rea da rea ativa.
A rea de mapa (linhas 47 a 49) designa o atributo shape circle visando a criar uma rea ativa circular. Nesse
caso, o atributo coords especifica as coordenadas do centro do crculo e o raio do crculo em pixels.
Para usar um mapa de imagens com um elemento img, o atributo usemap do elemento img recebe o id de um
mapa. As linhas 54 e 55 referenciam o mapa de imagens chamado picture. O mapa de imagens est localizado dentro
do mesmo documento, de modo que o linking interno usado.
L.8 Elementos meta

As pessoas usam os mecanismos de busca para encontrar sites teis na Web. Os mecanismos de busca em geral catalogam os
sites seguindo os links de uma pgina para outra e salvando as informaes de identificao e classificao de cada pgina.
Eles catalogam as pginas lendo o contedo de cada um dos elementos meta da pgina, os quais especificam as informaes
sobre um documento.
Dois atributos importantes do elemento meta so name, que identifica o tipo do elemento meta, e content, o
qual fornece as informaes que os mecanismos de busca usam para catalogar as pginas. A Figura L.8 apresenta o ele-
mento meta.
As linhas 14 a 16 demonstram um elemento meta keywords. O atributo content de meta fornece aos meca-
nismos de busca uma lista de palavras que descreve uma pgina. Essas palavras so comparadas com as palavras das requi-
sies de pesquisa. Assim, a incluso dos elementos meta e de suas informaes de content pode levar mais visitantes a
seu site.
As linhas 18 a 21 demonstram um elemento meta description. O atributo content meta fornece uma des-
crio de trs a quatro linhas para um site, escrita na forma de sentena. Os mecanismos de busca tambm usam essa descri-
o para catalogar seu site e, s vezes, para exibir essas informaes como parte dos resultados da pesquisa.
Observao de engenharia de software L.1

Os elementos meta no so visveis para os usurios e devem ser colocados dentro da seo head de seu documento XHTML.
Se eles no forem colocados nessa seo, no sero lidos pelos mecanismos de busca.

4
5 
6 
7
9 <head>
10 <title>C# How to Program - Welcome</title>
11
12 
13 
14 <meta name = keywords content = Web page, design,
15 XHTML, tutorial, personal, help, index, form,
16 contact, feedback, list, links, frame, deitel />
17
18 <meta name = description content = This Web site will
19 help you learn the basics of XHTML and Web page design
20 through the use of interactive examples and
21 instruction. />
22
23 </head>
24
25 <body>
26
27 <h1>Welcome to Our Web Site!</h1>
28
29 <p>
30 We have designed this site to teach about the wonders
31 of <strong><em>XHTML</em></strong>. <em>XHTML</em> is
32 better equipped than <em>HTML</em> to represent complex
33 data on the Internet. <em>XHTML</em> takes advantage of
34 XMLs strict syntax to ensure well-formedness. Soon you
35 will know about many of the great new features of
36 <em>XHTML.</em>
37 </p>
38
39 <p>Have Fun With the Site!</p>
40
41 </body>
42 </html>
Figura L.8 Usando meta para fornecer palavras-chave e descrio.
L.9 Elemento frameset

Todas as pginas Web que apresentamos neste livro tm a capacidade de se vincular a outras, mas podem exibir apenas uma
pgina de cada vez. A Figura L.9 usa os frames, os quais permitem que o navegador exiba mais de um documento XHTML
simultaneamente, para exibir os documentos das Figuras L.8 e L.10.
A maioria de nossos exemplos anteriores seguiu o tipo de documento XHTML exato. Esse exemplo em particular usa
o tipo de documento frameset um documento XHTML especfico para os framesets (conjuntos de frames ou quadros).
Esse novo tipo de documento especificado nas linhas 2 e 3. Ele exigido nos documentos que definem os framesets.
Um documento que define um frameset normalmente consiste em um elemento html que contm um elemento head
e um elemento frameset. A tag <frameset> (linha 24) informa ao navegador que a pgina contm frames. O atributo
cols especifica o layout da coluna do frameset. O valor de cols fornece a largura de cada frame, seja em pixels ou como
uma porcentagem da largura do navegador. Nesse caso, o atributo cols = 110,* informa ao navegador que existem dois
frames verticais. O primeiro frame se estende 110 pixels a partir do lado esquerdo da janela do navegador, e o segundo frame
preenche o restante da largura do navegador (indicado pelo asterisco). Da mesma maneira, o atributo frameset rows pode
ser usado para especificar o nmero de linhas e o tamanho de cada linha de um frameset.

2 <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Frameset//EN
3 http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd>
4
5 
6 
7
9 <head>
10 <title>C# How to Program - Main</title>
11
12 <meta name = keywords content = Webpage, design,
15
18 through the use of interactive examples
19 and instruction. />
20
21 </head>
22
23 
24 <frameset cols = 110,*>
25
26 
27 
28 <frame name = leftframe src = nav.html />
29 <frame name = main src = main.html />
30
31 <noframes>
32 <p>This page uses frames, but your navegador does not
33 support them.</p>
34
35 <p>Please, <a href = nav.html>follow this link to
36 browse our site without frames</a>.</p>
37 </noframes>
38
39 </frameset>
40 </html>
Figura L.9 O documento da Web contendo dois frames navegao e contedo. (Parte 1 de 2.)
Frame esquerdo Frame direito

leftframe main
Figura L.9 O documento da Web contendo dois frames navegao e contedo. (Parte 2 de 2.)
Os documentos que sero carregados no frameset so especificados com os elementos frame (as linhas 28 e 29
desse exemplo). O atributo src especifica o URL da pgina a ser exibida no frame. Cada frame tem os atributos name e
src. O primeiro frame (que cobre 110 pixels no lado esquerdo do frameset) se chama leftframe e exibe a pgina
nav.html (Figura L.10). O segundo frame se chama main e exibe a pgina main.html.
O atributo name identifica um frame e permite links em um frameset para especificar o frame de destino (target)
no qual um documento vinculado deve ser exibido quando o usurio der um clique no link. Por exemplo,
<a href = links.html target = main>
carrega links.html no frame cujo name main.

Nem todos os navegadores suportam frames. O XHTML fornece o elemento noframes (linhas 31 a 37) para permitir
que os projetistas de documento XHTML especifiquem o contedo para os navegadores que no suportam frames.
Dica de portabilidade L.1

Alguns navegadores no suportam frames. Use o elemento noframes dentro de um frameset para orientar os usurios para
uma verso sem frames de seu site.

2 <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
3 http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
4
5 
6 
7
9
10 <head>
11 <title>C# How to Program - Navigation Bar
12 </title>
13 </head>
14
15 <body>
16
17 <p>
18 <a href = links.html target = main>
19 <img src = buttons/links.jpg width = 65
20 height = 50 alt = Links Page />
21 </a><br />
22
23 <a href = list.html target = main>
24 <img src = buttons/list.jpg width = 65
25 height = 50 alt = List Example Page />
26 </a><br />
27
28 <a href = contact.html target = main>
29 <img src = buttons/contact.jpg width = 65
30 height = 50 alt = Contact Page />
31 </a><br />
32
33 <a href = header.html target = main>
34 <img src = buttons/header.jpg width = 65
35 height = 50 alt = Header Page />
36 </a><br />
37
38 <a href = table1.html target = main>
39 <img src = buttons/table.jpg width = 65
40 height = 50 alt = Table Page />
41 </a><br />
42
43 <a href = form.html target = main>
44 <img src = buttons/form.jpg width = 65
45 height = 50 alt = Feedback Form />
46 </a><br />
47 </p>
48
49 </body>
50 </html>
Figura L.10 Documento XHTML exibido no frame da esquerda da Figura L.9.
A Figura L.10 a pgina Web exibida no frame da esquerda da Figura L.9. Esse documento XHTML fornece os bo-
tes de navegao que, quando pressionados, determinam qual documento exibido no frame da direita.
A linha 29 (Figura L.9) exibe a pgino XHTML da Figura L.10. O atributo de ncora target (linha 18 da Figura
L.10) especifica que os documentos com links so carregados no frame main (linha 30 da Figura L.9). Um target pode
ser definido com diversos valores preedefinidos: _blank carrega a pgina em uma janela de navegador nova, _self
carrega a pgina no frame no qual o elemento de ncora aparece, e _top carrega a pgina na janela completa do navegador
(ou seja, remove o frameset).
L.10 Framesets aninhados

Voc pode usar o elemento frameset para criar layouts mais complexos em uma pgina Web aninhando os framesets,
como mostra a Figura L.11. O frameset aninhado nesse exemplo exibe os documentos XHTML das figuras L.7, L.8 e L.10.
O elemento frameset externo (linhas 23 a 41) define duas colunas. O frame da esquerda se estende nos primeiros
110 pixels a partir do lado esquerdo do navegador, e o frame da direita ocupa o restante da largura da janela. O elemento
frame da linha 24 especifica que o documento nav.html (Figura L.10) ser exibido na coluna da esquerda.
As linhas 28 a 31 definem um elemento frameset aninhado para a segunda coluna do frameset externo. Esse fra-
meset define duas linhas. A primeira linha se estende a 175 pixels a partir da parte superior da janela do navegador, e a
segunda ocupa o restante da altura da janela do navegador, como indica rows = 175, *. O elemento frame da linha 29
especifica que a primeira linha do frameset aninhado exibir picture.html (Figura L.7). O elemento frame da linha
30 especifica que a segunda linha do frameset aninhado exibir main.html (Figura L.8).
Dica de teste e depurao L.2

Ao usar os elementos frameset aninhados, recue cada nvel da tag <frame>. Essa prtica torna a pgina mais clara e fcil
de depurar.
Neste apndice apresentamos o XHTML para marcar informaes nas tabelas, criar formulrios para reunir entrada,
vincular sees dentro do mesmo documento, usar as tags <meta> e criar os frames.

2 <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Frameset//EN
3 http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd>
4
5 
6 
7
9 <head>
10 <title>C# How to Program - Main</title>
11
12 <meta name = keywords content = Webpage, design,
15
18 through the use of interactive examples
19 and instruction. />
20
21 </head>
22
23 <frameset cols = 110,*>
24 <frame name = leftframe src = nav.html />
25
Figura L.11 O site Web com frames e um frameset aninhado. (Parte 1 de 2.)
26 

27 
28 <frameset rows = 175,*>
29 <frame name = picture src = picture.html />
30 <frame name = main src = main.html />
31 </frameset>
32
33 <noframes>
34 <p>This page uses frames, but your navegador does not
35 support them.</p>
36
37 <p>Please, <a href = nav.html>follow this link to
38 browse our site without frames</a>.</p>
39 </noframes>
40
41 </frameset>
42 </html>
O frame da direita
contm estes dois
frames aninhados.
Frame da esquerda
leftframe
Figura L.11 O site Web com frames e um frameset aninhado. (Parte 2 de 2.)
L.11 Recursos da Internet e da World Wide Web

courses.e-survey.net.au/xhtml/index.html
O site Web Page Design XHTML fornece descries e exemplos dos diversos recursos do XHTML, como links, tabelas, frames
e formulrios. Os usurios podem enviar perguntas e comentrios por e-mail para a equipe de suporte do Web Page Design.
www.vbxml.com/xhtml/articles/xhtml_tables
O site Web VBXML.com contm um tutorial sobre como criar tabelas em XHTML.
www.webreference.com/xml/reference/xhtml.html
Essa pgina Web contm uma lista das tags XHTML mais usadas, como as de cabealho, tabela, frame e formulrio. Ela
tambm fornece uma descrio para cada tag.
Resumo
As tabelas XHTML marcam os dados tabulares e so um dos recursos mais usados do XHTML.
O elemento table define uma tabela XHTML. O atributo border especifica a largura da borda da tabela em pixels. As tabelas sem
bordas definem esse atributo como 0.
O elemento summary resume o contedo da tabela e usado pelos dispositivos de fala para tornar a tabela mais acessvel para os
usurios deficientes visuais.
O elemento caption descreve o contedo da tabela. O texto dentro da tag <caption> exibido acima da tabela na maioria dos
navegadores.
Uma tabela pode ser dividida em trs sees distintas: cabealho (thead), corpo (tbody) e rodap (tfoot). A seo de cabealho
contm informaes como os ttulos das tabelas e os cabealhos das colunas. O corpo da tabela contm os dados primrios da tabela.
O rodap contm as informaes secundrias, como as notas de rodap.
O elemento tr, ou linha de tabela, define as linhas individuais de tabela. O elemento th define uma clula de cabealho. O texto
dos elementos th em geral centralizado e exibido em negrito na maioria dos navegadores. Esse elemento pode estar presente em
qualquer seo da tabela.
Os dados dentro de uma linha so definidos com os elementos td, ou dados de tabela.
O elemento colgroup agrupa e formata as colunas. Cada elemento col pode formatar qualquer nmero de colunas (especificado
com o atributo span).
O autor do documento tem a capacidade de incorporar as clulas de dados com os atributos rowspan e colspan. Os valores de-
signados para esses atributos especificam o nmero de linhas ou colunas ocupadas pela clula. Esses atributos podem ser colocados
dentro de qualquer tag de clula de dados.
O XHTML fornece formulrios para reunir informaes dos usurios. Os formulrios contm componentes visuais, como os botes
nos quais os usurios clicam. Os formulrios tambm contm componentes no-visuais, chamados entradas ocultas, as quais so usadas
para armazenar quaisquer dados, como endereos de e-mail e nomes de arquivo de documentos XHTML utilizados para links.
Um formulrio comea com o elemento form. O atributo method especifica como os dados do formulrio so enviados para o ser-
vidor na Web.
A entrada text insere uma caixa de texto no formulrio. As caixas de texto permitem que o usurio insira dados.
O atributo size do elemento input especifica o nmero dos caracteres visveis do elemento input. O atributo opcional max-
length limita o nmero da entrada de caracteres em uma caixa de texto.
A entrada submit envia os dados inseridos no formulrio do servidor da Web para o processamento. A maioria dos navegadores
da Web cria um boto que envia os dados do formulrio quando clicado. A entrada reset permite que um usurio reinicialize
todos os elementos form com seus valores padro.
O elemento textarea insere uma caixa de texto de mltiplas linhas, chamada textarea, em um formulrio. O nmero de linhas
da textarea especificado com o atributo rows e o nmero de colunas (ou seja, os caracteres) com o atributo cols.
A entrada password insere uma caixa de senha em um formulrio. Uma caixa de senha permite que os usurios insiram infor-
maes confidenciais, como nmeros e senhas de cartes de crdito mascarando a entrada das informaes com outro caractere. Os
asteriscos so o caractere de mscara usado na maioria das caixas de senha. A entrada do valor real enviada para o servidor da Web,
no os asteriscos que mascaram a entrada.
A entrada da caixa de seleo permite que o usurio faa uma seleo. Quando a caixa est selecionada, ela exibe uma marca; caso
contrrio, ela fica vazia. As caixas de seleo podem ser usadas individualmente e em grupos. As caixas de seleo que fazem parte
do mesmo grupo tm o mesmo name.
Um boto de rdio semelhante em funo e uso a uma caixa de seleo; porm, apenas um boto de rdio de um grupo pode estar sele-
cionado de cada vez. Todos os botes de rdio de um grupo tm o mesmo valor do atributo name, mas values de atributo diferentes.
A entrada select fornece uma lista de itens suspensa. O atributo name identifica a lista suspensa. O elemento option inclui itens
na lista suspensa. O atributo selected, assim como o atributo checked dos botes de rdio e das caixas de seleo, especifica o
item de lista que exibido inicialmente.
Os mapas de imagens designam determinadas sees de uma imagem como links. Esses links so chamados mais adequadamente de
reas ativas (hotspots).
Os mapas de imagem so definidos com os elementos map. O atributo id identifica o mapa de imagens. As reas ativas so definidas
com o elemento area. O atributo href especifica o destino do link. Os atributos shape e coords especificam a forma e as coor-
denadas da rea ativa, respectivamente, e alt fornece o texto alternativo.
Uma forma como os mecanismos de busca catalogam as pginas ler o contedo dos elementos meta. Dois atributos importantes do
elemento meta so name, que identifica o tipo do elemento meta, e content, o qual fornece as informaes que um mecanismo
de busca usa para catalogar uma pgina.
Os frames permitem que o navegador exiba mais de um documento XHTML simultaneamente. O elemento frameset informa o
navegador de que a pgina contm frames. Nem todos os navegadores suportam frames. O XHTML fornece o elemento noframes
para especificar o contedo alternativo dos navegadores que no suportam frames.
Terminologia
radio (valor de atributo) elemento form
<thead>...</thead> elemento frame
rea ativa elemento frameset
atributo action elemento frameset aninhado
atributo border elemento hidden input
atributo border elemento img
atributo checked elemento input
atributo cols elemento map
atributo colspan elemento meta
atributo href elemento noframes
atributo maxlenght elemento table
atributo method elemento tbody
atributo name elemento td
atributo rows (textarea) elemento textarea
atributo rowspan (tr) elemento tfoot (rodap de tabela)
atributo selected elemento tr (linha de tabela)
atributo size (input) formulrio
atributo type formulrio XHTML
atributo usemap frame de navegao
atributo valign (th) links internos
atributo value mapa de imagens
caixa de seleo servidor da Web
caixa de senha tag <caption>
clula de cabealho tag aninhada
coordenadas x-y target = _blank
elemento area target = _self
elemento col target = _top
elemento colgroup textarea
elemento coords
Exerccios de auto-reviso
L.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 deve ser igual.
b) Os framesets podem ser aninhados.
c) Voc tem um limite mximo de 100 links internos por pgina.
d) Todos os navegadores podem converter framesets.
L.2 Preencha os espaos em branco de cada uma destas declaraes:
a) A designao do atributo type ___________________ em um elemento input insere um boto que, quando clicado, limpa
o contedo do formulrio.
b) O layout de um frameset definido incluindo o atributo ___________________ ou o atributo ___________________ den-
tro da tag <frameset>.
c) O elemento ___________________ marca uma linha de tabela.
d) ___________________ geralmente so usados como os caracteres de mscara em uma caixa de senha.
e) As formas comuns usadas nos mapas de imagens so __________________, __________________ e __________________.
L.3 Escreva a marcao XHTML para realizar cada uma destas tarefas:
a) Insira uma pgina Web com frames, com o primeiro frame se estendendo a 300 pixels pela pgina e a partir do lado esquerdo.
b) Insira uma tabela com uma borda de 8.
c) Indique o contedo alternativo de um frameset.

d) Insira um mapa de imagens em uma pgina usando deitel.gif como uma imagem e map com name = hello como o
mapa de imagens e defina o texto alt como hello.
Respostas dos exerccios de auto-reviso

L.1 a) Falsa. Voc pode especificar a largura de qualquer coluna, seja em pixels seja como uma porcentagem da largura da tabela.
b) Verdadeira. c) Falsa. Voc pode ter um nmero ilimitado de links internos. d) Falsa. Alguns navegadores no conseguem conver-
ter um frameset e devem, portanto, usar as informaes que voc inclui dentro das tags <noframes>...</noframes>.
L.2 a) reset. b) cols, rows. c) tr. d) asteriscos. e) poly (polgonos), circles, rect (retngulos).
L.3 a) <frameset cols = 300,*>...</frameset>

b) <table border = 8>...</table>
c) <noframes>...</noframes>
d) <img src = deitel.gif alt = hello usemap = #hello />
Exerccios
L.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
L.5 Como ser o frameset produzido pelo cdigo abaixo? Vamos assumir que as pginas referenciadas estejam em branco com
segundos planos brancos e que as dimenses da tela sejam 800 por 600. Faa um rascunho 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>
L.6 Escreva a marcao XHTML para criar um frame com um sumrio no lado esquerdo da janela e faa com que cada entrada do
sumrio use links internos para rolar o frame do documento at a subseo apropriada.
L.7 Crie a marcao XHTML que fornece a tabela mostrada na Figura L.12. Se precisar, use as tags <em> e <strong>. A imagem
(camel.gif) est includa no diretrio de exemplos do Apndice L do CD-ROM que acompanha este livro.
L.8 Escreva um documento XHTML que produz a tabela mostrada na Figura L.13.
L.9 Uma universidade local pediu para voc criar um documento XHTML que permita aos alunos em potencial fornecerem o feedback
sobre sua visita ao campus. Seu documento XHTML deve conter um formulrio com caixas de texto para nome, endereo e e-mail.
Fornea caixas de seleo que permitam aos alunos indicar o que eles mais gostaram do campus. Essas caixas de seleo devem
incluir alunos, localizao, campus, atmosfera, dormitrios e esportes. Fornea tambm botes de rdio que perguntem aos alunos
como eles se interessaram pela universidade. As opes devem incluir amigos, televiso, Internet e outras. Alm disso, fornea uma
rea de texto para comentrios adicionais, um boto de envio e um boto de reinicializao (reset).
L.10 Crie um documento XHTML chamado Como obter boas notas. Use as tags <meta> para incluir uma srie de palavras-chave que
descrevam seu documento.
L.11 Crie um documento XHTML que exibe uma tabela de jogo-da-velha com o jogador X como vencedor. Use <h2> para marcar os Xs
e os Os. Centralize as letras em cada clula horizontalmente. D um ttulo ao jogo usando uma tag <h1>. Esse ttulo deve abranger
as trs colunas. Defina a borda da tabela como 1.
Figura L.12 A tabelo XHTML do Exerccio L.7.
Figura L.13 A tabelo XHTML do Exerccio L.8.

Cs HTP - App L PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Cs HTP - App L PDF

Uploaded by

Copyright:

Available Formats

L

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

Sim, da tabela de minha memria

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

L.2 Tabelas XHTML bsicas

Dica de teste e depurao L.1

1 <?xml version = 1.0?>

Figura L.1 Tabela XHTML. (Parte 1 de 3.)

Figura L.1 Tabela XHTML. (Parte 3 de 3.)

L.3 Tabelas e formatao intermedirias em XHTML

1 <?xml version = 1.0?>

Figura L.2 Tabela XHTML complexa. (Parte 1 de 2.)

Figura L.2 Tabela XHTML complexa. (Parte 2 de 2.)

Erro de programao comum L.1

L.4 Formulrios XHTML bsicos

1 <?xml version = 1.0?>

32 <input type = hidden name = subject

Boa prtica de programao L.1

Erro de programao comum L.2

L.5 Formulrios XHTML mais complexos

1 <?xml version = 1.0?>

Erro de programao comum L.3

Erro de programao comum L.4

1 <?xml version = 1.0?>

35 <input name = name type = text size = 25 />

L.6 Links internos

1 <?xml version = 1.0?>

20

Observao de aparncia e comportamento L.1

L.7 Criando e usando mapas de imagens

1 <?xml version = 1.0 ?>

Erro de programao comum L.5

Erro de programao comum L.6

L.8 Elementos meta

Observao de engenharia de software L.1

1 <?xml version = 1.0?>

L.9 Elemento frameset

1 <?xml version = 1.0?>

Frame esquerdo Frame direito

carrega links.html no frame cujo name main.

Dica de portabilidade L.1

1 <?xml version = 1.0?>

L.10 Framesets aninhados

Dica de teste e depurao L.2

1 <?xml version = 1.0?>

26

L.11 Recursos da Internet e da World Wide Web

c) Indique o contedo alternativo de um frameset.

Respostas dos exerccios de auto-reviso

L.3 a) <frameset cols = 300,*>...</frameset>

<frameset rows = 20%,*>

Figura L.12 A tabelo XHTML do Exerccio L.7.

Figura L.13 A tabelo XHTML do Exerccio L.8.

You might also like