Curso de Tableless (Aula 1)

leia-se:

Curso Claro Desenrolado e Descontraído de Tableless Para Todo Mundo

Isso mesmo. Pra você que não aguenta mais tanta tabela gordurosa cheia de formatação e gambiarras esquisitas, chegou a hora disso começar a acabar! E pra você que quer apenas entender melhor o que está por trás dos sites. Resolvi elaborar minha versão própria de aula tudo de forma muito clara e direta sem rodeios, porque sempre tive raiva – ódio mortal – de aulas/tutoriais/livros que abusam de formalidade, falam muito e fazem entender muito pouco porque não são nada claros. O mundo é da SIMPLIFICAÇÃO!. O objetivo não é fazer você abandonar as tabelas, mas sim utilizá-las da maneira correta. É bom lembrar que o interesse aqui não é fazer ninguém sair trocando as tabelas pelos <divs> do dia pra noite. Tudo exige paciência e muito exercício.

Ah, você nunca viu esse troço estranho? Não se preocupe porque esse curso é para todos, até quem nunca tentou criar nada pra web.

Vamos ao roteiro:

Aula 01

• Tableless?
• Por que / Pra que?
• <div>
• Construindo uma estrutura simples

Aula 02

• Construindo uma estrutura mais elaborada

• Falando sobre CSS

• Diferentes navegadores. Diferentes resultados.

• Comentário pessoal do autor

Tableless?

Table + less. Sem tabelas. Ou seja, nada de <table> para construir a estrutura da página.
Ela é a forma padrão de criação de páginas. Como assim padrão? Vamos lá…

Os padrões da Web

O órgão W3C(link) é um serviço que estipula padrões para o desenvolvimento web e para a forma de se confeccionar páginas.
Criou-se a forma amadora e a forma profissional. Ela diz por exemplo que uma imagem deve ter um “alt” (<img src=”../caminho/logomarca.jpg” alt=”Blog do Henrique”>) ou que um <br/> deve ser assim.

E o que eu uso então? <DIV>. Vou falar sobre isso lá na frente.

E pra que isso? leia abaixo.

Por que / Pra que?

Padrões existem para tornar de entendimento geral determinada coisa. Tornando assim essa coisa manipulável por qualquer tipo de pessoa e de um só jeito.

O tableless existe…

• Pra que você tenha fácil entendimento e manutenção do seu código já que seu uso faz você criar código enxuto e limpo;

• Pra que se tenha uma forma organizada e igual de se trabalhar em qualquer lugar do mundo;

• Pra que as empresas desenvolvedoras de navegadores padronizem suas formas de carregar páginas (o que hoje muitas não fazem)

De quebra, você ganha em banda de tráfego, no momento em que ele reduz o número de informação HTML a ser carregado pelo navegador. Como assim? o site carrega muito mais rápido!

<DIV>

O div é uma tag HTML simples de entender. Ela delimita determinada área da página. Pode conter qualquer tipo de coisa: imagem, objeto flash, texto, outras divs, etc.

como implementa?

<div>isto aqui é o conteúdo da div</div>

Os divs naturalmente ficam um abaixo do outro. Apenas a opção FLOAT:LEFT/RIGHT/NONE/INHERIT do CSS aplicado à ele fará com que por exemplo, ele fique assim:

CÓDIGO:<style type=”text/css”>#div1 { float:left; background-color:#CF2323; width:70px; height:90px; }#div2 { float:left;background-color:#001582; width:70px; height:90px; } </style>

O mundo não é perfeito. Trabalhar com o método Tableless pode lhe causar alguns stresses iniciais. Existe uma diferença entre 2-3 pixels entre Firefox

e Internet Explorer 6.0 , isso quer dizer que podem aparecer resultados diferentes durante seus testes nos dois navegadores. Mas o motor do Internet Explorer 7.0 foi elaborado de forma a se aproximar mais dos padrões da W3C, e se assemelha bastante à do Firefox. Se você está tentando trabalhar de forma profissional com os divs, deve testar no IE 6.0, IE7.0 e no Firefox.

Construindo uma estrutura simples

Nada de Dreamweaver! encorajo o uso abusivo do Bloco de Notas se você quiser aprender realmente. Então, com ele aberto, vamos fazer algo mais ou menos assim:

Vamos às medidas, cores e outros estilos… O css é quem vai desenhar tudo na tela, no momento em que terá MEDIDAS EXATAS do que precisamos.

Vamos à ele:

#geral {
width:600px;
height:350px;
}

#topo {
width:600px;
height:80px;
background-color:#EC0002;
}

#menu {
height:210px;
width:200px;
float:left;
background-color:#006FD8;
}

#conteudo {
width:400px;
height:210px;
background-color:#FFEB01;
float:left;
}

#rodape {
height:60px;
width:600px;
background-color:#007D07;
float:left;
}

Estamos então com o documento HTML estritamente nos padrões W3C criado. Agora a estrutura (os divs) deve ficar clara e fácil de manter.
Temos um topo, um menu, um espaço para o conteúdo e um rodapé para a nossa página já definidos os seus tamanhos e cores ali no CSS.
Agora, vamos à estrutura:

<div id=”geral”>

<div id=”topo”></div>
<div id=”menu”></div>
<div id=”conteudo”></div>
<div id=”rodape”></div>

</div>

Colocamos um DIV para conter todas as nossas seções (menu, topo..). Ele é chamado de container neste caso. Teremos dentro dele, identados em

mesmo nível, as demais. Simples!

O nosso documento então ficaria:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Henrique Araujo – Curso de Tableless (Aula 01)</title>
<style type=”text/css”>

#geral {
width:600px;
height:350px;
}

#topo {
width:600px;
height:80px;
background-color:#EC0002;
}

#menu {
height:210px;
width:200px;
float:left;
background-color:#006FD8;
}

#conteudo {
width:400px;
height:210px;
background-color:#FFEB01;
float:left;
}

#rodape {
height:60px;
width:600px;
background-color:#007D07;
float:left;
}
</style>

</head>

<body>
<div id=”geral”>

<div id=”topo”>Minha logomarca</div>
<div id=”menu”>menu</div>
<div id=”conteudo”>conteúdo</div>
<div id=”rodape”>rodapé</div>

</div>
</body>
</html>

Coloque asas na sua criatividade agora. Invente sua própria página tableless, e boa sorte. Até o próximo post, ou melhor, a próxima aula.