Todas as marcas referentes

a tabelas (ttulo, linhas,

clulas) somente sero
consideradas se includas
entre as tags
<table>...</table>

Aula 5 Tabelas

Continuando a tratar de documentos na Web, nosso
principal assunto hoje so as tabelas, com as quais
voc poder incrementar a disposio dos elementos
em sua pgina de maneira mais criativa.
Voc conhecer tambm a tag META, que fornece
informaes para sites de busca e guarda informaes
de documentao.
E ainda duas outras tags que produzem interessantes
efeitos nos ttulos, mas so dependentes do navegador:
<MARQUEE> e <BLINK>


Objetivos:
- Definir os elementos de uma tabela.
- Usar os atributos gerais de tabelas: borda, largura,
espaamento.
- Fazer atribuies s clulas: alinhamento, dimenses,
unies de linhas e colunas.
- Reconstruir imagens como tabelas.
- Aprender a fornecer informaes para os sites de
busca.
-Utilizar as tags <MARQUEE> e <BLINK>


Pr-requisitos:
Voc entendeu bem como definir cores e incluir
imagens? Se respondeu afirmativamente estas
perguntas est pronto para esta aula! Se no, tire suas
dvidas e releia estes itens das aulas 3 e 4!


1.Tabelas
Nesta aula chegamos a umas das tags mais importantes
do HTML: a tag <TABLE> .... </TABLE>. Ela
permite a definio de tabelas no documento. Mais do
que isso; atravs das tabelas possvel "forar" o
posicionamento dos elementos em uma pgina
(escrever textos em 2 colunas por exemplo).

A tag <TABLE> deve vir sempre acompanhada das
tags <TR>...</TR> e <TD>...</TD> (ou
<TH>...</TH>), que servem para definir,
respectivamente, as linhas e as clulas que compem
cada coluna da tabela.


Existe ainda a tag
<CAPTION>....
</CAPTION>
que opcional e define o
ttulo da tabela. Deve estar
entre as tags <TABLE>...
</TABLE> mas fora das
marcas de linhas e clulas.
Por default, o ttulo
definido acima da tabela e
centralizado. Mas pode-se
utilizar o atributo ALIGN
para outras posies. Por
exemplo, <CAPTION
ALIGN=BOTTOM> indicar
um ttulo abaixo da tabela.
Nas clulas de uma tabela podemos inserir tudo o que
normalmente faz parte de um documento HTML:
links, hipertexto, imagens e at outras tabelas. A no
incluso de linhas e colunas faz com que alguns
navegadores simplesmente ignorem a tag
<TABLE>...</TABLE>.

A tag <TH>...</TH> utilizada para definir clulas
que funcionaro como de ttulo da tabela (no
obrigatrio que uma tabela tenha ttulo) e o texto
escrito em seu interior apresentado em negrito.

As linhas a seguir mostram como fazer, em HTML,
uma tabela com duas linhas e trs colunas.

<TABLE BORDER>
<TR>
<TD>Coluna 1 Linha 1</TD>
<TD>Coluna 2 Linha 1</TD>
<TD>Coluna 3 Linha 1</TD>
</TR>
<TR>
<TD>Coluna 1 Linha 2</TD>
<TD>Coluna 2 Linha 2</TD>
<TD>Coluna 3 Linha 2</TD>
</TR>
</TABLE>

O trecho de HTML anterior produz na tela do
navegador, a tabela abaixo.



1.1 Atributos de <TABLE>
A maioria dos atributo na tag <table> tem os
mesmos significados e valores possveis dos atributos
com mesmo nome usado na tag <img>.

Tabelas so apresentadas, por default, sem borda. A
borda da tabela s visvel se o atributo BORDER
estiver definido. Tabelas sem borda so muito teis
para posicionar elementos dentro de uma pgina.













O internet Explorer permite
definir a cor da borda, pela
incluso do atributo
BORDERCOLOR, na tag
TABLE e a cor das sombras
mais claras e escuras das
bordas: atravs de dois
outros atributos:
BORDERCOLORLIGHT e
BORDERCOLORDARK.





Cores e imagens de fundo
podem ser atribudas a cada
clula, usando o atributo
BGCOLOR ou o atributo
BACKGROUND. Em alguns
casos poder ser necessrio
tambm modificar a cor das
letras (usando <FONT
COLOR>) .
O atributo CELLSPACING define o espao entre as
clulas da tabela. O seu valor default 2 pixels.

O atributo CELLPADDING indica o espao entre o
dado contido numa clula e a borda, o default 1
pixel.

O atributo WIDTH define a largura da tabela na janela.
A largura pode ser definida em termos absolutos
(nmero de pixels) ou em termos de porcentagem da
janela ocupada pela tabela. Se este atributo no for
especificado, a largura definida de modo a caber
todo o contedo da tabela.

O atributo HEIGHT define a altura da tabela na janela
e tem as mesmas caractersticas de WIDTH.

possvel atribuir uma cor (atributo BGCOLOR) ou
uma imagem (atributo BACKGROUND) ao fundo de
uma tabela. O funcionamento destes atributos aqui na
tag <table> ... </table> semelhante ao seu
funcionamento quando utilizados na tag <BODY>
... </BODY>.

O atributo ALIGN define o alinhamento da tabela em
relao janela (pode receber os valores CENTER,
RIGHT, LEFT).


A tabela 4.1 abaixo resume os elementos bsicos das
tabelas e seus atributos.

Tabela 4.1 - Elementos da tabela e seus atributos
Elemento Descrio Atributos
<TABLE>
...
</TABLE>
Tabela BORDER,
CELLSPACING,
CELLPADDING,
BACKGROUND, WIDTH,
HEIGHT, BGCOLOR,
ALIGN
<TR> ...
</TR>
Linha da
tabela
VALIGN, ALIGN
<TH> ...
</TH>
Coluna
(ttulo)
<TD> ...
</TD>
Coluna da
tabela
VALIGN, ALIGN,
ROWSPAN, COLSPAN,
WIDTH, HEIGHT,
BGCOLOR,
BACKGROUND, NOWRAP




1.2 Atributos de <TR>
Os atributos VALIGN e ALIGN servem para definir o
alinhamento dos elementos dentro das clulas de uma
determinada linha da tabela.

O atributo VALIGN (alinhamento vertical) pode
receber o valor TOP, MIDDLE ou BOTTOM (topo,
meio ou em baixo). O valor default de alinhamento
vertical MIDDLE.

O atributo ALIGN (alinhamento horizontal) pode
receber o valor LEFT, CENTER ou RIGHT
(esquerdo, centro ou direito). O seu valor default
LEFT.



1.3 Atributos de <TD> e <TH>
Estas tags tambm tm VALIGN e ALIGN como
atributos, com o mesmo significado de quando usados
para linha inteira, como na tag anterior <tr>. O
alinhamento neste caso, vale apenas para a clula na
qual o atributo est sendo definido (suplantando o
alinhamento da linha, se houver).

O atributo WIDTH permite que se indique o tamanho
horizontal de uma clula. A forma de fazer isto pode
ser pelo nmero de pixels ou por uma porcentagem da
largura da tabela. Caso vrias clulas de uma mesma
coluna definam este atributo, prevalece o maior valor.
O mesmo acontece com o atributo HEIGHT.

O atributo NOWRAP exibe o texto do interior de uma
coluna como uma linha contnua, sem quebras. Esse
atributo faz o navegador entender que o texto, dentro
daquela clula, no pode ser dividido em mais de uma
linha. NOWRAP deve ser usado com cuidado para
evitar linhas demasiadamente longas.


Os atributos ROWSPAN e COLSPAN expandem as
linhas ou colunas de uma tabela. O atributo ROWSPAN
permite que se indique o nmero de linhas que uma
clula deve ocupar. O atributo COLSPAN, tem a
mesma funo para as colunas, isto permite que se
indique o nmero de colunas que uma clula deve
ocupar.

O exemplo a seguir ilustra a utilizao destes atributos
em um trecho de HTML

<TABLE BORDER>
<TR>
<TD ROWSPAN=2>Col 1 Lin 1</TD>
<TD>Col 2 Lin 1</TD>
<TD>Col 3 Lin 1</TD>
</TR>
<TR>
<TD COLSPAN=2>Col 2 Lin 2</TD>
</TR>
</TABLE>

Este trecho HTML vai produzir como sada a seguinte
tabela, no navegador:



2. A tag <META>

A tag <META> muito importante. Pode ser colocada
no interior da rea de cabealho (rea delimitada pela
tag <HEAD> ... </HEAD>). Ela tem mltiplos
usos, pode ser usada para:
a) fornecer informaes para sites de busca,
b) guardar informaes de documentao,
c) enviar informaes especiais para o navegador e
d) fazer a troca automtica do documento em exibio
pelo navegador.

Esta tag reconhece trs atributos, cujos valores variam
conforme a funo desempenhada por ela. Os atributos
so: HTTP-EQUIV, NAME e CONTENT.


2.1 Informaes para Sites de Busca
Quando uma pgina cadastrada num site de busca,
dois tipos de informao so armazenados: ttulo da
pgina e sua descrio.

O ttulo da pgina definido pela tag <TITLE> e a
primeira informao que retorna como resultado de
uma busca.

A descrio da pgina, normalmente formada pelos
primeiros 200 caracteres que aparecem no documento
HTML aps a tag <BODY>. possvel porm, indicar
explicitamente esta descrio independentemente da
informao exibida na pgina.

A descrio da pgina pode ser definida atravs da tag
<META> com o atributo NAME recebendo o valor
"description", e o atributo CONTENT recebendo
como valor a descrio da pgina.

A ordem em que uma pgina aparece, como resultado
de uma pesquisa, depende do seu contedo. As
pginas que contm mais ocorrncias das palavras
chaves fornecidas para a busca aparecem em primeiro
lugar.

possvel utilizar a tag <META> para fornecer mais
informao ao mecanismo de busca, definindo o
atributo NAME com o valor "keywords" e o atributo
CONTENT com uma srie de palavras separadas por
vrgulas.

A informao obtida do resto da pgina acrescentada
a informao obtida da tag <META> mas no a
substitui. O exemplo a seguir ilustra a utilizao desta
tag:

<HEAD>
<TITLE>Minha Home Page</TITLE>
<META NAME=description
CONTENT=Esta a descrio da
minha pgina>
<META NAME=keywords
CONTENT=fotografia,
programao, poesia>
</HEAD>


No endereo
http://www.eons.com
/metatags.htm
voc encontrar informa-
es acerca de como vrios
sites de busca obtm
informaes das pginas e
com que freqncia estas
informaes so atualizadas.









Os sites de buscas tm algumas limitaes quanto a
tamanho da descrio e o nmero de palavras-chaves:

Tamanho Normalmente, as informaes de descrio
so limitadas em 200 caracteres e as chaves em 1000
caracteres.

Abuso de chaves O mecanismo de busca ignora toda
a lista de palavras-chaves quando uma delas utilizada
mais de 7 vezes numa tag <META>.

Nas pginas com imagens, o atributo ALT da tag
<IMG> tambm levado em conta pelos mecanismos
de busca. Assim, as pginas cujo contedo principal
um grfico tambm podem ser encontradas.

2.2 Informaes para Documentao
O exemplo a seguir mostra o cabealho de uma pgina
criada no FrontPage. Repare que esse editor inseriu
uma srie de informaes, utilizando as duas primeiras
tags <META> apenas com o intuito de documentar a
pgina (isso incluir o nome do autor da pgina e
programa utilizado para sua gerao). A terceira tag
<META> interpretada pelo prprio FrontPage e
apenas para ele faz sentido. Esta tag indica qual estilo
pr-definido foi utilizado na pgina.

<head>

<title>
Home Page da Ana Lcia
</title>

<meta NAME="Author" CONTENT="Joo">
<meta NAME="GENERATOR"
CONTENT="Microsoft FrontPage 3.0">
<meta NAME="Microsoft Theme"
content="leaves 011, default">

</head>


Cache uma seo de
memria para acesso rpido.
Neste caso se refere a uma
rea destinada ao
armazenamento das pginas
visitadas. Esse
armazenamento feito para
acelerar a operao de
acesso s pginas de uso
freqente.







Quando uma indicao de
hora, minuto e segundo,
aparece seguida das letras
GMT, como: 00:00:01
GMT (do exemplo ao lado),
significa que ela em
relao ao horrio do
Meridiano de Greenwich
(sigla de: Greenwich
Meridian Time).

Os meridianos so linhas
imaginrias que ligam os
plos Norte e Sul.
O meridiano que passa pelo
subrbio londrino de
Greenwich foi escolhido
em 1884 como meridiano
inicial ou de origem (0
o
de
longitude) a partir do qual
se contam os fusos
horrios.
2.3 Informaes especiais para o navegador

Alguns navegadores reconhecem certas informaes
especiais e podem tomar atitudes em funo delas.
possvel por exemplo especificar uma data de validade
da pgina (a data deve ser especificada no formato
mostrado no exemplo abaixo), a partir da qual ela deve
ser retirada do cache e reatualizada (recarregada). O
exemplo a seguir ilustra esta utilizao da tag <META
HTTP-EQUIV>:

<head>
<title>Minha Home Page</title>

<META HTTP-EQUIV="EXPIRES"
CONTENT="Fri, 31 Dec 2002 00:00:01
GMT">

<META HTTP-EQUIV="CHARSET"
CONTENT="ISO-8859-1">

<META HTTP-EQUIV="CONTENT-LANGUAGE"
CONTENT="Portuguese">

</head>


2.4 Troca automtica de documento
De todas as utilidades da tag <META> a troca
automtica de documento, possivelmente a mais
interessante de todas.

possvel indicar ao navegador que, aps alguns
segundos, a pgina que est sendo exibida deve ser
substituda por uma outra pgina.

Esta forma de uso da tag <META> pode ter vrias
aplicaes, como:
a) redirecionamento da pgina e
b) apresentao de slides.

Redirecionamento til quando o endereo de uma
pgina mudou mas se deseja que as pessoas que
utilizam o endereo antigo continuem a ter acesso a
pgina. possvel redirecionar automaticamente os
que acessam o endereo antigo para o novo endereo.

No caso de apresentao de slides, um conjunto de
imagens, sendo uma em cada pgina, pode ser
apresentado sem a interveno do usurio.

Para fazer a troca automtica de documento, devemos
definir na tag <META> o atributo HTTP-EQUIV com
o valor "refresh". O atributo CONTENT deve ser
definido com o seguinte formato:

CONTENT="tempo; URL=pgina"

Onde:
Tempo indica o tempo, em segundos, aps o qual a
nova pgina deve ser carregada.
Pgina indica a URL da nova pgina a ser
carregada.

Nas linhas abaixo, a pgina nova.html carregada
aps 10 segundos:

<META HTTP-EQUIV="refresh"
CONTENT="10; URL=nova.html">


3. Tags dependentes do navegador
Como ilustrao, so descritas nesta seo duas
container tags, implementadas apenas em um
determinado tipo de navegador. So as tags <BLINK>
e <MARQUEE>.

Os navegadores que no as reconhecem vo
simplesmente exibir o texto contido entre as tags
iniciais e finais (isso entre : <..> e </ >), sem realizar
nenhuma ao especial.

3.1 A tag <blink>

A tag <BLINK> ... </BLINK>, que funciona
apenas no navegador Netscape, serve para exibir um
texto piscando na janela. No conveniente utilizar
esta tag para manter a uniformidade de aspecto da
pgina independente do navegador utilizado para
visualizao.


3.2 A tag <marquee>

A tag <MARQUEE> ... </MARQUEE>, funciona
apenas no navegador Internet Explorer. Ela serve
para exibir um texto rolando na janela (por default da
esquerda para a direita), num efeito similar a de um
letreiro luminoso.

Uma srie de atributos nesta tag permite controlar a
direo de rolagem, o nmero de loops, seu
comportamento (se entra por um canto e sai pelo
outro, se fica em vaivm, ou se chega na posio e
pra), a velocidade, o tamanho do letreiro, seu
alinhamento entre outros.

Por exemplo:

<MARQUEE ALIGN=BOTTOM HEIGHT=30
WIDTH=300 BEHAVIOR=SCROLL
DIRECTION=LEFT LOOP=INFINITE
SCROLLAMOUNT=20 SCROLLDELAY=100>

Esse texto rola para a esquerda com
uma velocidade de 50 pixels por
unidade de tempo esperando 100
milisegundos para redesenho do texto

</MARQUEE>


O efeito causado por esta tag pode ser visualmente
interessante, mas no convm utiliz-la por ser
dependente do navegador. Atravs de Javascript
possvel obter o mesmo efeito, com a vantagem da
portabilidade.




Na aula de imagens
fornecemos diversas dicas
de sites !
Exerccios:


1. Construa um desenho, ou capture alguma imagem
na Internet (que seja de domnio pblico
evidentemente!)
Usando algum programa de manipulao de imagens
recorte esta imagem em 6 ou mais partes iguais.
Depois experimente usar cada parte da imagem como
fundo de uma tabela, sem bordas, que ao ser clicada
remeta para algum endereo na WWW.


2. Utilize tabelas, sem bordas, para construir uma
pgina com o mesmo formato desse nosso texto
impresso das aulas, isso tenha duas colunas (de
tamanhos diferentes) e um cabealho. Faa com que
esta pgina tenha um tempo de validade, e
informaes de autoria.



Resumo:
Nesta aula, voc aprendeu como usar as tabelas, como
definir seus elementos, e quais so os seus atributos
gerais (borda, largura, espaamento). Voc viu como
usar os atributos das clulas: alinhamento, dimenses,
unies de linhas e colunas. Nos exerccios, voc usou a
reconstruo de imagens como tabelas. Ainda
aprendeu como usar a tag META para: fornecer
informaes aos de programas de busca na Internet,
redirecionar pginas e outros usos. Finalmente, voc
conheceu duas outras tags que podem ser usadas no
caso da uniformidade de visualizao no ser muito
importante em um site.




Auto-avaliao:

Avalie honestamente com que facilidade voc
entendeu esta aula e fez os exerccios acima. O que
fazer nos pontos de dvida? Isso! volte e leia o ponto
em que sentiu mais dificuldade. Depois disso voc
estar pronto para aprender o interessante recurso dos
frames, que o assunto da nossa prxima aula.