El codigo de partida HTML5 es:
<!DOCTYPE html>El codigo basico de la hoja de estilos o CSS (estilo.css) seria asi:
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="description" content="Ejemplo Html5">
<meta name="keywords" content="HTML5, CSS">
<title>Plantilla de html5</title>
<link rel="stylesheet" href="estilo.css">
</head>
<body>
<header>
<h1>Titulo principal de la web</h1>
</header>
<nav>
<ul>
<li>inicio</li>
<li>acerca de</li>
<li>contacto</li>
<li>blog</li>
</ul>
</nav>
<section>
<article>
<header>
<hgroup>
<h1>Titulo primer mensaje</h1>
<h2>Subtitulo del primer mensaje</h2>
</hgroup>
</header>
<p>Texto del primer mensaje</p>
<figure>
<img src="#" alt="imagen">
<figcaption>Imagen del primer mensaje</figcaption>
</figure>
<footer>
<p>comentarios pie primer mensaje</p>
</footer>
</article>
<article>
<header>
<hgroup>
<h1>Titulo segundo mensaje</h1>
<h2>Subtitulo del segundo mensaje</h2>
</hgroup>
</header>
<p>Texto del segundo mensaje</p>
<figure>
<img src="#" alt="imagen2">
<figcaption>Imagen del segundo mensaje</figcaption>
</figure>
<footer>
<p>comentarios pie segundo mensaje</p>
</footer>
</article>
</section>
<aside>
<blockquote>Cita en barra lateral</blockquote>
</aside>
<footer><p>Derechos reservados 2016</p></footer>
</body>
</html>
*{Con lo que obtendriamos la siguiente web:
margin: 0 auto;
max-width:960px;
}
header h1{
background-color: grey;
margin:10px;
}
nav {
}
section{
float:left;
width: 70%;
padding: 5px;
}
aside {
float:right;
width: 25%;
padding: 5px;
background-color: grey;
border-radius: 15px 20px;
}
footer{
clear:both;
width: 100%;
padding: 5px;
margin: 5px;
background-color: grey;
border-radius: 15px 20px;
}
Espero os sea util. Gracias.
No hay comentarios:
Publicar un comentario