Marcelo Abib Cardoso » Html5 http://marcelo.todoinfo.com.br SQL Server, Dicas, Rails, Mobile Wed, 23 Mar 2011 17:41:01 +0000 http://wordpress.org/?v=2.8.4 en hourly 1 Iniciando o recorte no HTML 5 http://marcelo.todoinfo.com.br/iniciando-o-recorte-no-html-5/ http://marcelo.todoinfo.com.br/iniciando-o-recorte-no-html-5/#comments Tue, 29 Sep 2009 23:18:40 +0000 Marcelo Abib Cardoso http://marcelo.todoinfo.com.br/?p=149

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 &eacute; 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

]]> http://marcelo.todoinfo.com.br/iniciando-o-recorte-no-html-5/feed/ 3