<!DOCTYPE html>
<html lang="es">
<head>
<title>XXX</title>
<meta charset="utf-8">
<meta name="description" content="xxx">
<meta name="keywords" content="xxx,xxx,xxx">
<link rel="stylesheet" href="css/estilos_04.css">
</head>
<body>
<header><h1>Bienvenidos a xxx</h1></header>
<nav>
<ul>
<li>Principal</li>
<li>Fotos</li>
<li>Vídeos</li>
<li>Contactos</li>
</ul>
</nav>
<section id="contenedor">
<section id="contenido">
<article>xxx</article>
<article>xxx</article>
<article>xxx</article>
</section>
<aside>
Lateral derecho
</aside>
</section>
<footer>
Pie de la página
</footer>
</body>
</html>
Elementos nuevos en HTML5:
http://www.w3schools.com/html/html5_new_elements.asp
-----------------------------------------------
EJEMPLO SIMPLE:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>CSS: Página 1 con tilde</title>
<link rel="stylesheet" type="text/css" href="css/estilos_01.css">
</head>
<body>
<header>Bienvenidos a DSSJ</header>
<nav>Este es un menú de navegación</nav>
<section id="contenedor">
<section id="contenido">
Esta es la sección principal
</section>
<aside>
Lateral de noticias
</aside>
</section>
<footer>
Este sitio web fue creado por xxx
</footer>
</body>
</html>
estilos_01.css:
body {
background-color:#333;
color:#FFF;
font-size:2.0em;
}
aside,header,nav,section#contenedor,section#contenido,footer {
border-radius: .5em;
background-color:#666;
text-align:center;
margin: .3em auto;
padding: .3em;
width:95%;
}
header {
font-size:2.5em;
}
footer {
font-size:0.5em;
}
aside,section#contenido {
background-color:#999;
width:65%;
display:inline-block;
min-height:200px; /* para cuando se redimensione nunca sea menor de 200px */
vertical-align:top;
}
aside {
width:30%;
}
No hay comentarios:
Publicar un comentario