29 Sep 09 Iniciando o recorte no HTML 5
Há um tempo atrás meu amigo Césao colocou no blog dele como iniciar um recorte em tabless usando o (X) Html Strict, para ajudar as pessoas que tem essa dificuldade. Pegando carona nesta idéia vou colocar como inciar um recorte em html 5. Lógicamente que aqui esta bem o básico, e a estrutura vai depender de como você desenha seu site.
No (X)Html Strict faziamos assim:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>COMO INICIAR UM RECORTE EM TABLELESS</title> <style type="text/css"> *{margin:0; padding:0;} #container{width:998px; margin:0 auto; text-align:center;} #header{float:left; width:996px; height:40px; border:1px solid black;} #nav{float:left; width:98px; height:100px; border:1px solid blue;} #content{float:left; width:896px; height:100px; border:1px solid red;} #footer{clear:both; height:40px; border:1px solid black;} </style> </head> <body> <div id="container">
<div id="header">TOPO</div> <div id="nav">LATERAL</div> <div id="content">CONTEUDO</div> <div id="footer">RODAPE</div> </div> </body> </html>
No Html5 algumas coisas vão mudar, veja:
<!DOCTYPE html> <html lang="pt-br"> <head> <title>Estrutura inicial do HTML 5</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="stylesheet" type="text/css" href="padrao.css"> <script type="text/javascript" src="html5.js"></script> </head> <body><section id="container"> <header> <h1>Aqui é o topo</h1> </header> <nav> <ul> <li>Menu 1</li> <li>Menu 2</li> <li>Menu 3</li> <li>Menu 4</li> <li>Menu 5</li> </ul> </nav> <section id="content">Conteudo </section> <aside> <span>Lateral</span> </aside> <footer>Rodape</footer> </section> </body> </html>
Destaques para as declarações abaixo:
O Doctype declaramos desta forma: <!DOCTYPE html>
Section: Define cada seção dentro do site.
Header: Define o cabeçalho do site.
Aside: Pode substituir nosso antigo sidebar.
Nav: Define a navegação do site.
Header: Define o cabeçalho.
Obs: O que coloquei é somente o ínicio mesmo.
Para visualizar o exemplo clique aqui
Para fazer o download dos arquivos utilizados clique aqui.
Por enquanto é só pessoal,
Até a próxima.
Marcelo
Reader's Comments
Leave a Comment
Pra quem diz que o HTML 5 é coisa pra daqui hà anos ta bacana!
Parabens pelo post
…
acredito que as id nem eram necessárias
…
Obrigado!
Brother perfeito … muito boa a iniciative de mostrar o que realmente mudou do html4 strict para o html5. D+
Parabéns!
Muito legal essa nova forma
valeu!!
Muito bom, evoluir sempre!
e ficando mais fácil de trabalhar, esperamos que o IE também faça sua parte nessa história.
Abss.