Criando um layout basico em HTML5
Este artigo pretende ensinar a você, caro leitor, como criar um layout padrão para o seu site, utilizando HTML5. Vou assumir que você já conhece o básico de HTML, portanto vamos direto para a criação do layout usando as novas tags semânticas do HTML5.
Essa é a estrututa básica do nosso layout. Se você abrir este arquivo no navegador o layout ficará “corrido” na tela pois ainda não fizemos a estilização da estrutura (ver exemplo).
<!DOCTYPE html>
<html>
<head>
<title>Layout em HTML 5</title>
</head>
<body>
<header><h1>Cabeçalho</h1></header>
<section>
<nav>
<h5>Menu</h5>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</nav>
<article>
<h2>Conteúdo</h2>
</article>
</section>
<footer><p>Rodapé</p></footer>
</body>
</html>
Incluindo o estilo da nossa página, o nosso layout já começa a “tomar forma” (ver exemplo).
<!DOCTYPE html>
<html>
<head>
<title>Layout em HTML 5</title>
<style>
nav {background: #eee; float: left; width: 30%;}
article {background: #555; float: left; width: 70%;}
</style>
</head>
<body>
<header><h1>Cabeçalho</h1></header>
<section>
<nav>
<h5>Menu</h5>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</nav>
<article>
<h2>Conteúdo</h2>
</article>
</section>
<footer><p>Rodapé</p></footer>
</body>
</html>
Aqui percebemos um “problema”. O nosso rodapé fica preso ao conteúdo, ao lado do menu. Para corrigir isso, incluímos uma div no nosso código, dividindo o rodapé do corpo do layout. Vale ressaltar que, apenas, incluir a div não resolverá o problema, temos que inserir o atributo “clear: both” na estilização dessa div para que a mágica aconteça. Abaixo o código com a correção (ver exemplo).
<!DOCTYPE html>
<html>
<head>
<title>Layout em HTML 5</title>
<style>
nav {background: #eee; float: left; width: 30%;}
article {background: #555; float: left; width: 70%;}
div {clear: both;}
</style>
</head>
<body>
<header><h1>Cabeçalho</h1></header>
<section>
<nav>
<h5>Menu</h5>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</nav>
<article>
<h2>Conteúdo</h2>
</article>
</section>
<div> </div>
<footer><p>Rodapé</p></footer>
</body>
</html>
Pronto, seu layout está pronto. Você pode brincar um pouco mais, mudando as cores das tags, aplicando margin, padding, etc…
Comentarios
Participe da conversa
Os comentarios passam por moderacao antes de aparecer no artigo.
Carregando comentarios...