Layout

< Cores | Índice | Doctypes >

O layout de página web é muito importante para fazer um site ficar bem apresentável.

Sempre desenhe seu layout com muito cuidado.


Disposição de um site ou Website Layout

A maioria dos sites coloca seu conteúdo em múltiplas colunas, com uma formatação parecida com uma revista ou jornal.

Múltiplas colunas podem ser criadas usando-se tags de <table> ou <div>. CSS é normalmente usado para posicionar elementos, ou para criar cores de fundo ou aparências coloridas para as páginas.


Usando tabelas

A maneira mais simples de se criar layouts em HTML, envolvem o uso da tag <table>.

O exemplo seguinte usa uma tabela com 3 linhas e 2 colunas - A primeira e a útima linha abrangem duas colunas com o uso do atributo colspan:

Exemplo:

<html>
<body>

<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#ccc;">
<h1>Título Principal da Página</h1>
</td>
</tr>

<tr valign="top">
<td style="background-color:#ddd;width:100px;text-align:top;">
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript
</td>
<td style="background-color:#eee;height:200px;width:400px;text-align:top;">
O conteúdo vai aqui.</td>
</tr>

<tr>
<td colspan="2" style="background-color:#ccc;text-align:center;">
Direitos reservados</td>
</tr>
</table>

</body>
</html>

O código HTML acima irá produzir o seguinte resultado:

Título Principal da Página

Menu
HTML
CSS
JavaScript

O conteúdo vai aqui.
Direitos reservados

Nota: Apesar de ser possível criar bons layouts com tabelas em HTML, tabelas são desenhadas para apresentar dados tabulares e não como ferramenta de criação de layout.


Usando elementos div

O elemento div é um elemento de bloco, usado para agrupar elementos HTML.

O exemplo a seguir usa 5 elementos div para criar um layout com múltiplas colunas, criando o mesmo resultado que o exemplo:

Exemplo:

<html>
<body>

<div id="container" style="width:500px">

<div id="header" style="background-color:#ccc;">
<h1 style="margin-bottom:0;">Título Principal da Página</h1></div>

<div id="menu" style="background-color:#ddd;height:200px;width:100px;float:left;">
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript</div>

<div id="content" style="background-color:#EEE;height:200px;width:400px;float:left;">
Content goes here</div>

<div id="footer" style="background-color:#ccc;clear:both;text-align:center;">
Direitos reservados</div>

</div>

</body>
</html>

O código HTML acima irá produzir o seguinte resultado:

O conteúdo vai aqui

Nota: Nas duas demonstrações dos layout acima, não foram usados exatamente as mesmas tags e elementos html que estão escritos nos exemplos, sem prejuízo ao resultado final de demonstração visual dos mesmos.


Dicas Úteis

Dica: A maior vantagem de usar CSS é que, se você escrever o código do CSS em um arquivo externo, a manutenção do seu site se torna mais dinâmica e rápida. Você pode mudar o layout de todas as suas páginas apenas editando um arquivo. Para aprender mais sobre CSS, estude nosso tutorial sobre o assunto.

Dica: Por ser difícil e lenta a criação de layouts complexos, uma opção rápida é usar um modelo pronto. Procure no google por modelos prontos ou em inglês, website templates. Templates ou modelos, são sites pré montados que você pode usar e customizar.


Tags de layout para o HTML

Tag Descrição
<table> Define uma tabela
<div> Define a seção de um documento


< Cores | Índice | Doctypes >