Introdução Ao HTML PDF

Sumrio
Iniciando no HTML: Introduo ao HTML ......................................................................................................................... 2

Iniciando no HTML: Sintaxes do HTML ............................................................................................................................. 3
Iniciando no HTML: Sua primeira pgina .......................................................................................................................... 4
Iniciando no HTML: Formato de pargrafos em HTML ..................................................................................................... 6
Iniciando no HTML: Cor, tamanho e tipo de letra. ......................................................................................................... 10
Iniciando no HTML: Atributos para pginas .................................................................................................................... 13
Iniciando no HTML: Listas - Parte 1 ................................................................................................................................. 15
Iniciando no HTML: Caracteres especiais ....................................................................................................................... 19
Iniciando no HTML: Links em HTML ................................................................................................................................ 21
Iniciando no HTML: Links internos .................................................................................................................................. 22
Iniciando no HTML: Links locais ...................................................................................................................................... 23
Iniciando no HTML: Links locais ...................................................................................................................................... 24
Iniciando no HTML: Imagens em HTML .......................................................................................................................... 26
Iniciando no HTML: Formatando o texto ........................................................................................................................ 29
Iniciando no HTML: Alinhamento de imagens com HTML .............................................................................................. 31
Iniciando no HTML: Formatos grficos para pginas web .............................................................................................. 32
Iniciando no HTML: As cores e HTML ............................................................................................................................. 34
Iniciando no HTML: Tabelas em HTML ........................................................................................................................... 35
Iniciando no HTML: Tabelas em HTML - Atributos para filas e clulas ........................................................................... 37
Iniciando no HTML: Tabelas em HTML - Atributos da tabela e concluso ..................................................................... 39
Iniciando no HTML: Formulrios HTML .......................................................................................................................... 41
Iniciando no HTML: Elementos de formulrios - Campos de texto ................................................................................ 43
Iniciando no HTML: Outros elementos de formulrios .................................................................................................. 45
Iniciando no HTML: Boto submit, apagar campos e outros em formulrios HTML ...................................................... 48
Iniciando no HTML: Frames em HTML ............................................................................................................................ 51
Iniciando no HTML: Frames - Explicao bsica ............................................................................................................. 52
Iniciando no HTML: Frames - Criao de uma estrutura simples ................................................................................... 53
Iniciando no HTML: Frames - Orientar os links ............................................................................................................... 55
Iniciando no HTML: Frames - Criao de uma estrutura simples ................................................................................... 56
Iniciando no HTML: Frames - Orientar os links ............................................................................................................... 57
Iniciando no HTML: Frames - Atributos avanados ........................................................................................................ 59
Iniciando no HTML: Vantagens e incovenientes do uso de frames ................................................................................ 60

Iniciando no HTML: Introduo ao HTML
Autor/fonte: CriarWeb.com
E-mail/Url: http://www.criarweb.com/artigos/10.php

HTML a linguagem com que se escrevem as pginas web. As pginas web podem ser vistas pelo usurio mediante
um tipo de aplicao chamada navegador (browser). Podemos dizer, portanto, que o HTML a linguagem usada
pelos navegadores para mostrar as pginas webs ao usurio, sendo hoje em dia a interface mais extensa na rede.

Esta linguagem nos permite aglutinar textos, imagens e udios, e combin-los a nosso gosto. Ademais, e aqui onde
est a sua vantagem em relao aos livros e revistas, o HTML nos permite a introduo de referncias a outras
pginas por meio dos links hipertextos.

O HTML se criou a princpio com objetivos de divulgao. Porm, no se pensou que a web chegaria a ser uma rea
de cio com carter multimdia, de modo que, o HTML se criou sem dar respostas a todos os possveis usos que lhe
dariam posteriormente e ao todo coletivo de gente que o utilizariam no futuro. Entretanto, frente a estes deficientes
planejamentos, com o tempo, foram se incorporando modificaes, as quais so os padres do HTML. Numerosos
padres j se apresentaram. O HTML 4.01 foi o ltimo padro feito at o ms de abril de 2004.

Esta evoluo to anrquica do HTML, trouxe toda uma srie de inconvenientes e deficincias que tiveram que ser
superadas com a introduo de outras tecnologias acessrias capazes de organizar, aperfeioar e automatizar o
funcionamento das webs. Exemplos que podem soar como conhecidos so as CSS, Java Script ou outros. Veremos
mais adiante em que consistem algumas delas.

Alguns dos problemas que acompanham ao HTML a diversidade de navegadores presentes no mercado, os quais
no so capazes de interpretar o mesmo cdigo de uma maneira unificada. Isto obriga ao webmaster a, uma vez
criada sua pgina, comprovar que esta pode ser lida satisfatoriamente por todos os navegadores, ou pelo menos,
pelos mais utilizados.

Alm do navegador necessrio para ver os resultados de nosso trabalho, necessitamos evidentemente outra
ferramenta capaz de criar a pgina em si. Um arquivo HTML (uma pgina) no mais do que um texto. por isso que
para programar em HTML necessitamos um editor de textos.

recomendvel usar o bloco de notas que vem no Windows, ou outro editor de textos simples. No entanto, h de
ter cuidado com alguns editores mais complexos como Wordpad ou Microsoft Word, pois colocam seu prprio
cdigo especial ao salvar as pginas e como o HTML unicamente texto plano, poderemos ter problemas com isso.

Existem outros tipos de editores especficos para a criao de pginas web, os quais oferecem muitas facilidades que
nos permitem aumentar nossa produtividade. Porm, aconselhvel a princpio utilizar uma ferramenta, o mais
simples possvel para poder prestar a mxima ateno ao nosso cdigo e familiarizarmos o antes possvel com ele.
Logo mais adiante, ganharemos tempo ao utilizarmos os editores mais versteis.

Par ter mais claro todo o tema de editores e os tipos que existem, visite os artigos:

. Editores de HTML;
. Bloco de notas;
. Tambm se pode acessar a descries de editores mais complexos que o Bloco de notas, porm mais potentes
como o Homesite.

importante ter claro tudo isso visto que em funo de seus objetivos, pode ser que mais do que aprender HTML,
resulte mais interessante aprender o uso de uma aplicao para a criao de pginas.

Sendo assim, uma pgina um arquivo onde est contido o cdigo HTML em forma de texto. Estes arquivos tem
extenso .html ou .htm ( indiferente qual deles utilizar). De modo que quando programarmos em HTML, o faremos
com um editor de textos e salvaremos nossos trabalhos com extenso .html, por exemplo, minhapagina.html.

Conselho: Utilize sempre a mesma extenso em seus arquivos HTML. Isso evitar que voc se confunda ao escrever
os nomes dos seus arquivos umas vezes com .html e outras com .htm. E se voc trabalha com uma equipe em um
projeto, ainda mais importante que todos estejam de acordo com a mesma extenso.

Iniciando no HTML: Sintaxes do HTML
O HTML uma linguagem que baseia sua sintaxe em um elemento de base que chamamos etiqueta (tag). A etiqueta
apresenta frequentemente duas partes:

. Uma abertura de forma geral:

<etiqueta>

. Um fechamento do tipo:

</etiqueta>

Tudo que estiver includo no interior desta etiqueta sofrer as modificaes que caracterizam a esta etiqueta. Como
por exemplo:

As etiquetas <b> e </b> definem um texto em negrito. Se em nosso documento HTML escrevemos uma frase com o
seguinte cdigo:

<b>Isto est em negrito</b>

Rode e veja o resultado.

As etiquetas <p> e </p> definem um pargrafo. Se em nosso documento HTML escrevssemos:

<p>Ol, estamos no pargrafo 1</p>
<p>Agora mudamos de pargrafo</p>


Partes de um documento HTML

Ademais de tudo isso, um documento HTML deve estar delimitado pela etiqueta <html> e </html>. Dentro deste
documento, podemos ainda distinguir duas partes principais:

O cabealho, delimitado por <head> e </head> onde colocaremos etiquetas de ndole informativas como por
exemplo o ttulo de nossa pgina.

O corpo, delimitado pelas etiquetas <body> e </body>, que ser onde colocaremos nosso texto e imagens
delimitados por sua vez por outras etiquetas como as que vimos anteriormente.

O resultado um documento com a seguinte estrutura:

<html>
<head>
Etiquetas e contedos do cabealho
Dados que no aparecem em nossa pgina mas que so importantes para catalog-la: Ttulo, palavras-chaves, etc.
</head>
<body>
Etiquetas e contedo do corpo
Parte do documento que ser mostrada pelo navegador: Textos e imagens
</body>
</html>

As maisculas ou minsculas so indiferentes ao escrever as etiquetas

As etiquetas podem ser escritas com qualquer tipo de combinao entre maisculas e minsculas. Ou seja, <HTML>
ou <HtMl> so a mesma etiqueta. Entretanto, aconselhvel acostumar-se a escrev-las em minscula j que
outras tecnologias que podem conviver com nosso HTML (XML por exemplo) no so to permissivas e nunca est
mal ter bons costumes desde o princpio para evitar falhos triviais no futuro.

Iniciando no HTML: Sua primeira pgina
Podemos j com estes conhecimentos, e mais algum outro, criar nossa primeira pgina. Para isso, abra seu editor de
textos e, copie e cole o seguinte texto em um novo documento:

<html>
<head>
<title>Cozinha Para Todos</title>
</head>
<body>
<p><b>Bem-vindo,</b></p>
<p>Voc est na pgina<b>Comida para todos</b>.</p>
<p>Aqui voc aprender receitas fceis e deliciosas.</p>
</body>
</html>

Agora salve este arquivo com extenso .html ou .htm em seu disco rgido. Para isso, acessamos no menu "Arquivo" e
selecionamos a opo "Salvar como". Na janela escolhemos o diretrio onde desejamos salv-lo e colocaremos um
nome para ele, como por exemplo: minha_pgina.html.

Conselho: Utilize nomes em seus arquivos que tenham algumas normas bsicas para poupar alguma confuso ou
desgosto.

Nosso conselho que no utilize acentos, nem espaos, nem outros caracteres raros. Tambm lhe ajudar escrever
sempre as letras em minsculas.

Isto no quer dizer que se deve fazer nomes de arquivos curtos, melhor faz-los descritivos para que se possa
lembrar o que h dentro. Algum caractere como o trao "-" ou o trao baixo "_" lhe pode ajudar a separar as
palavras. Por exemplo: quem_somos.html.

Com o documento HTML criado, podemos ver o resultado obtido atravs de um navegador. Chegado a este ponto,
conveniente, insistir no fato de que nem todos os navegadores so idnticos. Infelizmente, os resultados de nosso
cdigo podem mudar de um para outro, sendo por isso aconselhvel visualizar a pgina em vrios navegadores.
Geralmente usam-se Internet Explorer e Netscape como referncias j que so os mais extensos.

Na verdade, no momento em que estas linhas so escritas, o Internet Explorer monopoliza a maioria imensa de
usurios (mais ou menos 90%) e o Netscape est relegado a um segundo plano. Isto no quer dizer que devemos
deix-lo de lado j que o 10% de visitas que este pode nos proporcionar, pode resultar muito importante para ns.
Por outro lado, parece que j se tornou pblica a inteno do Netscape de desviar um pouco seus negcios para
outros rumos e abandonar esta chamada "luta de navegadores" na qual estava recebendo a pior parte.

Ento, voltando ao tema, uma vez criado o arquivo .html ou .htm, podemos visualizar o resultado de nosso trabalho
abrindo a pgina criada com um navegador. Para isso, dependendo do navegador a forma de fazer ser diferente.

Se estamos usando o Explorer, temos de ir barra de menu, selecionar "Arquivo" e em seguida "Abrir". Uma janela
ir se abrir. Clicamos sobre o boto "Examinar" e acessamos uma janela a partir da qual poderemos nos mover pelo
interior do nosso disco rgido at encontrar o arquivo que desejamos abrir.

A coisa no mais difcil com o Netscape. Neste caso, temos de ir tambm barra de menu principal e
selecionarmos File e logo, Open File. A mesma janela de busca nos permitir examinar o contedo de nosso PC at
dar com o arquivo procurado.

Nota: Tambm se pode abrir o arquivo acessando o diretrio onde ele est salvo. Nele se pode encontrar seu
arquivo HTML e ver que possui como cone o logotipo de Netscape ou o do Internet Explorer. Para abri-lo
simplesmente fazemos um clique duplo sobre ele.

Uma vez aberto o arquivo, j poder ver sua primeira pgina web. Algo simples mas que j um comeo. E que em
pouco tempo, j ver como ser capaz de melhorar sensivelmente.

Observe a parte superior esquerda da janela do navegador e poder comprovar a presena do texto delimitado pela
etiqueta <title>. Esta uma das funes desta etiqueta, cujo principal incumbncia o de servir de referncia nos
motores de busca como o Google (http://www.google.com) e o Yahoo! (http://www.yahoo.com).

Por outro lado, os elementos que colocamos entre a etiqueta <body> e </body> se podem ver no espao reservado
para o corpo da pgina.

Enfim, rode o cdigo passado no incio deste artigo e veja o resultado.

Se agora dermos um clique no boto direito do mouse sobre a pgina e selecionarmos "Ver cdigo fonte" (ou View
page source), veremos como que numa janela acessria aparece o cdigo de nossa pgina. Este recurso de
extrema importncia j que nos permite ver o tipo de tcnicas empregadas por outros para a confeco de suas
pginas.

Com tudo isso assimilado j estamos em condies de aprofundarmos um pouco mais na descrio de algumas das
etiquetas mais usadas do HTML.

Possvel problema: Ao utilizar o Bloco de Notas no Windows em algumas ocasies, mesmo lhe dizendo que um
arquivo .html, o documento se salva como se fosse um texto e no uma pgina web. O que est acontecendo que
o Bloco de Notas tem pr-determinado salvar seus arquivos com extenso .txt e por isso, na realidade o que ele est
salvando no disco rgido minha_pagina.html.txt.

Para conseguir ter o controle das extenses no Bloco de Notas e no Windows em geral podemos acessar ao "Meu
computador" e no menu de "Ver", selecionar "Opes de pasta". Na janela que aparece clicamos na opo "Ver" e
nos permite desabilitar uma caixa de seleo que pe como "Ocultar extenses para os tipo de arquivos
conhecidos". (assim se faz no Windows 98, mas pode variar um pouco em outras verses do Windows).

Com isso conseguiremos ver sempre a extenso do arquivo com o qual estamos trabalhando e fazer com que o Bloco
de Notas atenda o que estamos lhe solicitando quando gravamos com outra extenso que no seja .txt.

Iniciando no HTML: Formato de pargrafos em HTML
Nos captulos anteriores apresentamos a ttulo de exemplo, algumas etiquetas que permitem dar formato ao nosso
texto. Neste captulo veremos com mais detalhe, as etiquetas mais amplamente utilizadas e exemplificaremos
algumas delas posteriormente.

Formatar um texto passa por tarefas to evidentes como definir os pargrafos, justific-los, introduzir marcadores,
numeraes, ou pr em negrito, itlico, etc.

Vimos que para definir os pargrafos utilizamos a etiqueta <p> que introduz um salto e deixa uma linha em branco
antes de continuar com o resto do documento.

Podemos tambm utilizar a etiqueta <br>, da qual no existe seu fechamento correspondente (</br>), para realizar
um simples enter, com o que no deixamos uma linha em branco, e sim, somente mudamos de linha.

Nota: Existem outras etiquetas que no tm seu correspondente de fechamento, como <img> para as imagens, que
veremos mais adiante. Isto ocorre porque um salto de linha ou uma imagem no comeam e acabam mais adiante,
simplesmente s tm presena em um lugar pontual.

Podemos comprovar que mudar de linha em nosso documento HTML sem introduzir algumas dessas ou de outras
etiquetas no implica em absoluto uma mudana de linha na pgina visualizada.

Na realidade o navegador introduzir o texto e no mudar de linha a no ser que esta chegue a seu fim ou se o
especifiquemos com a etiqueta correspondente.

Os pargrafos delimitados por etiquetas <p> podem ser facilmente justificados esquerda, ao centro ou direita,
especificando tal justificao no interior da etiqueta por meio de um atributo align. Um atributo no mais do que
um parmetro includo no interior da etiqueta que ajuda a definir o funcionamento da etiqueta de uma forma mais
pessoal. Veremos ao longo deste manual uma quantidade de atributos muito teis para todo tipo de etiquetas.

Ento, se desejssemos introduzir um texto alinhado esquerda escreveramos:

<p align="left">Texto alinhado esquerda</p>


Para uma justificao ao centro:

<p align="center">Texto alinhado ao centro</p>


Para justificar direita:

<p align="right">Texto alinhado direita</p>


Como se v, em cada caso o atributo align toma determinados valores que so escritos entre aspas. Em algumas
ocasies necessitamos especificar alguns atributos para o funcionamento correto da etiqueta. Em outros casos, o
prprio navegador toma um valor definido por padro. Para o caso de align, o valor padro left.

Nota: Os atributos tm seus valores indicados entre aspas ("), mas se no os indicamos entre aspas, tambm
funcionar na maioria dos casos. Entretanto, aconselhvel que ponhamos sempre as aspas para acostumarmos a
utiliz-las, por dar homogeneidade aos nossos cdigos e para evitar erros futuros em sistemas mais meticulosos.

O atributo align no exclusivo da etiqueta <p>. Outras etiquetas muitos comuns, que veremos mais adiante, entre
as quais se introduzem texto ou imagens, costumam fazer uso deste atributo de forma habitual.

Imaginemos um texto relativamente longo onde todos os pargrafos esto alinhados esquerda (por exemplo). Uma
forma de simplificar nosso cdigo e de evitar introduzir continuamente o atributo align sobre cada uma de nossas
etiquetas utilizando a etiqueta <div>.

Esta etiqueta por si s no serve para nada. Tem que estar acompanhada do atributo align e o que nos permite
alinhar qualquer elemento (pargrafo ou imagem) da maneira que ns desejarmos.

Assim, o cdigo:

<p align="left">paragrafo1</p>
<p align="left">pargrafo2</p>
<p align="left">paragrafo3</p>

equivalente a:

<div align="left">
<p>paragrafo1</p>
<p>paragrafo2</p>
<p>paragrafo3</p>
</div>

Como vimos, a etiqueta <div> marca divises nas quais definimos um mesmo tipo de alinhado.

Exemplo prtico:

Para praticar um pouco o que acabamos de ver, vamos propor um exerccio que se pode resolver no
seu computador. Simplesmente queremos construir uma pgina que tenha, por esta ordem:

. 2 pargrafos centralizados;
. 3 pargrafos direita;
. Um salto triplo de linha;
. 1 pargrafo alinhado esquerda.

Veja um exemplo disto:

<html>
<head>
<title>Exemplo de formatao de pargrafos</title>
</head>
<body>
<p align="center">
Exemplo de formatar pargrafos
</p>
<p align="center">
Isto o resultado:
</p>
<div align="right">
<p>
Que so os buscadores que no tem porque manter um ndice e que tem robs que constantemente recorrem a
Internet em busca de novas pginas para inclu-las no buscador.
</p>
<p>
Imaginemos um texto relativamente longo onde todos os pargrafos esto alinhados esquerda (por exemplo).
</p>
<p>
Que so os buscadores que no tem porque manter um ndice e que tem robs que constantemente recorrem;
Internet em busca de novas pginas para inclu-las no buscador. Estes buscadores costumam ter um formulrio
acessvel na pgina inicial, com o link correspondente. No preciso navegar nas categorias para acessar o
formulrio.
</p>
</div>
<br>
<br>
<br>
<p>
Isto que acaba... at logo...
</p>
</body>
</html>

Cabealhos

Existem outras etiquetas para definir pargrafos especiais, formatados como ttulos. So os cabealhos ou Header
em ingls. Como dissemos, so etiquetas que formatam o texto como um ttulo, para o qual atribuem um tamanho
maior de letra e colocam o texto em negrita.

Existem vrios tipos de cabealhos que se diferenciam no tamanho da letra que utilizam. A etiqueta em concreto a
<h1>, para os cabealhos maiores, <h2> para os de segundo nvel e assim, at <h6> que o cabealho menor.

Os cabealhos implicam tambm uma separao em pargrafos, portanto, tudo o que for escrito dentro de <h1> e
</h1> (ou qualquer outro cabealho) ser colocado em um pargrafo independente.

Podemos ver como se apresentam alguns cabealhos a seguir:

<h1>Cabealho de nvel 1</h1>


Os cabealhos, como outras etiquetas de html, suportam o atributo align. Vejamos um exemplo de cabealho de
nvel 2 alinhado ao centro:

<h2 align="center">Cabealho de nvel 2</h2>


Outro exerccio interessante construir uma pgina web que contenha todos os cabealhos possveis. Pode-se ver a
seguir:

<html>
<head>
<title>Todos os cabealhos</title>
</head>
<body>
</body>
</html>


Conselho: No devemos utilizar as etiquetas do cabealho para formatar o texto, ou seja, se queremos colocar um
tipo de letra maior e em negrito, devemos utilizar as etiquetas que existem para isso (que veremos em seguida). Os
cabealhos so para colocar ttulos em pginas web e o navegador o responsvel de formatar o texto de maneira
que parea um ttulo. Cada navegador ento, pode formatar o texto ao seu gosto contanto que parea um ttulo.

Iniciando no HTML: Cor, tamanho e tipo de letra.

Apesar de que por razes de homogeneidade e simplicidade de cdigo estes tipos de formatos so controlados
atualmente por folhas de estilo cascata (das quais j teremos tempo de falar), existe uma forma clssica e direta de
definir cor, tamanho e tipo de letra de um determinado texto.

Isto se faz a partir da etiqueta <font> e seu fechamento correspondente. Dentro desta etiqueta devemos especificar
os atributos correspondentes a cada um destes parmetros que desejamos definir. A seguir comentamos os
atributos principais desta etiqueta:

Atributo face

Define o tipo de letra. Este atributo interpretado por verses do Netscape a partir da 3 e de MSIE 3 ou superiores.
Outros navegadores as ignoram completamente e mostram o texto com a fonte que utilizam.

Deve-se ter cuidado com este atributo j que cada usurio, dependendo da plataforma que utilize, pode no dispor
dos mesmos tipos de letra que ns com o que, se ns escolhemos um tipo do que no dispe, o navegador se ver
forado a mostrar o texto com a fonte que utiliza por padro (que costuma ser Times New Roman). Para evitar isso,
dentro do atributo costuma-se selecionar vrios tipos de letras separados por vrgulas. Neste caso, o navegador
comprovar que dispe do primeiro tipo numerado e se no for assim, passar para o segundo e assim
sucessivamente at encontrar um tipo que possua ou ento, at acabar a lista e colocar a fonte padro. Vejamos um
exemplo:

<font face="Comic SansMS,arial,verdana">Este texto tem outra tipografia</font>


Este texto tem outra tipografia.

Nota: Aqui temos um exemplo de atributo cujo valor deve estar limitado entre aspas (").

Havamos dito que as aspas eram opcionais nos atributos, entretanto isto no assim sempre. Se o valor do atributo
contm espaos, como o caso de:

face="Comic Sans MS,arial,verdana"

Devemos colocar as aspas para limit-lo. Em caso de no ter aspas:

face=Comic Sans MS,arial, verdana

Se entenderia que face=Comic, mas no se levaria em conta tudo o que segue, porque o HTML no o associaria ao
valor atributo. Neste caso o HTML pensaria que as seguintes palavras (depois do espao) so outros atributos, mas
como no os conhece como atributos simplesmente iria ignor-los.

Atributo size

Define o tamanho da letra. Este tamanho pode ser absoluto ou relativo.

Se falarmos em trminos absolutos, existem 7 nveis de tamanhos distintos numerados de 1 a 7 por ordem
crescente. Escolheremos portanto um valor size="1" para a menor letra ou size="7" para a maior:

<font size=4>Este texto maior</font>


Podemos tambm modificar o tamanho de nossa letra em relao ao do texto mostrado anteriormente definindo o
nmero de nveis que queremos subir ou descer nesta escala de tamanhos por meio do signo + ou - . Desse modo, se
definimos nosso atributo como size="+1" o que queremos dizer que aumentamos um nvel o tamanho da letra. Se
estvamos escrevendo previamente em 3, passaremos automaticamente a 4.

Os tamanhos reais que vermos na tela dependero da definio e do tamanho da fonte escolhido pelo usurio no
navegador. Este tamanho de fonte pode ser definido no Explorer indo ao menu superior, Exibir/Tamanho da fonte.
No Netscape escolheremos View/Text Size. Esta flexibilidade pode acabar sendo embaraosa para ns em mais de
uma ocasio, j que em muitos casos desejaremos que o tamanho do texto permanea constante para que este
caiba em um determinado espao. Veremos em seu momento que esta prefixao do tamanho pode ser realizada
pelas folhas de estilo em cascata.

Atributo cor

A cor do texto pode ser definida atravs do atributo cor. Cada cor por sua vez definida por um nmero
hexadecimal que est composto por trs partes. Cada uma destas partes representa a contribuio do vermelho,
verde e azul cor em questo.

Por outro lado possvel definir de uma maneira imediata algumas das cores mais frequentemente usadas para as
que se criaram um nome mais mnemotcnica:

Aqua - Azul piscina;
Black - Preto;
Blue - Azul
Fuchsia - Rosa;
Gray - Cinza
Green - Verde;
Lime - Verde limo;
Maroon - Marrom;
Navy - Azul escuro;
Purple - Roxo;
Red - Vermelho;
Silver - Cinza claro;
White - Branco;
Yellow - Amarelo.

Exemplo:

<font color="red">Este texto est em vermelho</font>


Com tudo isso, j somos capazes de criar um texto formatado de uma forma realmente elaborada.

Colocamos ento em prtica tudo o que aprendemos nestes captulos fazendo um exerccio consistente em uma
pgina que tenha as seguintes caractersticas:

. Um ttulo com cabealho de nvel 1, em itlico e na cor verde oliva;
. Um segundo ttulo com cabealho de nvel 2, tambm na cor verde oliva;
. Todo texto da pgina dever apresentar-se com uma fonte diferente da fonte padro. Por exemplo, "Comic Sans
MS" e no caso de que esta no esteja no sistema, que se coloque a fonte "Arial".

Que seria algo como:

<html>
<head>
<title>Home de cozinha para todos</title>
</head>
<body>
<font color="Olive" face="Comic Sans MS,arial">
<h1 align="center"><i>Cozinha para Todos</i></h1>
<h2 align="center">A cozinha ao seu alcance</h2>
</font>
<font face="Comic Sans MS,arial">
Descubra os pratos mais saborosos, fceis e econmicos que voc possa imaginar.
<br>
Dentro deste site voc poder ter acesso a grande variedade de <b>receitas</b> de preparao simples,
aprender como realizar <b>atividades comuns</b> dentro de una cozinha e poder expor suas perguntas
em nossa <b>oficina</b> gourmet onde nosso cozinheiro virtual poder ajudar-lhe em seus projetos culinrios.
Tambm lhe ser possvel adquirir os <b>livros</b> gastronmicos mais populares ao preo mais acessvel...
<br>
Mergulhe nos mistrios da cozinha sem queimar mais panelas, nem ligar para o disk-pizza.
</font>
</body>
</html>

Iniciando no HTML: Atributos para pginas

As pginas HTML podem ser construdas com uma variedade de atributos que lhe podem dar um aspecto pgina
muito personalizado. Podemos definir atributos como a cor de fundo, a cor do texto ou dos links. Estes atributos se
definem na etiqueta <body> e, como dizamos so gerais a toda a pgina.

O melhor para explicar seu funcionamento v-los um a um.

Atributos para fundos:

. Bgcolor: especificamos uma cor de fundo para a pgina. No captulo anterior aprendemos a construir qualquer cor,
com seu nome ou seu valor RGB. A cor de fundo que podemos atribuir com bgcolor uma cor plana, ou seja, a
mesma para toda a superfcie do navegador;

. Background: serve para indicar a colocao de uma imagem como fundo da pgina. Nos captulos mais adiante,
veremos como se inserem imagens com HTML e os tipos de imagens que se podem utilizar.

Exemplo de fundo

Vamos colocar esta imagem no fundo da pgina.

Pegue uma imagem qualquer de seu desejo, de extenso .JPG e altere o nome dela para "fundo". Ficando: fundo.jpg.

Supomos que se encontra no mesmo diretrio que a pgina. Neste caso se colocaria a seguinte etiqueta <body>:

<body background="fondo.jpg">


Conselho: Sempre que colocarmos uma imagem de fundo, devemos tambm pr uma cor de fundo prxima da cor
da imagem.

Isto se deve, pois ao colocar uma imagem de fundo, temos que colocar uma cor que contraste suficientemente com
tal fundo. Se o visitante no pode ver o fundo por qualquer questo (por exemplo, por ter a carga de imagens
desabilitada) pode que o texto no contraste o suficiente com a cor de fundo padro da web.

Acredito que o melhor a fazer testar com um exemplo. Se a imagem de fundo escura, teremos que colocar um
texto claro para que se possa ler. Se o visitante que acessa a pgina no v a imagem de fundo, sair o fundo padro,
que geralmente branco, de modo que ao ter um texto de cor clara sobre um fundo branco, no ser possvel ler o
texto convenientemente.

Ocorre parecido quando se est fazendo o download da pgina. Se ainda no chegou ao nosso sistema a imagem de
fundo, veremos o fundo que tivermos selecionado com bgcolor e interessante que seja parecido cor da imagem
para que se possa ler o texto enquanto se faz o download da imagem de fundo.

Cor do texto

. Text: Este atributo serve para atribuir a cor do texto da pgina. Por padro o negro.

Ademais da cor do texto, temos trs atributos para atribuir cor dos links da pgina. J devemos saber que os links
devem diferenciar-se do resto do texto da pgina para que os usurios possam identific-los facilmente. Para isso,
eles costumam aparecer sublinhados e com uma cor mais viva que o texto. Os trs atributos so os seguintes:

. Link: a cor dos links que no foram visitados;

. Vlink: a cor dos links visitados. A letra "v" vem justamente da palavra visitado. a cor que tero os links que j
visitamos. Por padro sua cor roxa. Esta cor dever ser um pouco menos viva que a cor dos links normais;

. Alink: a cor dos links ativos. Um link est ativo no preciso momento em que se clica. s vezes difcil perceber
quando um link est ativo porque no momento em que se ativa, porque o estamos clicando e nesse caso, o
navegador abandonar a pgina rapidamente e no poderemos ver o link ativo mais que um mnimo instante.

Exemplo de cor de texto

Vamos ver uma pgina em que a cor de fundo seja preta, e as cores dos textos e dos links sejam claros. Colocaremos
a cor do texto branca e os links amarelos, mais ressaltados os que no tenham sido visitados e menos ressaltados os
que j tenham sido. Para isso, escreveramos a etiqueta body assim:

<body bgcolor="#000000" text="#ffffff" link="#ffff33" alink="ffffcc" alink="ffff00">


Margens

Com outros atributos da etiqueta <body> podem-se atribuir espaos de margens nas pginas, o que muito til para
eliminar as margens em branco que aparecem nos lados, em cima e embaixo da pgina. Estes atributos so
diferentes para o Internet Explorer e para o Netscape Navigator, por isso, devemos utiliz-los todos se queremos que
todos os navegadores os interpretem perfeitamente:

. Leftmargin: para a indicar a margem nos lados da pgina;

. Topmargin: para indicar a margem acima e abaixo da pgina;

. Marginwidth: a contrapartida de leftmargin para Netscape (margem nos lados);

. Marginheight: igual ao topmargin, mas para Netscape (margem acima e abaixo).

Um exemplo de pgina sem margem a prpria pgina de criarweb.com que voc est visitando atualmente. (pelo
menos na hora de escrever este artigo). Alm disso, vamos ver outra pgina sem margens, caso algum necessite ver
o exemplo nestas linhas:

<body topmargin=0 leftmargin=0 marginheight=0 marginwidth=0 bgcolor="ffffff">
<table width=100% bgcolor=ff6666><tr><td>
<h1>Ol amigos</h1>
<br>
<br>
Obrigado por me visitar!
</td></tr></table>
</body>

Esta pgina tem o fundo branco e dentro um painel com o fundo vermelho. Na pgina poderemos ver que o painel
ocupa o espao na pgina sem deixar lugar para nenhum tipo de margem.


Iniciando no HTML: Listas - Parte 1
So realmente notveis as possibilidades que o HTML nos oferece em questo de tratamento de texto. No se
limitam ao que vimos at agora, pois vo ainda mais longe. Vrios exemplos disso so as listas, que servem para
numerar e definir elementos, os textos pr-formatados e os cabealhos ou os ttulos.

As listas so utilizadas para citar, numerar e definir objetos. Tambm so utilizadas correntemente para deslocar o
comeo da linha para a direita.

Podemos distinguir trs tipos de listas:

. Listas desordenadas;
. Listas ordenadas;
. Listas de definio.

Veremos agora detalhadamente uma por uma:

Listas desordenadas

So delimitadas pelas etiquetas <ul> e </ul> (unordered list). Cada um dos elementos da lista citado por meio de
uma etiqueta <li> (sem fechamento, ainda que exista nenhum inconveniente em coloc-lo). Ento, fica assim:

<p>Pases do mundo</p>
<ul>
<li>Brasil</li>
<li>Espanha</li>
<li>Austrlia</li>
</ul>


Podemos definir o tipo de marcador empregado para cada elemento. Para isso devemos especific-lo por meio do
atributo type includo dentro da etiqueta de abertura <ul>, se queremos que o estilo seja vlido para toda a lista, ou
dentro da etiqueta <li> se queremos especificar um s elemento. A sintaxe do seguinte tipo:

<ul type="tipo de marcador">

E o tipo de marcador pode ser um dos seguintes:

. Circle;
. Disc;
. Square.

Nota: Em alguns navegadores no funciona a opo de mudar o tipo de marcador e por mais que nos empenhemos,
sempre sair a bolinha preta.

Em caso de que no funcione, sempre podemos construir a lista mo com o marcador que quisermos, utilizando as
tabelas do HTML. Veremos mais adiante como trabalhar com tabelas.

Vamos ver um exemplo de lista com um quadrado ao invs de uma bolinha e, no ltimo elemento, colocaremos um
crculo. Para isso, vamos colocar o atributo type na etiqueta <ul>, que ir afetar todos os elementos da lista:

<ul type="square">
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
<li type="circle">Elemento 4</li>
</ul>


Continuamos estudando as listas do HTML, que nos possibilita criar estruturas atrativas para apresentar a
informao.

Listas ordenadas

Neste caso, usaremos as etiquetas <ol> (ordered list) e seu fechamento. Cada elemento ser igualmente precedido
de sua etiqueta <li>.

Como exemplo:

<p>Regras de comportamento no trabalho</p>
<ol>
<li>O chefe sempre tem a razo</li>
<li>Em caso de dvida, aplicar a regra 1</li>
</ol>


Do mesmo modo das listas desordenadas, as listas ordenadas oferecem a possibilidade de modificar o estilo.
Concretamente, nos possvel especificar o tipo de numerao empregado escolhendo entre nmeros (1,2,3...),
letras (a,b,c...) e suas maisculas (A,B,C...) e nmeros romanos em suas verses maisculas (I,II,III...) e minsculas
(i,ii,iii...).

Para realizar tal seleo temos de utilizar, como para o caso anterior, o atributo type, o qual ser situado dentro da
etiqueta <ol>. Neste caso, os valores que o atributo pode tomar so:

. 1 - Para ordenar por nmeros;
. a - Por letras do alfabeto;
. A - Por letras maisculas do alfabeto;
. i - Ordenao por nmeros romanos em minsculas;
. I - Ordenao por nmeros romanos em maisculas.

Nota: Lembramos que em alguns navegadores no funciona a opo de mudar o tipo de marcador.

Pode ser que em algum caso desejemos comear nossa numerao por um nmero ou letra que no tem porque ser
necessariamente o primeiro de todos. Para resolver esta situao, podemos utilizar um segundo atributo, start, que
ter um nmero como valor. Este nmero, que por padro 1, corresponde ao valor a partir do qual comeamos a
definir nossa lista. Para o caso das letras ou dos nmeros romanos, o navegador se encarrega de fazer a traduo do
nmero letra correspondente.

Propomos um exemplo usando este tipo de atributos:

<p>Ordenamos por nmeros</p>
<ol type="1">
<li>Elemento 1</li>
<li>Elemento 2</li>
</ol>

<p>Ordenamos por letras</p>
<ol type="a">
<li>Elemento a</li>
<li>Elemento b</li>
</ol>

<p>Ordenamos por nmeros romanos comeando pelo 10</p>
<ol type="i"start="10">
<li>Elemento x&li;/li>
<li>Elemento xi&li;/li>
</ol>


Terminamos o assunto das listas estudando as listas de definio. Veremos tambm a combinao de listas.

Listas de definio

Cada elemento apresentado junto com sua definio. A definio principal <dl> e </dl> (definition list). As
etiquetas do elemento e sua definio so <dt> (difinition term) e <dd> (definition definition) respectivamente.

Aqui lhe propomos um cdigo que poder clarear este sistema:

<p>Dicionrio da Lngua Portuguesa</p>
<dl>
<dt>Aougue</dt>
<dd>Estabelecimento onde se vendem carnes frescas</dd>
<dt>Colheita</dt>
<dd>Ato de colher os produtos agrcolas</dd>
</dl>


Observe que em cada linha <dd> est deslocada da direo da esquerda. Este tipo de etiquetas usado muitas vezes
com o propsito de criar textos mais ou menos deslocados da direo da esquerda.

O cdigo:

<dl>
<dd>Primeiro nvel de deslocamento
<dl>
<dd>Segundo nvel de deslocamento
<dl>
<dd>Terceiro nvel de deslocamento
</dl>
</dl>
</dl>


Combinando listas

Nada nos impede de utilizar todas estas etiquetas de forma combinada como vimos em outros casos. Dessa forma,
podemos conseguir listas mistas como, por exemplo:

<p>Cidades do mundo</p>
<ul>
<li>Brasil
<ol>
<li>Rio de Janeiro
<li>Salvador
</ol>
<li>Espanha
<ol>
<li>Madrid
<li>Barcelona
</ol>
</ul>


Iniciando no HTML: Caracteres especiais
Uma pgina web vista por diferentes pases, que usam conjuntos de caracteres distintos. A linguagem HTML nos
oferece um mecanismo pelo qual podemos estar seguros que uma srie de caracteres raros sero bem vistos em
todos os computadores do mundo, independentemente de seu jogo de caracteres.

Estes conjuntos so os caracteres especiais. Quando queremos pr um desses caracteres numa pgina, devemos
substitu-lo por seu cdigo.

Por exemplo, a letra "" (a minscula acentuada) se escreve: "" de modo que a palavra pgina seria escrita numa
pgina HTML desse modo:

p&aamp;aacute;gina

Caracteres especiais bsicos

Na realidade estes caracteres se usam em HTML para no confundir um incio ou final de etiqueta, umas aspas ou
um & com seu correspondente caractere:

< < > >
& & " "

Caracteres especiais do HTML 2.0:

Á À
É È
Í Ì
Ó Ò
Ú Ù
á à
é è
í ì
ó ò
ú ù
Ä Â
Ë Ê
Ï Î
Ö Ô
Ü Û
ä â
ë ê
ï î
ö ô
ü û
Ã å
Ñ Å
Õ Ç
ã ç
ñ Ý
õ ý
Ø ÿ
ø Þ
Ð þ
ð Æ
ß æ

Caracteres especiais do HTML 3.2:

¼ (espao em branco)
½ ¡
¾ £
© ¥
® §
ª ¤
² ¦
³ «
¹ ¬
¯
µ º
¶ ´
· ¨
° ±
¸ »
¿

Outros caracteres especiais:

× ¢
÷ €

Iniciando no HTML: Links em HTML

At aqui, vimos que uma pgina web um arquivo HTML no qual podemos incluir, entre outras coisas, textos
formatados ao nosso gosto e imagens que veremos mais adiante. Do mesmo modo, um web site poder ser
considerado como um conjunto de arquivos, principalmente pginas HTML e imagens, que constituem o contedo
ao qual o navegante tem acesso.

Entretanto, no poderamos falar de navegante ou de navegao se estes arquivos HTML no estivessem
devidamente conectados entre eles e com o exterior de nosso site por meio de links hipertexto. Na verdade, o
atrativo original do HTML reside no possvel empenho dos contedos dos arquivos introduzindo referncias sob a
forma de links que permitem um acesso rpido informao desejada. Serviria pouco se tivssemos na rede pginas
isoladas as quais as pessoas no pudessem acessar ou pginas onde no fosse possvel ir para outras.

Um link pode ser facilmente detectado em uma pgina. Basta deslizar o cursor do mouse sobre as imagens ou o
texto e ver como muda de sua forma original transformando-se por regra geral em uma mo com um dedo
indicador. Adicionalmente, estes links costumam ir, no caso dos textos, coloridos e sublinhados para que o usurio
no tenha dificuldade em os reconhecer. Se no especificamos o contrrio (j teremos a ocasio de explicar como),
estes links-texto estaro sublinhados e coloridos de azul. No caso das imagens que servem de link, veremos que
esto delimitadas por uma marcao azul por padro.

Para colocar um link, utilizaremos as etiquetas <a> e </a>. Dentro da etiqueta de abertura devemos especificar o
destino do link. Este destino ser introduzido sob a forma de atributo, no qual leva o nome href.

A sintaxe geral de um link portanto da seguinte forma:

<a href="destino">contedo</a>

Sendo o contedo um texto ou uma imagem. a parte da pgina que se colocar ativa e onde deveremos clicar para
acessar ao link.

E o destino por sua vez, ser uma pgina, um correio eletrnico ou um arquivo.

Em funo do destino, os links so classicamente agrupados da seguinte forma:

. Links internos: os que se dirigem a outras partes dentro da mesma pgina;
. Links locais: os que se dirigem a outras pginas do mesmo site web;
. Links remotos: os que se dirigem pginas de outros sites web;
. Links com endereos de correio: para criar uma mensagem de correio dirigido a um endereo;
. Links com arquivos: Para que os usurios possam fazer download de arquivos.

Iniciando no HTML: Links internos

So os links que apontam a um lugar diferente dentro da mesma pgina. Este tipo de link essencialmente utilizado
em pginas onde o acesso aos contedos pode ser prejudicado devido ao grande tamanho da mesma. Mediante
estes links, podemos oferecer aos visitantes a possibilidade de acessar rapidamente ao incio e ao final da pgina, ou
tambm a diferentes pargrafos ou sees.

Par criar um link deste tipo necessrio, alm do link origem propriamente dito, um segundo link que ser colocado
no destino. Vejamos mais claramente como funcionam estes links com um simples exemplo:

Suponhamos que queremos criar um link que aponte ao final da pgina. O primeiro a fazer ser colocar nosso link
origem. Colocaremos e escreveremos da seguinte forma:

<a href="#abaixo">Ir abaixo</a>


Como pode ser visto, o contedo do link o texto "Ir abaixo" e o destino, abaixo, um ponto da mesma pgina que
ainda no foi definido. Ateno ao smbolo # ; ele quem especifica ao navegador que o link aponta a uma seo
particular.

Em segundo lugar, temos que gerar um link no destino. Este link levar o nome "abaixo" para poder distingui-lo dos
outros possveis links realizados dentro da mesma pgina. Neste caso, a etiqueta que escreveremos ser esta:

<a name="abaixo"></a>

Na verdade, estes links, mesmo sendo teis, no so os mais utilizados. A tendncia geral a de criar pginas
(arquivos) independentes com tamanhos mais reduzidos linkados entre eles por links locais (que veremos em
seguida). Desta forma, evitamos o excesso de tempo de carregamento de um arquivo e a introduo de excesso de
informao que possa desviar a ateno do usurio.

Uma aplicao corrente destes links consiste em colocar um pequeno ndice ao princpio de nosso documento onde
introduzimos links origem s diferentes sees. Paralelamente, ao final de cada seo introduzimos um link que
aponta ao ndice de forma que possamos guiar o navegante na busca da informao til para ele.

Iniciando no HTML: Links locais

Como dissemos, um site web est constitudo de pginas interconexas. No captulo anterior vimos como linkar
diferentes sees dentro de uma mesma pgina. Resta-nos estudar a maneira de relacionar os distintos documentos
HTML que compem nosso site web.

Para criar este tipo de links, temos que criar uma etiqueta da seguinte forma:

<a href="arquivo.html">contedo</a>

Por regra geral, para uma melhor organizao, os sites costumam estar ordenados por diretrios. Estes diretrios
costumam conter diferentes sees da pgina, imagens, udios... por isso que em muitos casos no nos ser vlido
especificar o nome do arquivo, e sim, o diretrio onde nosso arquivo.html est alojado.

Se voc j tiver trabalhado com MS-DOS no ter nenhum problema para compreender o modo de funcionamento.
Somente dever ter cuidado em usar a barra "/" no lugar da contra barra "\".

Para aqueles que no sabem como mostrar um caminho de um arquivo, aqui vai uma srie de indicaes que lhes
vo ajudar a compreender a forma de express-los. No nada difcil e com um pouco de prtica o far
praticamente sem pensar.

1. H de situar mentalmente no diretrio no qual se encontra a pgina com o link;
2. Se a pgina destino est em um diretrio includo dentro do diretrio no qual nos encontramos, temos de marcar
o caminho numerando cada um dos diretrios pelos quais passamos at chegar ao arquivo e separando-os pelo
smbolo barra "/". No final, obviamente, escrevemos o arquivo;
3. Se a pgina destino encontra-se em um diretrio que inclui o da pgina com o link, temos que escrever dois
pontos seguidos e uma barra "../" tantas vezes quantas forem os nveis que subirmos na hierarquia de diretrios, at
chegar ao diretrio onde est localizado o arquivo destino;
4. Se a pgina encontra-se em outro diretrio no includo nem incluente do arquivo origem, teremos que subir com
a regra 3 por meio de ".." at encontrar o diretrio que englobe o diretrio que contm a pgina destino. A seguir
faremos como a regra 2. Escreveremos todos os diretrios pelos quais passamos at chegar ao arquivo.

Exemplo:

Para esclarecer este ponto podemos fazer um exemplo a partir da estrutura de diretrios da imagem.

Para fazer um link desde index.html para yyy.html:

<a href="secao1/paginas/yyy.html">conteudo</a>

Para fazer um link desde xxx.html para yyy.html:

<a href="../secao1/paginas/yyy.html">conteudo</a>

Para fazer um link desde yyy.html para xxx.html:

<a href="../../secao2/xxx.html">conteudo</a>

Os links locais podem por sua vez j apontar mais precisamente a uma seo concreta, ao invs da pgina em geral.
Este tipo de link costuma ser um hbrido de interno e local. A sintaxe deste tipo:

<a href="arquivo.html#secao">conteudo</a>

Como para os links internos, neste caso temos que marcar a seo com outro link do tipo:

<a name="secao"></a>

Iniciando no HTML: Links locais
Para terminar o tema dos links veremos os trs ltimos tipos de links que havamos assinalado.

Links remotos

So os links que se dirigem s pginas que se encontram fora do nosso site web, ou seja, qualquer outro documento
que no faz parte de nosso site.

Este tipo de link muito comum e no representa nenhuma dificuldade. Simplesmente colocamos no atributo HREF
de nossa etiqueta <A> a URL ou endereo da pgina com a qual queremos linkar. Ser algo parecido a isto:

<a href=http://www.yahoo.com.br>ir a yahoo.com.br</a>

Somente cabe destacar que todos os endereos web (URLs) comeam por http://. Isto indica que o protocolo pelo
qual se acessa HTTP, o utilizado na web. No devemos nos esquecer de coloc-lo porque seno os links sero
tratados como links locais em nosso site.

Outra coisa interessante que no temos necessariamente que linkar com uma pgina web com o protocolo HTTP.
Tambm podemos acessar recursos atravs de outros protocolos como o FTP. Em tal caso, os endereos dos
recursos no comearo com http:// e sim por ftp://.

Links a endereos de correio

Os links a endereos de correio so aqueles em que ao clic-los nos abre uma nova mensagem de
correio eletrnico dirigido a um determinado endereo de mail. Estes links so muito habituais nas pginas web e a
maneira mais rpida de oferecer ao visitante uma via para o contato com o proprietrio da pgina.

Para colocar um link dirigido a um endereo de correio colocamos mailto: no atributo href do link, seguido do
endereo de correio ao qual se deve dirigir o link:

<a href="mailto:juliana@criarweb.com">juliana@criarweb.com</a>

Conselho: Quando voc colocar links a endereos de correio, procure indicar no contedo do link (o que h entre
<A> e </A>) o endereo de correio ao qual se deve escrever. Isto, porque se um usurio no tem configurado um
programa de correio em seu computador no poder enviar mensagens, mas pelo menos poder copiar o endereo
de mail e escrever o correio atravs de outro computador ou um sistema web-mail.

Alm do endereo do correio eletrnico do destinatrio, tambm podemos colocar no link o assunto da mensagem.
Isto se consegue colocando depois do endereo de correio uma interrogao, a palavra subject, o sinal de igual (=) e
o assunto em concreto:

<a href="malito:juliana@criarweb.com?subject=contato atravs da pgina">juliana@criarweb.com</a>

Podemos colocar outros atributos de mensagem com uma sintaxe parecida. Neste caso indicamos tambm que o
correio deve ir com cpia a colabore@criarweb.com:

<a href="mailto:juliana@criarweb.com?subject=contato atravs da pgina&cc=colabore@criarweb.com">
juliana@criarweb.com</a>

Nota: O visitante da pgina necessitar ter configurada uma conta de correio eletrnico em seu sistema para enviar
as mensagens. Logicamente, se no tiver servio de correio no computador no ser possvel enviar as mensagens e
este sistema de contato com o visitante no funcionar.

Links com arquivos

Este no um tipo de link propriamente dito, mas o assinalamos aqui porque um tipo de link muito habitual e que
apresenta alguma complicao para o usurio novato.

O mecanismo o mesmo que conhecemos nos links locais e nos remotos, com a nica particularidade de que em vez
de estar dirigidos para uma pgina web, est dirigido para um arquivo de outro tipo.

Se queremos linkar com um arquivo meu_arquivo.zip que se encontra no mesmo diretrio que a pgina,
escreveramos um link assim:

<a href="meu_arquivo.zip">Baixar meu_arquivo.zip</a>

Se clicamos um link deste tipo nosso navegador baixar o arquivo, fazendo a pergunta tpica se: "Deseja abrir o
arquivo ou salv-lo no computador?".

Conselho: No colocar em Internet arquivos executveis diretamente e sim, arquivos comprimidos. Por duas razes:

1. O arquivo ocupar menos, com o que ser mais rpido sua transferncia;
2. Ao perguntar ao usurio o que deseja fazer com o arquivo, lhe oferece a opo de abri-lo e salv-lo no
computador. Ns geralmente desejaremos que o usurio salve-o no computador e no o execute at que o tenha
em seu disco rgido. Se decido abri-lo ao invs de salv-lo simplesmente o colocar em funcionamento e quando
pare no estar salvo em seu sistema. Se os arquivos estiverem comprimidos obrigaremos ao usurios a
descomprimi-los em seu disco rgido antes de coloc-los em funcionamento, com o que nos certificamos que o
usurio o salva em seu computador antes de execut-lo.

Se quisermos linkar outro tipo de arquivos como um PDF ou mundo VRML (Realidade Virtual para Internet)
continuaremos fazendo da mesma maneira. O navegador, se reconhece o tipo de arquivo, o responsvel de abri-lo
utilizando o conector adequado para isso. Assim, se por exemplo linkamos com um PDF colocar o programa
Acrobat Reader em funcionamento para mostrar os contedos. Se linkamos com um mundo VRML colocar em
funcionamento o plug-in que o usurio tenha instalado para ver os mundos virtuais (Cosmo, por exemplo).

Este seria um exemplo de link a um documento PDF:

<a href="meu_documento.pdf">Baixar o PDF</a>

Iniciando no HTML: Imagens em HTML
Sem dvida, um dos aspectos mais vistosos e atrativos das pginas web o grafismo. A introduo em nosso texto
de imagens pode nos ajudar a explicar mais facilmente nossa informao e dar um ar muito mais esttico. Porm, o
abuso pode nos conduzir a uma sobrecarga que se traduz em uma distrao para o navegante, quem ter mais
dificuldade em encontrar a informao necessria, e um maior tempo para carregar a pgina o que pode ser de um
efeito nefasto se nosso visitante no tem uma boa conexo ou se um pouco impaciente.

Neste captulo no explicaremos como criar, nem como tratar as imagens, unicamente diremos que para isso
utilizam-se aplicaes como Paint Shop Pro, Photoshop ou Corel Draw. Tambm no explicaremos as
particularidades de cada tipo de arquivo GIF ou JPG e a forma de aperfeioar nossas imagens. A este assunto ser
dedicado em um futuro captulo.

As imagens so armazenadas em forma de arquivos, principalmente GIF (para desenhos) ou JPG (para fotos). Estes
arquivos podem ser criados por ns mesmos ou podem ser baixados gratuitamente em sites web especializados.

Sendo assim, nestes primeiros captulos nos limitaremos a explicar como inserir e alinhar devidamente em nossa
pgina uma imagem j criada.

A etiqueta que utilizaremos para inserir uma imagem <img> (image). Esta etiqueta no possui seu fechamento
correspondente e nela temos de especificar obrigatoriamente o paradeiro de nosso arquivo mediante o atributo src
(source).

A sintaxe fica ento da seguinte forma:

<img src="caminho para o arquivo">

Para expressar o caminho, faremos da mesma forma que vimos para os links. As regras continuam sendo as mesmas,
o nico que muda que, no lugar de uma pgina destino, o destino um arquivo grfico.

Alm deste atributo, obviamente indispensvel para a visualizao da imagem, a etiqueta <img> nos prope outra
srie de atributos de maior ou menor utilidade:

Atributo alt

Entre aspas deste atributo, colocaremos uma brevssima descrio da imagem. Esta etiqueta no indispensvel,
mas apresenta vrias utilidades.

Primeiramente, durante o processo de carregamento da pgina, quando a imagem no tiver sido ainda carregada,
o navegador mostrar esta descrio, com a qual o navegante poder ter uma ideia do que se trata neste caso.

Isto no to trivial se temos em conta que alguns usurios navegam pela rede com uma opo do navegador que
desativa a amostra de imagens, com o que tais pessoas podero sempre saber de que se trata o grfico e
eventualmente mudar o modo com imagens para visualizar.

Alm disso, determinadas aplicaes para incapacitados ou para telefones vocais que no mostram imagens
oferecem a possibilidade de l-las, o que nunca demais pensar nestes coletivos.

Em geral, podemos considerar como aconselhvel o uso deste atributo salvo para imagens de pouca importncia e
absolutamente indispensvel se a imagem em questo serve de link.

Atributos height e width

Definem a altura e largura respectivamente da imagem em pixels.

Todos os arquivos grficos possuem umas dimenses de largura e altura. Estas dimenses podem ser obtidas a partir
do prprio designer grfico ou tambm, clicando com o boto direito sobre a imagem vista pelo navegador para logo
escolher propriedades sobre o menu que se desdobra.

O fato de explicitar em nosso cdigo as dimenses de nossas imagens ajuda ao navegador a confeccionar a pgina da
forma que ns desejamos inclusive antes das imagens serem baixadas.

Assim, se as dimenses das imagens tiverem sido proporcionadas, durante o processo de carregamento, o
navegador reservar o espao correspondente a cada imagem criando uma planificao correta. O usurio poder
comear a ler tranquilamente o texto sem que este se mova de um lado a outro cada vez que se carregue uma
imagem.

Alm desta utilidade, o alterar os valores destes atributos, uma forma imediata de redimensionar nossa imagem.
Este tipo de utilidade no aconselhvel visto que, se o que pretendemos aumentar o tamanho, a perda da
qualidade da imagem ser muito sensvel. Inversamente, se desejamos diminuir seu tamanho, estaremos usando um
arquivo maior do que o necessrio para a imagem que estamos mostrando, com o que aumentamos o tempo de
descarregamento de nosso documento desnecessariamente.

importante insistir neste ponto j que muitos estreantes tm o pssimo costume de criar grficos pequenos
redimensionando a imagem por meio desses atributos a partir de arquivos de tamanho descomunal. Temos que
pensar que o tamanho de uma imagem com umas dimenses da metade no se reduz metade, e sim, que
aproximadamente 4 vezes inferior.

Atributo border

Define o tamanho em pixels do quadro que rodeia a imagem.

Dessa forma, podemos re-enquadrar nossa imagem se desejamos. particularmente til quando desejamos eliminar
a borda que aparece quando a imagem serve de link. Em tal caso teremos que especificar border="0".

Atributos vspace e hspace

Serve para indicar o espao livre, em pixels, que tem que ser colocado entre a imagem e outros elementos que a
rodeiam, como texto, outras imagens, etc.

Atributo lowsrc

Com este atributo podemos indicar um arquivo de baixa resoluo. Quando o navegador detecta que a imagem tem
este atributo, primeiro descarrega e mostra a imagem de baixa resoluo (que ocupa muito pouco e que se transfere
muito rpido). Posteriormente, descarrega e mostra a imagem de resoluo adequada (assinalada com o atributo
src, que se supe que ocupar mais e que ser mais lenta de se transferir).

Est atributo est em desuso, mesmo supondo uma vantagem considervel para que o descarregamento inicial se
realize mais rpido e que um visitante possa ver uma amostra da imagem enquanto se descarrega a imagem real.

Dica: Utilizar imagens como links

Isto quer dizer que uma imagem, assim como um texto, pode servir de link. Visto a estrutura dos links podemos
muito facilmente adivinhar o tipo de cdigo necessrio:

<a href="arquivo.html"><img src="imagem.gif"></a>

Exemplo prtico

Ser bvio para os leitores, fazer agora uma pgina que contenha uma imagem vrias vezes repetidas, mas com
diferentes atributos:

1. Uma das vezes que saia deve ser mostrada com seu tamanho original e com uma borda de 3 pixels;
2. Em outra ocasio a imagem aparecer sem borda, com sua mesma altura e com uma largura superior a original;
3. Tambm mostraremos a imagem sem borda, com sua mesma largura e com uma altura superior a original;
4. Por ltimo, mostraremos a imagem com uma altura e largura maiores que as originais, mas proporcionalmente
igual que antes.

Utilize uma imagem de sua preferncia para fazer este exerccio.

O cdigo fonte seria ento mais ou menos da seguinte forma da seguinte forma:

<img src="img1.gif" width="28" height="21" alt="Tamanho original" border="3">
<br>
<br>
<img src="img1.gif" width="68" height="21" alt="Achatada" border="0">
<br>
<br>
<img src="img1.gif" width="28" height="51" alt="Alargada" border="0">
<br>
<br>
<img src="img1.gif" width="56" height="42" alt="Dobro grande" border="0">

Iniciando no HTML: Formatando o texto

Alm de tudo relativo organizao dos pargrafos, um dos aspectos primordiais da formatao de um texto, o da
prpria letra. muito comum e prtico, apresentar o texto ressaltado em negrito, itlico e outros. Paralelamente, o
uso de ndices e subndices vital para a publicao de textos cientficos. Tudo isso e muito mais, possvel por meio
do HTML a partir de uma srie de etiquetas entre as quais vamos destacar algumas.

Negrito

Podemos escrever o texto em negrito o incluindo dentro das etiquetas <b> e </b> (bold). Esta mesma tarefa
desempenhada por <strong> e </strong> sendo ambas equivalentes. Ns nos inclinamos pelas primeiras por uma
simples razo de esforo.

Escrevendo um cdigo deste tipo:

<b>Texto em negrito</b>


Nota: Qual a diferena entre <b> e <strong>? Apesar das duas etiquetas fazerem o mesmo efeito, h uma
peculiaridade que as fazem distintas. A etiqueta <b> indica negrito, enquanto que a etiqueta <strong> indica que se
deve escrever ressaltado. Os navegadores interpretam o HTML segundo seu critrio, por isso que se podem ver as
pginas de distintas maneiras em uns browsers e outros. A etiqueta <h1> quer dizer "cabealho de nvel 1", o
navegador o responsvel de formatar o texto de maneira que parea um cabealho de primeiro nvel. Na prtica,
os cabealhos do Internet Explorer e do Netscape so muito parecidos (tamanho de letra grande e em negrito), mas
outro navegador poderia colocar os cabealhos sublinhados se lhe parecesse oportuno.

Itlico

Tambm neste caso existem duas possibilidades, uma curta: <i> e </i> (italic) e outra um pouco mais longa: <em> e
</em>. Neste manual, e na maioria das pginas que se v por a, normal encontrar com a primeira forma que
sem dvida mais simples para escrever e para se lembrar.

Abaixo, um exemplo de texto em itlico:

<i>Texto em itlico</i>


Sublinhado

O HTML nos prope tambm para o sublinhado as etiquetas: <u> e </u> (underline). Entretanto o uso do sublinhado
deve ser usado com muita precauo visto que os links hipertextos vo, a no ser que se indique o contrrio,
sublinhados com o que podemos confundir o leitor e afast-lo do verdadeiro interesse de nosso texto.

Subscrito e sobrescrito

Este tipo de formato de extrema utilidade para textos cientficos. As etiquetas empregadas so:

. <sup> e </sup> para os sobrescritos;
. <sub> e </sub> para os subscritos.

Temos aqui um exemplo:

A <sup>13</sup>CC<sub>3</sub>H<sub>4</sub>CINOS um heterociclo alergeno enriquecido


Combinar etiquetas

Todas estas etiquetas, incluindo as que j vimos e as que ainda vamos ver, podem ser combinadas estando umas
dentro das outras de forma que conseguimos resultados diferentes. Assim, podemos sem nenhum problema criar
um texto em negrito e em itlico colocando uma etiqueta dentro da outra:

<b>Isto s est em negrito<i>e isto em negrito e itlico</i></b>


Conselho: Para unir etiquetas HTML, faa corretamente. Referimo-nos a que se voc abre uma etiqueta dentro de
outra mais principal, antes de fechar a etiqueta principal feche as etiquetas que voc tiver aberto dentro dela.

Devemos evitar cdigos como o seguinte:

<b>Isto est em negrito e <i>itlico</b></i>

A favor de cdigos com etiquetas corretamente colocadas:

<b>Isto est em negrito e<i>itlico</i></b>

Isto muito aconselhvel, ainda que os navegadores entendam bem as etiquetas mal colocadas, por duas razes:

1. Sistemas como XML no so to permissivos com estes erros e pode que no futuro nossas pginas no funcionem
corretamente;
2. Leva muito tempo de processamento para os navegadores resolverem este tipo de erro, inclusive mais do que
construir a prpria pgina, por isso devemos evitar-lhes que sofram por uma m codificao.

Iniciando no HTML: Alinhamento de imagens com HTML
Vimos em seu momento o atributo align que nos permitia alinhar o texto direita, esquerda ou no centro de nossa
pgina. Dissemos que este atributo no era exclusivo da etiqueta e sim, que podia ser encontrado em outro tipo de
etiquetas.

Sendo assim, <img> uma dessas etiquetas que aceitam este atributo, mesmo sendo , neste caso, o funcionamento
diferente.

Para alinhar uma imagem horizontalmente podemos fazer da mesma forma que o texto, ou seja, utilizando align
dentro de uma etiqueta <p> ou <div>. Neste caso, o que incluiremos dentro desta etiqueta ser a imagem no lugar
do texto.

Este cdigo mostrar a imagem no centro:

<div align="center"><img src="logo.gif"></div>

Entretanto, j dissemos que a etiqueta <img> pode aceitar o atributo align. Neste caso, a utilidade que lhe damos
diferente da anterior.

O fato de utilizar o atributo align dentro da etiqueta <img> nos permite, no caso de dar os valores left ou right,
justificar a imagem do lado que desejamos uma vez que recheamos com texto o lado oposto. Dessa forma,
incorporamos nossas imagens dentro do texto de uma maneira simples.

Aqui se pode ver o tipo de cdigo a criar para obter tal efeito:

<p>
<img src="imagem.gif" align="right">Texto to extenso quanto quisermos para que cubra a parte esquerda da
imagem. Continuo colocando texto para que se veja o efeito, Bla bla bla bla bla bla bla...
</p>


<p>
<img src="imagen.gif" align="left">Texto to extenso quanto quisermos para que cubra a parte direita da imagem.
Continuo colocando texto para que se veja o efeito, Bla bla bla bla bla bla bla...
</p>


Se em algum momento desejarmos preencher esse espao lateral, podemos passar a uma zona livre introduzindo
uma quebra de linha <br> dentro do qual acrescentaramos um atributo: clear

Sendo ento, etiquetas do tipo:

<br clear="left">
Pular verticalmente at encontrar a lateral esquerdo livre.
<br clear="right">
Pular verticalmente at encontrar a lateral direita livre.
<br clear="all">
Pular verticalmente at encontrar ambas laterais livres.


Existe outro tipo de valores que pode adotar o atributo align dentro da etiqueta <img>. Isto relativo ao
alinhamento vertical da imagem.

Supomos que escrevemos uma linha ao lado de nossa imagem. Esta linha pode ficar, por exemplo acima, abaixo ou
no meio da imagem. Ainda assim, pode que uma mesma linha tenhamos vrias imagens de alturas diferentes que
podem ser alinhadas de distintas formas.

Estes valores adicionais so:

. Top - Ajusta a imagem parte mais alta da linha. Isto quer dizer que, se existe uma imagem mais alta, ambas as
imagens apresentaro a borda superior na mesma altura;

. Bottom - Ajusta o baixo da imagem ao texto;

. Absbottom - Colocar a borda inferior da imagem ao nvel do elemento mais baixo da linha;

. Middle - Faz coincidir a base da linha de texto com o meio vertical da imagem;

. Absmiddle - Ajusta a imagem ao meio absoluto da linha.

Estas explicaes, que podem ser um pouco complicadas, sero mais facilmente assimiladas com um pouco mais de
prtica.

Falta explicar como introduzir debaixo da imagem um p de foto ou uma explicao. Para isso, teremos que ver
antes de tudo as tabelas, nos prximos captulos...

Iniciando no HTML: Formatos grficos para pginas web
O componente grfico das pginas web tem muita importncia, que o que faz com que estas seja vistosas e o que
nos permite aplicar nossa criatividade para fazer o design do site uma tarefa agradvel. tambm uma ferramenta
para aproximar os sites ao mundo onde vivemos, entretanto, tambm o causador de graves erros nas pginas e
fazer destas, em alguns casos, um martrio para o visitante.

As noes bsicas para o uso de arquivos grficos so simples, conhec-las, mesmo que seja ligeiramente, nos
ajudar a criar sites agradveis e rpidos. No cometer erros no uso das imagens fundamental, mesmo que no
seja um designer e as imagens que utiliza so feias, utilize-as bem e assim, estar tornando mais agradvel a visitas
s suas pginas.

Tipos de arquivos

Em Internet se utilizam principalmente dois tipos de arquivos grficos GIF e JPG, pensados especialmente para
aperfeioar o tamanho que ocupam em disco, j que os arquivos pequenos se transmitem mais rapidamente pela
Rede.

O formato de arquivo GIF se usa para as imagens que tenham desenhos, enquanto que o formato JPG se usa para as
fotografias. Os dois comprimem as imagens para salv-las. A forma de comprimir a imagem que utiliza cada formato
o que os faz ideais para um propsito ou outro.

Adicionalmente, pode-se usar um terceiro formato grfico nas pginas web, o PNG. Este formato no tem tanta
aceitao como o GIF ou o JPG, por vrias razes, entre elas: o desconhecimento do formato por parte
dos desenvolvedores, que as ferramentas habituais para tratar grficos (como por exemplo, Photoshop) geralmente
no suportam, e que os navegadores antigos tambm tm problemas para visualiz-las. Entretanto, o formato se
comporta muito bem quanto a compreenso e a qualidade do grfico conseguinte, pelo que seria til se chega a
estender seu uso.

GIF

Alm se ser um arquivo ideal para as imagens que esto desenhadas, tem muitas outras caractersticas que so
importantes e teis. Caractersticas do GIF:

. Compresso: muito boa para desenhos, como j foi dito. Inclusive pode ser interessante se a imagem muito
pequena, mesmo que seja uma foto;

. Transparncia: uma utilidade para definir certas partes do desenho como transparentes. Desse modo, podemos
colocar as imagens sobre distintos fundos sem que se veja o quadrado onde est es est inscrito o desenho, vendo
em troca a silhueta do desenho em questo. Para criar um gif transparente devemos utilizar um programa de
desenho grfico, com o qual podemos indicar que cores do desenho queremos que sejam transparentes.
Geralmente, definimos a transparncia quando vamos salvar o trfico;

. Cores: Com este formato grfico podemos utilizar conjuntos de 256 colores ou menos. Este um detalhe muito
importante, visto que quanto menos cores utilizarmos na imagem, em geral, menos ocupar o arquivo. s vezes,
mesmo utilizando menos cores em um grfico, este no perde muita qualidade, chegando a ser inaprecivel vista.
Em alguns programas podemos modificar a quantidade de cores ao salvar o arquivo, em outros, fazemos enquanto
criamos o grfico.

JPG

Vejamos agora quais so as caractersticas fundamentais do formato JPG:

. Compresso: Tal como dissemos anteriormente, sua gama de compresso torna ideal este formato para salvar
fotografias. Alm disso, com JPG podemos definir a qualidade da imagem, com qualidade baixa o arquivo ocupar
menos, e vice-versa;

. Transparncia: Este formato no tem possibilidade de criar reas transparentes. Se desejamos colocar uma imagem
com uma rea que parea transparente procederemos assim: com nosso programa de desenho grfico faremos com
que o fundo da imagem seja o mesmo que o da pgina onde queremos coloc-la. Em muitos casos, os fundos da
imagem e a pgina parecero o mesmo;

. Cores: JPG trabalha sempre com 16 milhes de cores, ideal para fotografias.

Otimizar arquivos

Para que as imagens ocupem o menos possvel e se transfiram rapidamente pela Rede devemos aprender a otimizar
os arquivos grficos. Para isso, devemos fazer o seguinte:

. Para os arquivos GIF: Reduziremos o nmero de cores de nossa aquarela. Isto se faz com nosso editor grfico, em
muitos casos poderemos fazer ao salvar o arquivo;

. Para os arquivos JPG: Ajustaremos a qualidade do arquivo quando estivermos salvando. Este formato nos permite
baixar muito a qualidade da imagem sem que esta perca muito em seu aspecto visual.

Dica: Photoshop uma ferramenta excelente para otimizar arquivos. Vendo vrias cpias podemos escolher a mais
adequada.

imprescindvel dispor para otimizar a imagem de uma boa ferramenta que nos permita configurar estas
caractersticas da imagem com liberdade e facilidade. Photoshop 5.5 ou 6 um programa bastante recomendvel,
pois incorpora uma opo que se chama "Salvar para Web" com a qual podemos definir as cores do gif, a qualidade
do JPG e outras opes em vrias amostras. Assim, com todas as opes configurveis, vendo os resultados do
tamanho do arquivo, podemos otimizar a imagem de uma maneira precisa com os resultados que desejamos.

Tambm existem no mercado outros programas que nos permitem otimizar estas imagens de maneira
surpreendente. Uma vez que criamos a imagem, a passamos por estes programas e nos comprimem ainda mais o
arquivo, fazendo-lhe rpido de transferir e, portanto, mais otimizado para Internet. Ao ser estas utilidades to
especializadas, os resultados costumam ser melhores que com os programas de edio grfica.

Exemplos de otimizadores grficos:

. WebGraphics Optimizer (http://www.webopt.com);
. ProJPG, GIF Imantion (http://www.boxtopsoft.com).

E com verses on-line:
. JPG - GIF Crunchers (http://www.spinwave.com);
. GIF Wizard (http://www.gifwizard.com).

Iniciando no HTML: As cores e HTML

As cores possuem um papel muito importante na composio de webs. So indicadas em valores RGB, ou seja, que
para conseguir uma cor qualquer misturaremos quantidades de vermelho, verde e azul.

Os valores RBG so indicados em numerao hexadecimal, em base 16. (Os dgitos podem crescer at 16). Como no
existem tantos dgitos numricos se utilizam as letras da A F.

0=0 4=4 8=8 C=12
1=1 5=5 9=9 D=13
2=2 6=6 A=10 E=14
3=3 7=7 B=11 F=15

Para conseguir uma cor, misturaremos valores desta maneira: RRGGBB.

Onde cada valor pode crescer desde 00 at FF.

Exemplo - Como se mudaria a fonte para escrever em vermelho:

<font color="#FF0000">Vermelho</font>

Ao atributo cor lhe damos um valor RGB em formato hexadecimal. O caractere # se coloca ao princpio da expresso.

Outras cores:

. Laranja - #FF8000;
. Verde turquesa - #339966;
. Azul escuro - #000080.

Cores compatveis em todos os sistemas

Como as pginas web tm que ser vistas por todos os usurios, e os sistemas que utilizam para entrar so distintos,
h que utilizar cores compatveis com a paleta de todos eles.

A forma de conseguir isto limitando nossas cores aos que se podem conseguir utilizando a seguinte norma:

Utilizaremos sempre estes valores:

00
33
66
99
CC
FF

Exemplos:

. #3366FF - Variao de azul;
. #FF9900 - Variao de laranja;
. #666666 - Variao de cinza.

Iniciando no HTML: Tabelas em HTML
Uma tabela em um conjunto de clulas organizadas dentro das quais podemos alojar distintos contedos.

princpio, poderia parecer que as tabelas so raramente teis e que podem ser utilizadas simplesmente para listar
dados como agendas, resultados e outros dados de uma forma organizada. Nada mais distante da realidade.

Hoje, grande parte dos desenhadores de pginas baseia seu planejamento neste tipo de engenhoca. De fato, uma
tabela nos permite organizar e distribuir os espaos da melhor forma. Pode nos ajudar a gerar textos em colunas
como os jornais, prefixar os tamanhos ocupados por distintas sees da pgina ou colocar de uma maneira simples
uma legenda a uma imagem.

Pode ser que a princpio seja um pouco complicado trabalhar com estas estruturas mas, se desejamos criar uma
pgina de qualidade, mais cedo ou mais tarde teremos que nos ver com elas e nos dar conta das possibilidades que
nos oferecem.

Para comear, nada mais simples do que pelo princpio: as tabelas so definidas pelas etiquetas <table> e </table>.

Dentro dessas duas etiquetas colocaremos todas as outras etiquetas, textos e imagens que daro forma e contedo
tabela.

As tabelas so descritas por linhas da esquerda para direita. Cada uma destas linhas definida por outra etiqueta e
seu fechamento: <tr> e </tr>.

Ainda assim, dentro de cada linha, haver diferentes clulas. Cad uma dessas clulas ser definida por outro par de
etiquetas:<td> e </td>. Dentro desta etiqueta ser onde colocaremos nosso contedo.

Aqui temos um exemplo de estrutura de tabela:

<table>
<tr>
<td>Clula 1, linha 1</td>
</tr>
<tr>
</tr>
</table>


Obs.: At aqui vimos todas as etiquetas que necessitamos conhecer para criar as tabelas. Existem outras etiquetas,
mas o que podemos conseguir com elas se pode conseguir tambm usando as que j vimos.

Por exemplo, assinalamos a etiqueta <th>, que serve para criar uma clula cujo contedo esteja formatado como um
ttulo ou cabealho da tabela. Na prtica, o que faz colocar em negrito e centralizado o contedo dessa clula, o
que se pode conseguir aplicando as correspondentes etiquetas dentro da clula. Assim:

<td align="center"><b>Contedo da clula</b></td>

A partir desta ideia simples, as tabelas adquirem outra magnitude quando lhes incorporamos toda uma bateria de
atributos aplicados sobre cada tipo de etiquetas que as compem. Ao longo dos prximos captulos nos
aprofundaremos no estudo desses atributos de forma a proporcionar-lhe tudo que til e indispensvel para um
bom arranque em pginas.

Iniciando no HTML: Tabelas em HTML - Atributos
para filas e clulas
Vimos no captulo anterior que as tabelas esto compostas de linhas que, por sua vez, contm clulas. As clulas so
delimitadas pelas etiquetas <td> ou pelas etiquetas <th> (se queremos texto em negrito e centralizado) e constituem
um entorno independente do resto do documento. Isto quer dizer que:

. Podemos usar praticamente qualquer tipo de etiqueta dentro da etiqueta <td> para, desta forma, dar forma a seu
contedo;
. As etiquetas situadas no interior da clula no modificam o resto do documento;
. As etiquetas de fora da clula no so tidas em conta por esta.

Sendo assim, podemos especificar o formato de nossas clulas a partir de etiquetas introduzidas em seu interior ou
mediante atributos colocados dentro da etiqueta de clula <td> ou tambm, em alguns casos, dentro da etiqueta
<tr>, se desejamos que o atributo seja vlido para toda a linha. A forma mais til e atual de dar forma s clulas a
partir das folhas de estilo em cascata que j teremos a oportunidade de abordar mais adiante.

Vemos em seguida alguns atributos teis para a construo de nossas tabelas. Comeamos vendo alguns atributos
que nos permite modificar uma clula em concreto ou toda uma linha:

. align - Justifica o texto da clula da mesma forma que se fosse o de um pargrafo;

. valign - Podemos escolher se queremos que o texto aparea acima (top), no centro (middle) ou abaixo (bottom) da
clula;

. bgcolor - D cor clula ou escolha de linha;

. bordercolor - Define a cor da borda.

Outros atributos que podem ser unicamente atribudos a uma clula e no ao um conjunto de clulas de uma linha
so:

. background - Permite-nos colocar um fundo para a clula a partir de um link a uma imagem;

. height - Define a altura da clula em pixels ou porcentagem;

. width - Define a largura da clula em pixels ou porcentagem;

. colspan - Expande um clula horizontalmente;

. rowspan - Expande um clula verticalmente.

Obs.: O atributo height no funciona em todos os navegadores, ademais, seu uso no est muito estendido. As
clulas em geral, tm a altura que necessitam para caber todo o contedo que tenha inserido, ou seja, crescem o
suficiente para que caiba o que colocamos dentro. O atributo width sim que funciona em todos os navegadores e
deve ser utilizado constantemente. Se lhe atribumos uma largura clula, a largura ser respeitada e se a tal clula
tiver muito texto ou qualquer outro contedo, a clula crescer um tanto para baixo quanto for o necessrio para
caber o que colocamos. Uma observao neste ltimo pargrafo. Trata-se que se definimos uma clula de uma
largura 100, por exemplo e colocamos na clula um contedo como uma imagem que mea mais de 100 pixels, a
clula crescer em horizontalmente tanto quanto for necessrio para que a imagem caiba. Se o elemento, mesmo
mais largo, fosse divisvel (como um texto) a largura seria respeitada e o texto cresceria para baixo, ou o que o
mesmo, em altura, como assinalamos no pargrafo anterior.

Estes ltimos quatro atributos descritos so de grande utilidade. Concretamente, height e width nos ajudam a
definir as dimenses de nossas clulas de uma forma absoluta (em pixel ou em pontos de tela) ou de uma forma
relativa, ou seja, por porcentagens referentes ao tamanho total da tabela.

Por exemplo:

<td width="80">

Dar uma largura de 80 pixels clula.

<td width=80%>

Dar uma largura clula do 80% da largura da tabela.

H de ter em conta que, definidas as dimenses das clulas, o navegador vai fazer o que bondosamente puder para
satisfazer ao programador. Isto quer dizer que pode que em algumas ocasies o resultado que obtenhamos no seja
o esperado. Concretamente, se o texto apresenta uma palavra excessivamente comprida pode que a largura da
clula se veja aumentada para manter a palavra na mesma linha. Por outro lado, se o texto muito grande , a clula
aumentar sua para poder mostrar todo o seu contedo.

Analogamente se, por exemplo, definimos duas larguras distintas s clulas de uma mesma coluna, o navegador no
saber qual atender. por isso que conveniente ter bem claro desde o princpio como a tabela que queremos
desenhar. No demais saber se pr-desenhamos no papel se a complexidade importante. O HTML em geral
fcil, mas as tabelas podem converte-se em um verdadeiro quebra-cabea se no chegamos a compreende-las
devidamente.

Os atributos rowspan e colspan so tambm utilizados frequentemente. Graas a isso possvel expandir clulas
fundindo estas com suas vizinhas. O valor que podem tomar estas etiquetas numrico. O nmero representa a
quantidade de clulas fundidas.

Assim:

<td colspan="2">

Fundir a clula em questo com sua vizinha direita.

Do mesmo modo:

<td rowspan="2">

A clula expandir para baixo fundindo-se com a clula inferior.

O resto dos atributos apresentados apresenta uma utilidade e um uso bastante bvio. Por isso, os deixamos a sua
prpria investigao.

Iniciando no HTML: Tabelas em HTML - Atributos da
tabela e concluso
Alm dos atributos especficos de cada clula ou linha, as tabelas podem ser adicionalmente formatadas a partir dos
atributos que nos oferece a prpria etiqueta <table>. A seguir, mostramos aqueles que nos podem parecer
principio mais importantes:

. align - Alinha horizontalmente a tabela em relao ao seu entorno;
. background - Permite-nos colocar um fundo para a tabela desde um link a uma imagem;
. bgcolor - D cor de fundo tabela;
. border - Define o nmero de pixels da borda principal;
. bordercolor - Define a cor da borda;
. cellpadding - Define, em pixels, o espao entre as bordas da clula e o contedo da mesma;
. cellspacing - Define o espao entre as bordas (em pixels);
. height - Define a altura da tabela em pixels ou porcentagem;
. width - Define a largura da tabela em pixels ou porcentagem.

Os atributos que definem as dimenses, height e width, funcionam de uma maneira anloga ao das clulas, tal como
vimos no captulo anterior. Contrariamente, o atributo align no nos permite justificar o texto de cada una das
clulas que compem a tabela, mas sim que permite, justificar a prpria tabela em relao ao seu entorno.

Vamos colocar trs exemplos de alinhamento de tabelas, centralizadas, alinhadas direita e esquerda.

Exemplo de tabela centralizada:

<table align="center" width="220" cellspacing="2" cellpadding="2" border="1">
<tr>
<td class=fuente8>Esta tabela est centralizada (aling="center"). Tem somente uma clula.</td>
</tr>
</table>

Exemplo de tabela alinhada direita:

<table align="right" width="220" cellspacing="2" cellpadding="2" border="1">

<tr>
<td class=fuente8>Esta tabela est alinhada direita (aling="right"). Tem somente uma clula.</td>
</tr>
</table>

Exemplo de tabela alinhada esquerda:

<table align="left" width="220" cellspacing="2" cellpadding="2" border="1">
<tr>
<td class=fuente8>Esta tabela est alinhada esquerda (aling="left"). Tem somente uma clula.</td>
</tr>
</table>

Os atributos cellpading e cellspacing ajudaro a dar a nossa tabela um aspecto mais esttico. princpio pode nos
parecer um pouco confuso seu uso mas com um pouco de prtica j ser suficiente para saber utiliz-los.

Voc mesmo pode comprovar que os atributos definidos para uma clula tm prioridade em relao aos definidos
para uma tabela. Podemos definir, por exemplo, uma tabela com a cor de fundo vermelha e uma das clulas com a
cor de fundo verde. E assim, toda a tabela ser vista de cor vermelha manos a clula verde. Da mesma forma,
podemos definir uma cor azul para as bordas da tabela e fazer com que uma clula particular seja mostrada com
uma borda vermelha. (Apesar de que isto no funcionar em todos os navegadores devido ao fato de alguns no
reconhecerem o atributo bordercolor.)

<table align="center" bgcolor="#cc0000" width="300" cellspacing="2" cellpadding="2" border="1">
<tr>
<td>Tabela de cor vermelha de fundo</td>
<td>O atributo bgcolor da tabela est em vermelho.</td>

</tr>
<tr>
<td>Clula normal</td>
<td bgcolor="009900">Esta clula est em verde. Tem o atributo bgcolor na cor verde</td>
</tr>
</table>

Tabelas aninhadas

O uso de tabelas aninhadas tambm muito til. Da mesma forma que podamos incluir listas dentro de outras
listas, as tabelas podem ser includas dentro de outras. Assim, podemos incluir uma tabela dentro da clula de outra.
A forma de funcionamento continua sendo o mesmo apesar de que a situao pode se complicar se o nmero de
tabelas includas dentro de outras for elevado.

Vamos ver um cdigo de um alinhamento de tabelas. Veremos primeiro o resultado e em seguida, o cdigo, pois
assim conseguiremos entend-lo melhor:

<table cellspacing="10" cellpadding="10" border="3">
<tr>
<td align="center">
Clula da tabela principal
</td>
<td align="center">
<table cellspacing="2" cellpadding="2" border="1">
<tr>
<td>Tabela aninhada, clula 1</td>
</tr>
<tr>
<td>Tabela unida, clula 3</td>
</tr>
</table>
</td>
</tr>
</table>

Iniciando no HTML: Formulrios HTML
At agora vimos a forma na qual o HTML providencia e mostra a informao, essencialmente mediante o texto,
imagens e links. Falta ver de que forma podemos trocar informaes com nosso visitante. Desde ento, este novo
aspecto primordial para a grande quantidade de aes que se podem realizar mediante o Web: Comprara um
artigo, preencher uma enquete, enviar um comentrio ao autor...

Vimos anteriormente que poderamos, mediante os links, entrar em contato diretamente com um
correio eletrnico. Entretanto, esta opo pode ser em alguns casos pouco verstil se o que desejamos que o
navegante nos envie uma informao bem precisa. atravs dele, o HTML que propem outra soluo muito mais
ampla: Os formulrios.

Os formulrios so estas famosas caixas de texto e botes que podemos encontrar em muitas pginas web. So
muito utilizados para realizar buscar ou tambm para introduzir dados pessoais, por exemplo, em sites de comrcios
eletrnico. Os dados que o usurio introduz nestes campos so enviados ao correio eletrnico do administrador do
formulrio ou tambm, em um programa que se encarrega de process-lo automaticamente.

Usando HTML podemos unicamente enviar o formulrio a um correio eletrnico. Se quisermos processar o
formulrio mediante um programa, a coisa pode ser um pouco mais complexa, j que teremos que empregar outras
linguagens mais sofisticadas. Neste caso, a soluo mais simples utilizar os programas pr-desenhados que nos
propem um grande nmero de servidores de hospedagem e que nos permitem armazenar e processar os dados em
forma de arquivo ou outros formatos. Se sua pgina est hospedada em um servidor que no lhe propem estes
tipos de vantagens, voc sempre poder recorrer a servidores de terceiros que oferecem este ou outros tipos de
servios gratuitos para webs. claro que tambm existe alternativa que a de aprender linguagens como ASP ou
PHP que nos permitir, entre outras coisas, o tratamento de formulrios.

Os formulrios so definidos por meio das etiquetas <form> e </form>. Entre estas duas etiquetas colocaremos
todos os campos e botes que compem o formulrio. Dentro desta etiqueta <form> devemos especificar alguns
atributos.:

Action

Define o tipo de ao a realizar com o formulrio. Como j dissemos, existem duas possibilidades:

. O formulrio enviado a um endereo de correio eletrnico;
. O formulrio enviado a um programa ou script que processa seu contedo.

No primeiro caso, o contedo do formulrio enviado ao endereo de correio eletrnico especificada por meio de
uma sintaxe deste tipo:

<form action="mailto:endereo@correio.com">

Se o que queremos que o formulrio seja processado por um programa, temos de especificar o endereo
do arquivo que contem o tal programa. A etiqueta ficaria neste caso da seguinte forma:

<form action="endereo do arquivo"...>

A forma na qual se expressa a localizao do arquivo que contm o programa a mesma que a vista para os links.

Method

Este atributo se encarrega de especificar a forma na qual o formulrio enviado. Os dois valores possveis que este
atributo pode tomar so post e get. A efeitos prticos e salvo se lhe disserem o contrrio, daremos sempre o valor
post.

Enctype

Utiliza-se para indicar a forma na qual viajar a informao que for mandada pelo formulrio. No caso mais corrente,
enviar o formulrio por correio eletrnico, o valor deste atributo deve ser "text/plain". Assim, conseguimos que o
contedo do formulrio seja enviado como texto plano dentro do e-mail.

Se quisermos que o formulrio se processe automaticamente por um programa, geralmente no utilizaremos este
atributo, de forma que tome seu valor padro, ou seja, no incluiremos enctype dentro da etiqueta <form>.

Exemplo de etiqueta <form> completa

Assim, para o caso mais habitual - o envio do formulrio por correio - a etiqueta de criao do formulrio ter o
seguinte aspecto:

<form action="mailto:endereo@correio.com (ou o nome do arquivo de processo)" method="post"
enctype="text/plain">

Entre esta etiqueta e seu fechamento, colocaremos o resto de etiquetas que daro forma ao nosso formulrio, as
quais sero vistas nos prximos captulos.

Iniciando no HTML: Elementos de formulrios -
Campos de texto
O HTML nos propem uma grande diversidade de alternativas na hora de criar nossos formulrios. Estas vo desde a
clssica caixa de texto at a lista de opes passando pelas caixas de validao.

Veremos em que consiste cada una destas modalidades e como podemos implement-las em nosso formulrio.

Texto curto

As caixas de texto so colocadas por meio da etiqueta <input>. Dentro desta etiqueta temos de especificar o valor de
dois atributos: type e name.

A etiqueta da seguinte forma:

<input type="text" name="nome">


O nome do elemento do formulrio de grande importncia para poder identific-lo em nosso programa de
processamento ou no e-mail recebido. Por outro lado, importante indicar o atributo type, j que, como veremos,
existem outras modalidades de formulrio que usam esta mesma etiqueta.

O emprego destas caixas est fundamentalmente destinado tomada de dados breves: palavras ou conjuntos de
palavras de longitude relativamente curta. Veremos mais adiante que existe outra forma de tomar textos mais
longos a partir de outra etiqueta.

Alm destes dois atributos, essenciais para o correto funcionamento de nossa etiqueta, existem outra srie de
atributos que podem ser de utilidade, mas que no so imprescindveis:

. size - Define o tamanho da caixa em nmero de caracteres. Se ao escrever o usurio chega ao final da caixa, o texto
ir desfilando medida que se escreve fazendo desaparecer a parte de texto que fica esquerda;

. maxlength - Indica o tamanho mximo do texto que pode ser tomado pelo formulrio. importante no confundi-
lo com o atributo size. Enquanto o primeiro define o tamanho aparente da caixa de texto, maxlength indica o
tamanho mximo real do texto que pode ser escrito. Podemos ter uma caixa de texto com um tamanho aparente
(size) que menor do que o tamanho mximo (maxlength). O que ocorrer neste caso que, ao escrever, o texto ir
desfilando dentro da caixa at que cheguemos ao seu tamanho mximo definido por maxlength, momento no qual
ser impossvel continuar escrevendo;

. value - Em alguns casos pode ser interessante atribuir um valor definido ao campo em questo. Isto pode ajudar ao
usurio a preencher mais rapidamente o formulrio ou a dar alguma ideia sobre a natureza de dados que se
requerem. Este valor inicial do campo pode ser expresso mediante o atributo value. Vejamos seu efeito com um
exemplo simples:

<input type="text" name="nome" value="Perico Palotes">


Nota: Estamos obrigados a utilizar a etiqueta <form>.

Para que fique mais claro este contedo, ressaltamos: Quando queremos utilizar em qualquer situao elementos de
formulrio devemos escrev-los sempre entre as etiquetas <form> y </form>. Caso contrrio, os elementos sero
vistos perfeitamente no Explorer, mas no no Netscape.

Com outras palavras, no Netscape no se visualizam os elementos de formulrio a no ser que estejam colocados
entre as correspondentes etiquetas de incio e fim de formulrio.

por isso que para mostrar um campo de texto no adianta colocar a etiqueta <input>, e sim, coloca-la dentro de
um formulrio. Assim:

<form>
<input type="text" name="nome" value="Josefa Palotes">
</form>

Veremos posteriormente que este atributo pode ser relevante em determinadas situaes.

Texto oculto

Podemos esconder o texto escrito por meio de asteriscos de forma a fornecer certa confiabilidade. Este tipos de
campos so anlogos aos de texto com somente uma diferena: deslocando o atributo type="text" por
type="password":

<input type="password" name="nome">

Neste caso, pode ser comprovado que ao escrever dentro do campo no lugar de texto sero vistos asteriscos.

Estes campos so ideais para a introduo de dados confidenciais, principalmente cdigos de acesso.


Texto longo

Se desejarmos colocar disposio do usurio um campo de texto onde possa escrever comodamente sobre um
espao composto de vrias linhas, temos de convocar uma nova etiqueta: <textarea> e seu fechamento
correspondente.

Estes tipos de campos so prticos quando o contedo a enviar no um nome, telefone ou qualquer outro dado
breve, e sim, um comentrio, opinio, etc.

Dentro da etiqueta textarea deveremos indicar, como para o caso visto anteriormente, o atributo name para
associar o contedo a um nome que ser semelhante a uma varivel nos programas de processo. Alm disso,
podemos definir as dimenses do campo a partir dos seguintes atributos:

. rows - Define o nmero de linhas do campo de texto;

. cols - Define o nmero de colunas do campo de texto.

A etiqueta fica portanto, desta forma:

<textarea name="comentrio" rows="10" cols="40"></textarea>


Mesmo assim, possvel definir o contedo do campo. Para isso, no usaremos o atributo value e sim, que
escreveremos dentro da etiqueta o contedo que lhe desejamos atribuir. Vejamos:

<textarea name="comentrio" rows="10" cols="40">Escreva seu comentrio....</textarea>


Iniciando no HTML: Outros elementos de
formulrios
Efetivamente, os textos so uma maneira muito prtica de fazer chegar a informao do navegante. Porm, em
muitos casos, os texto so dificilmente adaptveis a programas que possam process-los devidamente ou tambm
pode ser que seu contedo no se ajuste ao tipo de informao que requeremos. por isso que, em determinados
casos, pode ser mais efetivo propor uma escolha ao navegante a partir da exposio de uma srie de opes.

Este o caso de, por exemplo, oferecer uma lista de pases, o tipo de carto de crdito para um pagamento, etc.

Estes tipos de opes podem ser expressas de diferentes formas. Vejamos a seguir quais so:

Listas de opes

As listas de opes so esse tipo de menus desdobrveis que nos permite escolher uma (ou vrias) das mltiplas
opes que nos propem. Para constru-las utilizaremos uma etiqueta com seu respectivo fechamento: <select>.

Como para os casos j vistos, dentro desta etiqueta definiremos seu nome por meio do atributo name. Cada opo
ser includa em uma linha precedida da etiqueta <option>.

Podemos ver, a partir destas diretrizes, a forma mais tpica e simples desta etiqueta:

<select name="estao">
<option>Primavera</option>
<option>Vero</option>
<option>Outono</option>
<option>Inverno</option>
</select>


Esta estrutura pode ser vista modificada principalmente a partir de outros dois atributos:

. size - Indica o nmero de valores mostrados da lista. O resto pode ser visto por meio da barra lateral de
deslocamento;

. multiple - Permite a seleo de mais vrios elementos da lista. A escolha de mais de um elemento se faz como com
o explorador de Windows, a partir das teclas ctrl ou shift. Este atributo se expressa sem valor algum, ou seja, no se
utiliza com o igual: simplesmente se coloca para conseguir o efeito, ou no se coloca se quisermos uma lista
desdobrvel comum.

Conselho: Se for possvel, no utilize multiple.

No recomendamos especialmente a prtica desta opo j que o manejo das teclas ctrl ou shift para escolher vrias
opes pode ser desconhecido para o navegante. Evidentemente, sempre cabe a possibilidade de explicar como
funciona a pesar de ser uma complicao a mais para o visitante.

Vejamos qual o efeito produzido por estes dois atributos mudando a linha:


Por:

<select name="estao" size="3" multiple>

Ficando:

<select name="estao" size="3" multiple>
</select>


A etiqueta <option> ainda pode ser precisada por meio de outros atributos:

. selected - Da mesma forma que multiple, este atributo no toma nenhum valor seno que simplesmente indica que
a opo que apresenta est escolhida por padro.

Assim, se mudamos a linha do cdigo anterior:


Por:

<option selected>Outono</option>

Ficando:

<option selected>Outono</option>
</select>


. value - Define o valor da opo que ser enviada ao programa ou ao correio eletrnico se o usurio escolhe essa
opo. Este atributo pode ser muito til se o formulrio for enviado a um programa visto que a cada opo se pode
associar um nmero ou letra, o qual torna-se mais facilmente manipulvel que uma palavra ou texto. Poderamos
assim escrever linhas do tipo:

<option value="1">Primavera</option>

Deste modo, se o usurio escolhe primavera, o que chegar ao programa (ou ao correio) uma varivel chamada
estao que ter com valor 1. No correio eletrnico receberamos:

estao=1

Botes de radio

Existe alternativa para expor uma escolha, neste caso, obrigamos ao internauta a escolher unicamente uma das
opes que lhe propem.

A etiqueta empregada neste caso <input> na qual teremos a atributo type que temos de tomar o valor radio.
Vejamos um exemplo:

<input type="radio" name="estao" value="1">Primavera
<br>
<input type="radio" name="estao" value="2">Vero
<br>
<input type="radio" name="estao" value="3">Outono
<br>
<input type="radio" name="estao" value="4">Inverno

Nota: Temos de observar que a etiqueta <input type="radio"> somente coloca o campo para clicar na pgina. Os
textos que aparecem ao lado, assim como as quebras de linha, colocamos com o correspondente texto no cdigo da
pgina e com as etiquetas HTML que necessitarmos.


Como podemos ver, a cada uma das opes se atribui uma etiqueta input dentro da qual atribumos o mesmo nome
(name) para todas as opes e um valor (value) distinto. Se o usurio escolhe supostamente Outono, receberemos
em nosso correio uma linha tal como esta:

estao=3

Cabe assinalar que possvel pr-selecionar por padro uma das opes. Isto se pode conseguir por meio do
atributo checked:

<input type="radio" name="estao" value="2" checked>Vero


Caixas de validao

Estes tipos de elementos podem ser ativados ou desativados pelo visitante com um simples clique sobre a caixa em
questo. A sintaxe utilizada muita parecida com as vistas anteriormente:

<input type="checkbox" name="paella">Adoro uma feijoada


A nica diferena fundamental o valor adotado pelo atributo type.

Da mesma forma que para os botes de radio, podemos ativar a caixa por meio do atributo checked.

O tipo de informao que chegar ao nosso correio (ou ao programa) ser do tipo:

feijoada=on (ou off dependendo se tiver sido ativada ou no)

Iniciando no HTML: Boto submit, apagar campos e
outros em formulrios HTML
Os formulrios tm de dar lugar no somente informao a tomar do usurio como tambm, a outra srie de
funes. Concretamente, permite-nos seu envio mediante seu boto. Tambm pode ser prtico poder propor um
boto de Apagar Campos ou tambm, acompanh-lo de dados ocultos que possam ajudar-nos em seu
processamento.

Neste captulo, para terminar a saga de formulrios, tornaremos conhecidos os meios de instalar todas estas
funes.

Boto submit (ou de envio)

Para finalizar o processo de preenchimento do formulrio e faz-lo chegar a seu gestor, o navegante tem de valid-lo
por meio de um boto previsto para tal efeito. A construo de tal boto no implica nenhuma dificuldade uma vez
familiarizados com as etiquetas input j vistas:

<input type="submit" value="Enviar">


Como pode ser visto, somente temos de especificar se trata de um boto de envio (type="submit") e temos de
definir a mensagem do boto por meio do atributo value.

Boto apagar campos

Este boto nos permitir apagar o formulrio por completo no caso de que o usurio deseje refaz-lo desde o
princpio. Sua estrutura sinttica igual a anterior:

<input type="reset" value="Apagar Campos">

A diferena do boto de envio, indispensvel em qualquer formulrio, o boto de Apagar Campos meramente
optativo e no utilizado frequentemente. H de ter cuidado de no coloca-lo muito perto do boto de envio e de
distinguir claramente um do outro.

Dados ocultos

Em alguns casos, aparte dos prprios dados enviados pelo usurio, pode ser prtico enviar dados definidos por ns
mesmos que ajudem ao programa em seu processamento do formulrio. Estes tipos de dados, que no se mostram
na pgina, mas que podem ser detectados solicitando o cdigo fonte, no so frequentemente utilizados por pginas
construdas em HTML, so mais usados por pginas que empregam tecnologias de servidor. No se assustem, pois
veremos mais adiante o que isto quer dizer. Queremos apenas dar constncia de sua existncia e de seu modo de
criao. Como por exemplo:

<input type=hidden name="site" value="www.criarweb.com">

Esta etiqueta, includa dentro de nosso formulrio, enviar um dado adicional ao correio ou ao programa
encarregado da gesto do formulrio. Poderamos a partir deste dado, tornar conhecido ao programa a origem do
formulrio ou algum tipo de ao a realizar (um re-endereamento, por exemplo).

Botes normais

Dentro dos formulrios tambm podemos colocar botes normais, clicveis como qualquer outro boto. Da mesma
forma que ocorre com os campos hidden, estes botes por si s no tm muita utilidade, mas poderemos necessita-
los para realizar aes no futuro. Sua sintaxe a seguinte:

<input type=button value="Texto escrito no boto">


O uso mais frequente de um boto na programao no cliente. Utilizando linguagens como Java script podemos
definir aes a tomar quando um visitante clique o boto de uma pgina web.

Exemplo de formulrio

Com este captulo finalizamos nosso assunto sobre formulrios. Passamos agora a exemplificar todo o aprendido a
partir da criao de um formulrio que consulta o grau de satisfao dos usurios de uma linha de nibus fictcia. O
formulrio est construdo para que envie os dados por correio eletrnico a uma caixa de entrada determinada.

A seguir mostraremos o cdigo fonte de um formulrio que agrega tudo o que foi visto nesta parte de formulrios,
que importante que todos deem uma olhada, mesmo que seja rapidamente:

<form action="mailto:juliana@criarweb.com" method="post" enctype="text/plain">
Nome <input type="text" name="nome" size="30" maxlength="100">
<br>
E-mail <input type="text" name="email" size="25" maxlength="100" value="@">
<br>
Cidade <input type="text" name="cidade" size="20" maxlength="60">
<br>
Sexo
<br>
<input type="radio" name="sexo" value="Masculino" checked> Homem
<br>
<input type="radio" name="sexo" value="Feminino"> Mulher
<br>
<br>
Frequncia das viagens
<br>
<select name="utilizao">
<option value="1">Vrias vezes por dia
<option value="2">Uma vez por dia
<option value="3">Vrias vezes por semana
<option value="4">vrias vezes por ms
</select>
<br>
<br>
Comentrios sobre sua satisfao pessoal
<br>
<textarea cols="30" rows="7" name="comentrios"></textarea>
<br>
<br>
<input type="checkbox" name="receber_info" checked>
Desejo receber notificao das novidades nas linhas de nibus.
<br>
<br>
<input type="submit" value="Enviar formulrio">
<br>
<br>
<input type="Reset" value="Apagar tudo">
</form>

Para acabar, vamos ver o que receberiam por correio eletrnico na empresa de nibus quando um usurio qualquer
preenchesse este formulrio e clicasse sobre o boto de envio:

nome=Frederico Silvestre
e-mail=fede@terramix.com
cidade=Rio de Janeiro
sexo=Masculino
utilizao=2
comentrios=Acho que no uma boa linha. Colocar mais nibus.
receber_info=on

Iniciando no HTML: Frames em HTML
Uma das mais modernas caractersticas de HTML so os frames, que foram acrescentados tanto em Netscape
Navigator como em Internet Explorer, a partir de suas verses 2.0. Os frames -que significam em portugus janelas-
so uma forma de dividir a pgina em diferentes espaos independentes uns dos outros, de forma que em cada
espao se coloca uma pgina diferente que se codifica em uma arquivo HTML diferente.

princpio se criaram como etiquetas proprietrias do navegador Netscape e rapidamente a potncia do recurso fez
com que o uso de frames se estendesse por toda a web. Pouco tempo demoraria para o Internet Explorer inclu-los,
pois no podia deixar escapar uma novidade to popular de seu competidor. Finalmente, como resposta
popularidade entre os desenvolvedores dos frames, o padro HTML 4.0 incluiu estas etiquetas dentro das
permitidas.

Os frames, como dizamos, nos permitem dividir a janela do navegador em diferentes reas. Cada uma destas reas
so independentes e devem ser codificadas com arquivos HTML tambm independentes. Como resultado, cada
frame ou janela contem as propriedades especficas que indicamos no cdigo HTML apresentado nesse espao.
Sendo assim, e dado que cada janela independente, tero suas prprias barras de deslocamento, horizontais e
verticais, separadamente.

Existem muitas pginas na web que contm frames e certamente todos j tiveram a ocasio de conhecer algumas.
Costuma se utilizar para colocar em uma parte da janela uma barra de navegao, que geralmente encontra-se fixa e
permite o acesso a qualquer zona da pgina web. Uma das principais vantagens da programao com frames vem
derivada da independncia dos distintos frames, pois podemos navegar pelos contedos de nosso site web com a
barra de navegao sempre visvel, e sem que se tenha que recarregar em cada uma das pginas que vamos
visitando.

Iniciando no HTML: Frames - Explicao bsica
As pginas web que esto feitas com frames se compem de uma declarao das janelas e tantas pginas em
formato HTML corrente como distintas divises tivermos definido. A declarao ou definio de frames a nica
pgina que realmente devemos aprender, visto que as pginas que sero visualizadas em cada uma das janelas
so arquivos HTML dos que viemos aprendendo anteriormente neste manual.

Tal definio est composta por etiquetas <FRAMESET> e <FRAME>, com as quais indicamos a disposio de todos
os quadros. A etiqueta <FRAMESET> indica as divises da janela do navegador e a etiqueta <FRAME> indica cada um
dos quadros onde colocaremos uma pgina independente.

As parties que se podem fazer com um <FRAMESET> so em filas ou colunas. Por exemplo, poderamos indicar
que desejamos fazer uma diviso da pgina em duas filas, ou duas colunas, trs filas, etc. Para indicar tanto a forma
de dividir a janela -em filas ou colunas- como o nmero de parties que pretendemos fazer, temos de utilizar o
atributo COLS ou ROWS. O primeiro serve para indicar uma partio em colunas e o segundo para uma partio em
filas.

Nota: importante indicar que no se pode fazer uma partio em filas e colunas de uma vez s, e sim, que devemos
escolher em dividir a janela em uma das duas disposies. Mais adiante, indicaremos como dividir a janela tanto em
filas como em colunas, que feito com o acrscimo de frames.

No atributo COLS ou ROWS - somente podemos escolher um dos dois - colocamos entre aspas o nmero de divises
que desejamos realizar, indicando de antemo o tamanho que vai atribuir a cada uma. Um valor tpico destes
atributos seria o seguinte:

cols="20%,80%"

Indica que devem ser colocadas duas colunas, a da esquerda teria uns 20% do espao total da janela e a da direita
uns 80%.

rows="15%,60%,25%"

Assim, indicamos que desejamos trs filas, a de cima com um 15% do espao total, a do meio com um espao
correspondente ao 60% do total e a de abaixo com um 25%. Ao total somam o 100% do espao da janela.

Alm da porcentagem para indicar o espao de cada um dos campos, tambm podemos indic-lo em pixels. Desta
maneira:

cols="200,600"

Para indicar que a coluna da esquerda deve ter 200 pixels de largura e a da direita 600. Isto est bem se nossa janela
tem 800 pixels de largura, mas isto no tem porque ser assim em todos os monitores dos usurios, por isso
importante que este modo de expressar as janelas se indique da seguinte maneira.

cols="200,*"

Assim, indicamos que a primeira coluna tem de medir 200 pixels e que o resto do espao disponvel -que ser maior
ou menor dependendo da definio da tela do usurio- se atribuir a segunda coluna.

Na prtica podemos misturar todos estes mtodos para definir as janelas da maneira de desejarmos, com
porcentagem, com pixels ou com o atestico (*). No importa como se definem, a nica recomendao que um dos
valores que indiquemos seja um asterisco, para que a rea correspondente a tal asterisco seja mais ou menos grande
dependendo do espao que tenha a janela de nosso navegador. Outros mtodos de definir filas e colunas,
atendendo a este conselho, seriam os seguintes:

rows="100,*,12%"

Definimos trs filas, a primeira com 100 pixels de largura, a segunda com o espao que sobre das outras duas, e a
terceira com um 12% do espao total.

cols="10%,50%,120,*"

Estamos indicando quatro colunas. A primeira de 10% do espao da janela, a segunda com a metade justa da janela,
a terceira com um espao de 120 pixels e a ltima com a quantidade de espao que sobre ao atribuir espao s
demais parties.

Uma vez indicado o nmero de filas ou colunas e o espao reservado a cada uma com a etiqueta <FRAMESET>,
devemos especificar com a etiqueta <FRAME> a procedncia de cada um dos frames que dividimos a janela.

Para isso, dispomos do atributo SRC, que tem de ser definido para cada uma das filas ou colunas. Desta maneira:

<FRAME src="janela1.html">

Assim fica indicado que o frame que estamos definindo deve mostrar a pgina janela1.html em seu interior.

Iniciando no HTML: Frames - Criao de uma
estrutura simples
Para ilustrar tudo o que viemos explicando podemos ver o exemplo sobre como se criaria a definio de frames da
imagem que podemos ver a seguir.

Especificao de frames para o exemplo.

Arquivo index.html:

<html>
<head>
<title>Definio de Frames</title>
</head>
<frameset rows="15%,*,75">
<frame src="pagina1.html">
</frameset>
</html>

Arquivo pagina1.html:

<html>
<head>
<title>Untitled</title>
</head>
<body bgcolor="#DECC09">
1
</body>
</html>


<html>
<head>
</head>
<body bgcolor="#CF391C">
2
</body>
</html>


<html>
<head>
</head>
<body bgcolor="#AC760E">
3
</body>
</html>


Alm disso, temos algumas consideraes a fazer para terminar de compreender este exemplo:

. O ttulo da definio de frames o que herda toda a pgina web, por isso, no boa ideia titular como "definio
de frames" por exemplo, j que ento toda nossa pgina se titularia assim e certamente no seria muito descritivo.
Se estivssemos fazendo uma pgina para o aougue Gonalves seria melhor titular a definio de frames algo como
"Aougue Gonalves, as melhores carnes no Rio de Janeiro";
. A pgina que define os frames no tem body. O HTML pode totalizar um erro se o incluirmos;
. As pginas "pagina1.html", "pagina2.html" e "pagina3.html" devem ser escritas em arquivos independentes com o
nome indicado. Neste exemplo, Tais pginas deveriam se encontrar no mesmo diretrio que a declarao de frames.
Se especificarmos uma rota para acessar ao arquivo podemos coloc-lo no diretrio que desejarmos;
. As cores de cada um dos frames colocamos com o atributo bgcolor colocado na etiqueta <BODY> de cada uma das
pginas que se mostram nas janelas.

Iniciando no HTML: Frames - Orientar os links
A nica particularidade destacvel no exemplo do captulo anterior, no manejo de frames em geral, trata-se de que
cada um dos links que colocamos nas pginas atualizam o frame onde est colocado este link. Por exemplo, se temos
link na parte inferior da janela, no espao correspondente a terceira janela, atualizaro os contedos do terceiro
frame, que onde esto situados os links.

Este efeito que comentamos pode-se observar no exemplo da pgina do aougue, tal como ficaria ao incluir os
cdigos das distintas pginas.

O lgico que ao clicar sobre um link da barra de navegao atualizamos o frame principal, que onde havamos
planejado colocar os contedos, no lugar do frame onde colocamos a barra de navegao, que deveria se manter
fixa. Para conseguir este efeito devemos fazer duas coisas:

1. Dar um nome ao frame que desejamos atualizar: Tal nome se indica na etiqueta <FRAME> da definio de frames.
Para isso utilizamos o atributo name, igualado ao nome que queremos dar a tal janela;
2. Orientar os links para esse frame: Para isso devemos colocar no atributo target dos links -etiqueta <A>- o nome do
frame que desejamos atualizar ao clicar o link.

Depois de dar um nome ao frame principal, nossa declarao de frames ficaria da seguinte maneira:

<frame src="pagina2.html" name="principal">
</frameset>

Ademais, deveramos colocar o atributo target aos links, tal como se segue:

<a href="pagina2.html" target="principal">Portal</a> |
<a href="produtos.html" target="principal">Produtos</a> |
<a href="contato.html" target="principal">Contato</a>

Uma vez realizados estas duas mudanas podemos ver como os links da barra de navegao sim que atualizam a
pgina que devem.

Valores para o atributo target

Como vimos, com o atributo target da etiqueta <A> podemos indicar o nome do frame que desejamos que atualize
esse link. Entretanto, este no o nico valor que podemos aplicar ao atributo. Temos alguns valores adicionais que
podemos atribuir a qualquer link em geral.

. _blank - Para fazer com que esse link se abra em uma janela a parte. Nossos exemplos neste manual costumam
abrir em uma janela a parte, colocando este valor no target dos links que levam aos exemplos;

. _self - Atualiza o frame onde est situado o link. o valor por padro;

. _parent - O link se atualiza sobre seu pai ou sobre a janela que estamos trabalhando, se no tiver um pai;

. _top - A pgina carrega a tela completa, ou seja, eliminando todos os frames que pudesse haver. Este atributo
muito importante porque se colocamos em nossa pgina com frames um link a uma pgina externa, se abriria em
um dos frames e se manteriam visveis outros frames da pgina, fazendo um efeito que costuma ser pouco
agradvel, porque parece que esto evitando que nos escapemos.

A sintaxe de um desses valores de atributos colocados em um link seria a seguinte:

<A href="http://www.criarweb.com" target="_top">Acessar a criarweb.com</A>

Iniciando no HTML: Frames - Criao de uma
estrutura simples
Para ilustrar tudo o que viemos explicando podemos ver o exemplo sobre como se criaria a definio de frames da
imagem que podemos ver a seguir.

Especificao de frames para o exemplo.

Arquivo index.html:

<html>
<head>
<title>Definio de Frames</title>
</head>
</frameset>
</html>


<html>
<head>
</head>
<body bgcolor="#DECC09">
1
</body>
</html>


<html>
<head>
</head>
<body bgcolor="#CF391C">
2
</body>
</html>


<html>
<head>
</head>
<body bgcolor="#AC760E">
3
</body>
</html>


Alm disso, temos algumas consideraes a fazer para terminar de compreender este exemplo:

. O ttulo da definio de frames o que herda toda a pgina web, por isso, no boa ideia titular como "definio
de frames" por exemplo, j que ento toda nossa pgina se titularia assim e certamente no seria muito descritivo.
Se estivssemos fazendo uma pgina para o aougue Gonalves seria melhor titular a definio de frames algo como
"Aougue Gonalves, as melhores carnes no Rio de Janeiro";
. A pgina que define os frames no tem body. O HTML pode totalizar um erro se o incluirmos;
. As pginas "pagina1.html", "pagina2.html" e "pagina3.html" devem ser escritas em arquivos independentes com o
nome indicado. Neste exemplo, Tais pginas deveriam se encontrar no mesmo diretrio que a declarao de frames.
Se especificarmos uma rota para acessar ao arquivo podemos coloc-lo no diretrio que desejarmos;
. As cores de cada um dos frames colocamos com o atributo bgcolor colocado na etiqueta <BODY> de cada uma das
pginas que se mostram nas janelas.
Iniciando no HTML: Frames - Orientar os links
A nica particularidade destacvel no exemplo do captulo anterior, no manejo de frames em geral, trata-se de que
cada um dos links que colocamos nas pginas atualizam o frame onde est colocado este link. Por exemplo, se temos
link na parte inferior da janela, no espao correspondente a terceira janela, atualizaro os contedos do terceiro
frame, que onde esto situados os links.

Este efeito que comentamos pode-se observar no exemplo da pgina do aougue, tal como ficaria ao incluir os
cdigos das distintas pginas.

O lgico que ao clicar sobre um link da barra de navegao atualizamos o frame principal, que onde havamos
planejado colocar os contedos, no lugar do frame onde colocamos a barra de navegao, que deveria se manter
fixa. Para conseguir este efeito devemos fazer duas coisas:

1. Dar um nome ao frame que desejamos atualizar: Tal nome se indica na etiqueta <FRAME> da definio de frames.
Para isso utilizamos o atributo name, igualado ao nome que queremos dar a tal janela;
2. Orientar os links para esse frame: Para isso devemos colocar no atributo target dos links -etiqueta <A>- o nome do
frame que desejamos atualizar ao clicar o link.

Depois de dar um nome ao frame principal, nossa declarao de frames ficaria da seguinte maneira:

<frame src="pagina2.html" name="principal">
</frameset>

Ademais, deveramos colocar o atributo target aos links, tal como se segue:

<a href="pagina2.html" target="principal">Portal</a> |
<a href="produtos.html" target="principal">Produtos</a> |
<a href="contato.html" target="principal">Contato</a>

Uma vez realizados estas duas mudanas podemos ver como os links da barra de navegao sim que atualizam a
pgina que devem.

Valores para o atributo target

Como vimos, com o atributo target da etiqueta <A> podemos indicar o nome do frame que desejamos que atualize
esse link. Entretanto, este no o nico valor que podemos aplicar ao atributo. Temos alguns valores adicionais que
podemos atribuir a qualquer link em geral.

. _blank - Para fazer com que esse link se abra em uma janela a parte. Nossos exemplos neste manual costumam
abrir em uma janela a parte, colocando este valor no target dos links que levam aos exemplos;

. _self - Atualiza o frame onde est situado o link. o valor por padro;

. _parent - O link se atualiza sobre seu pai ou sobre a janela que estamos trabalhando, se no tiver um pai;

. _top - A pgina carrega a tela completa, ou seja, eliminando todos os frames que pudesse haver. Este atributo
muito importante porque se colocamos em nossa pgina com frames um link a uma pgina externa, se abriria em
um dos frames e se manteriam visveis outros frames da pgina, fazendo um efeito que costuma ser pouco
agradvel, porque parece que esto evitando que nos escapemos.

A sintaxe de um desses valores de atributos colocados em um link seria a seguinte:

<A href="http://www.criarweb.com" target="_top">Acessar a criarweb.com</A>

Iniciando no HTML: Frames - Atributos avanados
A parte da criao das janelas propriamente dita, existem muitos atributos com os que configurar sua aparncia.
Para isso, tanto a etiqueta <frameset> como <frame> admitem diversos atributos que permitem especificar a forma
de elementos como as bordas dos frames, a margem, a existncia ou no de barras de deslocamento, etc.

Atributos para a etiqueta <frameset>

J conhecemos o atributo cols e rows, que servem para indicar se a distribuio em janelas se far horizontalmente
ou verticalmente. Somente se pode utilizar um deles e se iguala s dimenses de cada uma das divises, separadas
por vrgulas.

. border="nmero de pixels"

Permite especificar de maneira global para todo o frameset o nmero de pixels que h de ter a borde dos frames.

. bordercolor="#rrggbb"

Com este atributo podemos modificar a cor da borda dos frames, tambm de maneira global a todo o frameset.

. frameborder="yes|no|0"

Serve para mostrar ou no a borda do frame. Seus possveis valores so "yes" (para que se vejam as bordas) e "no"
ou "0" (para que no se vejam). Na prtica elimina a borda, mas permanece uma linha de separao dos frames.

. framespacing="nmero de pixels"

Para determinar a largura da linha de separao dos frames. Pode -se utilizar em Internet Explorer e junto com o
atributo frameborder="0" serve para eliminar a borda das janelas.

Atributos para a etiqueta <frame>

Para esta etiqueta, assinalamos nos captulos anteriores os atributos src, que servem para indicar o arquivo que
contm a janela e name, para dar um nome janela e logo direcionar os links para ele. Vejamos agora outros
atributos disponveis.

. marginwidth="nmero de pixels"

Define o nmero de pixels que tem a margem do frame onde se indica. Esta margem se aplica pgina que
pretendemos ver nessa janela, de modo que se colocamos 0, os contedos da pgina nessa janela estaro
completamente grudados na borda da margem e se indicamos um valor de 10, os contedos da pgina estariam
separados da borda 10 pixels.

. marginheight="nmero de pixels"

O mesmo que o atributo anterior, mas para a margem vertical.

. scrolling="yes|no|auto"

Serve para indicar se queremos que haja barras de deslocamento nas diferentes janelas. Se indicamos "yes" sempre
sairo as barras, se indicamos "no" no sairo nunca e se colocamos "auto" sairo somente se forem necessrias.
Auto o valor por padro.

Conselho: H que ter cuidado se eliminamos as bordas dos frames, visto que a pgina web pode ter dimenses
distintas dependendo da definio de tela do visitante. Se o espao da janela se v reduzido, poderia se ver reduzido
o espao para o frame e pode acontecer de no caber os elementos que antes sim cabiam e se eliminamos as barras
de deslocamento pode ser que o visitante no possa ver todo o contedo da janela.

Este mesmo conselho pode ser aplicado ao redimensionamento de frames, que veremos no seguinte atributo. Se
fizermos com que as janelas no sejam redimensionveis provavelmente teramos uma declarao de frames
demasiado rgida, que pode ser mal vista em algum tipo de tela.

. noresize

Este atributo no tem valores, simplesmente se coloca ou no se coloca. No caso de que esteja presente indica que o
frame no se pode redimensionar. Como podemos ver, ao colocar o mouse sobre a borda das janelas sai um cursor
que nos assinala que podemos mover tal borda e redimensionar assim os frames. Por padro, se no colocamos
nada, as janelas podem ser redimensionadas.

. frameborder="yes|no|0"

Este atributo permite controlar a apario das bordas dos frames. Com este atributo igualado a "0" ou "no" as
bordeas se eliminam. Entretanto, ficam as feias margens na borda. Pelo que podemos comprovar funciona melhor
no Netscape do que no Internet Explorer. De qualquer forma, temos um pouco mais adiante, uma nota para explicar
os frames sem bordas.

Nota: os atributos de frames no funcionam sempre bem em todos os navegadores. recomendvel fazermos um
teste sobre o que estamos desenhando em vrios navegadores para comprovar que nossos frames se veem bem em
todas as plataformas.

. bordercolor="#rrggbb"

Permite especificar a cor da borda da janela.

Iniciando no HTML: Vantagens e inconvenientes do
uso de frames
O desenho com frames um assunto bastante controvertido, j que distintos desenhadores podem ter outras
opinies.

Referncia: Se voc deseja saber o que so os frames e como cri-los consulte os captulos de Frames de nosso
manual de HTML.

No meu caso, penso que prefervel no utiliz-los, apesar de que isso depende do tipo de web site que esteja
construindo, pois em alguns casos sim que seria muito adequado seu uso.

Colocarei algumas vantagens e alguns inconvenientes do uso de janelas (frames). Isto ao meu ponto de vista,
outros podem ter outras opinies.

Vantagens de usar frames:

. A navegao da pgina ser mais rpida. Apesar de que o primeiro carregamento da pgina seria igual, em
sucessivas impresses pginas j teremos algumas janelas salvas, que no teriam que voltar a descarregar;

. Criar pginas do site seria mais rpido. Como no temos que incluir partes de cdigo como a barra de navegao,
ttulo, etc. criar novas pginas seria um processo muito mais rpido;

. Partes da pgina (como a barra de navegao) se mantm fixas e isso pode ser bom, para que o usurio no as
perca nunca de vista;

. Estas mesmas partes visveis constantemente, se contm links, podem servir muito bem para melhorar a navegao
pelo site;

. Mantm uma navegabilidade do site onde se navega, pois os elementos fixos conservam a imagem sempre visvel.

Inconvenientes de usar frames

. Tiram espao da tela. O espao ocupado pelos frames fixos se perde na hora de fazer pginas novas, porque j est
utilizado. Em definies de tela pequena ou em dispositivos como Palms, este problema se torna mais patente;

. Foram ao visitante a entrar pela declarao de frames. Se no o fazem assim, somente se veria una pgina interior
sem os requadros. Estes requadros poderiam ser insuficientes para uma boa navegao pelos contedos e poderiam
no conservar uma boa imagem corporativa;

. A promoo da pgina seria, princpio, mais limitada. Isto devido a que somente se deveria promocioanr o
portal, pois se promovem pginas interiores, poderia acontecer o caso em que os visitantes entrassem por elas no
lugar do portal, criando o problema descrito no ponto anterior;

. Muita gente no gosta porque no se sentem livres na navegao, pois entendem que estas partes fixas esto
limitando sua mobilidade pela web. Este efeito se torna mais patente se a pgina com frames tem links a outras
pginas web fora do site e, ao clicar um link, se mostra a pgina nova com as janelas da pgina que tem frames;

. Alguns navegadores no os suportam. Isto no muito habitual, mas se estamos fazendo uma pgina que
queremos que seja totalmente acessvel deveramos consider-lo importante;

. Os bookmarks ou favoritos no funcionam corretamente em muitos casos. Se quisermos incluir um favorito a uma
pgina de um frame que no seja o portal podemos encontrar problemas;

. Pode acontecer que o boto detrs do navegador no se comporte como desejamos;

. Se voc quer atualizar mais de um frame com o clique de um link dever utilizar Java script. Ademais os scripts
podem se complicar bastante quando tm de comunicar vrios frames entre si.

Concluso

O trabalho com frames pode ser mais ou menos indicado dependendo das caractersticas da pgina a desenvolver,
sua tarefa saber se no seu caso deve utiliza-los ou no.

Introdução Ao HTML PDF

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Introdução Ao HTML PDF

Diunggah oleh

Hak Cipta:

Format Tersedia

Sumrio

Iniciando no HTML: Introduo ao HTML ......................................................................................................................... 2

Anda mungkin juga menyukai