O objetivo deste tutorial é criar o layout de um site sem usar o manjado comando “table” do HTML. Em seu lugar entra um conjunto de recursos do CSS conhecido como CSS-P (Cascading Style Sheets Positioning). A principal vantagem desse método é que todo o layout fica num arquivo separado que vale para o site inteiro e só é carregado uma vez pelo navegador. Isto evita a repetição de tags nas páginas e permite alterações mais rápidas no visual do site. 

Neste tutorial escolhemos um layout com quatro áreas: cabeçalho horizontal (onde normalmente entram logotipo e banner), coluna esquerda (menu de navegação principal), coluna central (área de conteúdo e destaques) e coluna direita (navegação secundária, links para parceiros etc.). 

O primeiro passo é criar o arquivo HTML. Dentro do comando “head”, é necessário escrever a seguinte tag: 

<link rel=“stylesheet” href=“estilo.css” type=“text/ css”> 

Ela indica ao browser qual é o documento de estilo que deve ser tomado como referência para o layout (neste caso, “estilo.css”). No corpo do arquivo HTML temos quatro blocos que definem as áreas: 

<div id=“topo”>conteúdo do cabeçalho</div> 

<div id=“esquerda”>conteúdo da coluna esquerda</div> 

<div id=“meio”>conteúdo da coluna central</div> 

<div id=“direita”>conteúdo da coluna direita</div> 

A tag “div” serve como “depósito de conteúdo”, criando camadas que podem ser manipuladas separadamente. Dentro desse depósito, podemos usar normalmente todos os comandos HTML. Note que cada “div” possui um atributo “id” distinto que define as áreas do layout. Assim, já temos no arquivo HTML os quatro blocos de conteúdo. 

Salve o arquivo e teste no browser. Por enquanto as áreas ainda não estão em suas devidas posições e são exibidas uma abaixo da outra. Isso ocorre porque não criamos o documento CSS, que é o responsável por definir a posição de cada bloco na página. Esse será nosso próximo passo. 

A folha de estilo nada mais é do que um arquivo em texto puro com a extensão CSS. Abrimos então o Bloco de Notas e escrevemos os seguintes comandos: 

#topo {
margin: 5px;
height: 80px;
background: silver;
}
#esquerda {
position: absolute;
top: 105px;
left: 10px;
width: 150px;
background: silver;
}
#meio {
margin-left: 170px;
margin-right: 220px;
background: silver;
}
#direita {
position: absolute;
top: 105px;
right: 10px;
width: 200px;
background: silver;
}

O primeiro bloco de comandos é referente ao cabeçalho. Os elementos “margin” e “height” definem, respectivamente, a margem e a altura em pixels. O atributo “background” determina a cor de fundo, mas é opcional e foi incluído apenas para facilitar a visualização. 

A seguir, definimos as três colunas do layout. O bloco da esquerda, que abrigará o menu de navegação, tem largura definida em pixels. A linha “position: absolute” permite que o webmaster determine a posição do bloco por meio de coordenadas. Neste caso, ele está a 105 pixels do topo e a 10 pixels do lado esquerdo da página. Esse procedimento vale também para a coluna da direita. 

O pulo-do-gato está no código usado na coluna do meio. Aqui, definimos apenas as margens esquerda e direita para evitar que a área se sobreponha às outras. Observe que, ao contrário dos blocos da esquerda e da direita, não há largura definida. Dessa forma, a área central é ajustada automaticamente, de acordo com o tamanho da janela do internauta. Caso o usuário redimensione o browser, a página será realinhada, evitando a barra de rolagem na horizontal. 

Salve o documento como “estilo.css” no mesmo diretório do arquivo HTML e faça o teste, redimensionando a janela do browser. Note que as áreas do topo e do meio se adaptam ao novo tamanho, enquanto as colunas da esquerda e da direita mantêm sua largura. Pronto, nosso layout está terminado e agora é só escrever uma carta de despedida para as tabelas HTML.

Seo na Wikipédia: Otimização de Sites, refere-se ao conjunto de estratégias com o objetivo de potencializar e melhorar o posicionamento de um site nas páginas de resultados naturais (orgânicos) nos sites de busca.

Ou seja, SEO deve estar na mente de qualquer editor de site e/ou blog. Ele faz com que o seu site seja achado ais facilmente pelos sites de busca, que apareça no topo das listagens, que atraia mais visitantes, que consiga um maior pagerank e muito mais. E o que você ganha com isso? Visitas, muitas visitas.

É claro que não é um tarefa fácil, você não vai ver o seu site no primeiro lugar do Google da noite para o dia e ganhar 20 mil visitas diárias. Existem até meios escusos para isso, é chamado de Black Hat. Mas que fique claro que esse método não é legal, e você pode ser punido pelos mecanismos de busca, ficando para sempre fora destas listagens. abaixo, você confere as 10 melhores dicas para conseguir os efeitos desejados.

1. Pesquisa de palavra chave é o primeiro passo

Não construa seu site sem antes fazer uma pesquisa de palavras chave usadas pelas pessoas que querem visitar seu site. Gaste um bom tempo nessa tarefa, este não é o primeiro item por acaso, essa pesquisa é de fundamental importância. Utilize ferramentas para pesquisa de keywords, elas vão te dar uma melhor sugestão na hora da escolha.

2. Obtenha informações pela de fontes pela web

Visite os principais sites sobre informações de SEO, um estudo permanente sobre o assunto é importante, novas ferramentas sempre estão sendo criadas e sempre está rolando alguma discussão interessante nos blogs do assunto. Visite, além do mestreSEO, Search Engine Journal, Search Engine Land

3. Atenção ao seu código fonte

Contrua seu site com um código que seja de fácil entendimento pelo motor de busca, quanto mais simples melhor. Utilize Cascading Style Sheets(CSS) para diminuir a formatação da página e leia sobre limpeza de codigo fonte.

4. Construa uma navegação fácil

Faça isso através de links com textos para todas as partes do seu site, os motores de busca não podem seguir links dentro de flash, nem mesmo dentro de javascripts. Os motores de busca gostam de navegação simples.

5. Receba links de sites relevantes

Cada link é um voto, logo quanto mais links apontados para você melhor, porem estes links tem que ter relevância ao assunto, não pode ser qualquer link e quanto mais importante o site linkando para você melhor também, este voto tem um peso maior que os outros.

6. Contrua o sitemap

Contruir um sitemap ajuda os motores de busca a alcançar e indexar sua página, tenha certeza que todas as paginas estão no sitemap. O sitemap também auxilia o usuário a alcançar a página desejada. O Google mantém o Ferramentas para Webmasters, que permite a construção de sitemap.

7. Não esqueça os detalhes técnicos

Contrate um serviço de hospedagem bom com servidores rápidos e estáveis. Os motores de busca não ficam esperando muito para carregar sua página. Pior ainda, eles odeiam quando sua página esta fora do ar, se isso se repetir várias vezes você irá cair de rank com certeza.

8. Acompanhe seu site com web analytics

Há varias opções de web analytics, como o Google Analytics que é grátis, fácil de usar e versátil. Com essa análise você vai descobrir muito sobre seus visitantes, as páginas mais procuradas e as que precisam de melhoria, e vai ajudá-lo a re-otimizar seu conteúdo.

9. Diga aos motores de busca onde você está

Faça a submissão do seu site, isso não fará rankear melhor, mas facilitará os motores de busca chegar até seu site. Google, Yahoo e MSN tem mecanismos para submissão de sites.

10. O conteúdo é o mais importante

Os motores de busca gostam de sites com conteúdos e que são atualizados frequentemente. Por isso escreva bem seu conteúdo e utilize as palavras chaves para cada página.

• Conteúdo rico e completo:
O que interessa para o Google é levar o Internauta ao resultado mais provável da pesquisa. Então, para ganhar muitos pontos no cadastro no Google, seu projeto precisa ter um conteúdo bem completo, com muito texto e quase nenhuma imagem que “atrapalhe” o acesso ao termo da busca.

• Todas as atenções para a estrutura da página:
A página ganha pontos-extra quando a palavra-chave está mais perto do início do código HTML, por que “pressume-se” que é de relavância para o conteúdo. Então dê preferência para poucas imagens no topo e coloque o menu à direita do texto.

• Layout leve e páginas internas pequenas (100Kb max.):
Se o layout do site pesa 80Kb, por exemplo, você terá apenas 20Kb para o conteúdo.
Colocar logomarcas e fotos grandes no meio do texto, nem pensar! O segredo é repartir bem o conteúdo e manter o mínimo possível de imagens que não se relacionem com o assunto. Dica quente: quanto mais páginas sobre um determinado assunto, mais pontos seu site ganha.

• Código HTML impecável:
O Google dá um peso muito grande para a estrutura do código HTML.
Jamais use sites prontos, pois são muito genéricos e a grande maioria não inclue nem 10% das regras mínimas para cadastro no Google. Certifique-se também se o site não foi construído com “Shareware”, ou seja, softwares incompletos destinados para demonstração, porque eles não consideram regras básicas de HTML, como por exemplo abrir e fechar “tags”.

• Palavra-chave no domínio:
Antes de mais nada, responda: Se você quiser encontrar o seu produto numa busca, procuraria por qual termo (palavra-chave)?
Se o seu produto é, por exemplo, “Publicidade Na Internet”, provavelmente o Internauta buscará este termo para encontar sites relacionados ao assunto, por isso registre um dominio que contenha o termo “publicidade na internet”:

www.publicidaderj.com.br ou www.riointernet.com.br.

• Frases-chave no conteúdo:
Espalhe algumas frases-chave pela página, isso não soma pontos, mas evita perdê-los:
*Termo “Publicidade”
Todas as páginas que contenham ” publicidade” e “internet”, ganham 1 ponto.
*Termo “Publicidade na Internet”
Todas as páginas que contenham “Publicidade na Internet”, ganham 2 pontos, já as que contém apenas “publicidade” ou “internet” ganham apenas 1 ponto.

• MetaTags bem definidas:
As Meta Tags são códigos HTML que identificam o site, por que trazem informações como título, descrição, palavras-chave, autor, etc. Nelas também são inseridas as permissões para robots, que são os mecanismos de indexação usados para o cadastro no Google.

• Mapa do Site:
Disponibilize um índice público de hiperlinks para todas as páginas internas do site e inclua um link para o mapa do site no menu. Além de facilitar a navegação para o Internauta, garante que todos Google arquive corretamente todo o seu site.