Caixa elegante e simples com HTML

Caixa elegante e simples com HTML

Como fazer com HTML, de maneira simples e prática, uma caixa para destacar parte do conteúdo de uma página web.

Ao construir uma página web com HTML, é muito habitual querer destacar um pedaço de texto que se deseja remarcar. Muitas vezes utilizamos tabelas e lhe damos uma borda ou um fundo para destacar seu conteúdo, mas nem sempre ficam muito atraentes. Neste simples workshop apto para principiantes, vamos mostrar a maneira de fazer uma caixa bonita com poucos recursos.

Trata-se de utilizar tabelas, mas vamos decorá-las de uma maneira simples, mas que pode ser nova para os menos experientes. À princípio, o melhor será darmos uma olhada nos exemplos que vamos construir.

Como pode ser visto no exemplo, vamos construir três caixas diferentes, embora muito parecidas. Estas caixas têm uma caixa de 1 píxel e cores diferentes para o fundo da célula com o cabeçalho e o corpo da caixa. As pautas de construção são as seguintes:

* Criar uma tabela com uma cor de fundo como desejarmos e com espaço entre células de 1 píxel e espaço entre a borda da célula e seu conteúdo de 3 pixel (estes últimos atributos são cellspacing="1" cellpadding="3")
* A tabela terá duas células. Uma com o cabeçalho da tabela, onde colocaremos o título da caixa e a outra, com o conteúdo propriamente dito. Ambas células terão estilos próprios. O título deve estar mais destacado, sendo colocado em negrito ou em uma cor que contraste bem com o texto e o corpo com uma cor mais tênue, para ajudar na leitura do texto.

As cores de fundo das células devem ser atribuídas tal como quisermos que apareça na tabela. Assim, o fundo da tabela somente poderá ser visto no espaço que há entre células, que havíamos indicado que era um píxel.

Primeira tabela

A primeira tabela tem este código:

<table width="280" cellspacing="1" cellpadding="3" border="0" bgcolor="#1E679A">
<tr>
<td><font color="#FFFFFF" face="arial, verdana, helvetica">
<b>Caixa curiosa com HTML</b>
</font></td>
</tr>
<tr>
<td bgcolor="#ffffcc">
<font face="arial, verdana, helvetica">
Este é o interior da caixa. Esperamos que seja elegante... é muito simples.
</font>
</td>
</tr>
</table>

A cor do texto da célula com o titular é branco, para que contraste com a cor de fundo da célula, que é neste caso, a mesma que a da tabela, pois não foi indicada nenhuma cor na célula.

A célula com o corpo da tabela foi colocada de cor amarelo pálido.

Segunda tabela

A segunda tabela que realizamos simplesmente tem uma mudança no tipo de letra utilizada para os textos, que fizemos menor. Ademais, foi atribuída uma cor de fundo para o cabeçalho com o titular da tabela, para que seja diferente do fundo atribuído para toda a tabela.

O código da segunda tabela é o seguinte:

<table width="200" cellspacing="1" cellpadding="3" border="0" bgcolor="#165480">
<tr>
<td bgcolor="#5FA6D7">
<font size=1 face="verdana, arial, helvetica">
<b>Caixa curiosa com HTML</b>
</font>
</td>
</tr>
<tr>
<td bgcolor="#ffffcc">
<font face="verdana, arial, helvetica" size=1>
Este é o interior da caixa. Esperamos que pareça elegante... é muito simples.
</font>
</td>
</tr>
</table>

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.

Parece até difícil...
mas na prática é bem simples aew pessoal