Página Ejemplo HTML completa

A medida que avances con HTML realiza estos ejercicios sobre HTML básico Tu primer ejercicio fue construir una página con las directrices del html5 vistas hasta el momento

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Zona de Lectura</title>

</head>

<body>

<header>Zona para tus libros</header>

<nav>

<a href="ebooks.htm">E-books</a>

<a href="enpapel.htm">Papel</a>

</nav>

<aside>

<a href="listasenero.htm">Listas Enero</a>

<a href="listasfebrero.htm">Listas Febrero</a>

</aside>

<section>

Nuestra web se dedica a libros eléctronicos y en papel

<article>

El libro electrónico. <br> bla, bla, bla o lorem ipsilum ad hoc rosa rosae

</article>

<article>

El libro en papel. <br> bla, bla, bla o lorem ipsilum ad hoc rosa rosae

</article>

</section>

<footer>Copyleft 2014</footer>

</body>

</html>

Código HTML5 de la página del ejercicio 1.

Si has hecho el ejercicio tendrás algo parecido a esto y si no lo hiciste puedes escribir (copiar y pegar) este código en tu editor y guárdalo con el nombre ejercicio01.htm. Si la abres en un navegador web verás algo un poco simple, no se parece en nada a una página web al uso ¿verdad? No te preocupes, no has hecho nada mal.

Lo que ocurre es que estas etiquetas tan solo definen cada parte en la página. Si lees el código se ve claramante lo que es cada elemento que has escrito: la cabecera, el contenido de la página, el pie... Pero el navegador no lo muestra en bonito, resaltado. Para eso hace falta un poco más de trabajo. Está claro que lo que has hecho es definir la estructura de la página.

Si quieres que esas partes de la página se muestren de forma diferente debes aplicarle valores a sus atributos o aplicarles un estilo CSS. Por ejemplo qis quieres que footer aparezca en un tamaño de letra de 10px y en negrita podrías añadirle un atributo style <footer style="font-size: 10px; font-weight: bold">Copyleft 2014</footer>