Curso de Web Design: Total de páginas: 29

 

 

Parte:
27

 

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

 

 

 

 


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

 

TAG

O QUE FAZ

<table>

Marca o início e o fim de uma tabela

Atributos

Width define a largura da tabela ou da célula

Height define a altura da tabela ou da célula

Cellpadding define a margem dentro das células

Cellspacing define o espaço entre as células

Bgcolor define a cor de fundo da tabela ou da célula

<tr>

Marca o início e o fim de uma linha

<td>

Marca o início e o fim de uma célula

border=”n”

Coloca uma borda na tabela, onde n é o valor em pixels da borda

align=left

Alinha o conteúdo da célula a esquerda na horizontal

align=right

Alinha o conteúdo da célula a direita na horizontal

align=center

Alinha o conteúdo da célula ao centro na horizontal

valign=top

Alinha o conteúdo da célula no topo (vertical)

valign=bottom

Alinha o conteúdo da célula na base da célula (vertical)

valign=middle

Alinha o conteúdo da célula no centro na vertica

 

 

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.

 

Exercício 9 –  LINKS

 

Como falei no início, estamos produzindo páginas de hipertextos, ou seja, textos que podem fazer ligações com outros textos, ligando páginas entre si e a WEB. Então, este pontos nós chamamos de links ou hyperlinks, âncoras de hipertexto, todos com a mesma função, de através de um único clique sobre a frase ou imagem conduzir a algum lugar no site ou na WEB.

O Tag responsável é o <A>, onde dentro deste, através de um atributo coloco a referência, ou seja, A URL (Uniform Resource Locator).

Para criar um link usamos a seguinte sintaxe:

SINTAXE:  <A HREF=”URL”>Frase que aparece na página</a>

Onde:

<a> tag que marca o início e o fim do link

href= atributo que especifica o nome da referência

“URL”  é o nome do local para onde desejar linkar (ir)

 

Nada de complicação, que tal um exercício para entendermos legal tudo isso?

Vamos nessa!

Como sempre, digite a listagem 1.16, e salve como exemplo15.html

 

.