Tutorial de HTML
Lição 3 - Imagens e tabelas
Prosseguimos agora com a lição 3 do curso, onde vamos abordar imagens e tabelas. Vamos abordar inicialmente o uso de imagens, porque não vamos nos aprofundar muito nelas por agora, mas posteriormente iremos abordá-las de novo. O que nos interessa agora é como aplicar imagens em uma página HTML. Já vimos no fim da lição 2 que o "papel de parede" da janela é colocado com a opção BACKGROUND da tag BODY, como em <BODY BACKGROUND="fundo.jpg">. Colocar imagens na página também é fácil, isso é feito através da tag <IMG>:
<IMG SRC="imagem.gif">
A tag IMG é uma das mais complexas, tendo mais de 20 argumentos possíveis. Vamos ver agora alguns dos mais usados:
SRC - é a principal opção, como você já percebeu, é com ela que o arquivo de imagem é indicado.
ALIGN - para alinhar um parágrafo de texto à imagem, use esta opção. Argumentos válidos para esta opção são LEFT, RIGHT, TOP, BOTTOM, MIDDLE... No arquivo de exemplo esta opção ficará mais clara.
WIDTH e HEIGHT - essas opções definem largura e altura da imagem, em pixels ou porcentagem da janela. Se você não especificar estas opções, o tamanho original da imagem. O objetivo primário destas opções é alargar ou encolher uma imagem, alterando seu aspecto original.
ALT - o nome alternativo da imagem, que irá aparecer como "dica" (o quadrinho que aparece quando mantemos o mouse parado algum tempo sobre uma figura; muito usado em barras de botões). Também usado para exibir uma descrição da imagem em browsers que não suportam exibição de gráficos.
Para tornar uma imagem "clicável", isto é, fazer com que ela aponte para um link, simplesmente coloque a tag IMG dentro de tags do tipo A que indicam um link, deste modo:
<A HREF="mailto:loderunner@apple2.com"><IMG SRC="email.gif" ALT="Mande-me um e-mail!"></A>
Um detalhe: quando a imagem é um link, o navegador inclui automaticamente uma borda azul em torno da figura, do mesmo modo que inclui um sublinhado nos links de texto. Para evitar este efeito indesejável, use a opção BORDER, especificando o valor 0, assim:
<A HREF="mailto:luisao.webmaster@gmail.com"><IMG SRC="email.gif" ALT="Mande-me um e-mail!" BORDER=0></A>
Agora sua página já tem imagens e palavras, mas confiar apenas na opção ALIGN para diagramar tudo isso não é suficiente. Aí entram as tabelas. Uma página sem tabelas parece um documento editado no Microsoft Word. Uma página com tabelas parece um documento editado no Adobe Pagemaker. A mágica está em usar tabelas "invisíveis", isto é, sem borda. Deste modo, o texto, imagens, ou qualquer coisa que for colocado nas "células" destas tabelas aparecerá diagramado como em colunas. O uso mais simples disso é definir uma tabela de duas células lado a lado, uma menor e outra maior, onde na primeira haverão as opções de navegação, e na segunda, o texto na página.
Para definir uma tabela, use a tag TABLE. Para definir linhas, use TR. Para definir células dentro destas colunas, use TD. Uma tabela é construída deste modo:
Matriz 3x3:<BR>
<TABLE BORDER=1>
<TR><TD>linha 1, coluna 1</TD><TD>linha 1, coluna 2</TD><TD>linha 1, coluna 3</TD></TR>
<TR><TD>linha 2, coluna 1</TD><TD>linha 2, coluna 2</TD><TD>linha 2, coluna 3</TD></TR>
<TR><TD>linha 3, coluna 1</TD><TD>linha 3, coluna 2</TD><TD>linha 3, coluna 3</TD></TR>
</TABLE>
Todas as células de uma mesma linha ficam dentro das tags <TR> e </TR>. As células propriamente ditas são o conteúdo das tags <TD> e </TD>.
As tabelas invisíveis são tão usadas que elas são a opção padrão. Para definir uma borda visível, a opção BORDER deve ser atribuída com um valor maior de 0, como no exemplo acima. Há várias outras opções, como BACKGROUND (papel de parede), BGCOLOR (cor de fundo), CELLSPACING (espaçamento entre células), CELLPADDING (espaçamento dentro das células), BORDERCOLOR (cor da borda), BORDERCOLORDARK (cor da borda escura), BORDERCOLORLIGHT (cor da borda clara) e FRAME. As combinações destas opções pode gerar os mais variados resultados: faça experimentações com elas. Note que como padrão as tabelas ganham um efeito 3D, para desativar este efeito use as opções, defina uma única cor para as opções de BORDERCOLOR.
Tabelas podem, e muitas vezes são, aninhadas. Isso quer dizer que é possível colocar novas tabelas dentro de células, definindo tags <TABLE> e </TABLE> dentro de <TD> e </TD>.
A teoria por trás das tabelas é bem simples, não há mais o que dizer além disso, mas o seu uso prático é muito abrangente. Veja no exemplo desta lição as possibilidades de programação visual que o uso de imagens e tabelas permite.
Arquivo HTML: exemplo3.htm
Na última lição, eu deixei uma "charada" de HTML. A resposta está aqui: nivel.htm.
Agora você já deve ter pego o espírito da coisa e provavelmente já sente alguma segurança para começar. Mas assim que o trabalho inicia "pra valer" e você começa a querer fazer algo mais elaborado, pequenos detalhes sobre as tags tornam-se evidentes, outros nem tanto. Algumas dessas particularidades serão vistas na próxima lição. Até lá!
