HTML Manual

APRENDENDO O HTML, FORMATAO PARA WEB.
Por Andr Marinho C.
O QUE HTML?
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 este deficiente planejamento, 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 incovenientes e deficincias que tiveram
que ser superadas com a introduo de outras tecnologias acessrias capazes de organizar, optimizar e
automatizar o funcionamento das webs. Exemplos que podem soar como conhecidos so as CSS,
JavaScript 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 MicrosoftWord, 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 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.
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>
Manual de Programao
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>
O resultado ser:
Isto est em negrito
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>
O resultado seria:
Ol, estamos no pargrafo 1
Agora mudamos de pargrafo
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 informativo 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,
palavraschaves,
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.
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 seginte 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>
Manual de Programao
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.
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.
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
No vamos escrever nesta ocasio o cdigo fonte do exerccio. Podemos v-lo em funcionamento em
nosso navegador e na janela podemos obter o cdigo fonte selecionando no menu Exibir a opo Cdigo
fonte.
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>
Ser visto dessa maneira na pgina:
Cabealho de nvel 1
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>
Ser visto dessa maneira na pgina:
Cabealho de nvel 2
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>
Manual de Programao

</body>
</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>
Obteremos este resultado: Texto em negrito
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>
Que d o seguinte efeito:
Texto em itlico
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
O resultado seria:
A CC3H4CINOS 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>
Isto daria:
Isto s est em negrito e isto em negrito e itlico
Manual de Programao
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>
Que se visualizaria assim em uma pgina web:
Este texto tem outra tipografia
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>
Este texto maior
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 pr-fixao 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 freqentemente
usadas para as que se criaram um nome mais memotcnico:
Nombre Color
Aqua
Black
Blue
Fuchsia
Gray
Green
Manual de Programao
Lime
Maroon
Navy
Olive
Purple
Red
Silver
Teal
White
Yellow
<font color="red">Este texto est em vermelho</font>
Este texto est em vermelho
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".
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.
A imagem chama-se fundo.jpg e supomos que se encontra no mesmo diretrio que a pgina. Neste caso
se colocaria a seguinte etiqueta <body>
<body background="fondo.jpg">
Pode-se ver o efeito de colocar este fundo em uma pgina a parte.
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 a 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
Manual de Programao
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">
O efeito pode-se ver em uma pgina a parte.
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. Vlido para Internet Explorer.
Topmargin: para indicar a margem acima e abaixo da pgina. Para Internet Explorer.
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 andrecavalcante.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. Pode-se ver o
exemplo em uma pgina parte.
LISTAS I
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>
Manual de Programao
</ul>
O resultado:
Pases do mundo
Brasil
Espanha
Austrlia
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>
Que tem como resultado:
_ Elemento 1
_ Elemento 2
_ Elemento 3
o Elemento 4
LISTAS II
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>
O resultado :
Regras de comportamento no trabalho
1. O chefe sempre tem a razo
2. Em caso de dvida aplicar a regra 1
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
Manual de Programao
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
<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>
O resultado:
Ordenamos por nmeros
1. Elemento 1
2. Elemento 2
Ordenamos por letras
a. Elemento a
b. Elemento b
Ordenamos por nmeros romanos comeando pelo 10
i. Elemento x
ii. Elemento xi
LISTAS III
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>
O efeito produzido:
Dicionrio da Lngua Portuguesa
Aougue
Estabelecimento onde se vendem carnes frescas
Colheita
Ato de colher os produtos agrcolas
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.
Manual de Programao
O cdigo:
<dl>
<dd>Primeiro nvel de deslocamento
<dl>
<dd>Segundo nvel de deslocamento
<dl>
<dd>Terceiro nvel de deslocamento
</dl>
</dl>
</dl>
O resultado:
Primeiro nvel de deslocamento
Segundo nvel de deslocamento
Terceiro nvel de deslocamento
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>
Dessa forma criamos uma lista como esta:
Cidades do mundo
Brasil
1. Rio de Janeiro
2. Salvador
Espanha
1. Madrid
2. Barcelona
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 caracter.
< < > >
& & " "
Caracteres especiais do HTML 2.0
Manual de Programao
Á À
É È
Í Ì
Ó Ò
Ú Ù
á à
é è
í ì
ó ò
ú ù
Ä Â
Ë Ê
Ï Î
Ö Ô
Ü Û
ä â
ë ê
ï î
ö ô
ü û
Ã å
Ñ Å
Õ Ç
ã ç
ñ Ý
õ ý
Ø ÿ
ø Þ
Ð þ
ð Æ
ß æ
Caracteres especiais do HTML 3.2
¼
½ ¡
¾ £
© ¥
® §
ª ¤
² ¦
³ «
¹ ¬
¯
µ º
¶ ´
· ¨
° ±
¸ »
¿
Outros caracteres especiais
× ¢
÷ €

OE

Manual de Programao
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 site web
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 ponteiro 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.
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>
Link com o final deste documento para que prove seu funcionamento:
Ir abaixo
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
distingu-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.
Manual de Programao
Links locais
Como dissemos, um site web est constituido 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, audios... 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 no 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>
Como exemplo temos aqui um link que aponta ao captulo anterior ao final da pgina.
Links externos, de correio e para arquivos
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
Manual de Programao
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: andre@andrecavalcante.com ">andre@andrecavalcante.com</a>
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 particulariedade
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?".
Se queremos linkar outro tipo de arquivos como um PDF ou mundo VRML (Realidade Virtual para
Internet)continuamos fazendo da mesma maneira. O navegador, se reconhece o tipo de arquivo, o
responsvel de abr-lo utilizando o conectador 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>
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 captulos 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 otimizar 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
Manual de Programao
carregada, o navegador mostrar esta descrio, com a qual o navegante poder ter uma idia 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 disigner 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 tranqilamente 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>
Manual de Programao
Exemplo prtico
Ser bvio para os leitores, fazer agora uma pgina que contenha uma imagem vrias vezes repetidas,
mas com diferentes atributos.
Uma das vezes que saia deve ser mostrada com seu tamanho original e com uma borda de 3
pixels.
Em outra ocasio a imagem aparecer sem borda, com sua mesma altura e com uma largura
superior a original.
Tambm mostraremos a imagem sem borda, com sua mesma largura e com uma altura superior
a original.
Por ltimo, mostraremos a imagem com uma altura e largura maiores que as originais, mas
proporcionalmente igual que antes.
Vamos utilizar esta imagem para fazer o exerccio:
As dimenses originais da imagem so 28x21, o cdigo fonte seria ento 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">
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.
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 que cubra a parte esquerda da
imagem. Continuo colocando texto para que se veja o efeito, Bla bla bla bla bla bla bla...
</p>
Ficaria assim:
Texto to extenso quanto quisermos que cubra a parte esquerda da imagem. Continuo colocando texto
para que se veja o efeito, Bla bla bla bla bla bla bla...
<p>
<img src="imagen.gif" align="left">Texto tan extenso como queramos que cubrir la parte derecha de la
imagen. Sigo poniendo texto para que se vea el efecto, Bla bla bla bla bla bla bla...
</p>
Ficaria assim:
Texto tan extenso como queramos que cubrir la parte derecha de la imagen. Sigo poniendo texto para
que se vea el efecto, Bla bla bla bla bla bla bla...
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">
Manual de Programao
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
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 mais nada as tabelas, nos prximos captulos...
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 otimizar 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 extender seu uso.
GIF
Alm se ser um arquivo ideal para as imagens que esto desenhadas, tem muitas outras caractersticas
que so importantes e teis.
Compresin: 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.
Manual de Programao
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.
Parte desta
imagem
transparente
Uma fotografia com formato JPG
Photoshop uma ferramenta excelente para
otimizar arquivos. Vendo vrias cpias
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 optimizadores grficos:
- WebGraphics Optimizer
- ProJPG, GIF Imantion
E com verses On-line:
- JPG - GIF Crunchers
- GIF Wizard
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
Manual de Programao
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
podemos escolher a mais adequada.
Tabela de cor
estes valores:
00
33
66
99
CC
FF
Exemplos: #3366FF #FF9900 #666666
Consegue-se as seguintes cores:
#000000 #000033 #000066 #000099 #0000CC #0000FF
#003300 #003333 #003366 #003399 #0033CC #0033FF
#006600 #006633 #006666 #006699 #0066CC #0066FF
#009900 #009933 #009966 #009999 #0099CC #0099FF
#00CC00 #00CC33 #00CC66 #00CC99 #00CCCC #00CCFF
#00FF00 #00FF33 #00FF66 #00FF99 #00FFCC #00FFFF
#330000 #330033 #330066 #330099 #3300CC #3300FF
#333300 #333333 #333366 #333399 #3333CC #3333FF
#336600 #336633 #336666 #336699 #3366CC #3366FF
#339900 #339933 #339966 #339999 #3399CC #3399FF
#660000 #660033 #660066 #660099 #6600CC #6600FF
#663300 #663333 #663366 #663399 #6633CC #6633FF
#666600 #666633 #666666 #666699 #6666CC #6666FF
#669900 #669933 #669966 #669999 #6699CC #6699FF
#990000 #990033 #990066 #990099 #9900CC #9900FF
#993300 #993333 #993366 #993399 #9933CC #9933FF
#996600 #996633 #996666 #996699 #9966CC #9966FF
#999900 #999933 #999966 #999999 #9999CC #9999FF
#CC0000 #CC0033 #CC0066 #CC0099 #CC00CC #CC00FF
#CCCC00 #CCCC33 #CCCC66 #CCCC99 #CCCCCC #CCCCFF
#CCFF00 #CCFF33 #CCFF66 #CCFF99 #CCFFCC #CCFFFF
#FF0000 #FF0033 #FF0066 #FF0099 #FF00CC #FF00FF
Manual de Programao
#FFCC00 #FFCC33 #FFCC66 #FFCC99 #FFCCCC #FFCCFF

#FFFF00 #FFFF33 #FFFF66 #FFFF99 #FFFFCC #FFFFFF
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>
O resultado:
Clula 1, linha 1 Clula 2, linha1
Clula 1, linha 2 Clula 2, linha 2
NOTA: 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 idia 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.
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.
Manual de Programao
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.
Nota: 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. Entretanto,
<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 quebracabea
se no chegamos a compreende-las devidamente.
Os atributos rowspan e colspan so tambm utilizados freqentemente. 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.
Esta clula tem um colspan="2"
Clula normal Outra clula
Do mesmo modo,
<td rowspan="2">
Clula
Manual de Programao
Esta clula tem rowspan="2", por isso Normal

tem fundida a clula abaixo.
Outra clula
normal
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.
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
Esta tabela est centralizada
(aling="center"). Tem somente uma
clula.
Este seria um texto qualquer colocado ao lado de uma tabela
centralizada.
Exemplo de tabela alinhada direita
Para que seja visto o
efeito de
alinhamento da
tabela devemos
colocar um texto ao lado e o texto ir rodear a tabela, assim
como ocorreria como as imagens alinhadas a um lado.
Esta tabela est alinhada direita
(aling="right"). Tem somente uma
clula.
Exemplo de tabela alinhada esquerda
Para que seja visto o
efeito de
alinhamento da
tabela, devemos colocar um texto ao lado e o texto ir rodear a
tabela, assim como ocorreria com as imagens alinhadas a um
lado.
Esta tabela est alinhada esquerda
(aling="left"). Tem somente uma clula.
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.
Na seguinte imagem podemos ver graficamente o significado destes atributos:
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
Manual de Programao
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.)
Tabela de cor
vermelha de fundo
O atributo bgcolor da tabela est
em vermelho.
Clula normal Esta clula est em verde. Tem
o atributo bgcolor na cor verde
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 aninhamento de tabelas. Veremos primeiro o resultado e em seguida, o
cdigo, pois assim conseguiremos entend-lo melhor.
Clula da tabela principal
Tabela aninhada, clula 1 Tabela aninhada, clula 2
Tabela aninhada, clula 3 Tabela aninhada, clula 4
Este seria o cdigo:
<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>
Exemplos prticos
Estas so as informaes que pretendamos transmitir-lhes sobre as tabelas em HTML. Agora seria
importante fazer algum exemplo de realizao de uma tabela um pouco mais complexa. Por exemplo, a
seguinte:
Animais em perigo de extino
Nome Cabeas Previso 2010 Previso 2020
Baleia 6000 4000 1500
Urso Pardo 50
Lince 10
0
Tigre 300 210
Outro exemplo de tabela com a qual podemos praticar:
Climas de Amrica do Sul
Venezuela Argentina
Norte da Amrica de
Sul. Pases como:
Colmbia
Equador
Per
Sul da Amrica do Sul.
Manual de Programao
Pases como:
Chile
Uruguai
Paraguai
Floresta tropical, clima de savana,
clima martimo com invernos
secos.
Climas martimos com veres
secos, com invernos secos,
climas frios, clima de estepe,
clima desrtico.
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 es ta
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 outra 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
Manual de Programao
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 seguiente 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.
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="nombre">
Deste modo expressamos nosso desejo de criar uma caixa de texto cujo contedo ser chamado nome
(por exemplo). O aspecto deste tipo de caixas conhecido, como pode ser visto aqui:
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 confund-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 idia 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">
Gera um campo deste tipo:
Josefa 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
Manual de Programao
Podemos esconder o texto escrito por meio de asteriscos de forma a fornecer uma 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.
Isto pode ser visto em funcionamento a seguir:
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>
O resultado o seguinte:
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>
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 expressadas 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>
O resultado :
Primavera
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
Manual de Programao
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:
<select name="estao">
por:
<select name="estao" size="3" multiple>
A lista ficar desta forma:
Primavera
Vero
Outono
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:
<option>Outono</option>
por:
<option selected>Outono</option>
O resultado ser:
Outono
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 outra 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.
O resultado o seguinte:
Primavera
Vero
Outono
Inverno
Como podemos ver, a cada uma das opes se atribui uma etiqueta input dentro da qual atribuimos 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
Vejamos o efeito:
Primavera
Vero
Manual de Programao
Outono
Inverno
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
O efeito:
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)
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">
Com este cdigo geramos um boto como este:
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 freqentemente. 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 freqentemente 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.andrecavalcante.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">
Ficaria desta maneira:
O uso mais frequente de um boto na programao no cliente. Utilizando linguagens como Javascript
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.
Vemos o formulrio nesta pgina. Vocs tratem de constru-lo para ver se realmente entenderam bem os
temas sobre formulrios.
Manual de Programao
Nome
E-mail
@
Cidade
Sexo
Homem
Mulher
Frequncia das viagens
Vrias vezes por dia
Comentrios sobre sua satisfao pessoal

Desejo receber notificao das novidades nas linhas de nibus.
Enviar formulrio
Apagar tudo
A seguir tambm mostraremos o cdigo fonte deste formulrio, que importante que todos dem uma
olhada, mesmo que seja rapidamente.
<form action="mailto: andre@andrecavalcante.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.
Manual de Programao
receber_info=on
Mapas de imagens com HTML
Nos captulos anteriores nos aprofundamos no elemento bsico de navegao do web: O link hipertexto.
Vimos que estes links so palavras, textos ou imagens que, ao clicar sobre eles, nos enviam a outras
pginas ou zonas.
Os mapas de imagem so uma nova exposio de navegao que incorpora uma srie de links dentro de
uma mesma imagem. Estes links so definidos por figuras geomtricas e funcionam exatamente da
mesma forma que os outros links. Pode-se ver o funcionamento de um neste link.
princpio, estes mapas no eram diretamente reconhecidos pelos navegadores e recorriam
tecnologias de lado do servidor para serem visualizados. Hoje em dia podem ser implementados por meio
de cdigo HTML tal como veremos neste captulo.
Podemos utilizar estes mapas, por exemplo, em portais onde tornamos conhecida cada uma das sesses
do site por meio de uma imagem. Tambm pode ser muito prtico, em mapas geogrficos onde cada
cidade, estado ou ponto qualquer representa um link a uma pgina.
Em qualquer caso, o uso destes mapas tem de ser sistematicamente acompanhado de um texto
explicativo que d a entender ao usurio sobre os distintos pontos da imagem. Frases como "D um
clique sobre tal cone para acesar a tal informao". So muito indicativas na hora de fazer intuitiva a
navegao pelos mapas de imagens. Por outro lado, no demais introduzir essa mesma explicao no
atributo alt da imagem.
Sendo assim, um mapa de imagem est composto por duas partes:
A imagem propriamente dita que estar situada como de costume dentro da etiqueta <body> de
nosso documento HTML.
Um cdigo, situado no interior da etiqueta <map>, que delimitar por meio de linhas geomtricas
imaginrias cada uma das reas dos links apresentados na imagem.
As linhas geomtricas que delimitan os links, ou seja, as reas dos links, devem ser definidas por meio de
coordenadas. Cada imagem definida por umas dimenses de largura (X) e altura (Y) e cada ponto da
imagem pode ser definido portanto, dizendo a que altura (x) e largura (y) nos encontramos. Deste modo, a
esquina superior esquerda corresponde posio 0,0 e a esquina inferior direita corresponde s
coordenadas X,Y. Se desejamos saber quais coordenadas correspondem a um ponto concreto de nossa
imagem, o melhor utilizar um programa de desenho grfico como Photoshop ou Paint Shop Pro.
A melhor forma de explicar o funcionamento deste tipo de mapa a partir de um exemplo prtico.
Suponhamos que temos uma imagem com um mapa como esta:
Clique nos crculos para acessar s sees!
Dentro dela queremos introduzir um link a cada um dos elementos que a compem. Para isso,
definiremos nossos links como zonas circulares de tamanho pequeno que sero distribudas ao
comprimento e largura da imagem.
Vejamos a seguir o cdigo que utilizaremos:
<table border=0 width=450><tr><td align="center">
<map name="mapa1">
<area alt="Clique para ver a pgina de meus amigos" shape="CIRCLE" coords="44,36,29" href="#">
<area alt="Clique para ver minha noiva" shape="CIRCLE" coords="140,35,31" href="#">
<area alt="Clique para conhecer minha famlia" shape="circle" coords="239,37,30" href="#">
<area alt="Clique para conhecer meu trabalho" shape="CIRCLE" coords="336,36,31" href="#">
</map>
<img src="../../../../docs/artigos/imagens/mapa1.gif" width="380" height="72" alt="Mapa de imagens. Clique
em cada um dos crculos." border="0" usemap="#mapa1">
<br>
Clique nos crculos para acessar s sees!
</td></tr></table>
Nota: Os href das reas vo a #
Este um exemplo parcial de utilizao dos mapas, faltaria colocar os href com valores reais e
no com a #. Cada um dos links das reas -atributo href da etiqueta <area>- deveriam levar a
uma pgina web. O exemplo ficaria completo se crissemos todas as pginas onde linkar as
reas e colocssemos os href dirigidos para tais pginas. Como no fizemos as pginas
"destino" colocamos links que no levam a lugar nenhum, que, como se pode ver, indica-se
com o carter "#".
possvel observar, tal como explicamos antes, que nosso mapa consta de duas partes principais: a
imagem e a etiqueta <map> que define as reas de cada link.
Cada rea se indica com uma etiqueta <area>, que tem os seguinte atributos:
alt
Manual de Programao
Para indicar um texto que ser mostrado quando situarmos o mouse na rea.
shape
Indica o tipo de rea.
coords
As coordenadas que definem a rea. Ser um grupo de valores numricos distintos
dependendo do tipo de rea (shape) que estivermos definindo.
href
Para indicar o destino do link correspondente rea.
Neste caso utilizamos umas reas circulares (shape="CIRCLE"), que se definem
indicando o centro do crculo -uma coordenada (X,Y) e o radio, que um nmero inteiro
que se corresponde com o nmero de pixels desde o centro at a borda do crculo.
Tipos de reas: shape distintas.
Existem trs tipos de reas distintas, suficientes para fazer quase qualquer tipo de figura.
No desenho que acompanha estas linhas pode ser visto uma representao das reas,
que detalhamos a seguir.
shape="RECT"
Cria uma rea retangular. Para defini-la utilizam-se as coordenadas dos pontos da
esquina superior esquerda e da esquina inferior direita. Tal como esto nomeadas tais
coordenadas em nosso desenho, a rea teria a seguinte etiqueta:
<area shape="RECT" coords="X1,Y1,X2,Y2" href="#">
shape="CIRCLE"
Cria uma rea circular, que se indica com a coordenada do centro do crculo e o radio. De acordo com
nosso desenho, a etiqueta de uma rea circular teria esta forma:
<area shape="CIRCLE" coords="X1,Y1,R" href="#">
shape="POLY"
Este tipo de rea, poligonal, a mais complexa de todas. Um polgono fica definido indicando todos seus
pontos, mas ateno, pois temos que indic-los em ordem, seguindo o caminho marcado pelo permetro
do polgono. Segundo nosso desenho e os nomes que demos aos pontos do polgono, a etiqueta <area>
ficaria desta forma:
<area shape="POLY" coords=" X1,Y1, X2,Y2, X3,Y3, X4,Y4" href="#">
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
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.
Um exemplo das reas que se podem construir em uma construo de frames pode ser visto nas
imagens a seguir.
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.
Manual de Programao
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 asterstico (*). 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.
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.
<html>
<head>
<title>Definio de Frames</title>
</head>
<frameset rows="15%,*,75">
<frame src="pagina1.html">
Manual de Programao
</frameset>
</html>
Pode-se ver esta partio de frames em uma pgina a parte.
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 idia 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.
Frames Uma pgina em cada janela
As pginas que mostraremos em cada janela so documentos HTML iguais aos que viemos criando
anteriormente. Podemos colocar qualquer elemento HTML dos estudados neste manual, como
etiquetas de pargrafo, imagens, cores de fundo, etc.
Cada documento, como j indicamos, se escreve separado em seu prprio arquivo HTML. Para o
exemplo do captulo anterior podemos definir os arquivos HTML da seguinte maneira.
pagina1.html
a pgina que contm o ttulo da web. Simplesmente se trata de uma etiqueta <H1> de ttulo. A
pgina tem seu prprio ttulo, com a etiqueta <TITLE>, que no poder ser visualizada nenhum lugar,
a no ser que se mostre esta pgina sem os frames, j que as pginas dentro das janelas herdam o
ttulo da definio dos frames.
<html>
<head>
<title>Ttulo Aougue Gonalves</title>
</head>
<body bgcolor="#DECC09">
<h1 align=center>Aougue Gonalves</h1>
</body>
</html>
pagina2.html
a pgina que se apresentar na rea principal da definio de frames, ou seja, a pgina que tem
mais espao para ser visualizada e onde colocaremos os contedos da web. Neste caso, mostra uma
mensagem de bem-vindo web, que far as vezes de portal.
<html>
<head>
<title>Portal do Aougue Gonalves</title>
</head>
<body bgcolor="#CF391C" text="#ffffff">
<h1 align="center">Bem-vindo a nossa web</h1>
<br>
<br>
O aougue Gonalves, com mais de 100 anos de experincia, a melhor fonte de carnes de boi e de
porco da regio.
<br>
<br>
Tanto no inverno como no vero voc pode encontrar nossas ofertas de temporada de primeira
qualidade.
</body>
</html>
pagina3.html
Nesta pgina se mostrar a barra de navegao pelos contedos do site. Contm links que deveriam
atualizar o contedo da rea principal da declarao de frames, para mostrar os distintos contedos
Manual de Programao
do sitio, por exemplo, o portal, os produtos, a pgina de contato, etc.

<html>
<head>
<title>Barra de navegao de aougue Gonalves</title>
</head>
<body bgcolor="#AC760E" link="ffffcc" vlink="ffffcc">
<div align="center">
<b>
<a href="pagina2.html">Portal</a> |
<a href="produtos.html">Produtos</a> |
<a href="contato.html">Contato</a>
</b>
</div>
</body>
</html>
Podemos ver como fica a pgina de frames com estes contedos, que simulam a pgina de um
aougue.
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.
<frameset rows="15%,*,75">
<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
Manual de Programao
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.andrecavalcante.com" target="_top">Acessar a andrecavalcante.com</A>
Frames Aninhar frames
Para criar estruturas de janelas nas quais se misturam as filas e as colunas devemos aninhar etiquetas
<FRAMESET>. Comeando pela partio de frames mais geral, devemos colocar dentro as parties de
frames menores. A maneira de indicar isto se pode ver facilmente com um exemplo.
Os passos para definir o aninhamento podem ser encontrados direita.
Os distintos frames vem numerados com a ordem
na qual so escritas no cdigo.
Na imagem pode ser visto o resultado final acompanhada da representao sobre a maneira de defini-los.
Em primeiro definimos uma estrutura de frames em duas colunas e dentro da primeira coluna colocamos
outra partio de frames em duas filas. O cdigo necessrio o seguinte.
<frameset cols="200,*">
<frameset rows="170,*">
</frameset>
</frameset>
Podemos ver o exemplo em uma pgina a parte.
Nota: colocamos uma margem em cada uma das linhas desta definio de frames para
conseguir um cdigo mais compreensvel visualmente. Estas margens no so em absoluto
necessrios, simplesmente nos servem para ver em que nvel de aninhamento nos
encontramos.
O exemplo anterior pode se complicar um pouco mais se incluirmos mais parties. Vamos ver algo um
pouco mais complicado para praticar mais com os aninhamentos de frames.
Os passos para definir o aninhamento podem ser encontrados direita.
Os distintos frames vem numerados com a ordem
na qual se escrevem no cdigo.
Na imagem se observa que o primeiro frameset a definir se compe de duas filas. Posteriormente, dentro
da segunda fila do primeiro frameset, temos outra partio em duas colunas, dentro das que colocamos
um terceiro nvel de frameset com uma defino em filas nos dois casos. O cdigo pode ser visto a seguir.
<frameset rows="60,*">
<frameset cols="200,*">
<frameset rows="*,150">
</frameset>
<frameset rows="*,60">
</frameset>
</frameset>
</frameset>
Podemos ver o exemplo em uma pgina a parte.
At aqui vimos a parte mais bsica da criao de frames. Nos prximos captulos poderemos aprender a
configurar as janelas para variar sua aparncia e, entre outras coisas, eliminar as barras que separam
cada um dos distintos frames.
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 distribuo 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.
Manual de Programao
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 a pgina web
pode ter dimenses distintas dependendo da definio de tela do visitante. Se o espao da
janela se v reducido, 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 nosos frames se vem bem em todas as plataformas.
bordercolor="#rrggbb"
Permite especificar a cor da borda da janela.
Vantagens e incovenientes 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 deo uso de janelas (frames). Isto ao meu ponto
Manual de Programao
de vista, outros podem ter outras opinies.

Vantagens de usar frames
A navegao da pgina ser mais rpida. Apesar de que o primeiro caerregamento 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 poderian 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 se promocionam 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 livers 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 acessivel 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 Javascript.
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.
Todos los direitos de reproduo e difuso reservados
Voltar
Manual de Programao

HTML Manual

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

HTML Manual

Enviado por

Direitos autorais:

Formatos disponíveis

APRENDENDO O HTML, FORMATAO PARA WEB.

Por Andr Marinho C.

Um fechamento do tipo </etiqueta>

FORMATO DE PARGRAFOS EM HTML

<h4>Cabealho de nvel 4</h4>

COR, TAMANHO E TIPO DE LETRA

Pular verticalmente at encontrar a lateral esquerdo livre.

Onde cada valor pode crescer desde 00 at FF.

#FFCC00 #FFCC33 #FFCC66 #FFCC99 #FFCCCC #FFCCFF

Esta clula tem rowspan="2", por isso Normal

Nota: estamos obrigados a utilizar a etiqueta <form>

Comentrios sobre sua satisfao pessoal

do sitio, por exemplo, o portal, os produtos, a pgina de contato, etc.

de vista, outros podem ter outras opinies.

Você também pode gostar