Workshop de HTML

[helldanger1]

Terceira tabela

Para complicar um pouco o exercício pensamos que o corpo da caixa destacada poderia ser um conjunto de opções. Colocaremos as opções dentro de uma tabela, mas dado que a tabela com as opções deve ter estilo diferente que a tabela geral, colocamos uma tabela dentro da outra, ou seja, fizemos uma junção de tabelas.

<table width="200" cellspacing="1" cellpadding="3" border="0" bgcolor="#80A93E">
<tr>
<td bgcolor="#B7F259"><font size=1 face="verdana, arial, helvetica"><b>Caixa curiosa com HTML</b></font></td>
</tr>
<tr>
<td bgcolor="#F5ECB9">

<table width="95%" cellspacing="1" cellpadding="1" border="0" align="center">
<tr>
<td valign=top><font face="verdana, arial, helvetica" size=1>+</font></td>
<td><font face="verdana, arial, helvetica" size=1>

Opção um

</font></td>
</tr>
<tr>
<td valign=top><font face="verdana, arial, helvetica" size=1>+</font></td>
<td><font face="verdana, arial, helvetica" size=1>

Outra opção com texto em várias linhas

</font></td>
</tr>
<tr>
<td valign=top><font face="verdana, arial, helvetica" size=1>+</font></td>
<td><font face="verdana, arial, helvetica" size=1>

O que você quiser destacar...

</font></td>
</tr>
<tr>
<td valign=top><font face="verdana, arial, helvetica" size=1>+</font></td>
<td><font face="verdana, arial, helvetica" size=1>

Última opção

</font></td>
</tr>
</table>

</td>
</tr>
</table>

Como pode ser visto, esta tabela não difere muito com a segunda tabela. Simplesmente o corpo da tabela é outra tabela. É um exemplo de junção de tabelas interessante para praticar HTML.

 

[helldanger1]

Tabela melhorada com imagens para barra de navegação



Uma tabela de links HTML a qual intercalamos imagens para transformá-la um pouco e torná-la mais vistosa. Utilizável em uma barra de navegação.

Por Miguel Angel Alvarez - Tradução de JML




Tabela melhorada com imagens para barra de navegação ( Uma tabela de links HTML a qual intercalamos
Portal

Introdução

Todos os assuntos

O que desejar

Mais epígrafes

Acabando os links

Entrar em contato

imagens para transformá-la um pouco e torná-la mais vistosa. Utilizável em uma barra de navegação.)
Portal

Introdução

Todos os assuntos

O que desejar

Mais epígrafes

Acabando os links

Entrar em contato
Neste
artigo veremos como uma pequena imagem pode ser muito vistosa para construir uma barra de navegação para nosso website.

Vamos construir uma tabela como a que pode ser vista à direita, onde poderemos observar a utilização de imagens para camuflar o fato de que as células são sempre retangulares. As imagens aplicam um leve corte e eliminam uma esquina, com o qual melhora sensivelmente a aparência das tabelas.
Nota: Um efeito como este ou parecido pode-se conseguir de muitas maneiras, portanto temos que tomar este artigo somente como uma idéia das possibilidades e o modo de construir as tabelas.


As imagens

Acredito que vendo as imagens que colocamos na tabela se compreenderá um pouco a idéia a qual trabalhamos. As imagens estão ampliadas para que se possa observar melhor suas linhas. Podem criar-se com qualquer editor gráfico do qual dispomos.

 

[helldanger1]

Esta é a imagem que colocamos entre duas

Esta é a imagem que colocamos na parte de cima da célula superior. Não podemos colocar a mesma que a do meio porque não fica bem.


Considerações para criar a tabela

Vamos colocar cada elemento na tabela em uma célula independente. Na primeira célula colocaremos a imagem destinada para a parte de cima, na segunda o texto do primeiro link, logo a imagem que colocamos no meio de cada célula de texto, seguida por outra célula com o texto do seguinte link, logo outra vez a imagem, logo texto, etc.

A tabela tem que ser criada de forma que não fique a separação entre as células, nem margens, pois caso fique não pareceria que as células da imagem e as do texto formam um mesmo bloco e apareceria desengonçada. Os atributos cellspacing e cellpadding ficariam a zero.

Ademais, as etiquetas <TD> e as das imagens, <IMG>, têm que estar no código sem espaços entre o meio, pois se não for assim tampouco conseguiríamos que as células ficassem coladas umas as outras.

No mais, nos resta dizer que aplicamos estilo às células de texto utilizando CSS (Folhas de estilo em cascata), que são muito mais cômodas e nos permitem definir uma única vez o estilo para todas as células no lugar de repetir as etiquetas e atributos HTML para cada uma.

Código da tabela

Colocamos o código de toda a página no lugar de somente a tabela para que possam ser vistas as etiquetas para colocar os estilos CSS, que aparecem no cabeçalho.

<html>
<head>
<title>Tabela links legal</title>
<style>
.celula {background-color:#848ED3; font-size:8pt; font-family:verdana,arial; color:#ffffff; font-weight:bold; padding-left:3px; padding-bottom:2px;}
</style>
</head>

<body>

<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td><img src="acima.gif" width="155" height="6" alt="" border="0"></td>
</tr>
<tr>
<td class="celula">Portal</td>
</tr>
<tr>
<td><img src="meio.gif" width="155" height="8" alt="" border="0"></td>
</tr>
<tr>
<td class="celula">Introdução</td>
</tr>
<tr>
<td><img src="meio.gif" width="155" height="8" alt="" border="0"></td>
</tr>
<tr>
<td class="celula">Todos os assuntos</td>
</tr>
<tr>
<td><img src="meio.gif" width="155" height="8" alt="" border="0"></td>
</tr>
<tr>
<td class="celula">O que desejar</td>
</tr>
<tr>
<td><img src="meio.gif" width="155" height="8" alt="" border="0"></td>
</tr>
<tr>
<td class="celula">Mais epígrafes</td>
</tr>
<tr>
<td><img src="meio.gif" width="155" height="8" alt="" border="0"></td>
</tr>
<tr>
<td class="celula">Acabando os links</td>
</tr>
<tr>
<td><img src="meio.gif" width="155" height="8" alt="" border="0"></td>
</tr>
<tr>
<td class="celula">Entrar em contato</td>
</tr>
</table>

</body>
</html>

 

[helldanger1]

Barra de navegação HTML simples



Neste artigo de HTML vamos desenvolver uma barra de navegação de uma maneira muito simples, na qual utilizaremos uma imagem para dar um pequeno efeito para fazer uma das bordas da tabela oblíqua.

Por Miguel Angel Alvarez - Tradução de JML




Neste artigo de HTML vamos desenvolver uma barra de navegação de uma maneira muito simples, na qual utilizaremos uma imagem para dar um pequeno efeito para fazer uma das bordas da tabela oblíqua. O efeito que buscamos pode ser visto em uma página a parte.
Referências: Em nosso manual de HTML temos toda a teoria e um pouco da prática necessária para dominar as tabelas.


A imagem

Utiliza-se uma imagem para apresentar uma parte da célula onde se colocam os links com um lado oblíquo. A imagem tem uma parte transparente e outra parte com o fundo branco, que tem que ser o mesmo fundo da página. Colocaremos a imagem sobre uma célula da mesma cor da barra. Então, a parte branca criará o setor oblíquo e a parte transparente deixará ver a parte da célula com a cor que tenha a barra criada. Cor que se pode variar facilmente com estilos ou com o atributo bgcolor das células.

 

[helldanger1]

A tabela

O truque para fazer a barra se baseia em intercalar as células com os links e as células com a imagem. Será criada uma tabela com uma só fila e com tantas colunas como forem necessárias para localizar as opções. Na verdade, como se pode supor, serão criadas o dobro de células que de opções. Para cada opção, colocaremos primeiro uma célula com a imagem e logo outra com o link.

O código será algo como isto:

<table border=0 cellpadding="0" cellspacing="0">
<tr>
<td class=op><img src="imagens/esquina.gif" width="21" height="16" alt="" border="0"></td>
<td class=op> Opcao </td>
<td class=op><img src="imagens/esquina.gif" width="21" height="16" alt="" border="0"></td>
<td class=op> Opcao 2 </td>
<td class=op><img src="imagens/esquina.gif" width="21" height="16" alt="" border="0"></td>
<td class=op> Mais opcoes </td>
<td class=op><img src="imagens/esquina.gif" width="21" height="16" alt="" border="0"></td>
<td class=op> O que seja </td>
<td class=op><img src="imagens/esquina.gif" width="21" height="16" alt="" border="0"></td>
<td class=op> Mais coisas </td>
<td class=op><img src="imagens/esquina.gif" width="21" height="16" alt="" border="0"></td>
<td class=op> Secao enésima </td>
</tr>
</table>

 

[helldanger1]

Detalhes para estar atento:

Foi utilizado uma classe de estilos CSS para definir o formato das células. Na classe se define um estilo, que inclui a cor de fundo, tamanho de letra, tipografia, etc.
Nota: Uma classe não é mais que um estilo definido, que podemos aplicar a diversos elementos do HTML. Definem-se com um código como este no cabeçalho do documento HTML:

<style type="text/css">
.op{ font-size:10pt;font-family:verdana,arial;background-color:#ff8800;}
</style>


Assim estamos definindo que os elementos dessa classe tenham tamanho de letra 10, fonte verdana, ou em seu padrão, arial, e fundo de cor alaranjado.

Também cabe destacar que para que o exemplo funcione corretamente é necessário colocar os atributos da tabela para que não tenha bordas nem margens, com border=0, cellspacing=0 e cellpadding=0. Por isso, para criar uma pequena margem antes do link, utilizam-se caracteres especiais , que servem para colocar espaços em branco.

 

[helldanger1]

Barra de navegação HTML



Todos os passos para conseguir implementar uma barra de navegação cujos links têm um estilo similar a uma aba.

Por Miguel Angel Alvarez - Tradução de JML





Vamos tratar de explicar o processo de criação uma barra de navegação simples, mas muito versátil que poderíamos incluir em uma página web. O trabalho é simples, se se dominam as tabelas do HTML, que como muitos saberão, são os principais elementos que temos a nossa disposição para planejar uma web, a parte das camadas.

O resultado que pretendemos conseguir pode ser visto em uma página a parte.

Referências: Em nosso manual de HTML temos toda a teoria e um pouco da prática necessária para dominar as tabelas.

As imagens

Vamos utilizar três imagens muito simples. Uma é a lateral esquerda dos campos dos links, outra a lateral direita, e um píxel transparente.

Com as imagens laterais vamos fazer o efeito de campo com a borda com esquinas suavizadas. Uma se utilizará na parte da direita e outra na esquerda. Com o píxel transparente utilizaremos algum truque de planejamento muito habitual em HTML, que consiste em colocar a imagem para criar um espaço de um tamanho definido por nós.

As imagens utilizam a transparência do GIF para poder criar barras de navegação as quais podemos aplicar distintas cores, facilmente editáveis se utilizamos uma folha de estilos.

A tabela com o link

Vamos dividir o problema em várias partes para que seja mais fácil de entender cada uma delas e o efeito global. Agora vamos ver como fazer uma aba. Ao reunir várias abas criaremos a barra de navegação.

As abas se criam com este código HTML:

<table align="center" cellspacing="0" cellpadding="0" border="0">
<tr>
<td class=op rowspan=2><img src="imagens/esq.gif" width="8" height="21" border="0"></td>
<td valign="top" colspan=2 bgcolor="000000"><img src="imagens/pixel.gif" width="1" height="1" border="0"></td>
<td class=op rowspan=2><img src="imagens/der.gif" width="8" height="21" border="0"></td>
</tr>
<tr>
<td class=op><img src="imagens/pixel.gif" width="1" height="15" border="0"></td>
<td class=op>Opção</td>
</tr>
</table>

O que dá como resultado este efeito:

Opção​

Como detalhes do código anterior podemos assinalar que se utiliza uma classe para definir o estilo da aba. As classes são uma possibilidade das folhas de estilos. Uma classe não é mais que um estilo definido, que podemos aplicar a diversos elementos do HTML. Definem-se com um código como este no cabeçalho do documento HTML:

<style type="text/css">
.op{ font-size:10pt;font-family:verdana,arial;background-color:#ff8800;}
</style>

Assim estamos definindo que os elementos dessa classe tenham tamanho de letra 10, fonte verdana, ou em seu padrão, arial, e fundo de cor alaranjado.

Outra coisa sobre a que queremos chamar a atenção é o uso do píxel transparente. O que se utiliza em primeiro lugar está para criar a linha da borda de cima da aba, apesar de que a cor negra é dada pelo atributo bgcolor="000000" que tem a célula. O outro píxel se coloca para fazer com que esta espaço onde se colocam as letras seja suficientemente alto.

Por último, dizer que a tabela não tem borda e os atributos cellspacing e cellpadding estão a zero, para que não tenha margens nem espaços entre as células. Uma proba que podemos fazer para entender a forma desta tabela é colocar a borda=1, com o que veremos a forma da tabela mais facilmente. Logo, voltaremos a colocar a borda=0 porque as bordas ficam muito feias.

 

[helldanger1]

Colocar várias abas juntas

Logo, para criar o efeito de barra de navegação, vamos criar uma tabela onde colocaremos os distintos códigos HTML das abas. Esta tabela é muito mais simples. Simplesmente tem um espaço para cada aba e uma célula na parte debaixo com a linha sobre a que aparecem as abas.

<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td COLSPAN=3 bgcolor=000000><img src="imagens/pontonegro.gif" width="1" height="1" border="0"></td>
</tr>
</table>

Esta tabela nos daria espaço para colocar três abas... dependendo do número de opções vamos colocar mais ou menos células na primeira fila. Posteriormente, deveremos colocar o código de cada aba dentro de cada célula. Com isso, estará realizada nossa barra.

Um exemplo de código completo pode ser visto a seguir:

<table align="center" cellspacing="0" cellpadding="0" border="0">
<tr>
<td> </td>
<td>
<table align="center" cellspacing="0" cellpadding="0" border="0">
<tr>
<td class=op rowspan=2><img src="images/esq.gif" width="8" height="21" border="0"></td>
<td valign="top" colspan=2 bgcolor="000000"><img src="images/pixel.gif" width="1" height="1" border="0"></td>
<td class=op rowspan=2><img src="images/dir.gif" width="8" height="21" border="0"></td>
</tr>
<tr>
<td class=op><img src="images/pixel.gif" width="1" height="15" border="0"></td>
<td class=op>Opção xxx</td>
</tr>
</table>
</td>
<td>
<table align="center" cellspacing="0" cellpadding="0" border="0">
<tr>
<td class=op rowspan=2><img src="images/esq.gif" width="8" height="21" border="0"></td>
<td valign="top" colspan=2 bgcolor="000000"><img src="images/pixel.gif" width="1" height="1" border="0"></td>
<td class=op rowspan=2><img src="images/dir.gif" width="8" height="21" border="0"></td>
</tr>
<tr>
<td class=op><img src="images/pixel.gif" width="1" height="15" border="0"></td>
<td class=op>Outra Opção</td>
</tr>
</table>
</td>
<td>
<table align="center" cellspacing="0" cellpadding="0" border="0">
<tr>
<td class=op rowspan=2><img src="images/esq.gif" width="8" height="21" border="0"></td>
<td valign="top" colspan=2 bgcolor="000000"><img src="images/pixel.gif" width="1" height="1" border="0"></td>
<td class=op rowspan=2><img src="images/dir.gif" width="8" height="21" border="0"></td>
</tr>
<tr>
<td class=op><img src="images/pixel.gif" width="1" height="15" border="0"></td>
<td class=op>O que deseje</td>
</tr>
</table>
</td>
<td>
<table align="center" cellspacing="0" cellpadding="0" border="0">
<tr>
<td class=op rowspan=2><img src="images/esq.gif" width="8" height="21" border="0"></td>
<td valign="top" colspan=2 bgcolor="000000"><img src="images/pixel.gif" width="1" height="1" border="0"></td>
<td class=op rowspan=2><img src="images/dir.gif" width="8" height="21" border="0"></td>
</tr>
<tr>
<td class=op><img src="images/pixel.gif" width="1" height="15" border="0"></td>
<td class=op>Última opção</td>
</tr>
</table>
</td>
<td> </td>
</tr>
<tr>
<td COLSPAN=6 bgcolor=000000><img src="images/pontonegro.gif" width="1" height="1" border="0"></td>
</tr>
</table>

 

[helldanger1]

Escrever por cima das imagens


Dois exemplos simples para constatar que isto é possível.

Por Miguel Angel Alvarez - Tradução de JML





Neste workshop de HTML vamos aprender a colocar texto em cima de uma imagem, utilizando um pequeno truque com tabelas.

Como o leitor saberá, as imagens ocupam um espaço na página que não pode ser ocupada com texto, ou seja, se colocarmos uma imagem em um lugar, à princípio, não poderia ser colocado nem texto nem outros elementos em cima. Bom, isto não é totalmente certo. Realmente, pode-se utilizar camadas para realizar essa tarefa, mas o trabalho com camadas sempre é complicado e pode chegar a dar problemas de compatibilidade com diferentes navegadores.

Este exemplo pode ser útil para muitos casos. Por exemplo, para lidar com fundos que tenham várias cores, ou para escrever texto decorado com um fundo bonito de imagem que não tem porque se repetir em toda a página.

 

[helldanger1]

O código deste exemplo é o seguinte:

<table border=1 bordercolor=black align=center width=159 cellpadding=3 cellspacing=2 background="huella.gif" height="146">
<tr>
<td>
<font size=2 face="arial,verdana">
<br>
Esta é a digital do meu cachorro.
<br>
<br>
Estou muito contente de que se passeie de vez em quando por este site.
</font>
</td>
</tr>
</table>

Trata-se de uma tabela a qual colocamos uma imagem de fundo, utilizando o atributo background. Para que apareça a imagem inteira, a tabela se dimensiona ao tamanho da imagem. O texto que quisermos escrever no fundo da imagem se coloca, tal qual, na célula.

Outro exemplo de imagem de fundo na tabela

Outro efeito que fica muito atraente é criar ima imagem com uma trama de duas cores, que pode ser utilizada de fundo, na página ou então em uma tabela.




O código da tabela seria o seguinte:

<table align=center width=700 cellpadding=3 cellspacing=2 background="trama.gif" bgcolor="000000">
<tr>
<td>
<font size=2 face="arial,verdana" color="#ffffff">
Isto poderia ser uma barra de links | Link 2 | Outro link | Termino com os links
</font>
</td>
</tr>
</table>

É um exemplo muito simples e pode se conseguir um efeito bastante elaborado. Se embelezarmos um pouco mais, poderia ser utilizado para uma barra de navegação muito decente.

Observação: É importante que a cor das tabelas (atributo bgcolor) ou as células onde você for colocar as imagens de fundo (atributo background) seja o mais parecido à cor predominante da imagem. Deste modo, poderão ser vistos perfeitamente os textos que estiverem escritos na célula enquanto se carrega a imagem de fundo ou, inclusive, se chega a se carregar por qualquer problema.

 

[helldanger1]

Tabela com desenho em sua base



Como dar formato a uma tabela utilizando desenhos. Um efeito HTML para conseguir que a silhueta da tabela não seja vista totalmente quadrada.

Por Miguel Angel Alvarez - Tradução de JML




Vamos criar neste mini-manual uma tabela com um pequeno detalhe para torná-la um pouco especial. O detalhe é uma simples imagem que colocaremos na base da tabela para simular uma silhueta especial, evitando que a tabela se mostre como um retângulo, como na é na realidade.

Como uma imagem vale mais que mil palavras, é recomendável que vermos o resultado que estamos buscando em uma página a parte para termos uma idéia exata do objetivo deste artigo.

A tabela que vamos fazer tem uma única particularidade. Colocamos na base uma imagem que faz com que pareça que tem a borda inclinada e com uma pequena sombra. Efetivamente, todo o efeito buscado se aplica com uma só imagem que colocamos na célula inferior da tabela.

A imagem é a seguinte:

A tabela então, terá duas filas e uma só coluna. Na fila superior, colocaremos o texto a introduzir en la tabla, e na inferior, a imagem. Colocaremos de cor de fundo na tabela o mesmo cinza que o da imagem, para parecer que a imagem faz parte da tabela.

O código é o seguinte:

<table width="150" cellspacing="0" cellpadding="0" border="0" bgcolor="B9B9B9">
<tr>
<td style="padding-top:8px; padding-left:9px; padding-right:3px;">
<b>Opções</b>
<br>
<br>
+ O que seja
<br>
+ Opção legal
<br>
+ Mais links
<br>
+ Isto é outro texto
<br>
+ Pêras
<br>
+ Maçãs
<br>
+ Pêssegos
<br>
<br>
</td>
</tr>
<tr>
<td><img src="tabelalegal.gif" width="150" height="28" border="0"></td>
</tr>
</table>

O único detalhe que se pode destacar é que colocamos os atributos cellpadding e cellspacing a zero para evitar que haja espaço entre as células da tabela e que pareça que a célula de cima está totalmente colada a de abaixo.

Para que a célula de cima tenha uma margem, de forma que o conteúdo não fique totalmente colado na borda, foi utilizado alguns atributos de folhas de estilo que definem a margem respectivamente acima, à esquerda e à direita.

 

[helldanger1]

Tabela com outra cor

Se queremos fazer uma tabela com o mesmo efeito e outra cor de fundo, tal como fizemos este exemplo, necessitaremos de uma nova imagem que tenha a cor que desejamos para o fundo. Por exemplo, poderíamos utilizar uma imagem como esta:

Neste caso, o código teria sido este:

<table width="150" cellspacing="0" cellpadding="0" border="0" bgcolor="F11919">
<tr>
<td style="padding-top:8px; padding-left:9px; padding-right:3px; color:#ffffff">
<b>Opções</b>
<br>
<br>
+ O que seja
<br>
+ Opção legal
<br>
+ Mais links
<br>
+ Isto é outro texto
<br>
+ Pêras
<br>
+ Maçãs
<br>
+ Pêssegos
<br>
<br>
</td>
</tr>
<tr>
<td><img src="tabelamaneira.gif" width="150" height="28" border="0"></td>
</tr>
</table>

Mudamos somente a cor de fundo da tabela, colocando-a em vermelho, e a imagem, é claro...todo o resto fica igual que o primeiro exemplo.

Esperamos que este artigo tenha sido interessante para você. Com esta mesma idéia, mas com outras imagens, estamos certos de que você poderá fazer seus próprios desenhos de tabelas de forma simples.

 

[helldanger1]

Tabela com desenho em sua base II






Continuamos com o capitulo anterior, oferecendo outras distintas maneiras de conseguir efeitos em uma tabela.

Por Miguel Angel Alvarez - Tradução de JML




A partir do artigo anterior Tabela com desenho em sua base, fizemos umas pequenas modificações para ilustrar como podemos melhorar o efeito, fazendo-o mais versátil e mantendo a simplicidade.

Como lembrará o leitor, no capítulo anterior foram criadas duas tabelas em distintas cores. Para isso, havíamos utilizado duas imagens, uma em cinza e outra em vermelho. O objetivo deste artigo é utilizar uma imagem que nos permita criar uma tabela a qual podemos aplicar distintas cores sem a necessidade de dispor de várias imagens.

O exemplo do que vamos criar pode ser visto em uma página a parte. Pode-se observar que foram criadas tabelas com distintas cores, apesar da imagem utilizada na base das três tabelas ser a mesma.

Para isso vamos criar uma imagem se adapte a tabelas com distintas cores. A idéia é criar uma imagem que tenha a cor branca na parte da tabela a qual não se deve ver e em transparente a outra zona da imagem que deve mostrar a própria cor da tabela.

A imagem em concreto é a seguinte:

Há que colocar a imagem sobre fundo que seja branco para que possa ser visto.


O código da tabela é o seguinte, que segue a mesma filosofía que no artigo anterior, o qual se desejamos mais explicações é recomendável ler o artigo precendente.

<table width="149" cellspacing="0" cellpadding="0" border="0" bgcolor="B9B9B9">
<tr>
<td style="padding-top:8px; padding-left:9px; padding-right:3px;">
<b>Opções</b>
<br>
<br>
+ O que seja
<br>
+ Opção legal
<br>
+ Mais links
<br>
<br>
</td>
</tr>
<tr>
<td><img src="tabela.gif" width="149" height="25" alt="" border="0"></td>
</tr>
</table>

 

[helldanger1]

Esta tabela pode variar, como já adiantamos, mudando a cor de fundo da tabela, com o atributo bgcolor.

<table width="149" cellspacing="0" cellpadding="0" border="0" bgcolor="F11919">
<tr>
<td style="padding-top:8px; padding-left:9px; padding-right:3px;">
<b>Opciones</b>
<br>
<br>

+ O que seja
<br>
+ Opção legal
<br>
+ Mais links
<br>
<br>
</td>
</tr>
<tr>
<td><img src="tabela.gif" width="149" height="25" alt="" border="0"></td>
</tr>
</table>

E mais nada! Esperamos que tenham entendido a técnica da imagem transparente e que este artigo tenha sido interessante.

 

[helldanger1]

Listas HTML feitas com tabelas



Workshop de HTML no qual se realiza uma lista de elementos, porém utilizando tabelas no lugar da estrutura de lista OL ou UL.

Por Miguel Angel Alvarez - Tradução de JML




As listas de elementos criadas com HTML (com as etiquetas <ul> ou <ol>) são pouco versáteis, pelo na minha opinião. Servem para fazer listas com bastante rapidez, mas se quisermos realizar algo um pouco mais complicado, não temos garantias de que vai funcionar. Por exemplo, pode ser que necessitemos de una lista de elementos ordenada que tenha vários níveis de classificação 1), 1.1), 1.2), 1.2.1), 1.2.2), 1.3), 2)... neste caso não nos servirá aninhar as etiquetas <ol>, porque não há maneira de especificar que a lista permita índices de tipo x.y) ou x.y.z).

Outro exemplo para o qual não nos serve a lista, tal qual está definida em HTML, é uma onde, no lugar de pontos em cada elemento, colocamos o logo da companhia para a qual estamos desenvolvendo a página. A lista permite configurar para colocar vários tipos de pontos (bullets em inglês): círculos, circunferências, quadrados, mas se desejamos que tenham outros tipos de elementos, temos que realiza-lo a mão.

Veremos neste artigo como utilizar uma tabela para fazer uma lista de elementos mais bonita. Não é um exercício difícil, mas sim útil. No meu caso, é mais habitual realizar as listas com tabelas que utilizar o próprio sistema de listas proporcionado por HTML. Espero que sirva também como exercício para as pessoas que se estão iniciando na linguagem HTML.

Tabela no lugar de lista

Para isso vamos realizar uma tabela com duas colunas. Na da esquerda colocaremos a imagem que queremos utilizar para a lista e na da direita, os textos dos elementos. Teremos uma fila por cada elemento da lista.

O exemplo que vamos construir terá este aspecto:
Elemento 1 da lista
Este seria um segundo elemento
Característica adicional a ressaltar
Pode haver elementos cujas características ocupem várias linhas. Colocamos VALIGN=TOP na célula do bullet para que apareça acima.



O código é muito simples de realizar. Simplesmente temos que conhecer um pouco o uso de tabelas e prover de uma imagem para os elementos das listas. Podemos utilizar os atributos da tabela para conseguir que se veja como desejemos. Por exemplo, para separar as células, utilizamos os atributos da tabela cellpadding e cellspacing. Se há elementos que ocupem várias linhas é conveniente utilizar o atributo valign=top nas células dos bullets.

 

[helldanger1]

O código deste exemplo seria o seguinte:

<table cellpadding="2" cellspacing="2">
<tr>
<td valign=top><img src="bullet.gif" width="21" height="18" alt="" border="0"></td>
<td>Elemento 1 da lista</td>
</tr>
<tr>
<td valign=top><img src="bullet.gif" width="21" height="18" alt="" border="0"></td>
<td>Este seria um segundo elemento</td>
</tr>
<tr>
<td valign=top><img src="bullet.gif" width="21" height="18" alt="" border="0"></td>
<td>Característica adicional a ressaltar</td>
</tr>
<tr>
<td valign=top><img src="bullet.gif" width="21" height="18" alt="" border="0"></td>
<td>Pode haver elementos cujas características ocupem várias linhas. Colocamos VALIGN=TOP na célula do bullet para que apareça acima.</td>
</tr>
</table>

Outro exemplo

Vejamos agora outro exemplo muito similar. O efeito a buscar é o seguinte:
Elemento 1 da lista
Este seria um segundo elemento
Característica adicional a ressaltar
Pode haver elementos cujas características ocupem várias linhas. Colocamos VALIGN=TOP na célula do bullet para que apareça acima.



Para fazer com que a imagem do elemento da lista fique bem alinhada com o texto da direita, utilizamos o atributo vspace de <IMG>, que define o espaço livre em pixels que deve ficar acima e abaixo da imagem. Isto é especialmente útil se quisermos utilizar bullets de tamanho reduzido.

O código seria o seguinte:

<table cellpadding="1" cellspacing="1">
<tr>
<td valign=top><img src="bullet_peq.gif" width="7" height="7" alt="" border="0" vspace=5></td>
<td>Elemento 1 da lista</td>
</tr>
<tr>
<td valign=top><img src="bullet_peq.gif" width="7" height="7" alt="" border="0" vspace=5></td>
<td>Este seria um segundo elemento</td>
</tr>
<tr>
<td valign=top><img src="bullet_peq.gif" width="7" height="7" alt="" border="0" vspace=5></td>
<td>Característica adicional a ressaltar</td>
</tr>
<tr>
<td valign=top><img src="bullet_peq.gif" width="7" height="7" alt="" border="0" vspace=5></td>
<td>Pode haver elementos cujas características ocupem várias linhas. Colocamos VALIGN=TOP na célula do bullet para que apareça acima.</td>
</tr>
</table>

 

[helldanger1]

Gestão de mapas


Vamos ver um script no qual poderemos administrar este tipo tão especial de imagens.

Por Miguel Angel Alvarez - Tradução de JML





Um mapa é uma imagem que permite realizar diferentes hiperlinks em função da "zona" da imagem que se clique.

As diretrizes para criar mapas são <MAP></MAP> e <AREA>.

A diretriz <MAP> identifica o mapa e tem o parâmetro name para indicar o nome do mapa.

A diretriz <AREA> define as áreas sensíveis da imagem. Tem os seguintes parâmetros obrigatórios:

shape = "tipo"
Indica o tipo de área a definir.

coords = "coordenadas"
Indica as coordenadas da figura indicada com shape.

href = "URL"
Indica o endereço o qual se acessa se se clica na zona delimitada pela área indicada.


Os tipos de área podem ser os seguintes:

rect
Área retangular. Deve-se especificar as coordenadas da esquina superior esquerda e as da esquina inferior direita.

poly
Polígono. Deve-se especificar as coordenadas de todos os vértices do polígono. O visor se encarrega de "fechar" a figura.

circle
Círculo. Deve-se especificar em primeiro lugar as coordenadas do centro do círculo e a seguir o valor do radio (em pontos).


Se duas áreas se sobrepõem, se executará a que se encontrar em primeiro lugar na definição do mapa. É importante definir uma última área que abarque a totalidade do gráfico para encaminhar a uma URL "padrão", com o objetivo de contemplar o caso de que não se clique sobre uma área definida.

 

[helldanger1]

Vejamos um exemplo completo.


<CENTER>
<TABLE Border=2>
<TD>
<B><MAP name =</B> "casa"<B>></B><br>
<B><AREA shape =</B> "poly" <B>coords =</B> "2,62,57,62,28,1"
<B>href=</B> "telhado.htm"<B>></B><br>
<B><AREA shape =</B> "rect" <B>coords =</B> "21,101,35,138"
<B>href=</B> "porta.htm"<B>></B><br>
<B><AREA shape =</B> "rect" <B>coords =</B> "2,64,57,138"
<B>href=</B> "casa.htm"<B>></B><br>
<B><AREA shape =</B> "circle" <B>coords =</B> "80,76,21"
<B>href=</B> "arvore.htm"<B>></B><br>
<B><AREA shape =</B> "rect" <B>coords =</B> "78,98,85,138"
<B>href=</B> "tronco.htm"<B>></B><br>
<B><AREA shape =</B> "rect" <B>coords =</B> "0,0,96,138"
<B>href=</B> "desenho.htm"<B>></B><br>
<B></MAP></B>
<TR>
</TABLE>
</CENTER>

Para ativar o mapa devemos indicar a imagem a mostrar, indicando que tal imagem é tratada por um mapa. Para isso, escreveríamos a seguinte diretriz:


<CENTER>
<TABLE Border=2>
<TD>
<B><IMG src =</B> "grafico.gif" <B>usemap =</B> "#casa"<B>></B>
<TR>
</TABLE>
</CENTER>

Se o seu visor tiver a capacidade de administrar mapas (Netscape 2.x ou Ms-Explorer 2.x ou superiores), prove clicando sobre alguma parte do mapa que definimos e o que lhe aparecerá a seguir:


<MAP name = "casa">
<AREA shape = "poly" coords = "2,62,57,62,28,1" href= "telhado.htm">
<AREA shape = "rect" coords = "21,101,35,138" href= "porta.htm">
<AREA shape = "rect" coords = "2,64,57,138" href= "casa.htm">
<AREA shape = "circle" coords = "80,76,18" href= "arvore.htm">
<AREA shape = "rect" coords = "78,98,85,138" href= "tronco.htm">
<AREA shape = "rect" coords = "0,0,96,138" href= "desenho.htm">
</MAP>
<CENTER>
<IMG src = "casa.gif" usemap = "#casa">
</CENTER>

Como podemos observar, o processo mais trabalhoso é o de determinar as coordenadas. Existem programas como MAPTHIS que permite realizar este processo de uma forma simples, simplesmente definindo as zonas com o mouse. O programa MAPTHIS permite abrir uma imagem tipo .GIF e marcar as zonas sensíveis. Este programa criará um arquivo com extensão .map que conterá em seu interior as coordenadas de cada área. Com esta informação, será muito mais fácil escrever nosso mapa. Pode-se buscar este programa em Shareware.com buscando por mpths.

 

[helldanger1]

Teclas rápidas para os links


Utilizando o atributo accesskey se podem definir atalhos de teclado para acessar aos links diretamente com a pulsação de ALT e uma tecla que indicarmos no atributo.

Por Miguel Angel Alvarez - Tradução de JML



As teclas rápidas são atalhos de teclado para realizar diversas ações de uma maneira mais direta. Implementam-se em todos os programas em geral e servem para melhorar a comodidade do usuário e a rapidez de uso do software, assim como aumentar a acessibilidade dos programas, a não ser necessário o uso do mouse para executar diversas ações.

Em uma página web também podemos utilizar teclas rápidas para acessar a certos links ou campos de formulário. Existe um atributo chamado accesskey que nos serve para indicar a tecla rápida ou atalho de teclado que associaremos ao elemento.

Por exemplo, em um link podemos definir uma tecla rápida desta maneira:

<a href="http://www.estiloymoda.com" accesskey="e">Estiloymoda.com</a>

Como se pode ver, simplesmente indicamos "e" como a tecla rápida para o link que nos levaria à página estiloymoda.com. Para colocar em funcionamento uma tecla rápida temos que combinar seu clique com a tecla ALT (alternativa).

Na prática a tecla rápida simplesmente nos levará o foco da aplicação para o link, de modo que não o executa. Para que o navegador mude a página e se mova para o link deveríamos clicar logo a tecla ENTER.

A compatibilidade com navegadores cada vez é maior para as teclas rápidas. Já é possível utilizá-las em todos os mais habituais, como Firefox, Internet Explorer ou Opera. (Está disponível a partir de Internet Explorer 4.0, com certas restrições e de Netscape 6). Não obstante, o W3C recomenda o uso de accesskey, por isso é normal que todos os navegadores vão se incorporando.

Como recomendação, devemos assinalar de alguma forma que existe uma tecla rápida para um link, possivelmente colocando em negrito no link a letra que implementa a tecla rápida, ou sublinhando-a. Este último caso (o sublinhado) é na minha opinião mais intuitivo, mas como os links já aparecem sublinhados, deveríamos fazer algo para tirá-lo afim de que se veja o sublinhado da tecla rápida. Vejamos como se pode fazer isto com um exemplo:

<html>
<head>
<title>Teclas rápidas para links</title>
<style type="text/css">
a {text-decoration:none}
</style>
</head>
<body>

Vamos fazer links com teclas rápidas

<br>
<a href="http://www.estiloymoda.com" accesskey="e"><u>E</u>stiloymoda.com</a>
<br>
<a href="http://www.desarrolloweb.com" accesskey="d"><u>D</u>esarrolloweb.com</a>
<br>
<a href="http://www.guiarte.com" accesskey="g"><u>G</u>uiarte.com</a>
</body>
</html>

Como vemos, se fez uso das folhas de estilo para tirar o sublinhado dos links. Logo, utilizamos a etiqueta <u> para sublinhar a letra que tem a tecla rápida ou atalho de teclado. Não tem nenhuma complicação.

 

[helldanger1]

Construir uma página web com tabelas


Explicações práticas sobre a construção de páginas web com HTML usando tabelas.

Por Miguel Angel Alvarez - Tradução de JML




Neste artigo vamos estudar o modo de criação de uma página web medianamente avançada, na qual temos uma estrutura de colunas para mostrar os conteúdos. Para criar a estrutura de colunas utilizaremos tabelas HTML e explicaremos alguns dos truques típicos utilizados para a construção com tabelas.

A motivação deste artigo é que recebi muitas vezes consultas sobre o procedimento para criar páginas web com diferentes colunas. No manual de HTML se explicam todos os detalhes sobre a criação de tabelas, porém realmente não se conta como utilizá-las para construir uma página web. De modo que me parecia necessário apresentar um artigo prático para cobrir este assunto.

Também é importante dizer que a corrente atual de design de páginas web utiliza CSS e camadas, ao invés de tabelas, para o posicionamento dos conteúdos. Se você já conhece CSS possivelmente não se interessará ler este artigo. Nesse caso lhe recomendaria ler os conteúdos sobre a construção CSS. Porém, na prática, muita gente visita para aprender a fazer páginas web desde zero, e em um primeiro momento ou se só tiver conhecimentos de HTML, é mais simples começar a construir páginas usando tabelas.

Construção por tabelas passo a passo

As tabelas na verdade estão pensadas para apresentar informação tabulada, ou seja, usando filas e colunas. Entretanto, este uso pode ser estendido a toda à página web e podemos criar uma macro-tabela que englobe todos os conteúdos que serão mostrados na página inteira. Como as tabelas têm filas e colunas, nos servirão para criar várias áreas onde se mostrarão os conteúdos construídos como se fosse uma revista ou um portal.

Neste artigo vamos criar um exemplo medianamente simples de construção usando tabelas. Podemos vê-lo a seguir para termos uma idéia do objetivo buscado.