Lineas y bloques

Una vez decidida y escrita la estructura de la página web toca formatearla para que aparezca en el navegador de una manera clara, atractiva y fácil de utilizar. Toca ir viendo etiquetas HTML básicas, si ya las conoces esto puede servirte de repaso o te lo saltas directamente.

<br> o <br />

Etiqueta que rompe el flujo del texto con un salto de linea. No define ningún bloque como el párrafo. No forma una unidad. Es una etiqueta individual, no tiene cierre. Este tipoe de etiquetas se puede cerrar con /> como final en lugar de un solo >

<p></p>

Etiqueta de bloque para encerrar un párrafo. Todo lo encerrado se muestra en un bloque que rompe el flujo de texto,. con una linea en blanco antes y después. No se pueden anidar, es decir, un párrafo no puede contener otros párrafos

<div></div>

Etiqueta que define un bloque. Todo su contenido se comporta como un todo compacto. Solo se usa para dar formato al documento mediante estilos CSS. Antes de aparecer las etiquetas de estructura (header, section, etc) se usaba este elemento como marca de estructura. Con HTML5 esta etiqueta define un bloque genérico. Pueden anidarse, un bloque div puede contener otros bloques div

<span></span>

Etiqueta que define un bloque en linea, es decir, que no va acompañado de saltos de linea ni antes ni después, como ocurre con los dos anteriores. Su contenido se comporta como un todo compacto. Se usa para dar formato a parte del documento mediante estilos CSS y/o para identificar un bloque del contenido.

Con estas etiquetas vamos a darle un poco de formato a nuestra página de libros. Vamos a crear párrafos, líneas y algún bloque div sin más pretensiones.

<!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><br>
<a href="enpapel.htm">Papel</a>
</nav>
<aside>
<p><a href="listasenero.htm">Listas Enero</a></p>
<p><a href="listasfebrero.htm">Listas Febrero</a></p>
</aside>
<div>
<section>
<header>Presentación</header>
<p>Nuestra web se dedica a libros eléctronicos y en papel</p>
<article>
<header>El libro electrónico. </header>
<p>El libro electrónico es un <span style="font-weight: bold">documento digital</span> que permite leer un texto mediante un ordenador. <p>
Habitualmente se usa un ordenador específico consistente en una pantalla de 7 a 10 pulgadas con solo botones de navegación para moverse por las págnas.<br>
Estos lectores de libros electrónicos (llamados abreviadametne ebook o libros electrónicos) inclluyen utilidades como señaladores de página y sistemas para escribir anotaciones.
</article>
<article>
<header>El libro en papel.</header>
<p>Es un documento escrito en papel que no necesitra ningún sistema anejo para ser leído</p>
<p>Los libros en papel tienen un coste elevado en comparación con los llamados libros electrónicos y son mnás difíciles de reproducir. Su valor suele estar en el valor de lo clásico, lo vintage<br>
Hay opiniones que aseguran que el libro en papel está en vías de extinción y entonces ¿qué pondremos en las estanterías de Ikea?</p>
</article>
</section>
</p>
<footer>Copyleft 2014</footer>
</body>
</html>
Codigo HTML de la página ejercicio01.htm
Escribelo en tu editor de texto, llámale ejercicio01.htm y ábrelo con tu navegador verás algo como esto. No es una maravilla pero ya has comprobado los efectos de las etiquetas <p> y <br> las de bloque <span> o <div>.