|
Curso de Webdesign
Material
de Curso de Webdesign Gratuito |
|
CONCEITO DOS TAGS USADOS NO EXERCÍCIO ANTERIOR
| TAG |
O QUE FAZ |
| <img> |
Insere uma imagem
Atributos
src indica o nome da imagem a ser carregado.
align=middle centraliza o base do texto com o centro da imagem
align=left faz a imagem flutuar a esquerda enquanto o texto circunda
imagem à direita.
align=top alinha o texto no topo
align=right faz a imagem flutuar a direita enquanto o texto circunda
imagem à esquerda.
alt=”n” indica o texto para ser exibido quando o navegador não exibe a
imagem. Sendo que n é o título que identifique a imagem.
Exemplo: <img src=fig.jp alt=”Esta é uma imagem legal”> |
Exercício 8 – TABELAS
Nesta etapa conheceremos os tags responsáveis pela construção de tabelas. Na parte II
deste estudo através do Front Page Express, utilizaremos a tabela como recurso para a
definição dos layouts de nossas páginas. Por hora, vamos aos principais tags. Tudo
Bem?
Como sempre, digite a listagem 1.13, e salve como exemplo12.html
Listagem 1.13
<html>
<head><title>Montando Tabelas</title>
</head>
<body>
<table border=2> <! Aqui começa a Tabela>
<tr><! Aqui Começa uma linha>
<td>Célula1</td>
<td>Célula2</td>
<td>Célula3</td>
</tr><! Aqui termina uma linha>
<tr><! Aqui Começa outra linha>
<td>Frase 1</td>
<td>Frase 2</td>
<td>Frase 3</td>
</tr><! Fim da outra linha>
</table><! Fim da Tabela>
</body>
</html>
Listagem 1.13
Para ver o resultado deste exemplo abra o Internet Explorer, e na barra de endereço
digite C:\Meus documentos\exemplo12.html. Veja figura 1.14
|
|
Você pode também controlar as dimensões de sua tabela. Vamos para mais uma
listagem?
Como sempre, digite a listagem 1.14, e salve como exemplo13.html
Listagem 1.14
<html>
<head><title>Montando Tabelas</title>
</head>
<body>
<table border=1 width=400 height=50
cellpadding=5 cellspacing=5>
<tr>
<td>Item 1</td>
<td>Item 2</td>
<td>Item 3</td>
</tr>
<tr>
<td>Item 4</td>
<td>Item 5</td>
<td>Item 6</td>
</tr>
</table>
</body>
</html>
Fim da Listagem 1.14
Para ver o resultado deste exemplo abra o Internet Explorer, e na barra de endereço
digite C:\Meus documentos\exemplo13.html. Veja figura 1.15
Alinhamentos
Os elementos dentro da tabela também podem ser alinhados da mesma que um
parágrafo. Veja mais um exemplo através da listagem 1.15
Listagem 1.15
<html>
<head><title>Montando Tabelas</title>
</head>
<body>
<table border=1 width=400 height=120
cellpadding=5 cellspacing=5>
<tr>
<td align=center>No Centro</td>
<td align=right>Para Direita</td>
<td align=left>Para a Esquerda</td>
</tr>
<tr>
<td valign=bottom>Em baixo</td>
<td valign=top>No Topo</td>
<td valign=middle>Centro na Vertical</td>
</tr>
</table>
</body>
</html>
Fim da Listagem 1.15
Para ver o resultado deste exemplo abra o Internet Explorer, e na barra de endereço
digite C:\Meus documentos\exemplo14.html. Veja figura 1.16
Cor de Fundo
Você pode ainda adicionar cores no fundo da tabela ou apenas de uma célula que deseja.
Lembra do atributo bgcolor, então é com este mesmo que você pode adicionar um cor
padrão para tabela ou para a célula.
Veja o exemplo:
<table bgcolor=blue>
O resultado seria assim: Toda Tabela teria um preenchimento azul
Veja mais este exemplo:
<table>
<tr>
<td bgcolor=beige>Bege</td>
<td bgcolor=red> Vermelho<td>
O resultado seria assim: As células teriam cores diferentes
CONCEITO DOS TAGS USADOS NESTE EXERCÍCIO
Observação: O atributo de alinhamento ALIGN, faz o alinhamento na horizontal.
O atributo de alinhamento VALIGN, faz o alinhamento na vertical.
E assim meu caro leitor, concluímos mais uma etapa de nosso curso. Espero que te guia
esteja sendo realmente um farol em seu aprendizado.
|
