Cs HTP - App I PDF

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 definitiva,
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 Introduo
I.2 As linguagens de marcao
I.3 Editando HTML
I.4 Elementos comuns
I.5 Cabealhos
I.6 Links
I.7 Imagens
I.8 Caracteres especiais e mais quebras de linha
I.9 Listas no-ordenadas
I.10 Listas aninhadas e ordenadas
I.11 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 sofisticadas, 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 final </html>. Esses elementos for-
matam sua pgina de uma maneira especfica. 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 tam-
bm pode fazer o download de um editor de cdigo-fonte HTML grtis chamado HTML-Kit em www.chami.com/html-
kit. Os usurios do Unix podem usar editores de texto conhecidos, como o vi ou o emacs.

Designe para seus arquivos nomes que descrevam sua funcionalidade. Essa prtica pode ajud-lo a identificar 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 especfico 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 especificar o tipo de documento. O tipo de documento especi-
fica 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 final </html> (linha 17).
1 <!DOCTYPE HTML PUBLIC //W3C//DTD HTML 4.01//EN

2 http://www.w3.org/TR/html4/strict.dtd>
3 <html>
4
5 
6 
7
8 <head>
9 <title>C# How to Program Welcome</title>
10 </head>
11
12 <body>
13
14 <p>Welcome to Our Web Site!</p>
15
16 </body>
17 </html>
Figura I.1 Arquivo HTML bsico. (Parte 1 de 2.)
Figura I.1 Arquivo HTML bsico. (Parte 2 de 2.)

Sempre inclua as tags <html>...</html> no incio e no final de seu documento HTML.

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 figura, o nome
do arquivo e uma breve descrio da finalidade 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 documen-
to HTML. Para incluir um ttulo em sua pgina Web, inclua o ttulo selecionado entre o par de tags <title>...</title>
no elemento head.

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 identifica a pgina quando um usurio a inclui em sua lista de Favoritos ou
Marcadores (Bookmarks). O ttulo tambm usado pelos mecanismos de busca para fins de catalogao, de modo que
a escolha de um nome significativo pode ajudar os mecanismos de busca a direcionar um grupo mais focalizado de pessoas
para seu site.
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 final </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 pa-
rgrafos 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 do-
cumento HTML deve ser </html>, o que diz para o navegador que o cdigo HTML est completo. A tag </body> final
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 significativamente entre os navegadores.

A incluso de comentrios no lado direito das linhas curtas do HTML uma forma limpa de comentar o cdigo.
1 <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN

3 <html>
4
5 
6 
7
8 <head>
9 <title>C# How to Program - Welcome</title>
10 </head>
11
12 <body>
13
14 <h1>Level 1 Header</h1> 
15 <h2>Level 2 header</h2> 
20
21 </body>
22 </html>
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.)
A linha 14
<h1>Level 1 Header</h1>
apresenta o elemento cabealho h1 com a tag inicial <h1> e a tag final </h1>. Todo o texto a ser exibido colocado entre
as duas tags. Todos os seis elementos cabealho, h1 at h6, seguem o mesmo padro.

A colocao de um cabealho no alto de cada pgina Web ajuda aqueles que visualizam suas pginas a entender a finalidade
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 vincu-
lao 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>

3 <html>
4
5 
6 
7
8 <head>
10 </head>
11
12 <body>
13
14 <h1>Here are my favorite Internet Search Engines</h1>
Figura I.3 Links para outras pginas Web. (Parte 1 de 2.)
15
16 <p><strong>Click on the Search Engine address to go to that
17 page.</strong></p>
18
19 <p><a href = http://www.yahoo.com>Yahoo</a></p>
20
21 <p><a href = http://www.altavista.com>AltaVista</a></p>
22
23 <p><a href = http://www.askjeeves.com>Ask Jeeves</a></p>
24
25 <p><a href = http://www.webcrawler.com>WebCrawler</a></p>
26
27 </body>
28 </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 especificar 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 especificar 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 especificado 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 en-
dereo do link. Esse tipo de ncora demonstrado na Figura I.4.

3 <html>
4
5 
6 
7
8 <head>
Figura I.4 Link para um endereo de e-mail. (Parte 1 de 2.)

10 </head>
11
12 <body>
13
14 <p>My email address is <a href = mailto:deitel@deitel.com>
15 deitel@deitel.com</a>. Click on the address and your browser
16 will open an email message and address it to me.</p>
17
18 </body>
19 </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 atri-
buto (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).

3 <html>
4
5 
6 
7
8 <head>
10 </head>
11
12 <body>
13
14 <p><img src = csphtp.jpg height = 236 width = 181
15 alt = Demonstration of the alt attribute></p>
16
Figura I.5 Colocando imagens nos arquivos HTML. (Parte 1 de 2.)

17 </body>
18 </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 especifica a localizao do arquivo de imagem no elemento img. Isso feito incluindo o atributo src = locali-
zao. Voc tambm pode especificar os atributos height e width (respectivamente, altura e largura) de uma imagem,
em pixels. O termo pixel significa pixel element (elemento de figura). Cada pixel representa um ponto de cor na tela. Essa
imagem tem 181 pixels de largura por 236 pixels de altura.

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 ima-
gens (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 deficincias fsicas, como discutimos no Captulo 24.

Inclua uma descrio da finalidade de cada imagem usando o atributo alt na tag img.
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 grficos de boto no mesmo lugar, facilitando sua localizao e edio.

3 <html>
4
5 
6 
7
8 <head>
10 </head>
11
12 <body>
13
14 <p>
15 <a href = links.html>
16 <img src = buttons/links.jpg width = 65 height = 50
17 alt = Links Page></a><br>
18
19 <a href = list.html>
20 <img src = buttons/list.jpg width = 65 height = 50
21 alt = List Example Page></a><br>
22
23 <a href = contact.html>
24 <img src = buttons/contact.jpg width = 65 height = 50
25 alt = Contact Page></a><br>
26
27 <a href = header.html>
28 <img src = buttons/header.jpg width = 65 height = 50
29 alt = Header Page></a><br>
30
31 <a href = table.html>
32 <img src = buttons/table.jpg width = 65 height = 50
33 alt = Table Page></a><br>
34
35 <a href = form.html>
36 <img src = buttons/form.jpg width = 65 height = 50
37 alt = Feedback Form></a><br>
Figura I.6 Usando imagens como ncoras de link. (Parte 1 de 2.)
38 </p>
39
40 </body>
41 </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 for-
mato correto do atributo src. Se, por exemplo, houvesse um diretrio dentro do diretrio buttons chamado images e
quisssemos colocar um grfico daquele diretrio em sua pgina, teramos de fazer com que o atributo de origem refletisse 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 reflita 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 configurao de mquina de escrever QWERTY no mais suficiente para todas as nossas necessidades
textuais. O HTML 4.01 prev a insero de caracteres especiais e smbolos (Figura I.7).

3 <html>
4
Figura I.7 Inserindo caracteres especiais no HTML. (Parte 1 de 2.)
5 

6 
7
8 <head>
10 </head>
11
12 <body>
13
14 
15 <p>My email address is <a href = mailto:deitel@deitel.com>
16 deitel@deitel.com</a>. Click on the address and your browser
17 will automatically open an email message and address it to my
18 address.</p>
19
20 <hr> 
21
22 <p>All information on this site is <strong>©</strong>
23 Deitel <strong>&</strong> Associates, 2002.</p>
24
25 
26 
27 
28 <p><del>You may copy up to 3.14 x 10<sup>2</sup> characters
29 worth of information from this site.</del> Just make sure
30 you <sub>do not copy more information</sub> than is allowable.
31 </p>
32
33 <p>No permission is needed if you only need to use <strong>
34 < ¼</strong> of the information presented here.</p>
35
36 </body>
37 </html>
Figura I.7 Inserindo caracteres especiais no HTML. (Parte 2 de 2.)

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 tacha-
do. 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.

3 <html>
4
5 
6 
7
8 <head>
10 </head>
11
12 <body>
13
14 <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 verda-
deiramente universal necessrio troc-los pelos cdigos correspondentes. (N.R.T.)
15
16
17 <p><strong>Click on the Search Engine address to go to that
18 page.</strong></p>
19
20 <ul>
21 <li>
22 <a href = http://www.yahoo.com>Yahoo</a>
23 </li>
24
25 <li>
26 <a href = http://www.altavista.com>AltaVista</a>
27 </li>
28
29 <li>
30 <a href = http://www.askjeeves.com>Ask Jeeves</a>
31 </li>
32
33 <li>
34 <a href = http://www.webcrawler.com>WebCrawler</a>
35 </li>
36 </ul>
37
38 </body>
39 </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.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.

3 <html>
4
5 
6 
7
8 <head>
10 </head>
11
12 <body>
13
14 <h1>The Best Features of the Internet</h1>
15
16 <ul>
17 <li>You can meet new people from countries around
18 the world.</li>
19 <li>You have access to new media as it becomes public:
20
21 
22 
23 
24 <ul>
25 <li>New games</li>
26 <li>New applications
27
28 
29 <ul>
30 <li>For business</li>
31 <li>For pleasure</li>
32 </ul> 
33 </li>
34
35 <li>Around the clock news</li>
36 <li>Search engines</li>
37 <li>Shopping</li>
38 <li>Programming
39
40 <ul>
41 <li>C#</li>
42 <li>Java</li>
43 <li>HTML</li>
44 <li>Scripts</li>
45 <li>New languages</li>
46 </ul>
47
48 </li>
49
50 </ul> 
51 </li>
Figura I.9 As listas aninhadas e ordenadas no HTML. (Parte 1 de 2.)

52
53 <li>Links</li>
54 <li>Keeping in touch with old friends</li>
55 <li>It is the technology of the future!</li>
56
57 </ul> 
58
59 <h1>My 3 Favorite <em>CEOs</em></h1>
60
61 
62 
63 <ol>
64 <li>Lawrence J. Ellison</li>
65 <li>Steve Jobs</li>
66 <li>Michael Dell</li>
67 </ol>
68
69 </body>
70 </html>
Figura I.9 As listas aninhadas e ordenadas no HTML. (Parte 2 de 2.)

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.

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 verifique se
inseriu as tags </ul> finais nos lugares apropriados. As linhas 63 a 67
<ol>
<li>Lawrence J. Ellison</li>
<li>Steve Jobs</li>
<li>Michael Dell</li>
</ol>
definem 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 Specification (especificao 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 ini-
ciantes, porque se concentra no ensino e fornece exemplos especficos.
www.w3scripts.com/html
Esse site, que se originou do W3Schools, um repositrio de exemplos de cdigo com todos os recursos do HTML (do ini-
ciante 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 identifica 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 tradi-
cionais 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.
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 codificao 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 navega-
dor 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 especifica 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 especificao HTML.
<html> diz ao navegador que tudo o que estiver contido entre a tag inicial <html> e a tag final </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 co-
locadas 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 finalidade do HTML marcar o texto; a questo de como ele apresentado deixada para o navegador decidir.
As pessoas com dificuldades 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 grficos) podem ler strong e em com inflexes diferentes para vei-
cular 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 especificar 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 significa elemento de figura. Cada pixel representa um ponto de cor na tela.
Voc especifica a localizao do arquivo de imagem com o atributo src = localizao na tag <img>. Voc pode especificar 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 figuras 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 reflita 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 caracte-
res (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.
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 refletir o aninhamento.
Uma lista ordenada (<ol>...</ol>) convertida na maioria dos navegadores em uma seqncia de nmeros, em vez de um marca-
dor, no incio de cada elemento da lista. Como padro, as listas ordenadas usam os nmeros da seqncia decimal (1, 2, 3, ...).
Terminologia
& elemento head (<head>...</h6)
.htm elemento html (<html>...</html>)
.html elemento img
 (comentrio) elemento p (pargrafo; <p>...</p>)
<body>...</body> elemento strong (<strong>...</strong>)
alt elemento title (<title>...</title>)
altura elemento head (<head>...</head>)
ncora nfase
apresentao de uma pgina Web estrutura de uma pgina Web
arquivo HTML forma do cdigo-fonte
atributo href do elemento <a> hipertexto
atributo link do elemento body ... HTML (HyperText Markup Language)
atributo src do elemento img HTML-kit
atributo width imagem
atributos de uma tag HTML index.html
caracteres especiais largura por pixel
clear = all in <br> largura por porcentagem
comentrios linguagem de marcao
contedo de um elemento HTML link
cor lista no-ordenada (<ul>...</ul>)
cores RGB mailto:
documento HTML navegador baseado em texto
elemento <hr> (rgua horizontal) rgua horizontal
elemento a (ncora; <a>...</a>) site Web
elemento de quebra de linha (<br>...</br>) size = in <font>
elemento del sub (subscrito)
elemento em (<em>...</em>) sup (sobrescrito)
elemento h1 (<h1>...</h1>) tag final
elemento h2 (<h2>...</h2>) tag inicial
elemento h3 (<h3>...</h3>) tags do HTML
elemento h4 (<h4>...</h4>) text em body
elemento h5 (<h5>...</h5>) World Wide Web
elemento h6 (<h6>...</h6>)
Exerccios de auto-reviso
I.1 Diga se as declaraes abaixo so verdadeiras ou falsas. Se forem falsas, justifique.
a) O tipo de documento de um documento HTML opcional.
b) O uso dos elementos em e strong foi desaprovado.
c) O nome da home page de seu site sempre deve ser homepage.html.
d) Uma boa prtica de programao inserir comentrios em seu documento HTML que expliquem o que voc est fazendo.
e) Um link inserido ao redor do texto com o elemento link.
I.2 Preencha os espaos em branco de cada uma destas declaraes:
a) O elemento ________________ usado para inserir uma rgua horizontal.
b) O sobrescrito formatado com o elemento ________________ e o subscrito formatado com o elemento _______________.
c) O elemento ________________ est localizado dentro das tags <head>...</head>.
d) O cabealho menos importante o elemento _______________ , e o cabealho de texto mais importante _______________.
e) O elemento ________________ usado para criar uma lista no-ordenada.
I.3 Identifique cada uma destas opes como um elemento ou um atributo:

a) html
b) width
c) href
d) br
e) h3
f) a
g) 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).
I.2 a) hr. b) sup, sub. c) title. d) h6, h1. e) ul.
I.3 a) Tag. b) Atributo. c) Atributo. d) Tag. e) Tag. f) Tag. g) Atributo.
Exerccios
I.4 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.
I.5 Por que este cdigo vlido? (Dica: voc encontra a especificao 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 especificao 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 hei-
ght 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).
I.8 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: .. significa
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://).

Cs HTP - App I PDF

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Cs HTP - App I PDF

Enviado por

Direitos autorais:

Formatos disponíveis

I

Entender os principais componentes de um documento

Ler nas entrelinhas era mais fcil do que seguir o texto.

A simples cor, sem a interferncia do sentido

Altos pensamentos devem ter uma alta linguagem.

Eu passei gradualmente do segundo plano da classe baixa

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

I.2 As linguagens de marcao

Boa prtica de programao I.1

Erro comum de programao I.1

I.3 Editando HTML

Boa prtica de programao I.2

I.4 Elementos comuns

<!DOCTYPE HTML PUBLIC //W3C//DTD HTML 4.01//EN

1 <!DOCTYPE HTML PUBLIC //W3C//DTD HTML 4.01//EN

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

Boa prtica de programao I.3

Boa prtica de programao I.4

Boa prtica de programao I.5

Boa prtica de programao I.6

1 <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN

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.)

Boa prtica de programao I.7

1 <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN

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

1 <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN

9 <title>C# How to Program - Welcome</title>

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:

1 <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN

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

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

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

Boa prtica de programao I.8

Erro comum de programao I.2

Boa prtica de programao I.9

1 <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN

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

I.8 Caracteres especiais e mais quebras de linha

1 <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN

5

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

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

<p><del>You may copy up to 3.14 x 10<sup>2</sup> characters

<hr>

I.9 Listas no-ordenadas

1 <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN

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

O primeiro item da lista aparece nas linhas 21 a 23

I.10 Listas aninhadas e ordenadas

1 <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN

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.)

Boa prtica de programao I.10

I.11 Recursos da Internet e da World Wide Web

Os documentos HTML so criados por meio dos editores de texto.

I.3 Identifique cada uma destas opes como um elemento ou um atributo:

Respostas dos exerccios de auto-reviso

Você também pode gostar