La plantilla Html5 sobre la que aprender CSS3
Vimos en el curso de Html5 que todo aquel código Html lo usaríamos para añadir el contenido propiamente dicho y que, con CSS le dariamos forma y color, cierto? Pues vamos a tomar prestado el código de ejemplo que resultó del curso de Html5 y trabajaremos sobre él, aplicándole estilos CSS3 para darle color mientras aprendemos todas esas nuevas herramientas de estilo. Te parece?
Para ello, en la parte de tu disco dura que quieras, crea una carpeta llamada "Curso CSS 3". Crea un documento nuevo dentro de esa carpeta, llamado index.html y copia todo el código Html de aquí debajo.
Recuerda que para crear ese archivo nuevo y pegar código en él, puedes usar (nunca el Word de microsoft por favor!!!) el block de notas de Windows o mejor aún, el Sublime Text 2.
<html lang="es">
<head>
<meta charset="utf-8" />
<script src="http://www.comocreartuweb.com/modernizr.js"></script>
<title>Titulo</title>
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<div id="centrado">
<header>
<hgroup>
<h1>(( TITULO ))</h1>
<h2>(( DESCRIPCION DE LA WEB ))</h2>
</hgroup>
<div id="logotipo">(( LOGOTIPO ))</div>
</header>
<id ="contenido">
<nav>
<h2>Menú Navegación</h2>
<ul>
<li>Sección 1</li>
<li>Sección 2</li>
<ul>
<li>Subección A</li>
<li>Subección B</li>
<li>Subección C</li>
</ul>
<li>Sección 3</li>
<li>Sección 4</li>
<li>Sección 5</li>
<li>Sección 6</li>
</ul>
</nav>
<aside>
(( ANUNCIO PUBLICITARIO ))
</aside>
<section id="textos">
<h2>Ultimas Novedades</h2>
<p>(( BLA BLA BLASES ))</p>
</section>
<section id="izquierda">
<h2>Ultimas Novedades</h2>
<article>(( NOVEDAD UNO ))</article>
<article>(( NOVEDAD DOS ))</article>
<article>(( NOVEDAD TRES ))</article>
</section>
<section id="centro">
<h2>Temas Populares</h2>
<article>(( POPULAR A ))</article>
<article>(( POPULAR B ))</article>
<article>(( POPULAR C ))</article>
</section>
</div>
<footer>
<section id="copyright">(( Datos Copyright ))</section>
<section id="contacto"> (( Datos de Contacto ))</section>
<section id="enlaces"> (( MapaWeb, Política, etc. ))</section>
</footer>
</div>
</body>
</html>
Si leiste bien el curso de Html5, te sonará casi todo lo de arriba. Me he permitido añadir algunos elementos como una lista, para luego aplicarle algunos estilos. También he añadido un link en la cabecera, apuntando a la hoja de estilos que aún hemos de crear y, a un archivo llamado modernizr del que os hablaré más tarde y que sirve para evitar problemas con algunos navegadores antiguos y malvados. Por lo demás es como el ejemplo creado en aquel curso de Html5.
Ya que estamos en la carpeta recien creada y nombrada "Curso CSS 3", crea otro archivo vacio dentro de la misma y ponle de nombre "estilos.css". Será nuestra hoja de estilos para esta página de ejemplo.
:
