Cs HTP - App L

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 L.2 L.3 L.4 L.5 L.6 L.7 L.8 L.9 L.10 L.11 Introduo Tabelas XHTML bsicas Tabelas e formatao intermedirias em XHTML Formulrios XHTML bsicos Formulrios XHTML mais complexos Links internos Criando e usando mapas de imagens Elementos meta Elemento frameset Framesets aninhados 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 apresentao 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 nal deste apndice, voc estar familiarizado com os recursos mais usados 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 denidas com o elemento table. As linhas 16 a 18 especicam a tag inicial de um elemento de tabela com diversos atributos. O atributo border especica a largura da borda da tabela em pixels. Para criar uma tabela sem uma borda dena border como 0. Esse exemplo designa o atributo width 40% para denir a largura da tabela como 40% da largura do navegador. Um desenvolvedor tambm pode denir o atributo width com um nmero especco 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
2 3 4 5 6 7 8 9 10
<?xml version = 1.0?> <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>
 -->
<html xmlns = http://www.w3.org/1999/xhtml> <head> <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 12 13 14 15 16 17
</head> <body>  <table border = 1 width = 40% summary = This table provides information about the price of fruit>   <caption><strong>Price of Fruit</strong></caption>   <thead> <tr>  <th>Fruit</th>  <th>Price</th> </tr> </thead>  <tbody> <tr> <td>Apple</td>  <td>$0.25</td> </tr> <tr> <td>Orange</td> <td>$0.50</td> </tr> <tr> <td>Banana</td> <td>$1.00</td> </tr> <tr> <td>Pineapple</td> <td>$2.00</td> </tr> </tbody>  -->
18
19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68
L-144
C# Como Programar
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 decincias 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 decincia 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) denida 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) dene uma linha de tabela individual. As colunas da seo de ttulo so denidas 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 identicados em um elemento tbody. As clulas de dados contm dados individuais que so denidos com os elementos td (dados de tabela). A seo de rodap (linhas 58 a 63) denida 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 apresentamos 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) especica 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, denimos 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 gura 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 especicam 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 gura 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 (contendo Camelid comparison e Approximates as of 9/2002) e abranger quatro clulas.
L-145
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58
<?xml version = 1.0?> <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>   <html xmlns = http://www.w3.org/1999/xhtml> <head> <title>C# How to Program - Tables</title> </head> <body> <h1>Table Example Page</h1> <table border = 1> <caption>Here is a more complex sample table.</caption>  <th rowspan = 2> <img src = camel.gif width = 205 height = 167 alt = Picture of a camel /> </th>  <th colspan = 4 valign = top> <h1>Camelid comparison</h1><br /> <p>Approximate as of 9/2002</p> </th> </tr> <tr valign = bottom> <th># of Humps</th> <th>Indigenous region</th> <th>Spits?</th> <th>Produces Wool?</th> </tr> </thead> <tbody> --> --> --> -->
--> -->
Figura L.2 Tabela XHTML complexa. (Parte 1 de 2.)
L-146
C# Como Programar
59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78
<tr> <th>Camels (bactrian)</th> <td>2</td> <td>Africa/Asia</td> <td rowspan = 2>Llama</td> <td rowspan = 2>Llama</td> </tr> <tr> <th>Llamas</th> <td>1</td> <td>Andes Mountains</td> </tr> </tbody> </table> </body> </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 modicadas 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 zer 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 dene 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-147
L.4 Formulrios XHTML bsicos

Ao pesquisarem os sites Web os usurios quase sempre precisam fornecer informaes como os endereos de correio eletrnico, 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 fornece acesso aos recursos de um site (ou seja, os documentos ou as imagens XHTML). Esses recursos esto localizados na mesma 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 recurso solicitado. Uma requisio contm o nome e o caminho do recurso desejado e o mtodo de comunicao (chamado de protocolo). 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 grca, com a qual os usurios interagem. Os componentes no-visuais, chamados entradas ocultas, armazenam todos os dados que o autor do documento especica, 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 especica o modo como os dados do formulrio so enviados para o servidor da Web.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
<?xml version = 1.0?> <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>  -->
<html xmlns = http://www.w3.org/1999/xhtml> <head> <title>C# How to Program - Forms</title> </head> <body> <h1>Feedback Form</h1> <p>Please ll out this form to help us improve our site.</p>    <form method = post action = /cgi-bin/formmail> <p>   <input type = hidden name = recipient value = deitel@deitel.com />
Figura L.3 Formulrio simples com campos ocultos e uma caixa de texto. (Parte 1 de 2.)
L-148
C# Como Programar
32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62
<input type = hidden name = subject value = Feedback Form /> <input type = hidden name = redirect value = main.html /> </p>  <p> <label>Name: <input name = name type = text size = 25 maxlength = 30 /> </label> </p> <p>    <input type = submit value = Submit Your Entries /> <input type = reset value = Clear Your Entries /> </p> </form> </body> </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 nal do URL. Por exemplo, o URL /cgi-bin/ formmail teria as informaes de formulrio name = bob anexadas a ele.
L-149
O atributo action da tag <form> especica o URL de um script do servidor da Web. Nesse caso, ele especica 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 congurado para usar o script corretamente. As linhas 29 a 36 denem trs elementos input especicando 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 congurado como hidden, o que permite que o autor do documento envie os dados de formulrio que no so inseridos por um usurio 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 identica 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 nalidade do elemento input. Erro de programao comum L.2
Esquecer de incluir um elemento label em cada elemento do formulrio um erro de projeto. Sem esses rtulos, os usurios no podem determinar a nalidade dos elementos individuais do formulrio.
O atributo size do elemento input especica 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 dene 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 congura 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 criao 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 especicado como o atributo rows, e o nmero de colunas especicado 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 especicado 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 especicado. Uma caixa de senha permite que os usurios insiram informaes condenciais, como nmeros e senhas de cartes de crdito, e cria uma mscara 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).
L-150
C# Como Programar
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58
<?xml version = 1.0?> <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>  -->
<html xmlns = http://www.w3.org/1999/xhtml> <head> <title>C# How to Program - Forms</title> </head> <body> <h1>Feedback Form</h1> <p>Please ll out this form to help us improve our site.</p> <form method = post action = /cgi-bin/formmail> <p> <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 /> </p> <p> <label>Name: <input name = name type = text size = 25 /> </label> </p>  <p> <label>Comments:<br /> <textarea name = comments rows = 4 cols = 36>Enter your comments here. </textarea> </label></p>    <p> <label>E-mail Address: <input name = e-mail type = password size = 25 /> </label> </p> <p> <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.)
L-151
59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92
<label>Site design <input name = thingsliked type = checkbox value = Design /></label> <label>Links <input name = thingsliked type = checkbox value = Links /></label> <label>Ease of use <input name = thingsliked type = checkbox value = Ease /></label> <label>Images <input name = thingsliked type = checkbox value = Images /></label> <label>Source code <input name = thingsliked type = checkbox value = Code /></label> </p> <p> <input type = submit value = Submit Your Entries /> <input type = reset value = Clear Your Entries /> </p> </form> </body> </html>
Figura L.4 Formulrio com reas de texto, caixas de senha e caixas de seleo. (Parte 2 de 2.)
L-152
C# Como Programar

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 primeiro o boto de rdio (ou, no jargo da Microsoft, botes de opo; linhas 90 a 113) especicado com o tipo radio. Os botes 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. Erro de programao comum L.4
Ao usar um grupo de botes de rdio em um formulrio, um erro lgico esquecer de congurar 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 identica a lista suspensa. O elemento option (linhas 124 a 135) inclui os itens na lista suspensa. O atributo selected do elemento option especica qual item exibido inicialmente como o item selecionado do elemento select.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34
<?xml version = 1.0?> <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>  -->
<html xmlns = http://www.w3.org/1999/xhtml> <head> <title>C# How to Program - Forms</title> </head> <body> <h1>Feedback Form</h1> <p>Please ll out this form to help us improve our site.</p> <form method = post action = /cgi-bin/formmail> <p> <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 /> </p> <p> <label>Name:
Figura L.5 Formulrio incluindo botes de rdio e listas suspensas. (Parte 1 de 4.)
L-153
35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92
<input name = name type = text size = 25 /> </label> </p> <p> <label>Comments:<br /> <textarea name = comments rows = 4 cols = 36></textarea> </label> </p> <p> <label>E-mail Address: <input name = e-mail type = password size = 25 /> </label> </p> <p> <strong>Things you liked:</strong><br /> <label>Site design <input name = thingsliked type = checkbox value = Design /> </label> <label>Links <input name = thingsliked type = checkbox value = Links /> </label> <label>Ease of use <input name = thingsliked type = checkbox value = Ease /> </label> <label>Images <input name = thingsliked type = checkbox value = Images /> </label> <label>Source code <input name = thingsliked type = checkbox value = Code /> </label> </p>  --> --> -->
L-154
C# Como Programar
93 </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 121  122  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 </label> 138 139 </p> 140 <p> 141 142 <input type = submit value = 143 Submit Your Entries /> 144 145 <input type = reset value = Clear Your Entries /> 146 </p> 147 </form> 148 149 150 </body> 151 </html>
L-155
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 documentos 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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
<?xml version = 1.0?> <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>  -->
<html xmlns = http://www.w3.org/1999/xhtml> <head> <title>C# How to Program - List</title> </head> <body>  <p><a name = features></a></p> <h1>The Best Features of the Internet</h1>
Figura L.6 Usando os links internos para tornar as pginas mais fceis de navegar. (Parte 1 de 3.)
L-156
C# Como Programar
20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77
 <p> <a href = #ceos>Go to <em>Favorite CEOs</em></a> </p> <ul> <li>You can meet people from countries around the world.</li> <li>You have access to new media as it becomes public: <ul> <li>New games</li> <li>New applications <ul> <li>For Business</li> <li>For Pleasure</li> </ul> </li> <li>Around the clock news</li> <li>Search Engines</li> <li>Shopping</li> <li>Programming <ul> <li>XHTML</li> <li>Java</li> <li>Dynamic HTML</li> <li>Scripts</li> <li>New languages</li> </ul> </li> </ul> </li> <li>Links</li> <li>Keeping in touch with old friends</li> <li>It is the technology of the future!</li> </ul>  <p><a name = ceos></a></p> <h1>My 3 Favorite <em>CEOs</em></h1> <p>  <a href = #features> Go to <em>Favorite Features</em> </a> </p>
L-157
78 79 80 81 82 83 84 85
<ol> <li>Lawrence J. Ellison</li> <li>Steve Jobs</li> <li>Michael Dell</li> </ol> </body> </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 diversas sees da pgina facilitam a navegao: os usurios no precisam rolar a pgina para encontrar uma seo especca.
Embora esse exemplo no demonstre, um link pode especicar 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 denem uma mapa de imagens por meio de um elemento map. O atributo id (linha 19) identica 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 denidas com elementos area (como mostram as linhas 24 a 26). Os atributos href (linha 24) especicam o destino do link (ou seja, o recurso com o qual ser feito o link). Os atributos shape (linha 24) e coords (linha 25) especicam a forma e as coordenadas da rea ativa, respectivamente. O atributo alt (linha 26) fornece texto alternativo para o link.
L-158
C# Como Programar
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59
<?xml version = 1.0 ?> <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>  -->
<html xmlns = http://www.w3.org/1999/xhtml> <head> <title>C# How to Program - Image Map </title> </head> <body> <p>  <map id = picture>   <area shape = poly alt = E-mail the Deitels coords = 162,25,154,39,158,54,169,51,183,39,161,26 href = mailto:deitel@deitel.com />   <area href = mailto:deitel@deitel.com shape = circle coords = 100,36,33 alt = E-mail the Deitels /> </map>  --> --> --> -->
Figura L.7 Imagem com links ancorados a um mapa de imagens. (Parte 1 de 2.)
L-159
Figura L.7 Imagem com links ancorados a um mapa de imagens. (Parte 2 de 2.)

A no-especicao de um atributo id para um elemento map evita que um elemento img use os elementos area do mapa para denir as reas ativas.
A marcao das linhas 24 a 26 cria uma rea ativa retangular (shape = rect) para as coordenadas especicadas 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 retangulares, 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 inferior direito do retngulo est em (54, 143). As coordenadas so medidas em pixels. Erro de programao comum L.6
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 m 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 especica 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 identicao e classicao de cada pgina. Eles catalogam as pginas lendo o contedo de cada um dos elementos meta da pgina, os quais especicam as informaes sobre um documento. Dois atributos importantes do elemento meta so name, que identica 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 elemento meta.
L-160
C# Como Programar
As linhas 14 a 16 demonstram um elemento meta keywords. O atributo content de meta fornece aos mecanismos de busca uma lista de palavras que descreve uma pgina. Essas palavras so comparadas com as palavras das requisies 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 descrio de trs a quatro linhas para um site, escrita na forma de sentena. Os mecanismos de busca tambm usam essa descrio 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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42
<?xml version = 1.0?> <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>  -->
<html xmlns = http://www.w3.org/1999/xhtml> <head> <title>C# How to Program - Welcome</title>  -->
<meta name = description content = This Web site will help you learn the basics of XHTML and Web page design through the use of interactive examples and instruction. /> </head> <body> <h1>Welcome to Our Web Site!</h1> <p> We have designed this site to teach about the wonders of <strong><em>XHTML</em></strong>. <em>XHTML</em> is better equipped than <em>HTML</em> to represent complex data on the Internet. <em>XHTML</em> takes advantage of XMLs strict syntax to ensure well-formedness. Soon you will know about many of the great new features of <em>XHTML.</em> </p> <p>Have Fun With the Site!</p> </body> </html>
Figura L.8 Usando meta para fornecer palavras-chave e descrio.
L-161
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 especco para os framesets (conjuntos de frames ou quadros). Esse novo tipo de documento especicado nas linhas 2 e 3. Ele exigido nos documentos que denem os framesets. Um documento que dene 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 especica 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 especicar o nmero de linhas e o tamanho de cada linha de um frameset.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40
<?xml version = 1.0?> <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Frameset//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd>  -->
<html xmlns = http://www.w3.org/1999/xhtml> <head> <title>C# How to Program - Main</title> <meta name = keywords content = Webpage, design, XHTML, tutorial, personal, help, index, form, contact, feedback, list, links, frame, deitel /> <meta name = description content = This Web site will help you learn the basics of XHTML and Web page design through the use of interactive examples and instruction. /> </head>  <frameset cols = 110,*>   <frame name = leftframe src = nav.html /> <frame name = main src = main.html /> <noframes> <p>This page uses frames, but your navegador does not support them.</p> <p>Please, <a href = nav.html>follow this link to browse our site without frames</a>.</p> </noframes> </frameset> </html>
Figura L.9 O documento da Web contendo dois frames navegao e contedo. (Parte 1 de 2.)
L-162
C# Como Programar
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 especicados com os elementos frame (as linhas 28 e 29 desse exemplo). O atributo src especica 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 identica um frame e permite links em um frameset para especicar 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.
L-163
Nem todos os navegadores suportam frames. O XHTML fornece o elemento noframes (linhas 31 a 37) para permitir que os projetistas de documento XHTML especiquem 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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50
<?xml version = 1.0?> <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>  -->
<html xmlns = http://www.w3.org/1999/xhtml> <head> <title>C# How to Program - Navigation Bar </title> </head> <body> <p> <a href = links.html target = main> <img src = buttons/links.jpg width = 65 height = 50 alt = Links Page /> </a><br /> <a href = list.html target = main> <img src = buttons/list.jpg width = 65 height = 50 alt = List Example Page /> </a><br /> <a href = contact.html target = main> <img src = buttons/contact.jpg width = 65 height = 50 alt = Contact Page /> </a><br /> <a href = header.html target = main> <img src = buttons/header.jpg width = 65 height = 50 alt = Header Page /> </a><br /> <a href = table1.html target = main> <img src = buttons/table.jpg width = 65 height = 50 alt = Table Page /> </a><br /> <a href = form.html target = main> <img src = buttons/form.jpg width = 65 height = 50 alt = Feedback Form /> </a><br /> </p> </body> </html>
Figura L.10 Documento XHTML exibido no frame da esquerda da Figura L.9.
L-164
C# Como Programar
A Figura L.10 a pgina Web exibida no frame da esquerda da Figura L.9. Esse documento XHTML fornece os botes 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) especica que os documentos com links so carregados no frame main (linha 30 da Figura L.9). Um target pode ser denido com diversos valores preedenidos: _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 guras L.7, L.8 e L.10. O elemento frameset externo (linhas 23 a 41) dene 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 especica que o documento nav.html (Figura L.10) ser exibido na coluna da esquerda. As linhas 28 a 31 denem um elemento frameset aninhado para a segunda coluna do frameset externo. Esse frameset dene 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 especica que a primeira linha do frameset aninhado exibir picture.html (Figura L.7). O elemento frame da linha 30 especica 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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
<?xml version = 1.0?> <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Frameset//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd>   <html xmlns = http://www.w3.org/1999/xhtml> <head> <title>C# How to Program - Main</title> <meta name = keywords content = Webpage, design, XHTML, tutorial, personal, help, index, form, contact, feedback, list, links, frame, deitel /> <meta name = description content = This Web site will help you learn the basics of XHTML and Web page design through the use of interactive examples and instruction. /> </head> <frameset cols = 110,*> <frame name = leftframe src = nav.html />
Figura L.11 O site Web com frames e um frameset aninhado. (Parte 1 de 2.)
L-165
26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42
  <frameset rows = 175,*> <frame name = picture src = picture.html /> <frame name = main src = main.html /> </frameset> <noframes> <p>This page uses frames, but your navegador does not support them.</p> <p>Please, <a href = nav.html>follow this link to browse our site without frames</a>.</p> </noframes> </frameset> </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.
L-166
C# Como Programar
Resumo
As tabelas XHTML marcam os dados tabulares e so um dos recursos mais usados do XHTML. O elemento table dene uma tabela XHTML. O atributo border especica a largura da borda da tabela em pixels. As tabelas sem bordas denem 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 decientes 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, dene as linhas individuais de tabela. O elemento th dene 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 denidos 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 (especicado 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 designados para esses atributos especicam 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 especica como os dados do formulrio so enviados para o servidor 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 especica o nmero dos caracteres visveis do elemento input. O atributo opcional maxlength 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 especicado 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 informaes condenciais, 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 ca 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 selecionado 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 identica 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, especica 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 denidos com os elementos map. O atributo id identica o mapa de imagens. As reas ativas so denidas com o elemento area. O atributo href especica o destino do link. Os atributos shape e coords especicam a forma e as coordenadas da rea ativa, respectivamente, e alt fornece o texto alternativo.
L-167
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 identica 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 especicar o contedo alternativo dos navegadores que no suportam frames.
Terminologia
radio (valor de atributo) <thead>...</thead> rea ativa atributo action atributo border atributo border atributo checked atributo cols atributo colspan atributo href atributo maxlenght atributo method atributo name atributo rows (textarea) atributo rowspan (tr) atributo selected atributo size (input) atributo type atributo usemap atributo valign (th) atributo value caixa de seleo caixa de senha clula de cabealho coordenadas x-y elemento area elemento col elemento colgroup elemento coords elemento form elemento frame elemento frameset elemento frameset aninhado elemento hidden input elemento img elemento input elemento map elemento meta elemento noframes elemento table elemento tbody elemento td elemento textarea elemento tfoot (rodap de tabela) elemento tr (linha de tabela) formulrio formulrio XHTML frame de navegao links internos mapa de imagens servidor da Web tag <caption> tag aninhada target = _blank target = _self target = _top textarea
Exerccios de auto-reviso
L.1 Diga se estas armaes so verdadeiras ou falsas. Se elas forem falsas, justique. a) b) c) d) L.2 A largura de todas as clulas de dados de uma tabela deve ser igual. Os framesets podem ser aninhados. Voc tem um limite mximo de 100 links internos por pgina. Todos os navegadores podem converter framesets.
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 denido incluindo o atributo ___________________ ou o atributo ___________________ dentro 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.
L-168
C# Como Programar 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 dena o texto alt como hello.
Respostas dos exerccios de auto-reviso

L.1 a) Falsa. Voc pode especicar 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 converter um frameset e devem, portanto, usar as informaes que voc inclui dentro das tags <noframes>...</noframes>. a) reset. b) cols, rows. c) tr. d) asteriscos. e) poly (polgonos), circles, rect (retngulos). a) b) c) d) <frameset cols = 300,*>...</frameset> <table border = 8>...</table> <noframes>...</noframes> <img src = deitel.gif alt = hello usemap = #hello />
L.2 L.3
Exerccios
L.4 Categorize cada uma destas opes como um elemento ou um atributo: a) b) c) d) e) f) g) L.5 width td th frame name select type
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 L.7 L.8 L.9
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. 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. Escreva um documento XHTML que produz a tabela mostrada na Figura L.13. 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). Crie um documento XHTML chamado Como obter boas notas. Use as tags <meta> para incluir uma srie de palavras-chave que descrevam seu documento. 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. Dena a borda da tabela como 1.
L.10 L.11
L-169
Figura L.12 A tabelo XHTML do Exerccio L.7.
Figura L.13 A tabelo XHTML do Exerccio L.8.

Cs HTP - App L

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Cs HTP - App L

Hochgeladen von

Copyright:

Verfügbare Formate

L

INTRODUO AO XHTML: PARTE 2

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

L.2 Tabelas XHTML bsicas

<html xmlns = http://www.w3.org/1999/xhtml> <head> <title>A simple XHTML table</title>

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

Apndice L Introduo ao XHTML: Parte 2

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

Rodap da tabela Borda da tabela

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

L.3 Tabelas e formatao intermedirias em XHTML

Apndice L Introduo ao XHTML: Parte 2

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

Apndice L Introduo ao XHTML: Parte 2

L.4 Formulrios XHTML bsicos

Apndice L Introduo ao XHTML: Parte 2

L.5 Formulrios XHTML mais complexos

Apndice L Introduo ao XHTML: Parte 2

Erro de programao comum L.3

Apndice L Introduo ao XHTML: Parte 2

Apndice L Introduo ao XHTML: Parte 2

L.6 Links internos

Apndice L Introduo ao XHTML: Parte 2

L.7 Criando e usando mapas de imagens

Apndice L Introduo ao XHTML: Parte 2

Erro de programao comum L.5

L.8 Elementos meta

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

Apndice L Introduo ao XHTML: Parte 2

L.9 Elemento frameset

carrega links.html no frame cujo name main.

Apndice L Introduo ao XHTML: Parte 2

Figura L.10 Documento XHTML exibido no frame da esquerda da Figura L.9.

L.10 Framesets aninhados

Apndice L Introduo ao XHTML: Parte 2

O frame da direita contm estes dois frames aninhados.

L.11 Recursos da Internet e da World Wide Web

Apndice L Introduo ao XHTML: Parte 2

Respostas dos exerccios de auto-reviso

L.6 L.7 L.8 L.9

Apndice L Introduo ao XHTML: Parte 2

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

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

Das könnte Ihnen auch gefallen