Ir para conteúdo

Tudo Sobre Html. Parte 2.


Raphael Lion

Posts Recomendados

Continuação...

 

Imagens

 

 

 

Incluir uma imagem na sua página é bem simples. Só se exige apenas que você tenha disponível a imagem que será exibida , e que ela esteja em um dos formatos aceitos pelo browser. O formato mais usado e aceito pela WEB é o formato GIF . Esse formato , é uma abreviação de Graphics Interchange Format e pode ser usado em diferentes plataformas de hardware , tais como o PC e o Machintosh . Se comparado com o formato padrão do Windows ( BMP – Bitmaps , também aceito pelos browsers ) , ele gera arquivos de tamanho bem menor.

 

Outro formato bastante usado na WEB ó o JPEG ( Joint Photographic Engineering Group ). Ele consegue reduzir o tamanho de uma imagem em até dez vezes.

 

 

 

Mas atenção : não encha sua página de imagens , pois , lembre- se de que , ao usar a rede para transmitir suas páginas e suas imagens , a velocidade de transmissão é muito reduzida , girando em torno de 1 KB por segundo ou , dependendo do tráfego , ela cai ainda mais. Portanto , uma imagem de 100 KB pode levar vários minutos para ser exibida , frustrando a platéia. Tente usar imagens pequenas , com a resolução de 78 pixels por polegada , que é a resolução usada no padrão VGA e SVGA da maioria dos usuários. No caso de fotos , tente usar 256 cores se a qualidade não ficar muito comprometida .

 

 

 

* Tag

<IMG SRC>

 

 

 

O TAG HTML usado para inserir uma imagem na posição atual onde ele é especificado é o IMG SRC. Sua sintaxe ;

 

 

 

<IMG SRC = "Nome da imagem.GIF"> ou <IMG SRC= "Nome da imagem . JPG">

 

 

 

Se não for especificado uma URL , o browser procura a imagem no diretório atual. Caso a imagem esteja em um diretório diferente ao do documento, é necessário indicar o diretório

 

Onde ela se encontra , através de "../nome_ do _ diretório". Por exemplo:

 

 

 

Se minha figura chamada "carta.gif" estiver em um diretório(pasta) chamado "figuras", devemos

 

proceder com:

 

 

 

<IMG SRC="../figuras/carta.gif">

 

 

 

Indicando assim que a figura está na Raiz ("../") no diretório figuras ("../figuras/").Pode-se também, mas não é aconselhável , utilizar o padrão DOS , por exemplo :

 

 

<IMG SRC = "C:\figuras\carta.gif">

 

 

 

Porém , prefira que as imagens estejam no mesmo diretório que seu arquivo .HTM ou HTML.

 

Observe a codificação abaixo :

 

 

 

<HTML>

 

<HEAD>

 

<TITLE> Teste com a tag img</TITLE>

 

</HEAD>

 

<BODY>

 

<H1><CENTER>Imagem</H1>

 

<IMG SRC ="imagem.GIF">

 

</CENTER>

 

</BODY>

 

</HTML>

 

 

Podendo alinhar a imagem para um determinado ponto da tela, como por exemplo deixando o texto pelo fundo da imagem. Veja os exemplos:

 

<IMG SRC = "imagem.GIF" ALIGN="TOP"> Alinha a imagem por cima do texto ;

 

<IMG SRC = "imagem.GIF" ALIGN="MIDDLE"> Alinha a imagem pelo meio do texto ;

 

<IMG SRC = "imagem.GIF" ALIGN="BOTTOM"> Alinha a imagem pelo fundo do texto;

 

<IMG SRC = "imagem.GIF" ALIGN="LEFT"> Alinha a imagem à esquerda da página ;

 

<IMG SRC = "imagem.GIF" ALIGN="RIGHT">Alinha a imagem à direita da página.

 

 

 

Além do complemento ALIGN , também podemos usar o complemento ALT , que cria uma espécie de HINT, isto é , um pequeno texto explicativo que aparece abaixo da seta do mouse quando este pára por sobre a figura. Exemplo:

 

 

 

<IMG SRC = "imagem.GIF " ALIGN = "LEFT " ALT= "imagem">

 

 

 

 

 

* Tag BODY parâmetro BACKGROUND

 

 

Além de colocar imagens como elementos de nossa página , podemos colocá-las também como papel de parede no fundo de nossas páginas. Isto é , em vez de usarmos cores , ou deixarmos aquele "cinza "ou "branco" do fundo , podemos colocar uma imagem qualquer. É claro que teremos o bom senso de não colocar imagens como a do Beavis , pois ficaria muito difícil visualizar o fundo da tela com esse tipo de imagem. Vamos usar umas imagens chamadas normalmente de texturas , que , vista isoladamente parece apenas uma quadrado com um desenho qualquer sem significado , mas , quando postas uma ao lado da outra , criam um efeito papel de parede , como azulejos. Sua sintaxe é :

 

 

 

<BODY BACKGROUND = "IMAGEM.GIF"> ou <BODY BACKGROUND ="IMAGEM.JPG">

 

 

 

Esse TAG pode ser incluído dentro do tag BODY , pois seu fechamento será no próprio tag </BODY> . Você também pode usar o BODY BGCOLOR e o BODY BACKGROUND juntos mas , é claro que o papel de parede irá cobrir o fundo colorido , fazendo este aparecer só de vez em quando.

 

Com a linha <BODY BACKGROUND = "PISO.GIF"> , consegui esse resultado , sendo que PISO. GIF é uma textura e , sozinha , a imagem aparece assim :

 

image13yf5.gif

 

Repare que , se a sua página tiver uma grande quantidade de elementos como textos e imagens e você deverá se mover pela tela através das barras de rolagem , o fundo da sua página acompanhará o movimento da tela , como se estivesse "andando". Isso torna sua página mais lenta para quem está vendo. Para poupar você deste sofrimento existe um complemento para esse tag , chamado BGPROPERTIES. Se você declarar essa propriedade como fixa ( FIXED ) o fundo da sua página ficará estático e apenas o conteúdo da sua página irá se mover. A sintaxe é :

 

 

 

<BODY BACKGROUND = "PISO.GIF " BGPROPERTIES= "FIXED ">

 

 

 

Tente não colocar fundos muito carregados , de tamanho muito grande , pois , quanto maior for o fundo , mais tempo sua página irá demorar para ser carregada .

 

 

Links

 

 

 

A principal atração da Internet é a criação de documentos com o conceito de hipertexto , ou seja , um documento que se vincula a outros documentos por meio de ligações especiais chamadas links ou hiperlinks.Com esse conceito , você pode criar documentos que façam referências e permitam ao usuário acessar tais referências não importando se elas estão em outra página Web , no seu micro ou em algum servidor de rede.

 

O uso de hipertexto também facilita a criação de documentos extensos cujas seções ou tópicos podem ser rapidamente acessados por meio dos links. Imagine que você crie uma página sobre determinado assunto em vários tópicos abordados. Assim como em um livro você cria todo o texto do documento e depois cria , no início , um sumário indicando os tópicos do documento. Se quiser acessar diretamente o texto de um tópico , basta dar um clique sobre o item do tópico no sumário e ele será imediatamente exibido.

 

Um link é reconhecido em uma página por estar em cor normalmente diferente do resto do texto e , ao passar com o mouse sobre esse texto o cursor muda para uma mão apontando para o link.

 

 

 

Âncoras

 

 

 

Uma âncora é um ponto de referência ou endereço que será acessado por um link. Uma âncora é usada dentro do documento para marcar o início de uma seção do documento.

 

Suponha que seu texto seja muito grande , o que tornaria trabalhoso para quem estiver vendo a página conseguir se movimentar entre um tópico e outro. Então faça o seguinte : Nomeie um pedaço da sua página através do tag :

 

 

 

<A NAME="NOME "> Texto </A> ( Lembre –se que "NOME" é fictício, você escolhe o nome…)

 

 

 

Depois disso escreva o pedaço que você quer associar a esse Nome. Agora crie um link para chegar até esse pedaço , usando o tag :

 

 

 

<A HREF="#NOME">Clique Aqui</A>

 

Pronto! Ao clicar na mensagem "Clique Aqui" de sua página , o usuário irá até o pedaço que você nomeou.

 

ATENÇÃO : O sinal de cerquilha (#) é necessário para a âncora, pois avisa ao browser para procurar o link no documento atual !!!

 

 

 

* Linkando Arquivos Locais

 

 

 

Fazer a ligação de um texto com outra página , ou figura , ou até mesmo outros arquivos que estejam na mesma pasta que seu documento atual está é uma tarefa bastante simples. Você precisa apenas especificar o nome completo do arquivo que será chamado através do TAG A HREF . Exemplo :

 

 

<A HREF = "página.HTM "> Clique aqui para ir à próxima página </A>

 

 

 

Você ainda pode criar uma âncora em outro documento e chamá-lo em um link do documento atual. É só nomear a âncora na página que você quer e colocar no link o nome da página seguido pela âncora . Exemplo :

 

 

 

<A HREF="página1.HTM#index"> Vai para o INDEX </A>

 

 

 

 

 

* Linkando Arquivos de Outros Diretórios

 

 

 

Você pode especificar o endereço de outros diretórios ( pastas ) usando um esquema de caminhos parecidos com o do DOS . Existe uma grande diferença entre esses caminhos . Na Web você deve inverter a barra de espaços , usando a barra "/ " no lugar da barra "\" para separar diretórios.

 

Além disso o browser usa como referencial o diretório atual para iniciar a busca de páginas. Para especificar um arquivo que esteja no diretório STRAUSS , que fica abaixo do diretório BACH , os quais se encontram ambos no diretório raiz , você deve usar os sinais ..\ para subir um nível, acessando assim a raiz e depois o caminho do diretório BACH .Exemplo :

 

 

 

<A HREF = "../BACH / STRAUSS / INDEX.HTM">

 

 

 

Se o diretório a ser acessado está abaixo do diretório atual , basta especificar o nome do subdiretório sem nenhum símbolo . Por exemplo :

 

 

<A HREF = "MOZAT / INDEX.HTM">

 

Em alguns browser , você pode escrever o caminho como no DOS , exemplo :

 

 

 

<A HREF = "C:\BACH \ STRAUSS \ INDEX. HTM ">

 

Porém , tente evitar esta técnica em alguns browsers isso não funciona…

 

 

 

* Linkando Arquivos de Outros Servidores

 

 

 

Agora a coisa fica um pouco mais séria . É aqui que está toda graça de Internet . Através de um esquema de endereçamento , a URL , a Internet consegue acessar um arquivo que está em qualquer micro deste planeta desde que esteja conectado adequadamente a Web.

 

Como já vimos , a URL serve para especificar a localização de páginas e arquivos em diretórios de servidores da Web . Vamos comparar com um esquema que você usa ( as vezes até sem saber ) para acessar algum arquivo em seu próprio computador .

 

 

 

Acessando um arquivo pelo DOS :

 

 

 

C: \WINDOWS \SYSTEM \ Lista.TXT

 

 

 

Acessando uma página pela Web :

 

 

 

HTTP : // WWW. STRAUSS. COM / LISTA . HTM

 

 

 

Uma URL é composta por duas partes principais . A primeira é o protocolo Internet do documento , a segunda parte é o endereço do servidor e da página. A sintaxe disso é :

 

 

 

PROTOCOLO: //SERVIDOR . INSTITUIÇÃO / ARQUIVO

 

 

 

Onde :

 

 

 

Protocolo é o tipo de servidor que está sendo acessado;

 

Servidor é o computador que contém a página ;

 

Instituição é o tipo de instituição a qual esse computador pertence ( Comercial , Internet Publica , Militar etc. ) ;

 

Arquivo é o caminho do arquivo.

 

 

 

Exemplo :

 

 

 

HTTP : // WWW. MACLINUX.NET / INDEX . HTM

 

 

 

Esse endereço pode ser especificado diretamente na linha de URL do Browser , para acessar diretamente a página INDEX. HTM , ou então dentro de um link de um documento HTML , através do A HREF que cria uma ligação , um link para o URL .

 

 

<A HREF = "HTTP : // WWW. MACLINUX.NET / INDEX . HTM "> MacLinux.net </A>

 

 

 

Montagem de listas em HTML

 

 

Listas já foram muito importantes na confecção de páginas HTML, mas hoje poucos sites usam este recurso.

 

A idéia é a de criar uma seqüência de informações de forma ordenada (numeradas uma a uma) ou desordenada (sem numeração).

 

Exemplos :

 

 

 

Lista ordenada:

 

1. Não diga o que fazer, mas sim como fazer

2. Faça tudo com boa vontade

3. Quando quiser ouvir respostas agradáveis, comece você dizendo coisas agradáveis

 

 

 

Lista desordenada:

 

· Acredite em você

 

· Pare de reclamar

 

· Aja e faça corretamente

Continuação. \/

Editado por Raphael Lion
Link para o comentário
Compartilhar em outros sites

Os comandos HTML para criar estas listas são muitos simples, veja o exemplo abaixo:

 

 

 

<HTML>

 

<HEAD>

 

<TITLE>Criando listas</TITLE>

 

</HEAD>

 

<BODY>

 

<CENTER><FONT COLOR=RED SIZE=6>EXEMPLO DE UMA LISTA ORDENADA</FONT></CENTER>

 

<BR>

 

<OL> <!Este comando inicia a lista>

 

<LI> Não diga o que fazer, mas sim como fazer <! Aqui você começa a inserir os itens da lista, cada item deve ser iniciado por um LI>

 

<LI> Faça tudo com boa vontade

 

<LI> Quando quiser ouvir respostas agradáveis, comece você dizendo coisas agradáveis

 

</OL> <! Este comando encerra a lista criada>

 

</BODY>

 

</HTML>

 

 

Se salvarmos este exemplo como LISTA.HTM, podemos visualizá-lo no navegador.

 

 

 

Repare que neste exemplo não inserirmos no código da página os números dos itens, pois o comando <OL> (Ordened List) insere automaticamente os números da lista , esta é a característica da lista ordenada.

 

Para se montar uma lista desordenada o procedimento é o mesmo porém o comando HTML que inicia uma lista desordenada é <UL> (Unordered List).

 

image14lo7.gif

 

<HTML>

 

<HEAD>

 

<TITLE>Criando listas</TITLE>

 

</HEAD>

 

<BODY>

 

<CENTER><FONT COLOR=RED SIZE=6>EXEMPLO DE UMA LISTA DESORDENADA</FONT></CENTER>

 

<BR>

 

<UL> <!Este comando inicia a lista>

 

<LI> Acredite em você <! Aqui você começa a inserir os itens da lista, cada item deve ser iniciado por um LI>

 

<LI> Pare de reclamar

 

<LI> Aja e faça corretamente

 

</UL> <! Este comando encerra a lista criada>

 

</BODY>

 

</HTML>

 

image15if7.gif

 

Um outro tipo de lista além da ordenada e da desordenada é a de tipo glossário. Uma lista do tipo glossário tem esta aparência:

HTML

 

Hyper Text Markup Language, linguagem usada na Internet

 

para a confecção de Home-Pages.

 

SGML

 

Standard Generalized Markup Language, é a partir desta linguagem que se derivou o HTML.

 

É uma linguagem mais rica em comandos e uma pouco mais complexa.

 

VRML

 

Virtual Reality Modeling Language, é a mais avança das linguagens de formatação (Markup)

 

e serve para se criar modelos de realidade virtual para a Internet.

 

 

 

Os códigos HTML para se criar esta lista ficam assim:

 

 

 

<HTML>

 

<HEAD>

 

<TITLE>Criando listas</TITLE>

 

</HEAD>

 

<BODY>

 

<CENTER><FONT COLOR=RED SIZE=6>EXEMPLO DE UMA LISTA TIPO GLOSSÁRIO</FONT></CENTER>

 

<BR>

 

<DL> <! Este comando inicia a lista de glossário>

 

<DT> HTML <!Este comando serve para definir qual a palavra que será usada como destaque da lista>

 

<DD> Hyper Text Markup Language, linguagem usada na Internet

 

para a confecção de Home-Pages. <! O comando DD serve para acrescentar a frase que se refere a palavra que definimos em DT>

 

<DT>SGML

 

<DD> Standard Generalized Markup Language, é a partir desta linguagem que se derivou o HTML

 

É uma linguagem mais rica em comandos e uma pouco mais complexa.

 

<DT>VRML

 

<DD> Virtual Reality Modeling Language, é a mais avança das linguagens de formatação (Markup)

 

e serve para se criar modelos de realidade virtual para a Internet

 

</DL> <! Este comando encerra a lista de glossário>

 

</BODY>

 

</HTML>

 

image16mv5.gif

 

Todos os comandos de formatação de texto que você já viu podem ser aninhados (colocados juntos) nas listas, ou seja, você pode mudar a cor da fonte, tamanho etc.

 

 

 

Tabelas em HTML

 

 

 

As tabelas são muito importantes para o designer de uma home-page. Com elas pode-se fazer alinhamentos que dificilmente seriam possíveis com simples comandos.

 

A funcionalidade de uma tabela faz com que um determinado site tenha um aspecto mais profissional e o usuário possa navegar de forma mais eficiente, pois os objetos podem estar melhor posicionados na home-page.

 

Vamos discutir, nesta parte, quais são os comandos para se criar uma tabela e mostrar alguns exemplos. Claro que você deverá praticar e principalmente planejar a sua tabela, pois sem isso, fica muito difícil de controlar o código HTML da sua home-page.

 

O comando para se inserir uma tabela é <TABLE>; para iniciar uma linha devemos introduzir a tag <TR> e para uma célula (alguns preferem dizer coluna) <TD>. Todos estes comandos são encerrados como </TABLE> , </TR> e </TD> respectivamente.

 

Vejamos um exemplo. Vamos supor que queiramos montar uma tabela 3X2, ou seja de 3 colunas por 2 linhas, o código HTML para isso é :

 

 

 

<HTML>

 

<HEAD>

 

<TITLE>Criando Tabelas</TITLE>

 

</HEAD>

 

<BODY>

 

<CENTER><FONT COLOR=BLUE SIZE=6>TABELA</FONT></CENTER>

 

<BR>

 

<TABLE BORDER=1> <! Inicia a tabela e coloca uma borda de espessura igual a 1>

 

<TR> <! Cria a primeira linha da tabela>

 

<TD>PRIMEIRA COLUNA </TD> <! Aqui foi criada uma célula>

 

<TD>SEGUNDA COLUNA </TD>

 

<TD>TERCEIRA COLUNA </TD>

 

</TR> <! Fecha a primeira linha da tabela>

 

<TR> <! Abre a segunda linha da tabela>

 

<TD> PRIMEIRA COLUNA</TD>

 

<TD>SEGUNDA COLUNA </TD>

 

<TD>TERCEIRA COLUNA </TD>

 

<TR> <! Encerra a Segunda linha da tabela>

 

</TABLE> <! Encerra a tabela>

 

</BODY>

 

</HTML>

 

 

Salve este exemplo como TABELA.HTM e abra o arquivo num Browser para ver como ficou.

 

Com isto você já consegue Ter uma idéia de como montar suas tabela. O segredo para se conseguir fazer estas tabelas de forma eficiente é planejar e ter a idéia exata do conteúdo desta tabela.

 

Nas células da tabela você pode inserir desde simples frases até figuras inteiras.

 

Parâmetros podem ser acrescidos às tabelas, tais como : aumentar ou diminuir a largura de uma célula; distanciar as células uma das outras; inserir cor de fundo dentro da célula etc.

 

Vamos procurar trabalhar com vários exemplos para visualizarmos melhor o uso destes parâmetros.

 

 

 

* Alterando a largura da célula

 

Para alterar o largura de uma célula da tabela basta acrescentar o parâmetro WIDTH dentro da tag <TD>. Exemplo1:

 

 

 

<TABLE BORDER=2>

 

<TR>

 

<TD WIDTH=100> WIDTH=100</TD>

 

<TD ALIGN=MIDDLE WIDTH=200>WIDTH=200 (PIXELS)</TD>

 

</TR>

 

</TABLE>

 

image17pi1.gif

 

O parâmetro WIDTH pode receber dois tipos de valores, em pixels como no exemplo acima ou em porcentagem, como mostrado no exemplo a seguir. Também dentro da tag <TD> vemos um outro parâmetro que é VALIGN=MIDDLE, este parâmetro tem por função alinhar o conteúdo da célula no meio da mesma, ou seja, dentro da célula as frases são alinhadas com relação ao seu centro.

 

Exemplo2:

 

<TABLE BORDER=2>

 

<TR>

 

<TD WIDTH=25%> WIDTH=25%</TD>

 

<TD ALIGN=MIDDLE WIDTH=75%>WIDTH=75%</TD>

 

</TR>

 

 

* Inserindo cor de fundo e separação de células

 

 

 

Outro atributo que podemos ter nas tabelas é mudar a sua cor de fundo, isto se torna particularmente útil quando se quer dar destaque a uma célula em especial.

 

Vejamos um exemplo:

 

 

 

<TABLE BORDER=0>

 

<TR>

 

<TD WIDTH=150 BGCOLOR=RED>VERMELHO </TD>

 

<TD WIDTH=150 BGCOLOR=BLUE>AZUL </TD>

 

<TD WIDTH=150 BGCOLOR=RED>VEMELHO</TD>

 

</TR>

 

<TR>

 

<TD WIDTH=150 BGCOLOR=BLUE>AZUL</TD>

 

<TD WIDTH=150 BGCOLOR=RED>VEMELHO</TD>

 

<TD WIDTH=150 BGCOLOR=BLUE> AZUL</TD>

 

</TR>

 

</TABLE>

 

image18qx2.gif

 

Aqui, vimos que podemos acrescentar cores ao fundo de uma célula, outra coisa que também pode ser feita é mudar a fonte com os comandos de formatação que você já conhece, como <FONT COLOR=cyan>, por exemplo.

 

Repare que no exemplo anterior nós colocamos BORDER=0 e as células apareceram coloridas, mas com um certo espaçamento entre elas, para tirarmos este espaço devemos acrescentar dentro da tag <TABLE> o parâmetro CELLSPACING=0. Este parâmetro elimina por completo os espaços entre as células.

 

 

 

<TABLE BORDER=0 CELLSPACING=0>

 

<TR>

 

<TD WIDTH=150 BGCOLOR=RED>VERMELHO </TD>

 

<TD WIDTH=150 BGCOLOR=BLUE>AZUL </TD>

 

<TD WIDTH=150 BGCOLOR=RED>VEMELHO</TD>

 

</TR>

 

<TR>

 

<TD WIDTH=150 BGCOLOR=BLUE>AZUL</TD>

 

<TD WIDTH=150 BGCOLOR=RED>VEMELHO</TD>

 

<TD WIDTH=150 BGCOLOR=BLUE> AZUL</TD>

 

</TR>

 

</TABLE>

 

image19xb8.gif

Continuação. \/

Link para o comentário
Compartilhar em outros sites

Outro parâmetro que pode ser usado para separar espaços em uma célula é CELLPADDING que inclui ou exclui espaços dentro da célula, ou seja, se você tiver um elemento (frase, texto, figura etc.) dentro da célula você pode acrescentar espaços por igual nos quatros cantos da célula, fazendo com que seu texto ou figura não fique "grudado" nas paredes da célula. Aproveite os exemplos anteriores e experimente usar este atributo para ver como ele funciona.

 

Isto já dá uma idéia do funcionamento geral das tabelas na WEB. Muitos dos alinhamentos que encontramos na Internet são feito por intermédio de tabelas.

 

Você também pode usar todos os outros recursos já vistos de HTML para otimizar o uso de tabelas.

 

 

 

 

 

* Um pouco mais de Tabelas

 

 

 

Agora que você já está um pouco mais familiarizado com o uso de tabelas e com seus principais atributos, vamos ver como podemos aperfeiçoar o uso de tabelas.

 

Em seguida descreveremos uma série de outros atributos e comandos para tabelas:

 

 

 

<TH> ... </TH>

 

Esta tag insere um cabeçalho dentro da célula. Na verdade a única diferença entre a tag <TH> e a tag <TD> é que a <TH> exibe o conteúdo da célula em negrito.

 

<CAPTION> ... </CAPTION>

 

Exibe um texto centralizado em relação à tabela, como se fosse uma legenda.

 

 

 

Exemplo:

 

 

 

<TABLE BORDER=1 CELLSPACING=2 CELLPADDING=6> <! Esta linha inicia a tabela com borda de espessura 1 (border), espaço entre as células 2 (Cellspacing) e espaço dentro da célula 6 (Cellpadding)>

 

<CAPTION>LEGENDA</CAPTION> <! Introduz uma legenda na tabela>

 

<TR>

 

<TH>Conteúdo em negrito</TH> <! Insere o texto na forma de cabeçalho (negrito)>

 

</TR>

 

<TR>

 

<TH>Conteúdo em negrito</TH>

 

</TR>

 

</TABLE>

 

image20my5.gif

 

Repare neste exemplo, que a legenda já sai centralizada com relação a tabela e repare no espaço dentro da célula devido ao comando CELLPADDING.

 

 

* Os atributos COLSPAN e ROWSPAN

 

 

 

Estes atributos são muito importantes dentro da tag <TABLE>. São eles que nos possibilitam remodelar a disposição das células dentro da tabela. Vejamos um exemplo prático:

 

 

 

<TABLE BORDER=2 CELLPADDING=2>

 

<TR>

 

<TD COLSPAN=2>Exemplo do uso do COLSPAN</TD>

 

<TR>

 

<TD>CÉLULA 1</TD> <TD>CÉLULA 2</TD>

 

</TR>

 

</TABLE>

 

 

Neste exemplo vemos que na tag <TD> foi introduzido o parâmetro COLSPAN. Este parâmetro tem a finalidade de dizer que sob a célula onde ele foi introduzido podemos ter um certo número de colunas. Logo, se você quiser que uma célula ocupe uma única linha, como no nosso exemplo, você deve inserir o parâmetro dentro da tag <TD> desta célula. A quantidade de células que virão em baixo da célula que recebeu o atributo COLSPAN deve ser de acordo com o número especificado no parâmetro.

 

Mas se quisermos definir uma única célula ocupando uma coluna inteira ? Neste caso usamos o atributo ROWSPAN. Exemplo:

 

 

 

<TABLE BORDER=2 CELLPADDING=2>

 

<TR>

 

<TD ROWSPAN=2>Exemplo do uso do ROWSPAN</TD>

 

<TD>CÉLULA 1</TD></TR><TR> <TD>CÉLULA 2</TD>

 

</TR>

 

</TABLE>

 

image22ek8.gif

 

Para melhor utilizar estes parâmetros e ver como eles funcionam você deve fazer a sua própria tabela, pois somente desta forma você conseguirá fixar o uso destes parâmetros.

 

 

* Usando tabelas como molduras

 

 

Um outro uso bastante interessante de tabelas é como moldura para alguma figura. Para isto basta você iniciar uma tabela e definir um valor para BORDER.

 

Exemplo:

 

 

 

<TABLE BORDER=5>

 

<TR>

 

<TD> <IMG SRC=NOME DA FIGURA> </TD>

 

</TR>

 

</TABLE>

 

image23fh0.gif

 

Claro que você deve usar com muito bom senso este artifício da tag <TABLE>, pois nem sempre uma moldura em uma figura defini um bom layout (aparência) da sua home-page.

 

 

 

* Colocando uma imagem de fundo nas tabelas

 

 

Um recurso parecido com a cor de fundo , colocar uma imagem como fundo de uma tabela é uma técnica muito usada. Através do complemento BACKGROUND dentro da tag TABLE , basta indicar qual o endereço e o nome da figura.

 

 

 

<TABLE BACKGROUND="POOL.GIF" BORDER=5>

 

<TR>

 

<TD><H1>Que tal um mergulho agora ? </H1></TD>

 

</TR>

 

</TABLE>

 

image24qp8.gif

 

O atributo RULES

 

 

Para escolher as linhas internas que serão mostradas dentro da tabela , usamos o atributo RULES , dentro da tag <TABLE> . Os complementos desse atributo são :

 

 

 

* none : nenhuma linha interna ;

* rows : para as linhas horizontais entre cada linha da tabela ;

* cols : para as linhas verticais entre cada coluna da tabela ;

* groups : para linhas entre grupos de colunas e seções horizontais , definidas por tags especiais como COLGROUP e THEAD ;

* all : para mostrar todas as linhas entre cada coluna e linha na tabela ( default ) .

 

 

 

Veja uma tabela com todas as linhas internas ( default ) :

 

 

<TABLE BORDER RULES=all>

 

image25im6.gif

 

Outro exemplo sem as linhas internas :

 

 

 

<TABLE BORDER RULES=none>

 

image26xc8.gif

 

Outro exemplo usando o complemento ROWS:

 

 

 

<TABLE BORDER RULES=rows>

 

image27ja7.gif

 

O último exemplo usará o complemento COLS :

 

 

 

<TABLE BORDER RULES=cols>

 

image28wu3.gif

 

As tabelas são um forte recurso de modelagem das home-pages hoje em dia e para que você consiga utilizar bem este recuso não deve se limitar somente aos exemplos desta apostila, procure em sites e até mesmos em livros , como por exemplo: "Criando sites arrasadores na Web" (capítulo 4) ou "HTML Truques Espertos" (capítulo 5). Nessas referências você poderá encontrar vários outros exemplos de páginas usando tabelas mais complexas (como por exemplo, uma tabela periódica dos elementos) e é claro em laboratório desenvolvendo sua própria home-page.

 

Há uma observação importantíssima que devemos fazer aqui. Como já vimos antes, alguns comandos HTML não funcionam em um dado navegador, se você reparou para falarmos de tabelas rodamos os exemplos nos dois navegadores mais conhecidos : Internet Explore 4.0 e no Netscape Communicator 4.0. Você não reparou nenhuma diferença no uso destes navegadores para nossos exemplos, a questão é que para tabelas mais complexas, com alinhamentos mais precisos cada navegador interpreta estes comandos HTML de tabelas de forma diferenciada. Um exemplo típico é uso de CELLSPACING e CELLPADDING.

 

Isto se deve ao fato de que nem a Netscape e nem a Microsoft entram em um acordo quanto a padronização de seus navegadores. Sendo assim, quando você construir tabelas deve sempre levar em conta em qual navegador você dará preferência para rodar a sua página. Por isso nunca é demais deixar claro à sua home-page em qual navegador ela roda melhor a sua formatação.

 

Bem, Por aqui Termino o Tutorial de HTML, Espero ter Ajudado Muitas Pessoas, e Brevemente vou cria um tutorial PHP, Aguardem...

 

Tutorial Dedicado ao GM Netox, Abraço pra ele !!!

Abraço;

Raphael.

Link para o comentário
Compartilhar em outros sites

Tutorial Dedicado ao GM Netox, Abraço pra ele !!!

 

Valeu mesmo mano!

 

Topic...

Muito bom seu tutorial, eu sei uma base de Html e Php. Mais esse seu tutor esta esplicando tudo "Tim por Tim", vou esperar o de php para da uma olhada.

 

Abraços ;*

Link para o comentário
Compartilhar em outros sites

×
×
  • Criar Novo...