Codex

< 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:

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:

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 >