EJEMPLO MAQUETACION WEB

Recuperado de: http://ejemplocodigo.com/ejemplo-html5-maquetacion-de-una-pagina

Ejemplo de código fuente en HTML5 para maquetar una página junto con CSS, con sus respectivas etiquetas nuevas que trae HTML5.

Descripción del ejemplo

En este ejemplo vamos a ver cómo se maqueta una página en HTML5 junto con CSS, usando las nuevas etiquetas que nos proporciona HTML5 como son:

<header>…</header>
<section>…</section>
<aside>…</aside>
<figure>…</figure>
<figcaption>…</figcaption>
<footer>…</footer>

Código HTML5

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>EJEMPLO MAQUETACIÓN EN HTML5</title>
<link rel="stylesheet" href="css/estilo.css">
</head>

<body>

<header>
<img src="Media/ejemplo-logotipo.gif" width="189" height="57" alt="logo" />
<h1>EJEMPLO MAQUETACIÓN EN HTML5 - Maqueta #1</h1>
</header>

<section>
<figure>
<img src="Media/Koala.jpg" width="200" height="200" alt="foto" />
<figcaption>Figura: descipción foto</figcaption>
</figure>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare sapien ac nibh vulputate feugiat. Morbi euismod velit sit amet libero volutpat ultrices in quis sem. Sed sit amet placerat sem. Curabitur vitae lectus nec purus accumsan faucibus. Donec vitae volutpat tortor. Suspendisse tempor rutrum urna, in consequat est tincidunt vitae. Cras et ligula at felis placerat tempor. Fusce elementum metus non justo luctus iaculis.</p>

<p>Donec ligula arcu, sagittis lacinia nibh et, consequat gravida turpis. Aenean nec scelerisque felis. Integer nec odio sed lorem mattis rhoncus quis quis nibh. Praesent non fringilla nisi. Duis porta placerat mattis. Aenean in mollis odio, at egestas massa.
Quisque in lectus magna. Vestibulum vel faucibus massa, vel varius tortor. Maecenas et laoreet neque, ut semper neque. Suspendisse aliquet, nisl vel pharetra ultricies, elit felis molestie sem, ac scelerisque turpis tortor non lacus.</p>

</section>

<aside>
<p>Contenido Relacionado</p>
</aside>

<footer>
<a href="http://www.ejemplocodigo.com">www.ejemplocodigo.com</a>
</footer>

</body>
</html>

Código CSS

html,body {
height:100%; }

header {
display:block;
background:#286af0;
padding:10px 0px; }

section {
width: 79%;
background: #ccc;
float: left; overflow: auto;
padding-bottom: 60px;
padding-top:30px; }

aside {
float: right; border: 1px solid red;
width: 19%; border: 1px solid red; /*Si quisieramos ocultar el contenido relacionado pondriamos visibility a hidden*/ /*visibility: hidden;*/ }

footer {
position: relative;
margin-top: -50px; height: 40px;
padding:5px 0px;
clear: both; background: #286af0;
text-align: center;
color: #fff; }

figure {
display: table;
margin: 0 auto; }

Ver ejemplo

Siguiente: Referencias