Tutorial de HTML: Layouts no HTML

Layout de página Web é muito importante para fazer o seu site com bom aspecto.

Desenhe o seu layout de página com muito cuidado.

Layout do site

A maioria dos sites têm colocado o seu conteúdo em várias colunas (formatado como uma revista ou jornal).

Várias colunas são criadas usando <div> ou elementos <table>. CSS são utilizadas para posicionar elementos, ou para criar fundos ou look colorido para as páginas.

<!DOCTYPE html>
<html>
<body>

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

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

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

<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">O conteúdo fica aqui</div>

<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">Copyright © Webmasters Online</div>

</div>

</body>
</html>

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

O conteúdo fica aqui

Layouts HTML - Usando Tabelas

Uma maneira simples de criar layouts é usando a tag <table> HTML.

Várias colunas são criadas usando <div> ou elementos <table>. CSS são utilizadas para posicionar elementos, ou para criar fundos ou um visual colorido para as páginas.

Usando <table> para criar um layout agradável não é o uso correto do elemento. O objetivo do elemento <table> é exibir dados tabulares!

O exemplo a seguir usa uma tabela com 3 linhas e 2 colunas - a primeira e última linha se estende por ambas as colunas usando o atributo colspan:

<!DOCTYPE html>
<html>
<body>
<table style="width:500px;" cellpadding="0" cellspacing="0">

<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1 style="margin:0;padding:0;">Título principal da página</h1>
</td>
</tr>

<tr>
<td style="background-color:#FFD700;width:100px;vertical-align:top;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript
</td>
<td style="background-color:#eeeeee;height:200px;width:400px;vertical-align:top;">
O conteúdo da página aqui</td>
</tr>

<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
Copyright © Webmasters Online</td>
</tr>

</table>
</body>
</html>

Veja como fica o código acima:

Título principal da página
Menu HTML CSS JavaScript	O conteúdo fica aqui
Copyright © Webmasters Online

HTML Layout - Dicas úteis

Dica: A maior vantagem do uso de CSS é que, se você colocar o código CSS em uma folha de estilo externa, seu site se torna muito mais fácil de manter. Você pode alterar o layout de todas as suas páginas, editando um arquivo.

Dica: Porque layouts avançados ter tempo para criar, uma opção mais rápida é usar um modelo. Pesquisa do Google para modelos de site gratuito (estes são layouts de sites pré-construídos que você pode usar e personalizar).

Tags de layout HTML

Tag	Descrição
<div>	Define uma seção no documento (em bloco)
<span>	Define uma seção no documento (em linha)

Total de comentários: 0