Caixa elegante e simples com HTML
2 participantes
Página 1 de 1
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.
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.
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos
|
|