Cs HTP - App I

I
INTRODUO AO HYPERTEXT MARKUP LANGUAGE 4: PARTE 1

OBJETIVOS
Entender os principais componentes de um documento HTML. Poder usar os elementos bsicos do HTML para criar pginas na World Wide Web. Entender como criar e usar os links para atravessar as pginas Web. Poder criar listas de informaes.
Ler nas entrelinhas era mais fcil do que seguir o texto. Henry James A simples cor, sem a interferncia do sentido e a nulidade da forma denitiva, pode falar para a alma de mil maneiras diferentes. Oscar Wilde Altos pensamentos devem ter uma alta linguagem. Aristfanes Eu passei gradualmente do segundo plano da classe baixa para o primeiro plano da classe baixa. Marvin Cohen
I-70
C# Como Programar
Resumo
I.1 I.2 I.3 I.4 I.5 I.6 I.7 I.8 I.9 I.10 I.11 Introduo As linguagens de marcao Editando HTML Elementos comuns Cabealhos Links Imagens Caracteres especiais e mais quebras de linha Listas no-ordenadas Listas aninhadas e ordenadas Recursos da Internet e da World Wide Web
Resumo Terminologia Exerccios de auto-reviso Respostas dos exerccios de auto-reviso Exerccios
I.1 Introduo
Aqui apresentaremos os fundamentos da criao das pginas Web em HTML. Vamos escrever muitas pginas Web simples. No Apndice J apresentaremos tcnicas HTML mais sosticadas, como as tabelas, as quais so particularmente teis para estruturar as informaes dos bancos de dados. Neste apndice no apresentaremos nenhuma programao em C#. Neste apndice apresentamos os elementos e atributos bsicos do HTML. Uma das principais questes do uso do HTML a separao entre a apresentao de um documento (ou seja, o modo como o documento convertido na tela por um navegador) e a estrutura desse documento. Aqui e no Apndice J discutimos essa questo com detalhes.
I.2 As linguagens de marcao

O HTML uma linguagem de marcao (markup) que usada para formatar texto e informaes. Essa marcao das informaes diferente do objetivo das linguagens tradicionais de programao, que executar as aes em uma ordem preedeterminada. Em HTML, o texto marcado com elementos, delineado pelas tags (marcas), que so palavras-chave contidas em pares de colchetes. Por exemplo, o elemento HTML em si, o qual indica que estamos escrevendo uma pgina Web para ser convertida por um navegador, comea com a tag inicial <html> e termina com a tag nal </html>. Esses elementos formatam sua pgina de uma maneira especca. Ao longo dos dois prximos apndices apresentaremos muitas das tags mais comuns e como us-las. Boa prtica de programao I.1
As tags HTML no fazem diferenciao entre maisculas e minsculas. mais fcil ler um programa no qual todas as letras esto em maisculas ou em minsculas. Embora a opo de usar maisculas ou minsculas seja sua, recomendamos que voc escreva todo seu cdigo em letras minsculas. Isso garante maior compatibilidade com as linguagens de marcao futuras, que so criadas para ser escritas apenas com elementos e tags minsculos.
Erro comum de programao I.1

A falta das tags nos elementos que as exigem um erro de sintaxe e pode afetar seriamente a formatao e a aparncia de sua pgina. Ao contrrio das linguagens convencionais de programao, um erro de sintaxe no HTML em geral no faz com que a exibio da pgina nos navegadores falhe completamente.
I.3 Editando HTML

Neste apndice mostraremos como escrever HTML em sua forma de cdigo-fonte. Criamos os documentos HTML usando um editor de texto e os armazenamos em arquivos com a extenso de nome de arquivo .html ou .htm. Existe uma ampla variedade de editores de texto. Recomendamos que voc use inicialmente o editor de texto Bloco de notas que vem com o
Apndice I Introduo ao HyperText Markup Language 4: Parte 1
I-71
Windows. O Bloco de notas pode ser encontrado no menu Acessrios da opo Programas no menu Iniciar. Voc tambm pode fazer o download de um editor de cdigo-fonte HTML grtis chamado HTML-Kit em www.chami.com/htmlkit. Os usurios do Unix podem usar editores de texto conhecidos, como o vi ou o emacs. Boa prtica de programao I.2
Designe para seus arquivos nomes que descrevam sua funcionalidade. Essa prtica pode ajud-lo a identicar os documentos mais rapidamente. Isso tambm ajuda as pessoas que querem se vincular a sua pgina dando-lhes um arquivo com um nome fcil de lembrar. Por exemplo, se voc est escrevendo um documento em HTML que exibir seus produtos, poder cham-lo de produtos.html.
Como mencionamos, os erros nas linguagens de programao convencionais como o C, o C++ e o Visual Basic quase sempre impedem a execuo do programa. Os erros na marcao HTML geralmente no so fatais. O navegador se esforar para converter a pgina, mas provavelmente no a exibir como voc queria. O nome de arquivo de sua pgina principal (ou home page, a primeira pgina HTML que um usurio v quando navega em seu site Web) deve ser index.html, porque quando um navegador no solicita um arquivo especco em um diretrio, a resposta padro do servidor na Web retornar index.html (isso pode ser diferente em seu servidor) se ele estiver naquele diretrio. Por exemplo, se voc apontar seu navegador para www.deitel.com, o servidor enviar o arquivo www.deitel.com/index.html para ele.
I.4 Elementos comuns

Em todos esses apndices HTML, apresentaremos o cdigo-fonte HTML e uma tela de exemplo da converso daquela HTML no Internet Explorer. A Figura I.1 mostra um arquivo HTML que exibe uma linha de texto. As linhas 1 e 2
<!DOCTYPE HTML PUBLIC //W3C//DTD HTML 4.01//EN http://www.w3.org/TR/html4/strict.dtd>
so requeridas em todo documento HTML e so usadas para especicar o tipo de documento. O tipo de documento especica a verso HTML que usada no documento e pode ser usado com uma ferramenta de validao, como o validator. w3.org do W3C, para garantir que um documento HTML seja compatvel com a recomendao HTML. Nesses exemplos criamos documentos do HTML verso 4.01. Todos os exemplos desses apndices foram validados no site Web validator. w3.org. O documento HTML comea com a tag inicial <html> (linha 3) e termina com a tag nal </html> (linha 17).
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
<!DOCTYPE HTML PUBLIC //W3C//DTD HTML 4.01//EN http://www.w3.org/TR/html4/strict.dtd> <html>  -->
<head> <title>C# How to Program Welcome</title> </head> <body> <p>Welcome to Our Web Site!</p> </body> </html>
Figura I.1 Arquivo HTML bsico. (Parte 1 de 2.)
I-72
C# Como Programar
Figura I.1 Arquivo HTML bsico. (Parte 2 de 2.)
Boa prtica de programao I.3

Sempre inclua as tags <html>...</html> no incio e no nal de seu documento HTML.
Boa prtica de programao I.4

Coloque comentrios em todo seu cdigo. Os comentrios no HTML so colocados dentro das tags . Os comentrios ajudam os outros programadores a entender o cdigo, auxiliam na depurao, relacionam outras informaes teis que voc no quer que sejam convertidas pelo navegador e tambm o ajudam a entender seu prprio cdigo, particularmente se voc no o v h algum tempo.
Vemos nossos primeiros comentrios (ou seja, o texto que documenta ou descreve a marcao HTML) nas linhas 5 e 6:
 
Os comentrios do HTML sempre comeam com . O navegador ignora todo o texto e/ou tags dentro de um comentrio. Colocamos os comentrios no alto de cada documento HTML dando o nmero da gura, o nome do arquivo e uma breve descrio da nalidade do exemplo. Nos exemplos subseqentes, tambm inclumos os comentrios na marcao, particularmente quando introduzimos recursos novos. Cada documento HTML contm um elemento head, o qual geralmente contm as informaes sobre o documento, e um elemento body, o qual contm o contedo da pgina. As informaes do elemento head geralmente no so convertidas na janela de exibio, mas podem ser vistas pelo usurio por outros meios. As linhas 8 a 10
<head> <title>C# How to Program Welcome</title> </head>
mostram a seo do elemento head de nossa pgina Web. A incluso de um elemento title requerida para cada documento HTML. Para incluir um ttulo em sua pgina Web, inclua o ttulo selecionado entre o par de tags <title>...</title> no elemento head. Boa prtica de programao I.5
Use uma conveno de nomeao de ttulo consistente para todas as pginas de seu site. Por exemplo, se seu site se chama Site Web da Aldacir, ento o ttulo de suas pginas de links deve ser Site Web da Aldacir Links. Essa prtica apresentar um quadro claro para todos que navegarem em seu site.
O elemento title d um nome para a pgina Web. O ttulo em geral aparece na barra colorida no alto da janela do navegador e tambm aparecer como o texto que identica a pgina quando um usurio a inclui em sua lista de Favoritos ou Marcadores (Bookmarks). O ttulo tambm usado pelos mecanismos de busca para ns de catalogao, de modo que a escolha de um nome signicativo pode ajudar os mecanismos de busca a direcionar um grupo mais focalizado de pessoas para seu site.
I-73
A linha 12
</body>
abre o elemento body. O corpo de um documento HTML a rea na qual voc coloca o contedo de seu documento. Isso inclui texto, imagens, links e formulrios. Discutiremos muitos elementos que podem ser inseridos em body mais tarde neste apndice. Lembre-se de incluir a tag nal </body> antes de fechar a tag </html>. Diversos elementos permitem que voc coloque o texto em seu documento HTML. Vemos o elemento pargrafo na linha 14:
<p>Welcome to Our Web Site!</p>
Todo o texto colocado entre as tags <p>...</p> forma um pargrafo. A maioria dos navegadores da Web converte os pargrafos separados de todo o outro material da pgina por uma linha de espao vertical antes e depois do pargrafo. O HTML da linha 12 faz com que o Internet Explorer converta o texto includo nas tags, como mostra a Figura I.1. Nosso exemplo de cdigo termina nas linhas 16 e 17 com
</body> </html>
Essas duas tags fecham o corpo e as sees HTML do documento, respectivamente. Como vimos, a ltima tag de todo documento HTML deve ser </html>, o que diz para o navegador que o cdigo HTML est completo. A tag </body> nal colocada antes da tag </html>, porque a seo body do documento est totalmente dentro da seo HTML. Assim, a seo body deve ser fechada antes da seo HTML.
I.5 Cabealhos
Os seis cabealhos (headers) so usados para delinear as novas sees e subsees de uma pgina. A Figura I.2 mostra como esses elementos (h1 at h6) so usados. Observe que o tamanho atual do texto de cada elemento cabealho selecionado pelo navegador e pode variar signicativamente entre os navegadores. Boa prtica de programao I.6
A incluso de comentrios no lado direito das linhas curtas do HTML uma forma limpa de comentar o cdigo.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN http://www.w3.org/TR/html4/strict.dtd> <html>  -->
<head> <title>C# How to Program - Welcome</title> </head> <body> <h1>Level <h2>Level <h3>Level <h4>Level <h5>Level <h6>Level </body> </html> 1 2 3 4 5 6 Header</h1> header</h2> header</h3> header</h4> header</h5> header</h6> <!-<!-<!-<!-<!-<!-Cabealho Cabealho Cabealho Cabealho Cabealho Cabealho de de de de de de nvel nvel nvel nvel nvel nvel 1 2 3 4 5 6 --> --> --> --> --> -->
Figura I.2 Os elementos cabealho h1 at h6. (Parte 1 de 2.)
I-74
C# Como Programar
Figura I.2 Os elementos cabealho h1 at h6. (Parte 2 de 2.)
A linha 14
<h1>Level 1 Header</h1>
apresenta o elemento cabealho h1 com a tag inicial <h1> e a tag nal </h1>. Todo o texto a ser exibido colocado entre as duas tags. Todos os seis elementos cabealho, h1 at h6, seguem o mesmo padro. Boa prtica de programao I.7
A colocao de um cabealho no alto de cada pgina Web ajuda aqueles que visualizam suas pginas a entender a nalidade de cada pgina.
I.6 Links
A capacidade mais importante do HTML a criao de links para outros documentos, o que possibilita uma rede mundial de documentos e informaes vinculados. Em HTML, tanto o texto quanto as imagens podem agir como ncoras para a vinculao com outras pginas Web. Apresentamos as ncoras e os links na Figura I.3. O primeiro link pode ser encontrado na linha 19:
<p><a href = http: //www.yahoo.com>Yahoo</a></p>
1 2 3 4 5 6 7 8 9 10 11 12 13 14
<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN http://www.w3.org/TR/html4/strict.dtd> <html>  -->
<head> <title>C# How to Program - Welcome</title> </head> <body> <h1>Here are my favorite Internet Search Engines</h1>
Figura I.3 Links para outras pginas Web. (Parte 1 de 2.)
I-75
15 16 17 18 19 20 21 22 23 24 25 26 27 28
<p><strong>Click on the Search Engine address to go to that page.</strong></p> <p><a href = http://www.yahoo.com>Yahoo</a></p> <p><a href = http://www.altavista.com>AltaVista</a></p> <p><a href = http://www.askjeeves.com>Ask Jeeves</a></p> <p><a href = http://www.webcrawler.com>WebCrawler</a></p> </body> </html>
Figura I.3 Links para outras pginas Web. (Parte 2 de 2.)
Os links so inseridos com o elemento a (ncora). O elemento ncora no como os que vimos at agora, pois ele requer determinados atributos (ou seja, marcao que fornece informaes sobre o elemento) para especicar o link. Os atributos so colocados dentro da tag inicial de um elemento e consistem em um nome e um valor. O atributo mais importante para o elemento a a localizao na qual voc quer ancorar o objeto a ser vinculado. Essa localizao pode ser qualquer recurso da Web, incluindo pginas, arquivos e endereos de correio eletrnico. Para especicar o endereo do link inclua o atributo href no elemento de ncora como <a href = address>. Nesse caso, o endereo ao qual estamos vinculados http: //www.yahoo.com. O link (linha 19) transforma o texto Yahoo em um link com o endereo especicado em href. As ncoras podem usar URLs mailto para fornecer links para endereos de e-mail. Quando algum seleciona esse tipo de link ancorado, a maioria dos navegadores inicia o programa padro de e-mail para iniciar uma mensagem para o endereo do link. Esse tipo de ncora demonstrado na Figura I.4.
1 2 3 4 5 6 7 8
<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN http://www.w3.org/TR/html4/strict.dtd> <html>   <head>
Figura I.4 Link para um endereo de e-mail. (Parte 1 de 2.)
I-76
C# Como Programar
9 10 11 12 13 14 15 16 17 18 19
<title>C# How to Program - Welcome</title> </head> <body> <p>My email address is <a href = mailto:deitel@deitel.com> deitel@deitel.com</a>. Click on the address and your browser will open an email message and address it to me.</p> </body> </html>
Figura I.4 Link para um endereo de e-mail. (Parte 2 de 2.)
Vemos um link de e-mail nas linhas 14 e 15:

<p>My email address is <a href = mailto:deitel@deitel.com> deitel@deitel.com</a>. Click on the address and your browser
A forma de uma ncora de e-mail <a href = mailto:endereo_e-mail>...</a>. importante que todo esse atributo (incluindo o mailto:) seja colocado entre aspas.
I.7 Imagens
At agora lidamos exclusivamente com texto. Agora mostraremos como incorporar imagens nas pginas Web (Figura I.5).
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN http://www.w3.org/TR/html4/strict.dtd> <html>  -->
<head> <title>C# How to Program - Welcome</title> </head> <body> <p><img src = csphtp.jpg height = 236 width = 181 alt = Demonstration of the alt attribute></p>
Figura I.5 Colocando imagens nos arquivos HTML. (Parte 1 de 2.)
I-77
17 18
</body> </html>
Figura I.5 Colocando imagens nos arquivos HTML. (Parte 2 de 2.)
A imagem desse exemplo de cdigo inserida nas linhas 14 e 15:

<p><img src = csphtp.jpg height = 236 width = 181 alt = Demonstration of the alt attribute></p>
Voc especica a localizao do arquivo de imagem no elemento img. Isso feito incluindo o atributo src = localizao. Voc tambm pode especicar os atributos height e width (respectivamente, altura e largura) de uma imagem, em pixels. O termo pixel signica pixel element (elemento de gura). Cada pixel representa um ponto de cor na tela. Essa imagem tem 181 pixels de largura por 236 pixels de altura. Boa prtica de programao I.8
Inclua sempre os atributos height e width de uma imagem dentro da tag img. Quando o navegador carrega o arquivo HTML, ele sabe imediatamente quanto espao de tela deve ser dado a ela e, portanto, criar o layout adequado para a pgina, mesmo antes de fazer o download da imagem.
Erro comum de programao I.2

A insero em uma imagem de novas dimenses que mudem sua relao inerente entre largura e altura distorce sua aparncia. Por exemplo, se sua imagem tem 200 pixels de largura e 100 pixels de altura, voc sempre deve ter certeza de que todas as novas dimenses tm uma relao entre largura e altura de 2:1.
O atributo alt exigido para cada elemento img. Na Figura I.5 o valor desse atributo
alt = Demonstration of the alt attribute
O atributo alt fornecido para quem navega pela Web com as imagens desligadas ou para quem no pode visualizar as imagens (por exemplo, os navegadores baseados em texto). O valor do atributo alt aparecer na tela no lugar da imagem, dando ao usurio a idia do que h na imagem. O atributo alt particularmente importante para tornar as pginas Web acessveis para os usurios portadores de decincias fsicas, como discutimos no Captulo 24. Boa prtica de programao I.9
Inclua uma descrio da nalidade de cada imagem usando o atributo alt na tag img.
I-78
C# Como Programar
Agora que discutimos a colocao das imagens em sua pgina Web, mostraremos como transform-las em ncoras para fornecer links para outros sites da Internet (Figura I.6). Vemos um link de imagem nas linhas 15 a 17:
<a href = links.html> <img src = buttons/links.jpg width = 65 height = 50 alt = Links Page></a><br>
Aqui usamos o elemento a e o elemento img. A ncora funciona igual quando ela circunda o texto: a imagem torna-se um link ativo para uma localizao em alguma parte da Internet, indicada pelo atributo href dentro da tag <a>. Lembre-se de fechar o elemento ncora quando quiser que o link termine. Se voc voltar sua ateno para o atributo src do elemento img,
src = buttons/links.jpg
ver que ele no est na mesma forma da imagem do exemplo anterior. Isso acontece porque a imagem que estamos usando aqui (about.jpg) reside em um subdiretrio chamado buttons, o qual est no diretrio principal do site. Fizemos isso para que possamos manter todos os nossos grcos de boto no mesmo lugar, facilitando sua localizao e edio.
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
<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN http://www.w3.org/TR/html4/strict.dtd> <html>   <head> <title>C# How to Program - Welcome</title> </head> <body> <p> <a href = links.html> <img src = buttons/links.jpg width = 65 height = 50 alt = Links Page></a><br> <a href = list.html> <img src = buttons/list.jpg width = 65 height = 50 alt = List Example Page></a><br> <a href = contact.html> <img src = buttons/contact.jpg width = 65 height = 50 alt = Contact Page></a><br> <a href = header.html> <img src = buttons/header.jpg width = 65 height = 50 alt = Header Page></a><br> <a href = table.html> <img src = buttons/table.jpg width = 65 height = 50 alt = Table Page></a><br> <a href = form.html> <img src = buttons/form.jpg width = 65 height = 50 alt = Feedback Form></a><br>
Figura I.6 Usando imagens como ncoras de link. (Parte 1 de 2.)
I-79
38 39 40 41
</p> </body> </html>
Figura I.6 Usando imagens como ncoras de link. (Parte 2 de 2.)
Voc pode se referir a esses arquivos em diretrios diferentes simplesmente colocando o nome do diretrio no formato correto do atributo src. Se, por exemplo, houvesse um diretrio dentro do diretrio buttons chamado images e quisssemos colocar um grco daquele diretrio em sua pgina, teramos de fazer com que o atributo de origem reetisse a localizao da imagem: src = buttons/images/nome_do_arquivo. Voc pode at mesmo inserir uma imagem de um site Web diferente em seu site (obviamente, aps obter a permisso do proprietrio do site). Basta fazer com que o atributo src reita a localizao e o nome do arquivo de imagem. Na linha 17
alt = Links Page></a><br>
apresentamos o elemento br que causa a exibio de uma quebra de linha na maioria dos navegadores.
I.8 Caracteres especiais e mais quebras de linha

Em HTML a antiga congurao de mquina de escrever QWERTY no mais suciente para todas as nossas necessidades textuais. O HTML 4.01 prev a insero de caracteres especiais e smbolos (Figura I.7).
1 2 3 4
<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN http://www.w3.org/TR/html4/strict.dtd> <html>
Figura I.7 Inserindo caracteres especiais no HTML. (Parte 1 de 2.)
I-80
C# Como Programar
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
 -->
<head> <title>C# How to Program - Welcome</title> </head> <body>  <p>My email address is <a href = mailto:deitel@deitel.com> deitel@deitel.com</a>. Click on the address and your browser will automatically open an email message and address it to my address.</p> <hr>  <p>All information on this site is <strong>©</strong> Deitel <strong>&</strong> Associates, 2002.</p>    <p><del>You may copy up to 3.14 x 10<sup>2</sup> characters worth of information from this site.</del> Just make sure you <sub>do not copy more information</sub> than is allowable. </p> <p>No permission is needed if you only need to use <strong> < ¼</strong> of the information presented here.</p> </body> </html>
Figura I.7 Inserindo caracteres especiais no HTML. (Parte 2 de 2.)
I-81
Existem alguns caracteres especiais inseridos no texto das linhas 22 e 23:

<p>All information on this site is <strong>©</strong> Deitel <strong>&</strong> Associates, 2002.</p>
Todos os caracteres especiais so inseridos em sua forma de cdigo. O formato do cdigo sempre &cdigo;. Um exemplo disso & que insere um sinal de e comercial. Os cdigos quase sempre so formas abreviadas dos caracteres (como amp de e comercial e copy de copyright) e tambm podem estar na forma de cdigos hexadecimais. (Por exemplo, o cdigo hexadecimal de um e comercial 38, de modo que outro mtodo de inserir um e comercial seria usar &.) Consulte o quadro do Apndice M para obter uma listagem de alguns caracteres especiais1 e de seus cdigos respectivos. Nas linhas 28 a 31 apresentamos trs estilos novos.
<p><del>You may copy up to 3.14 x 10<sup>2</sup> characters worth of information from this site. </del> Juts make sure you <sub>do not copy more information</sub> than is allowable. </p>
Voc pode indicar texto que foi excludo de um documento incluindo-o em um elemento del. Isso pode ser usado como um modo fcil de comunicar revises de um documento on-line. Muitos navegadores convertem o elemento del em texto tachado. Para transformar texto em sobrescrito (ou seja, elevado verticalmente para a parte superior da linha e com corpo menor) ou para transformar texto em subscrito (o oposto de sobrescrito, no qual o texto est mais abaixo na linha e menor), use os elementos sup ou sub, respectivamente. A linha 20
<hr> 
insere uma rgua horizontal indicada pela tag <hr>. Uma rgua horizontal convertida pela maioria dos navegadores como uma linha reta que passa pela tela na horizontal. O elemento hr tambm insere uma quebra de linha diretamente abaixo dela.
I.9 Listas no-ordenadas

A Figura I.8 demonstra a exibio do texto em uma lista no-ordenada. Aqui reutilizamos o arquivo HTML da Figura I.3 incluindo uma lista no-ordenada para ampliar a estrutura da pgina. O elemento lista no-ordenada ul cria uma lista na qual cada linha comea com um marcador na maioria dos navegadores da Web.
1 2 3 4 5 6 7 8 9 10 11 12 13 14
<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN http://www.w3.org/TR/html4/strict.dtd> <html>  -->
<head> <title>C# How to Program - Welcome</title> </head> <body> <h1>Here are my favorite Internet Search Engines</h1>
Figura I.8 Listas no-ordenadas no HTML. (Parte 1 de 2.)
1. Na verdade, as letras acentuadas e o usados no portugus tambm so caracteres especiais. Embora, como regra geral, os navegadores baseados no Windows e Linux exibam corretamente pginas em HTML com caracteres acentuados, para fazer uma pgina HTML verdadeiramente universal necessrio troc-los pelos cdigos correspondentes. (N.R.T.)
I-82
C# Como Programar
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
<p><strong>Click on the Search Engine address to go to that page.</strong></p> <ul> <li> <a href = http://www.yahoo.com>Yahoo</a> </li> <li> <a href = http://www.altavista.com>AltaVista</a> </li> <li> <a href = http://www.askjeeves.com>Ask Jeeves</a> </li> <li> <a href = http://www.webcrawler.com>WebCrawler</a> </li> </ul> </body> </html>
Figura I.8 Listas no-ordenadas no HTML. (Parte 2 de 2.)
O primeiro item da lista aparece nas linhas 21 a 23

<li> <a href = http://www.yahoo.com>Yahoo</a> </li>
Cada entrada de uma lista no-ordenada um elemento li (de list item, item de lista). A maioria dos navegadores da Web converte esses elementos com uma quebra de linha e um marcador no incio da linha.
I-83
I.10 Listas aninhadas e ordenadas

A Figura I.9 demonstra as listas aninhadas (ou seja, uma lista dentro de outra lista). Esse um recurso til para exibir as informaes na forma de resumo.
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
<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN http://www.w3.org/TR/html4/strict.dtd> <html>    <ul> <li>New games</li> <li>New applications  business</li> pleasure</li> isto encerra a lista aninhada dupla --> --> -->
<li>Around the clock news</li> <li>Search engines</li> <li>Shopping</li> <li>Programming <ul> <li>C#</li> <li>Java</li> <li>HTML</li> <li>Scripts</li> <li>New languages</li> </ul> </li> </ul>  </li>
Figura I.9 As listas aninhadas e ordenadas no HTML. (Parte 1 de 2.)
I-84
C# Como Programar
52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70
<li>Links</li> <li>Keeping in touch with old friends</li> <li>It is the technology of the future!</li> </ul> 
<h1>My 3 Favorite <em>CEOs</em></h1>   <ol> <li>Lawrence J. Ellison</li> <li>Steve Jobs</li> <li>Michael Dell</li> </ol> </body> </html>
Figura I.9 As listas aninhadas e ordenadas no HTML. (Parte 2 de 2.)
I-85
Nossa primeira lista aninhada comea na linha 24 e seu primeiro elemento est na 25.
<ul> <li>New games</li>
Uma lista aninhada criada da mesma forma que a lista da Figura I.8, exceto que a lista aninhada em si est contida em um elemento de lista. A maioria dos navegadores da Web converte as listas aninhadas recuando a lista um nvel e alterando o tipo do marcador dos elementos da lista. Boa prtica de programao I.10
O recuo de cada nvel de uma lista aninhada em seu cdigo o torna mais fcil de editar e depurar.
Na Figura I.9 as linhas 16 a 57 mostram uma lista com trs nveis de aninhamento. Ao aninhar as listas verique se inseriu as tags </ul> nais nos lugares apropriados. As linhas 63 a 67
<ol> <li>Lawrence J. Ellison</li> <li>Steve Jobs</li> <li>Michael Dell</li> </ol>
denem um elemento de lista ordenada com as tags <ol>...</ol>. A maioria dos navegadores ordena as listas com um nmero de seqncia para cada elemento da lista em vez de um marcador. Como padro, as listas ordenadas usam nmeros na seqncia decimal (1, 2, 3, ...).
I.11 Recursos da Internet e da World Wide Web

Existem muitos recursos disponveis na World Wide Web que detalham mais os assuntos que abordamos. Visite estes sites para obter informaes adicionais sobre os tpicos deste apndice. www.w3.org O World Wide Web Consortium (W3C) o grupo que faz as recomendaes sobre o HTML. Esse site Web mantm uma variedade de informaes sobre o HTML tanto o seu histrico quanto seu status atual. www.w3.org/TR/html401 A HTML 4.01 Specication (especicao do HTML 4.01) contm todas as nuanas e pontos importantes do HTML 4.01. www.w3schools.com/html The HTML School. Esse site contm um guia completo para o HTML a partir de uma itnroduo WWW e terminando com os recursos HTML avanados. Ele tambm tem uma boa referncia para os recursos do HTML. www2.utep.edu/~kross/tutorial Esse site da Universidade do Texas de El Paso contm outro guia para a programao HTML simples. Ele til para os iniciantes, porque se concentra no ensino e fornece exemplos especcos. www.w3scripts.com/html Esse site, que se originou do W3Schools, um repositrio de exemplos de cdigo com todos os recursos do HTML (do iniciante ao avanado).
Resumo
O HTML no uma linguagem de programao procedimental como o C, o Fortran, o Cobol ou o Pascal. Ele uma linguagem de marcao que identica os elementos de uma pgina para que um navegador possa converter aquela pgina na tela. O HTML usado para formatar texto e informaes. Essa marcao das informaes diferente do objetivo das linguagens tradicionais de programao, que executar as aes em uma ordem designada. No HTML o texto marcado com elementos, os quais so delineados pelas tags, que so as palavras-chave contidas nos pares de colchetes.
I-86

C# Como Programar Os documentos HTML so criados por meio dos editores de texto. Todos os documentos HTML armazenados nos arquivos exigem a extenso de nome de arquivo .htm ou .html. Os erros cometidos durante a codicao nas linguagens de programao convencionais, como o C, o C++ e o Java, quase sempre produzem um erro fatal. Isso impede que o programa seja executado. Os erros do cdigo HTML geralmente no so fatais. O navegador se esforar para converter a pgina, mas provavelmente no a exibir como voc queria. Em nossas sees Erros de programao comuns e Dicas de teste e depurao, destacamos os erros HTML comuns e como detect-los e corrigi-los. Na maioria dos servidores da Web, o nome de arquivo de sua home page deve ser index.html. Quando um navegador solicita um diretrio, a resposta padro do servidor da Web retornar index.html caso ele exista naquele diretrio. O tipo de documento especica a verso do HTML que est sendo usada no documento e pode ser usado com uma ferramenta de validao, como o validator.w3.org do W3C, para garantir que um documento HTML obedea especicao HTML. <html> diz ao navegador que tudo o que estiver contido entre a tag inicial <html> e a tag nal </html> HTML. Os comentrios do HTML sempre comeam com  e podem abranger vrias linhas de cdigo-fonte. O navegador ignora todo o texto e/ou as tags que so colocadas dentro de um comentrio. Cada arquivo HTML separado em uma seo de cabealho e um corpo. A incluso de um ttulo obrigatria para todo documento HTML. Use as tags <title>...</title> para fazer isso. Elas so colocadas dentro do cabealho. <body> abre o elemento body. O corpo de um documento HTML a rea na qual voc coloca todo o contedo que os navegadores devem exibir. Todo o texto entre as tags <p>...</p> forma um pargrafo. A maioria dos navegadores converte os pargrafos separados de todo o outro material da pgina por uma linha de espao vertical tanto antes quanto depois do pargrafo. Os cabealhos so uma forma simples de formatao de texto que geralmente aumenta o tamanho do texto com base no nvel do cabealho (h1 at h6). Quase sempre eles so usados para delinear as sees novas e as subsees de uma pgina. A nalidade do HTML marcar o texto; a questo de como ele apresentado deixada para o navegador decidir. As pessoas com diculdades visuais podem usar navegadores especiais que lem o texto na tela em voz alta. Esses navegadores (os quais so baseados em texto e no mostram imagens, cores ou grcos) podem ler strong e em com inexes diferentes para veicular o impacto do texto com estilo para o usurio. Voc deve fechar as tags na ordem inversa daquela na qual elas foram iniciadas para garantir o aninhamento adequado. A capacidade mais importante do HTML criar links com os documentos de qualquer servidor para formar uma rede mundial de documentos e informaes vinculadas. Os links so inseridos com o elemento a (ncora). Para especicar o endereo de vnculo inclua o atributo href no elemento ncora com o endereo como o valor de href. As ncoras podem se vincular a endereos de e-mail. Quando algum d um clique nesse tipo de link com ncora, seu programa padro de correio eletrnico inicia uma mensagem de e-mail para o endereo com link. O termo pixel signica elemento de gura. Cada pixel representa um ponto de cor na tela. Voc especica a localizao do arquivo de imagem com o atributo src = localizao na tag <img>. Voc pode especicar os atributos height e width de uma imagem, os quais so medidos em pixels. O atributo alt fornecido para os navegadores que no podem visualizar guras ou que tm as imagens desligadas (os navegadores baseados em texto, por exemplo). O valor do tributo alt aparece na tela no lugar da imagem e d ao usurio uma idia da imagem. Voc pode consultar os arquivos de diferentes diretrios, incluindo o nome do diretrio no formato correto do atributo src, ou inserir uma imagem de um site Web diferente em seu site (aps obter a permisso do proprietrio do site). Basta fazer com que o atributo src reita a localizao e o nome do arquivo de imagem. O elemento br fora uma quebra de linha. Se o elemento br for colocado dentro de uma rea de texto, o texto comea com uma linha nova no lugar da tag <br>. O HTML 4.01 prev a insero de caracteres especiais e smbolos. Todos os caracteres especiais so inseridos no formato do cdigo, sempre &cdigo;. Um exemplo disso &amp, que insere um e comercial. Os cdigos quase sempre so formas abreviadas de caracteres (como amp para e comercial e copy para copyright) e tambm podem estar na forma de cdigos hexadecimais. (Por exemplo, o cdigo hexadecimal de um e comercial 38, de modo que outro mtodo de inserir um e comercial seria usar &.) O elemento del marca o texto como excludo, o qual convertido como tachado pela maioria dos navegadores. Para transformar o texto em sobrescrito ou subscrito, use o elemento sup ou sub, respectivamente.
I-87
A maioria dos navegadores da Web coloca um marcador no incio de cada elemento de uma lista no-ordenada. Todas as entradas de uma lista no-ordenada devem estar dentro das tags <ul>...</ul>, as quais abrem e fecham o elemento dessa lista. Cada entrada de uma lista no-ordenada est contida em um elemento li. Em seguida, voc insere e formata qualquer texto. As listas aninhadas exibem as informaes na forma de resumo. Uma lista aninhada a que est contida em um elemento li. A maioria dos navegadores visuais da Web recua as listas aninhadas um nvel e mudam o tipo do marcador para reetir o aninhamento. Uma lista ordenada (<ol>...</ol>) convertida na maioria dos navegadores em uma seqncia de nmeros, em vez de um marcador, no incio de cada elemento da lista. Como padro, as listas ordenadas usam os nmeros da seqncia decimal (1, 2, 3, ...).
Terminologia
& .htm .html  (comentrio) <body>...</body> alt altura ncora apresentao de uma pgina Web arquivo HTML atributo href do elemento <a> atributo link do elemento body ... atributo src do elemento img atributo width atributos de uma tag HTML caracteres especiais clear = all in <br> comentrios contedo de um elemento HTML cor cores RGB documento HTML elemento <hr> (rgua horizontal) elemento a (ncora; <a>...</a>) elemento de quebra de linha (<br>...</br>) elemento del elemento em (<em>...</em>) elemento h1 (<h1>...</h1>) elemento h2 (<h2>...</h2>) elemento h3 (<h3>...</h3>) elemento h4 (<h4>...</h4>) elemento h5 (<h5>...</h5>) elemento h6 (<h6>...</h6>) elemento head (<head>...</h6) elemento html (<html>...</html>) elemento img elemento p (pargrafo; <p>...</p>) elemento strong (<strong>...</strong>) elemento title (<title>...</title>) elemento head (<head>...</head>) nfase estrutura de uma pgina Web forma do cdigo-fonte hipertexto HTML (HyperText Markup Language) HTML-kit imagem index.html largura por pixel largura por porcentagem linguagem de marcao link lista no-ordenada (<ul>...</ul>) mailto: navegador baseado em texto rgua horizontal site Web size = in <font> sub (subscrito) sup (sobrescrito) tag nal tag inicial tags do HTML text em body World Wide Web
Exerccios de auto-reviso
I.1 Diga se as declaraes abaixo so verdadeiras ou falsas. Se forem falsas, justique. a) b) c) d) e) I.2 a) b) c) d) e) O tipo de documento de um documento HTML opcional. O uso dos elementos em e strong foi desaprovado. O nome da home page de seu site sempre deve ser homepage.html. Uma boa prtica de programao inserir comentrios em seu documento HTML que expliquem o que voc est fazendo. Um link inserido ao redor do texto com o elemento link. O elemento ________________ usado para inserir uma rgua horizontal. O sobrescrito formatado com o elemento ________________ e o subscrito formatado com o elemento _______________. O elemento ________________ est localizado dentro das tags <head>...</head>. O cabealho menos importante o elemento _______________ , e o cabealho de texto mais importante _______________. O elemento ________________ usado para criar uma lista no-ordenada.
Preencha os espaos em branco de cada uma destas declaraes:
I-88
I.3
C# Como Programar Identique cada uma destas opes como um elemento ou um atributo: a) b) c) d) e) f) g) html width href br h3 a src
Respostas dos exerccios de auto-reviso

I.1 a) Falsa. O tipo de documento requerido para os documentos HTML. b) Falsa. O uso dos elementos i e b foi desaprovado. Os elementos em e strong podem ser usados em seu lugar. c) Falsa. O nome de sua home page sempre deve ser index.html. d) Verdadeira. e) Falsa. Um link inserido ao redor do texto com o elemento a (ncora). a) hr. b) sup, sub. c) title. d) h6, h1. e) ul. a) Tag. b) Atributo. c) Atributo. d) Tag. e) Tag. f) Tag. g) Atributo.
I.2 I.3
Exerccios
I.4 I.5 Use o HTML para marcar o primeiro pargrafo deste apndice. Use h1 para o cabealho de seo, p para texto, strong para a primeira palavra de cada sentena e em para todas as letras maisculas. Por que este cdigo vlido? (Dica: voc encontra a especicao do W3C do elemento p em www.w3.org/TR/html4.) <p>Eis aqui um pouco de texto... <hr> <p>E mais um pouco de texto...</p> I.6 Por que este cdigo invlido? (Dica: voc encontra a especicao do W3C do elemento br no mesmo URL dado no Exerccio 2.5.) <p>Eis aqui um pouco de texto...<br></br> E mais um pouco de texto...</p> I.7 Temos uma imagem chamada deitel.gif com 200 pixels de largura por 150 pixels de altura. Use os atributos width e height da tag img para a) aumentar o tamanho da imagem em 100%; b) aumentar o tamanho da imagem em 50%; c) alterar a relao largura e altura para 2:1 mantendo a largura de a). Crie um link com cada uma destas opes: a) index.html localizado no diretrio arquivos; b) index.html localizado no diretrio texto do diretrio arquivos; c) index.html localizado no diretrio outro de seu diretrio pai (dica: .. signica diretrio pai); d) um link com o endereo de e-mail do presidente dos Estados Unidos (president@whitehouse.gov); e) um link de FTP com o arquivo chamado README do diretrio pub de ftp.cdrom.com. (dica: lembre-se de usar ftp://).
I.8

Cs HTP - App I

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Cs HTP - App I

Caricato da

Copyright:

Formati disponibili

I

INTRODUO AO HYPERTEXT MARKUP LANGUAGE 4: PARTE 1

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

I.2 As linguagens de marcao

Erro comum de programao I.1

I.3 Editando HTML

Apndice I Introduo ao HyperText Markup Language 4: Parte 1

I.4 Elementos comuns

Figura I.1 Arquivo HTML bsico. (Parte 1 de 2.)

Figura I.1 Arquivo HTML bsico. (Parte 2 de 2.)

Boa prtica de programao I.3

Boa prtica de programao I.4

Apndice I Introduo ao HyperText Markup Language 4: Parte 1

Figura I.2 Os elementos cabealho h1 at h6. (Parte 1 de 2.)

Figura I.2 Os elementos cabealho h1 at h6. (Parte 2 de 2.)

Figura I.3 Links para outras pginas Web. (Parte 1 de 2.)

Apndice I Introduo ao HyperText Markup Language 4: Parte 1

Figura I.3 Links para outras pginas Web. (Parte 2 de 2.)

Figura I.4 Link para um endereo de e-mail. (Parte 1 de 2.)

Figura I.4 Link para um endereo de e-mail. (Parte 2 de 2.)

Vemos um link de e-mail nas linhas 14 e 15:

Figura I.5 Colocando imagens nos arquivos HTML. (Parte 1 de 2.)

Apndice I Introduo ao HyperText Markup Language 4: Parte 1

Figura I.5 Colocando imagens nos arquivos HTML. (Parte 2 de 2.)

A imagem desse exemplo de cdigo inserida nas linhas 14 e 15:

Erro comum de programao I.2

Figura I.6 Usando imagens como ncoras de link. (Parte 1 de 2.)

Apndice I Introduo ao HyperText Markup Language 4: Parte 1

</p> </body> </html>

Figura I.6 Usando imagens como ncoras de link. (Parte 2 de 2.)

I.8 Caracteres especiais e mais quebras de linha

<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN http://www.w3.org/TR/html4/strict.dtd> <html>

Figura I.7 Inserindo caracteres especiais no HTML. (Parte 1 de 2.)

<!-- Fig. I.7: contact.html <!-- Inserindo caracteres especiais

Figura I.7 Inserindo caracteres especiais no HTML. (Parte 2 de 2.)

Apndice I Introduo ao HyperText Markup Language 4: Parte 1

Existem alguns caracteres especiais inseridos no texto das linhas 22 e 23:

I.9 Listas no-ordenadas

Figura I.8 Listas no-ordenadas no HTML. (Parte 1 de 2.)

Figura I.8 Listas no-ordenadas no HTML. (Parte 2 de 2.)

O primeiro item da lista aparece nas linhas 21 a 23

Apndice I Introduo ao HyperText Markup Language 4: Parte 1

I.10 Listas aninhadas e ordenadas

Figura I.9 As listas aninhadas e ordenadas no HTML. (Parte 1 de 2.)

Figura I.9 As listas aninhadas e ordenadas no HTML. (Parte 2 de 2.)

Apndice I Introduo ao HyperText Markup Language 4: Parte 1

I.11 Recursos da Internet e da World Wide Web

Apndice I Introduo ao HyperText Markup Language 4: Parte 1

Preencha os espaos em branco de cada uma destas declaraes:

Respostas dos exerccios de auto-reviso

Potrebbero piacerti anche