martes, octubre 25, 2011

Tutorial de desarrollo web, Parte III: Estructurando el texto. Encabezados, párrafos y saltos de línea. Entidades

Previously, on The CubeBlog...

La semana pasada hicimos nuestro primer documento HTML, el ejercicio llamado "Hola mundo", y dejé un par de ejercicios propuestos para quien quisiera intentarlos. Los que queráis ver las respuestas a aquellos ejercicios podréis revisarlas en este documento de Google Docs que he preparado, método que he decidido usar para mostrar las soluciones de los ejercicios todas las semanas.
Bien, una vez hayáis revisado (o no) las soluciones, pasaremos a ver algo nuevo. Aquellos que hayan hecho los ejercicios se podrán haber encontrado con un problema a la hora de hacerlo: los saltos de línea que se introduzcan en el documento HTML no son reconocidos por el navegador. Quien haya sido lo bastante avispado, se habrá dado cuenta de que si la etiqueta "p" era un párrafo, podía encerrar cada línea entre marcas "p" y así solucionar dicho problema. De hecho, si revisan la solución, así es como lo he hecho yo también, y como pretendía que lo resolvieran. Sin embargo, podrán observar que los saltos de línea creados por la etiqueta "p" son bastante grandes, dejando una línea de por medio, lo cual en algunos casos puede ser bastante antiestético. Aunque existe otra manera de "solucionar" esto, lo más correcto sería introducir un salto de línea dentro del propio párrafo (aunque la definición de párrafo cotidiana implique que no tengan saltos de línea, en un documento HTML sí que pueden tenerlos). Y aquí comienza nuestro capítulo de esta semana.
Hay una serie de caracteres que el HTML ignora, entre ellos el salto de línea, que, aunque a nuestros ojos no lo parezca, para el ordenador es un caracter. De este modo, si queremos que el ordenador introduzca un salto de línea podemos, como ya hemos dicho, usar las etiquetas "p" (u otras con propiedades similares de las que hablaremos más tarde) o introducir una etiqueta de "salto de línea", la etiqueta <br/>.
Vemos, en primer lugar, que esta etiqueta tiene una diferencia de las etiquetas que hemos visto hasta ahora, ya que contiene una barra (/) al final en vez de al comienzo, como las etiquetas de cierre que hemos visto hasta ahora. El motivo es que, a diferencia de las etiquetas que hemos visto hasta ahora, la etiqueta "br" no tiene etiqueta de cierre y, de hecho, en los lenguajes HTML antiguos se escribía simplemente <br>. Sin embargo, los nuevos estándares del HTML exige que toda etiqueta se cierre, de modo que etiquetas como la "br" necesitan "cerrarse a sí mismas" introduciendo una barra al final de la etiqueta.
Pero basta de teoría, vamos a ver cómo se debería usar la etiqueta "br".

<p>Esto es una línea.<br/>Esta es otra línea.</p>

Vemos en este pequeño fragmento de código cómo podemos introducir la etiqueta "br" dentro de un párrafo para forzar un salto de línea, teniendo como resultado algo como esto:
Esto es una línea.
Esta es otra línea.
Como vemos, nuestra segunda línea se escribe justo debajo de la anterior, a diferencia de lo que pasaba cuando poníamos varias etiquetas "p" seguidas. Como anotación para hacernos la vida más fácil a la hora de escribir código, el hecho de que en HTML los saltos de línea sean ignorados nos puede ayudar a organizar nuestro código más fácilmente. Por ejemplo, el anterior código podríamos escribirlo así:

<p>Esto es una línea.<br/>
Esta es otra línea.</p>

El resultado de este código sería exactamente el mismo que el del anterior, ya que el navegador ignorará ese salto de línea. El dónde poner la etiqueta "br", si al final de la primera línea, al principio de la línea siguiente, o incluso en una línea intermedia creada exclusivamente para esto será a gusto del desarrollador, como le parezca más cómodo para entenderlo después.
Ahora que los saltos de línea han quedado claros (o eso espero), el siguiente paso es aprender a hacer "encabezados". Como ya he explicado en alguna ocasión, el HTML, como lenguaje de marcado, se encarga de estructurar documentos, y una de las herramientas que nos da para este propósito es la capacidad de hacer hasta seis tipos distintos de encabezados, los cuales, como "regalo" por parte del lenguaje, nos cambiarán el tamaño de la fuente, según la importancia del encabezado en cuestión. Estas etiquetas son, por orden de mayor a menor importancia: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>.
Usaremos estas etiquetas del mismo modo que usamos la etiqueta "p", es decir, pondremos la etiqueta de apertura del encabezado que queramos (del 1 al 6 según su importancia), escribiremos texto y luego escribiremos la correspondiente etiqueta de cierre. Lo veremos mejor con un ejemplo.

<h1>Título</h1>
<h2>Subtítulo</h2>

Igual que con el "p", estas etiquetas se separan del resto de los contenidos creando un par de saltos de línea. El resultado del código antes escrito sería éste:
Vemos cómo las letras han aumentado para corresponderse con la importancia del encabezado que representan. De esta manera, los seis encabezados tendrían estos tamaños:
IMPORTANTE: Los encabezados NUNCA deben ser usados para cambiar el tamaño de la fuente, eso aprenderemos a hacerlo más adelante. El objetivo de las etiquetas de encabezado es SÓLO el de crear encabezados, no sólo porque así lo dice el W3C, sino porque los propios motores de búsqueda usan los contenidos de los encabezados para clasificar las páginas.
Como último punto de nuestro artículo de esta semana, vamos a hablar de las entidades. Como ya dije antes, existen determinados caracteres que el HTML no representa en pantalla, si bien por "comodidad" para el programador (como es el caso de los saltos de línea), si bien porque tiene esos caracteres reservados para código. También existen caracteres que el HTML podría interpretar mal en algunos ordenadores, como podrían ser nuestras vocales con tilde o nuestra letra eñe. Para ello, el HTML tiene unos códigos llamados "entidades" los cuales siempre comienzan con el caracter inglés & (que es, de por sí, uno de los caracteres reservados) y terminan con un punto y coma. A continuación les daré una pequeña lista de caracteres que podrían interesarles en un comienzo:
&amp;&&nbsp;
&lt;<&gt;>
&Aacute;Á&aacute;á
&Eacute;É&eacute;é
&Iacute;Í&iacute;í
&Oacute;Ó&oacute;ó
&Uacute;Ú&uacute;ú
&Ntilde;Ñ&ntilde;ñ
Mención especial se merece el símbolo &nbsp; porque su campo parece estar "vacío", pero en realidad se trata de un espacio, ya que el HTML, aunque no ignora los espacios, sólo acepta uno seguido, de modo que, aunque el usuario escriba muchos espacios uno tras otro, los tomará todos como uno. Si el desarrollador desea escribir varios espacios seguidos, deberá usar entidades de tipo &nbsp; para ello. Y, como todo se ve mejor con un ejemplo, veamos cómo se usarían estos símbolos:

<p>Aqu&iacute; van varios espacios &nbsp;&nbsp;&nbsp;y aqu&iacute; terminan.</p>


Este código, una vez abierto en navegador, se vería así:
Y hasta aquí llega la tercera entrega de este tutorial, así que, a continuación, y como se convertirá en costumbre, un par de ejercicios para poner en práctica todo lo que hemos aprendido hasta ahora.

EJERCICIO 1
Para los ejercicios de esta semana retomaremos los ejercicios de la semana pasada. En primer lugar, el archivo "quijote.html" lo modificaremos de modo que quede así:

Además, todas las tildes y eñes deben de ser sustituidas por sus entidades correspondientes, para asegurarnos que en todos los ordenadores estos caracteres aparecen correctamente.
Dándoles de paso una pequeña pista, comentar que el inicio de cada línea de párrafo normal (no encabezado) tiene tres espacios al comienzo, algo que, aunque no es incorrecto, no haremos nunca salvo en estos ejercicios de prueba, ya que existen maneras de indentar texto automáticamente.

EJERCICIO 2
En segundo lugar, también modificaremos el ejercicio "tabla3.html". En esta ocasión, debe de tener un encabezado que diga "Tabla del 3", la tabla debe ir en un único párrafo con saltos de línea, y cada caracter debe de estar separado del siguiente (en su misma línea) 3 espacios (lo cual, como en el caso del indentado, también se podría hacer automáticamente, pero tendremos que reducirnos a las herramientas que conocemos).

Y eso es todo de momento. Igual que la semana pasada, sabéis que podéis enviarme vuestras soluciones o dudas a través de privados en cualquier red social, pero mejor no lo hagáis de forma pública. ¡Hasta la semana que viene!

No hay comentarios: