Ya se ha avanzado un largo trecho desde el comienzo de esta serie de artículos, poco a poco el lenguaje HTML se ha revelado sencillo y potente, con posibilidades prometedoras para muchos objetivos, desde texto destinado a la lectura hasta apuntes o material didáctico. Hoy toca un tema de gran utilidad y de uso casi obligatorio en todos los documentos. Me refiero a las listas.

Una lista no es más que una secuencia de elementos, ordenados o no, que se enumeran separados del cuerpo del texto. Es lo que habitualmente aparece con un sangrado mayor y con una raya o un número delante de cada párrafo. Dado que el control del formato en HTML es muy sencillo y se limita a cuatro cosas que después el programa visualizador se encarga de organizar, hacer una enumeración de cosas sería muy compleja sin estas etiquetas específicas para listas. Empezamos con lo más sencillo, las listas sin ordenar:

LISTAS NO ORDENADAS

Comienzan y terminan con la pareja de etiquetas <ul> y </ul>, fácil de recordar teniendo en cuenta que proviene de unordered list. Todo lo que esté dentro de estas dos etiquetas será considerado una lista y cada uno de los elementos estará precedido de una marca.

Ahora bien, ¿dónde empieza cada uno de los elementos? Para eso hay una etiqueta <li> (list item) que no necesariamente ha de tener una compañera de cierre. El siguiente código es un ejemplo completo de lo que es una lista sin ordenar:

Lista de la compra:
<ul>
    <li>Manzanas.</li>
    <li>Plátanos.</li>
    <li>Comida para el gato.</li>
    <li>Nueces.</li>
    <li>Un juguete para el gato.</li>
    <li>Golosinas para el gato.</li>
</ul>

Copia y pega el código en un documento HTML y verás qué contento se pone el gato. También verás que todos los elementos enumerados tienen un sangrado mayor que el resto del texto y están precedidos por una marca. Esa marca puede definirse si se desea de la siguiente manera dentro de la misma etiqueta de elemento:

<li type="disc"> muestra un círculo relleno de color (del mismo color del texto, se entiende).
<li type="circle"> muestra un círculo sin relleno, es decir, una circunferencia.
<li type="square"> muestra un cuadrado del mismo tamaño sin relleno.

Lamentablemente no hay un modo que yo conozca para formatear listas «a la española», con un guion en lugar de un cuadradito o un circulito. Si alguien conoce el modo de hacerlo, que nos informe a todos en los comentarios.

Por último, una apreciación, las listas son anidables, es decir, dentro de una lista se puede comenzar otra:

Lista de la compra:
<ul>
    <li>Fruta:
<ul>
    <li>Manzanas.</li>
    <li>Plátanos.</li>
    <li>Nueces.</li>
</ul>
</li>
    <li>Para el gato:
<ul>
    <li>Comida para el gato.</li>
    <li>Un juguete para el gato.</li>
    <li>Golosinas para el gato.</li>
</ul>
</li>
</ul>

Lo normal es que el programa que muestra el código HTML, habitualmente un navegador de internet, otorgue diferente categoría a la lista primaria y a las secundarias y les asigne una marca diferente para distinguir unas de otras.

Este es el resultado del ejemplo anterior:

Lista de la compra:

  • Fruta:
    • Manzanas.
    • Plátanos.
    • Nueces.
  • Para el gato:
    • Comida para el gato.
    • Un juguete para el gato.
    • Golosinas para el gato.

LISTAS ORDENADAS

Una lista ordenada es exactamente lo mismo que una lista sin ordenar, pero en lugar de tener una marca en cada elemento tiene un número que aumenta correlativamente en una unidad con cada elemento. Lo que viene siendo una lista numerada de toda la vida. El funcionamiento es idéntico a las listas anteriores, solo que la etiqueta que comienza una lista numerada es <ol>, con su correspondiente compañera </ol>. Los elementos también van introducidos por <li>.

En el caso de una lista ordenada (o numerada) la etiqueta <li> también tiene un posible argumento: el número en el que comienza la secuencia (por omisión, el 1):

<li value="3"> comienza la cuenta en 3. A partir de ahí, el próximo elemento marcado con <li> estará antecedido por un 4, el siguiente con un 5, etc.

DEFINICIONES

La última parte de esta entrada es la destinada a la definición de conceptos. Una cosa es una lista y otra distinta es una relación de asuntos que se van a definir. Estos han de estar resaltados y sangrados, como en una lista, pero al mismo tiempo es necesario que el párrafo que sigue a cada uno de los elementos no sea considerado un párrafo del texto normal y permita distinguir correctamente cada una de las definiciones.

Dada la complejidad del planteamiento, una lista de definiciones necesita una etiqueta más que el resto de listas de más arriba. Primero, una etiqueta que establezca el tipo de lista que sigue: <dl> (de definition list). Anidada dentro de ésta, una que distinga los elementos: <dt> (es el equivalente a la anterior <li> y proviene de definition term). Finalmente, la etiqueta que separa los elementos de la lista, es decir, los conceptos que se desea definir, de la definición misma: <dd> (definition description). Por supuesto, cada una de las anteriores etiquetas tiene su contrapartida de cierre.

Y, como siempre, un ejemplo para ver el código completo de una lista de definiciones:

A continuación se ofrece
una descripción de los conceptos
más importantes:
<dl>
    <dt>Concepto 1:</dt>
    <dd>El concepto 1 es el más
importante, por eso aparece
el primero en la lista, seguido
por el Concepto 2.</dd>
    <dt>Concepto 2:</dt>
    <dd>El Concepto 2 es menos
importante que el 1 y por eso
va después de este.</dd>
    <dt>Concepto 3:</dt>
    <dd>En realidad, el Concepto
3 no tiene ninguna importancia,
ya no digamos el 4 o el 5. Son
chorradas que se escriben
para rellenar.</dd>
</dl>

Cuyo resultado es:

A continuación se ofrece
una descripción de los conceptos
más importantes:

Concepto 1:
El concepto 1 es el más
importante, por eso aparece
el primero en la lista, seguido
por el Concepto 2.
Concepto 2:
El Concepto 2 es menos
importante que el 1 y por eso
va después de este.
Concepto 3:
En realidad, el Concepto
3 no tiene ninguna importancia,
ya no digamos el 4 o el 5. Son
chorradas que se escriben
para rellenar.

Y esto es todo por hoy en esta entrada original de Bokunoshumi.

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s