Workshop de HTML

[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.

 

[helldanger1]

Como vimos, esta página está composta por um cabeçalho e um corpo de página. Para criar o cabeçalho e o corpo utilizaremos tabelas independentes. Fazemos isto porque com duas tabelas separadas se simplifica o exemplo, ou seja, por comodidade e porque se torna mais fácil de desenhar. Não obstante, como a distribuição de colunas e filas no cabeçalho e corpo neste exemplo é diferente, necessitamos utilizar tabelas independentes. Porém, a razão mais importante de colocar cabeçalho e corpo nas tabelas diferentes é que em alguns navegadores, quando há desenhos com tabelas, até que não se carregue o código da tabela inteira não se mostra nada. Se tivéssemos toda a página colocada na mesma tabela, o usuário não veria nada até que não se terminasse de carregar toda a página em seu navegador. Se separarmos as tabelas de cabeçalho e corpo conseguiremos que o cabeçalho da página se carregue e se mostre mais rapidamente e logo, embora demore bastante em carregar o resto da página com todo o corpo, pelo menos o usuário vê o cabeçalho e pode saber que a página está sendo toda carregada.

Neste caso, o cabeçalho é bastante típico, com o logotipo, um banner e uma barra de navegação horizontal. O código pode ser como o seguinte.

<table width="778" cellspacing="1" cellpadding="3" border="0" bgcolor="#000000" align="center">
<tr>
<td width=180 align=center bgcolor="#ffffff"><img src="logo.gif" width="154" height="72" alt="Todo Clássico" border="0"></td>
<td bgcolor="#ffffff" align=center><img src="banner.gif" width="468" height="60" border="0"></td>
</tr>
<tr>
<td colspan=2 bgcolor="#ffffff" background="fundohorizontal.gif">

<font face="Garamond">Portada | Noticias | Agenda | Artistas | Buscador | Comunidad | Tienda</font>
</td>
</tr>
</table>

Se observarmos, o cabeçalho tinha um contorno negro. Isto o conseguimos de maneira similar a como explicamos em um artigo anterior de HTML: Caixa elegante e simples com HTML. Simplesmente colocamos uma cor de fundo preta à tabela, logo fazemos com que os campos estejam separados (cellspacing) de um píxel e definimos em branco a cor de todos os campos. Assim, a separação entre campos aparecerá em preto e os campos em branco. Neste caso definimos uma margem entre a borda do campo e o conteúdo (cellpadding) de três pixels, para que o conteúdo dos campos não se grude na borda.

A barra de navegação horizontal ocupa toda a largura do cabeçalho, por isso tem um colspan=2. Colocamos um fundo degradê para melhorar um pouco o desenho.

Outra coisa destacável é a largura da tabela, que fizemos de 778 pixels. Poderíamos ter feito um desenho que ocupasse toda a largura da página, porém criei um desenho não fluido com largura fixa. Este tipo de design em minha opinião é mais simples do que ficar bem. O tamanho de 778 pixels é porque é o máximo que se pode colocar que caiba em definições de tela de 800 x 600. Podemos conhecer mais sobre designs fluidos no artigo Páginas fluidas. Também temos outro artigo onde podemos saber mais sobre definições de tela.

 

[helldanger1]

Por sua vez, o corpo tem uma distribuição de três colunas. O código da tabela que englobaria todo o corpo é o seguinte:

<table width="778" cellspacing="0" cellpadding="0" border="0" align="center">
<tr>
<td width=150 valign="top">
<!--NAVEGADOR LATERAL ESQUERDO-->
</td>
<td width=10></td>
<td width=484 valign="top">
<!--CORPO PRINCIPAL-->
</td>
<td width=10></td>
<td width=124 align=center valign="top">
<!--LATERAL DIREITO-->
</td>
</tr>
</table>

A técnica para fazer esta tabela é diferente que a tabela do cabeçalho. Esta tabela não tem a borda preta, para não recarregar demais o desenho da página. Porém, o mais importante é que as margens e o espaço entre as células (cellspacing e cellpadding) foram eliminados ou visto a zero. Então, os espaços que tem que haver entre as células foram colocados com células vazias de 10 pixel. Faço isto assim porque deste modo me resulta mais simples de calcular os espaços da tabela e porque assim podemos definir margens que não afetam a todas as células da tabela, e sim só as que necessitam.

A tabela tem três células onde se colocarão conteúdos e duas células com espaço ou margens para separar os três campos onde estão os conteúdos. Dentro de cada célula colocamos os conteúdos necessários. Na primeira irá a barra de navegação da esquerda, na célula do centro o corpo principal e no terceiro campo irá a lateral direita que utilizamos para colocar publicidade.

As larguras de cada célula, definidas pelo atributo width, são bastante típicas neste tipo de estruturas de três colunas. Ademais, podemos ver que todas as células têm o atributo valign="top" para que os conteúdos se situem na parte de cima da tabela.

O conteúdo de cada uma das células do corpo inclui mais código HTML, inclusive outras tabelas aninhadas. Em geral, podemos colocar em cada coluna o código HTML que necessitarmos com qualquer etiqueta, tendo em conta que a largura disponível está limitada à largura da célula.

 

[helldanger1]

Recarregar ou endereçar a outra página com HTML



Código HTML em etiquetas META para atualizar uma página ou fazer um re-encaminhamento a outra página automaticamente.

Por Miguel Angel Alvarez - Tradução de JML




Nas etiquetas META, como provavelmente saberemos, se indicam informações sobre as palavras-chave e descrições dos documentos, autoria e propriedade, métodos de contato, etc. Porém, também podemos indicar outras ações ao navegador que podem ser úteis para os desenvolvedores, como indicar uma atualização ou um re-endereçamento. Neste artigo, veremos como fazê-lo.

A etiqueta META que se faz para indicar ao navegador uma atualização ou um re-endereçamento tem a seguinte forma:

<META HTTP-EQUIV="REFRESH" CONTENT="5;URL=http://www.web.com">

Como vemos, o atributo HTTP-EQUIV se indica uma informação ao navegador como se fosse enviado no cabeçalho do http, ou seja, a instrução enviada em uma etiqueta META que utiliza HTTP-EQUIV é equivalente se esta tiver enviado no cabeçalho do http. Neste caso, que temos igualado a REFRESH, é para indicar se queremos fazer uma atualização da página.

No atributo CONTENT indicamos as características da atualização. O valor associado contém duas partes, primeira o tempo em segundos de espera para fazer atualização ou o re-endereçamento e a URL a que enviar o navegador.

Página para fazer um re-endereçamento com HTML

O código HTML da página completo para fazer um re-endereçamento seria o seguinte:

<html>
<head>
<title>Re-endereçar o navegador a outra URL</title>
<META HTTP-EQUIV="REFRESH" CONTENT="5;URL=http://www.web.com">
</head>
<body>
Esta página muda em 5 segundos pelo portal de Web.com
</body>
</html>

 

[helldanger1]

Página que se atualiza ela sozinha ao passar uns segundos

Agora veremos também um exemplo de página que se atualiza ou se recarrega a cada segundo que passa. Nesta página, para comprovar que se atualiza e se recarrega seu conteúdo, utilizamos um pouco de javascript para mostrar a hora, minutos e segundos atuais, assim em cada recarregamento poderemos ver que os segundos vão se incrementando.

<html>
<head>
<title>Atualizar a URL</title>
<META HTTP-EQUIV="REFRESH" CONTENT="1;URL=refrescar.html"> </head>
<body>
Hora:
<script>
minhaData = new Date()
document.write(minhaData.getHours() + ":" + minhaData.getMinutes() + ":" + minhaData.getSeconds())
</script>
</body>
</html>



Neste caso, na META para definir a atualização especificamos que se realize cada segundo e que chame à URL refrescar.html. Obviamente, o arquivo HTML tem o nome refrescar.html, de modo que o recarregamento chamará à mesma página todo o tempo.

 

[helldanger1]

Transparência em formatos gráficos para web GIF e PNG


Como fazer imagens transparentes para a web, com formatos GIF e PNG, para eliminar os incômodos halos.

Por Miguel Angel Alvarez - Tradução de JML




Neste workshop de HTML mostraremos um exemplo de transparência em formatos gráficos GIF e PNG, comprovando suas diferenças e as vantagens que nos traz PNG de 24 bits para eliminar as "auréolas" ou também chamados os halos. O que veremos é um exemplo muito simples, porém muito interessante para ilustrar um modo de fazer transparências que sempre ficam bem, sobre qualquer fundo.

Os halos são as bordas que às vezes saem nas imagens que têm transparências, que são como uma borda de cor que rodeia as silhuetas dos desenhos da imagem. Mesmo que você não saiba o que é um halo, certamente já viu em diversas páginas web que têm halos em suas imagens, efeitos que ficam muito mal e dão má imagem do desenvolvedor da página.

Os dois formatos que suportam transparência, que podemos utilizar para o desenvolvimento de uma página web, são o GIF e PNG. O formato PNG é muitas vezes desconhecido pelos desenvolvedores, ou simplesmente ignorado, porque anteriormente não era compatível com todos os navegadores. No momento atual, nenhum navegador tem problemas para mostrar os arquivos PNG, porém como este formato não se começou a utilizar desde o princípio muitos dos desenvolvedores não o usam habitualmente.

 

[helldanger1]

Utilizaremos neste workshop as duas imagens a seguir:

GIF

PNG-24 bits


Como podemos comprovar temos duas imagens, nos dois formatos mencionados: GIF e PNG. Podemos ver que neste caso mostram poucas diferenças, ou melhor, nenhuma à primeira vista. As duas se vêem igualmente bem, embora realmente não pareça que seja uma imagem transparente porque realmente as colocamos sobre fundo branco.

Vejamos estas duas imagens sobre um fundo de outra cor:

Neste outro caso tudo vai bastante bem, as diferenças são quase inapreciáveis. O fundo de cor rosa é bastante claro e não permite ver realmente o que queremos mostrar no exemplo. Portanto, vamos mostrar estas duas imagens sobre um fundo mais escuro, que nos servirá para ver o efeito desagradável que começa a acusar o formato GIF.

Nesta amostra podemos ver os famosos halos, no formato GIF. São essas silhuetas brancas que aparecem ao redor dos desenhos da imagem.

 

[helldanger1]

Por que ocorre isso?

A borda da figura está suavizada, por isso os píxels ao redor desta têm tonalidades que não são diretamente a cor da figura nem o transparente do fundo. Quando fizermos esta imagem com Photoshop, ou qualquer outro programa de design gráfico, aconteceria isto com o suavizado, porque ele sempre tende para uma cor de fundo, neste caso o branco. A não ser que tirássemos o suavizado, mas tiraríamos os halos, assim a forma teria uma cor e logo diretamente apareceria o transparente, porém isso posso garantir que isso fará com que a imagem perca bastante qualidade.

Em GIF, com um pouco de trabalho podemos consertar, simplesmente com nosso programa de design gráfico fazemos a figura sobre outro fundo, da cor que necessitarmos. Ou seja, desenhamos a forma diretamente sobre um fundo da mesma cor que a da onde pensamos colocar. Logo, marcamos como transparente a cor de fundo. O suavizado permanecerá, tendendo a essa cor ao invés do branco. Porém claro, sempre temos o problema que a imagem só nos servirá para fundos da tonalidade para a qual prepararmos, ou uma muito similar.

Com o formato PNG-24 bit não temos esse problema, a imagem continua transparente. Isto é uma vantagem muito interessante, porque nos servirá sempre, independentemente do fundo sobre o qual a colocarmos.

Agora vamos ver o exemplo sobre um fundo negro:

Este é o pior dos casos, onde o halo resulta mais patente. É porque tínhamos criado a imagem sobre fundo branco e o suavizado branco ao redor da figura contrasta exageradamente sobre o negro de fundo.

Enquanto isso, o formato PNG continua se comportando bem com a transparência. Inclusive, se colocarmos a imagem sobre um fundo que tenha uma textura ou qualquer outro desenho, o PNG continua sendo visto perfeitamente.

Conclusão sobre transparência GIF e PNG

Não se deve subestimar PNG. Ao contrário, queremos ressaltar suas vantagens, na hora de tratar a transparência, com respeito ao formato GIF. As transparências que conseguimos com PNG são muito mais versáteis porque poderemos utilizá-las sobre qualquer fundo que necessitarmos.

 

[helldanger1]

Colocar vídeo em uma página web através de YouTube



Uma forma muito simples de colocar um vídeo em uma página web é transferi-la a YouTube e logo incrustá-lo na página web por meio de um código HTML que eles proporcionam.

Por Luis Javier Alvarez




Para colocar vídeo em uma página web, uma das opções mais simples é transferi-lo a YouTube.com e linkar com o vídeo para que se mostre desde lá. Pode-se colocar um link que vá a YouTube diretamente ou um código HTML para que o vídeo se mostre dentro de sua própria página web.

Publicar vídeos em YouTube tem várias vantagens, entre as quais poderíamos destacar:
Seus vídeos não ocupam espaço em sua hospedagem web.
A transferência devida aos vídeos se encarrega o YouTube, por isso que não afetará ao seu servidor (em velocidade e largura de banda consumida) porque tenha muitos visitantes vendo vídeos e tampouco será cobrado nada a mais por passar de Gigas transferidos em seu hosting.
É extremamente simples transferir vídeos a YouTube e logo colocá-los em sua web. Não tem que se preocupar por quase nada em tudo que se refere aos formatos ou compatibilidade de seu vídeo com diversos tipos de navegadores.
Porém, nem tudo são vantagens, pois há alguns detalhes que não são tão bons:
A definição de seu vídeo é fixa. Quando você transfere o vídeo, YouTube o processa para ajustá-lo a seus tamanhos e qualidade padrão.
Os vídeos que podem ser transferidos têm uma duração máxima de 10 minutos e 100 MB.
Seus vídeos são públicos (embora em YouTube pode-se restringir mais ou menos sua difusão).
É uma possível saída de visitantes de sua página: pode acontecer de alguns usuários irem a YouTube para continuar vendo vídeos ou qualquer outra coisa.
Sendo assim, se lhe interessa as vantagens anteriores e não lhe importa padecer certas desvantagens, como tornar seu conteúdo público em outro website ou não lhe importa que o tamanho dos vídeos seja menor que o que possivelmente tenha seu original, pois YouTube é sem dúvida uma grande opção.

YouTube - Broadcast Yourself.

 

[helldanger1]

Para transferir um vídeo a YouTube necessita-se estar registrado como usuário. Registrar-se é muito simples e não requer nenhum conhecimento especial. Uma vez registrado, você receberá um e-mail com um link para confirmar sua conta, que serve para que eles saibam que seu e-mail lhe pertence e foi escrito corretamente. Sem confirmar seu e-mail não lhe permitem transferir vídeos.

Uma vez registrado e confirmado seu e-mail, acessamos à nossa conta e poderemos transferir um vídeo através do botão "Enviar um vídeo" ou também através do link "Conta" que aparece em cima à direita e logo "Meus vídeos" e logo clicando no botão "enviar um vídeo" que aparece à esquerda.

Então, basta seguir os passos para colocar o vídeo. Oferece-se primeiro uma descrição e logo, envia-se o arquivo com seu vídeo. Demorará uns minutos em carregar o vídeo dependendo do tamanho que tiver e logo outros minutinhos para YouTube processá-lo para ajustá-lo a seu formato próprio.

A partir de então, você terá o vídeo em sua conta e poderá acessá-lo através do link "Meus vídeos".

Para conseguir o pedaço de código que tem que colar no HTML de sua página, você tem que ir a sua conta, logo a "meus vídeos" e logo abrir a janela de edição da informação do vídeo, através do botão "Editar informação de vídeo". Então, aparecem vários campos e um abaixo de tudo com o código que tem que copiar e colar no HTML de sua página, no lugar onde quiser que saia o vídeo. Tal código será algo parecido a isto:

<object width="425" height="350"><param name="movie" value="http://www.youtube.com/v/EtLjq3Ocs6w"></param><embed src="http://www.youtube.com/v/EtLjq3Ocs6w" type="application/x-shockwave-flash" width="425" height="350"></embed></object>

Com este pedaço de código se mostrará seu vídeo com os controles de YouTube para colocá-lo em funcionamento, deter a reprodução, controlar o volume, etc.

 

[helldanger1]

Notas adicionais sobre transferir vídeos a YouTube:

A imagem que aparece à princípio no vídeo pode ser selecionada ao editar as informações do vídeo. Por padrão, já na maioria dos casos o primeiro fotograma, porém logo podemos selecionar outro fotograma se desejarmos.

As mudanças nas imagens iniciais levam umas horas, portanto terá que ter paciência se tiver mudado a imagem. Às vezes, não aparece a imagem inicial do vídeo e em seu lugar sai uma imagem padrão. Em alguns minutos ou horas poderá ver que YouTube se atualiza e lhe permitirá selecionar a foto fixa que desejar. Porém, em qualquer caso informam que pode demorar até 6 horas em se atualizar.

Logo, nas informações do vídeo, pode-se escolher inclusive o lugar onde se realizou a gravação.

Resumindo, com YouTube podemos facilmente começar a distribuir conteúdos multimídia, ao alcance de todos.