Maquetar la página: 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.
Cuando se habla de elmentos de linea (o inline) se trata de elmentos que aparecen siguiendo el flujo del texto sin cambiar de linea. MIentras que la disposición en bloque introduce un cambio de linea. Por defecto cada elemento pertenece a uno u otro tiupo, pero este comportamiento puede cambiarse mediante los estilos CSS, concretamente mediante la propiedad display: puede ser entre otras block, inlline-block, flex....
<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 tipo de etiquetas se puede cerrar con />
(propio de XHTML) como final en lugar de un solo >. No se debe usar para introducir lineas en blanco para separar bloques de texto, para eso es mejor usar CSS, concretamente la propiedad margin.
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. Tamoco puede contener elementos de lista (li, ol) ni estar contenido en una lista. El sentido de esta etiqueta es mostrar texto agrupado relacionado entre si.
<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>
<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 en formato digital</span> que puede se leído mediante un dispositivo electrónico.
</p>
<div style="font-weight: bold">La tecnología también entra en la literatura</div>
<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áginas.<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.</p>
</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 ejercicio01a.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>. Observa como el bloque <div style="font-weight: bold">La tecnología... está escrito en línea pero crea un bloque que rompe el flujo del texto creando una nueva linea, a diferencia de span que se mantiene en el sitio. A diferencia del párrafo el bloque div admite bloques hijos. Los div,s son bloques todo terreno.
Con los estilos CSS estas características de los elementos de la página web pueden cambiarse y adaptarlo a las necesidades del documento concreto. Incluído por ejemplo la ruptura de linea que caracterizan a los elementos tipo bloque.
<html>
<head>
<meta charset="utf-8">
<title>Zona de Lectura</title>
</head>
<body>
<div>Defino un boque div normal como este</div>
y ves que rompe la linea de texto.<br>
Sin embargo
<div style="display:inline"><strong>Este actua como un elemento span</strong></div> en linea
</body>
</html>