HTML. Unidad 4. Listas.

Introducción

Ahora volvamos nuestra atención hacia las listas. Las listas están en todos los aspectos de nuestra vida: desde la lista de compras a la lista de instrucciones que sigues inconscientemente para llegar a casa todos los días, o las listas de instrucciones que sigues en estos tutoriales. Las listas están en todos lados en la web también y hay tres diferentes tipos de las que nos vamos a ocupar.

Listas no ordenadas (elemento <ul>)

Las listas no ordenadas se usan para marcar listas de artículos cuyo orden no es importante. Tomemos como ejemplo una lista de compras:

leche
huevos
pan
hummus

Utilizando HTML, esa misma lista se mostrará de la siguiente forma:

  • leche
  • huevos
  • pan
  • hummus

Para conseguir ese resultado y mostrar la lista con viñetas, cada vez que creemos una lista no ordenada, debemos utilizar el elemento <ul> (unordered list) para agrupar todos los artículos dentro de la lista. A continuación deberemos encerrar cada artículo con un elemento <li> (list item):

<ul>
  <li>leche</li>
  <li>huevos</li>
  <li>pan</li>
  <li>hummus</li>
</ul>

Listas ordenadas (elemento <ol>)

Las listas ordenadas son aquellas en las que el orden de los elementos  importa. Tomemos como ejemplo una lista de instrucciones para seguir un itinerario:

Conduce hasta el final de la calle
Gira a la derecha
Sigue derecho por las dos primeras glorietas
Gira a la izquierda en la tercer glorieta
El colegio está a la derecha, 300 metros más adelante

Utilizando HTML, esa misma lista se mostrará de la siguiente forma:

  1. Conduce hasta el final de la calle
  2. Gira a la derecha
  3. Sigue derecho por las dos primeras glorietas
  4. Gira a la izquierda en la tercer glorieta
  5. El colegio está a la derecha, 300 metros más adelante

La estructura de marcado es la misma que para las listas no ordenadas, excepto que debes delimitar los elementos de la lista con una etiqueta <ol> («ordered list»), en lugar de <ul>:

<ol>
  <li>Conduce hasta el final de la calle</li>
  <li>Gira a la derecha</li>
  <li>Sigue derecho por las dos primeras glorietas</li>
  <li>Gira a la izquierda en la tercer glorieta</li>
  <li>El colegio está a tu derecha, 300 metros más adelante</li>
</ol>

Ejercicio propuesto: Receta de hummus

Llegados a este punto de esta unidad, tienes toda la información necesaria para marcar la página de ejemplo con una receta que aparece a continuación. Utilizando dicho texto, crea un nuevo fichero y utiliza las etiquetas adecuadas para mejorar el formato con el que se muestra la receta.

Note: Debes utilizar <h1> para el título principal, <h2> para el resto de títulos, <p> para los párrafos, <ul> para los ingredientes, y <ol> para las instrucciones. Si tienes dudas, puedes consultar el ejemplo completo en el repositorio de Github: text-complete.html.
Receta rápida de hummus

Con esta receta puedes conseguir un hummus rápido y sabroso, sin ensuciar. Ha sido adaptado a partir de varias recetas diferentes que he leído a lo largo de los años.

El hummus es una deliciosa pasta espesa que se usa mucho en platos griegos y del Medio Oriente. Es muy sabrosa y se puede combinar con ensalada, carnes a la brasa y pan de pita.

Ingredientes

1 lata (400g) de garbanzos
175g de tahini
6 tomates secos
Medio pimiento rojo
Una pizca de pimienta de cayena
1 diente de ajo
Una pizca de aceite de oliva

Instrucciones

Pelar el ajo y picarlo en trozos gruesos.
Retirar las semillas y el tallo del pimiento, y cortarlo en trozos gruesos.
Meter todos los alimentos en un procesador de alimentos.
Mezclar todos los ingredientes hasta conseguir una pasta.
Mezclar brevemente si deseas un hummus "grueso".
Picar durante más tiempo si se desea obtener un hummus "suave".

Para obtener un sabor diferente, puedes intentar mezclar un poco de limón y cilantro, ají, lima y chipotle, harissa y menta, o espinacas y queso feta. Experimenta para probar qué te gusta más.

Almacenamiento

Mantener el hummus terminado en la nevera en un recipiente cerrado. Deberías poder consumirlo durante aproximadamente una semana después de haberlo hecho. Si comienza a burbujear, definitivamente debes desecharlo.

El hummus es apto para congelar; se puede descongelar y consumir en un par de meses.

Listas anidadas

Es perfectamente correcto anidar una lista dentro de otra. Posiblemente quieras tener subelementos bajo elementos de rango superior:

  • Primer elemento
  • Segundo elemento
    • Primer subelemento del segundo elemento
    • Segundo subelemento del segundo elemento
    • Tercer subelemento del segundo elemento
  • Tercer elemento
<ul>
  <li>Primer elemento</li>
  <li>Segundo elemento     
  <!-- La etiqueta </li> de cierre del primer elemento no se coloca aquí -->
    <ul>
      <li>Primer subelemento del segundo elemento</li>
      <li>Segundo subelemento del segundo elemento</li>
      <li>Tercer subelemento del segundo elemento</li>
    </ul>
  <!-- La etiqueta </li> de cierre del primer elemento se coloca aquí -->
  </li>
  <li>Tercer elemento</li>
</ul>

Y es posible que también quieras tener por ejemplo una lista ordenada dentro de una lista desordenada:

  • Primer elemento
  • Segundo elemento
    1. Primer subelemento del segundo elemento
    2. Segundo subelemento del segundo elemento
    3. Tercer subelemento del segundo elemento
  • Tercer elemento
<ul>
  <li>Primer elemento</li>
  <li>Segundo elemento     
  <!-- La etiqueta </li> de cierre del primer elemento no se coloca aquí -->
    <ol>
      <li>Primer subelemento del segundo elemento</li>
      <li>Segundo subelemento del segundo elemento</li>
      <li>Tercer subelemento del segundo elemento</li>
    </ol>
  <!-- La etiqueta </li> de cierre del primer elemento se coloca aquí -->
  </li>
  <li>Tercer elemento</li>
</ul>

Tomemos ahora como ejemplo la segunda lista de nuestro ejemplo de la receta:

<ol>
  <li>Pelar el ajo y picarlo en trozos gruesos.</li>
  <li>Retirar las semillas y el tallo del pimiento, y cortarlo en trozos gruesos.</li>
  <li>Meter todos los alimentos en un procesador de alimentos.</li>
  <li>Mezclar todos los ingredientes hasta conseguir una pasta.</li>
  <li>Mezclar brevemente si deseas un hummus "grueso".</li>
  <li>Picar durante más tiempo si se desea obtener un hummus "suave".</li>
</ol>

Puesto que los dos últimos elementos están estrechamente relacionados con el elemento anterior (se leen como subinstrucciones u opciones que encajan bajo ese elemento), puede tener sentido anidarlos dentro de su propia lista no ordenada e introducir esa lista bajo el cuarto elemento. Tendría el siguiente aspecto:

<ol>
  <li>Pelar el ajo y picarlo en trozos gruesos.</li>
  <li>Retirar las semillas y el tallo del pimiento, y cortarlo en trozos gruesos.</li>
  <li>Meter todos los alimentos en un procesador de alimentos.</li>
  <li>Mezclar todos los ingredientes hasta conseguir una pasta.
    <ul>
      <li>Mezclar brevemente si deseas un hummus "grueso".</li>
      <li>Picar durante más tiempo si se desea obtener un hummus "suave".</li>
    </ul>
  </li>
</ol>

Ejercicio propuesto: Receta de hummus con lista anidada

Usando el ejercicio propuesto anteriormente de la receta de hummus, actualiza la segunda lista para usar elementos anidados para obtener el siguiente resultado:

  1. Pelar el ajo y picarlo en trozos gruesos.
  2. Retirar las semillas y el tallo del pimiento, y cortarlo en trozos gruesos.
  3. Meter todos los alimentos en un procesador de alimentos.
  4. Mezclar todos los ingredientes hasta conseguir una pasta:
    • Mezclar brevemente si deseas un hummus «grueso».
    • Picar durante más tiempo si se deseas obtener un hummus «suave».

Ejercicio propuesto: Lista de la compra

Escribe tu propia lista de la compra, con al menos 20 productos. Debes utilizar tipos y subtipos, colocando los elementos en listas anidadas como en el siguiente ejemplo:

  • Pan
  • Leche
  • Café
    • Té negro
    • Té rojo
    • Té verde
  • Fruta
    • Naranjas
    • Manzanas
<ul>
  <li>Pan</li>
  <li>Leche</li>
  <li>Café</li>
  <li>Té
    <ul>
      <li>Té negro</li>
      <li>Té rojo</li>
      <li>Té verde</li>
    </ul>
  </li>
  <li>Fruta
    <ul>
      <li>Naranjas</li>
      <li>Manzanas</li>
    </ul>
  </li>
</ul>

Ejercicio propuesto: Lista de tareas

Crea un nuevo archivo que contenga una lista de tareas, con al menos 20 elementos. Debes usar listas anidadas combinando tareas e instrucciones, por ejemplo, insertando listas ordenadas dentro de una lista desordenada, más o menos como en el ejemplo siguiente:

  • Alimentar al gato
    1. Limpiar el cuenco
    2. Abrir la comida para gatos
    3. Poner la comida en el cuenco
  • Lavar el coche
    1. Aspirar el interior
    2. Lavar el exterior
    3. Encerar el exterior
  • Comprar comida
    1. Planificar el menú
    2. Limpiar la nevera
    3. Escribir la lista de la compra
    4. Ir al supermercado
<ul>
   <li>Alimentar al gato
     <ol>
       <li>Limpiar el cuenco</li>
       <li>Abrir la comida para gatos</li>
       <li>Poner la comida en el cuenco</li>
     </ol>
   </li>
   <li>Lavar el coche
     <ol>
       <li>Aspirar el interior</li>
       <li>Lavar el exterior</li>
       <li>Encerar el exterior</li>
     </ol>
   </li>
   <li>Comprar comida
     <ol>
       <li>Planificar el menú</li>
       <li>Limpiar la nevera</li>
       <li>Escribir la lista de la compra</li>
       <li>Ir al supermercado</li>
     </ol>
   </li>
</ul>

Listas de descripciones (elemento <dl>)

Ya hemos visto cómo marcar listas básicas en HTML. Ahora veremos un tercer tipo de lista con el que te puedes llegar a encontrar: listas de descripciones. El propósito de estas listas es marcar un conjunto de elementos y sus descripciones asociadas, como términos y definiciones, o preguntas y respuestas. Veamos un ejemplo de un conjunto de términos y definiciones:

soliloquio

En las obras dramáticas, corresponde a cuando un personaje se habla a sí mismo para representar sus pensamientos o sentimientos internos y, en el proceso, transmitirlos a la audiencia (pero no a otros personajes).

monólogo

En las obras dramáticas, corresponde a cuando un personaje habla de sus pensamientos en voz alta para compartirlos con el público y cualquier otro personaje presente.

aparte

En las obras dramáticas, corresponde a cuando un personaje comparte un comentario solo con la audiencia para dar efecto cómico o dramático. Suele ser un sentimiento, un pensamiento o información adicional.

Las listas de descripción utilizan un contenedor diferente al de los otros tipos de listas: <dl> («description list» o lista de descripciones). Además, cada término está envuelto en un elemento <dt> («description term» o término a describir), y cada descripción está envuelta en un elemento <dd> («description definition» o definición de descripción).

Colocando las etiquetas HTML adecuadas, el ejemplo anterior quedaría de la siguiente forma:

<dl>
  <dt>soliloquio</dt>
  <dd>En las obras dramáticas, corresponde a cuando un personaje se habla a sí mismo para representar sus pensamientos o sentimientos internos y, en el proceso, transmitirlos a la audiencia (pero no a otros personajes).</dd>

  <dt>monólogo</dt>
  <dd>En las obras dramáticas, corresponde a cuando un personaje habla de sus pensamientos en voz alta para compartirlos con el público y cualquier otro personaje presente.</dd>

  <dt>aparte</dt>
  <dd>En las obras dramáticas, corresponde a cuando un personaje comparte un comentario solo con la audiencia para dar efecto cómico o dramático. Suele ser un sentimiento, un pensamiento o información adicional.</dd>
</dl>

De forma predeterminada, el navegador mostrará las listas de descripciones con las descripciones sangradas un poco más que los términos, o con los términos un poco más destacados que las descripciones:

soliloquio
En las obras dramáticas, corresponde a cuando un personaje se habla a sí mismo para representar sus pensamientos o sentimientos internos y, en el proceso, transmitirlos a la audiencia (pero no a otros personajes).
monólogo
En las obras dramáticas, corresponde a cuando un personaje habla de sus pensamientos en voz alta para compartirlos con el público y cualquier otro personaje presente.
aparte
En las obras dramáticas, corresponde a cuando un personaje comparte un comentario solo con la audiencia para dar efecto cómico o dramático. Suele ser un sentimiento, un pensamiento o información adicional.

Para concluir, ten en cuenta que un solo término puede tener múltiples descripciones, por ejemplo:

<dl>
  <dt>aside</dt>
  <dd>In drama, where a character shares a comment only with the audience for humorous or dramatic effect. This is usually a feeling, thought, or piece of additional background information.</dd>
  <dd>In writing, a section of content that is related to the current topic, but doesn't fit directly into the main flow of content so is presented nearby (often in a box off to the side.)</dd>
</dl>
aparte
En las obras dramáticas, corresponde a cuando un personaje comparte un comentario solo con la audiencia para dar efecto cómico o dramático. Suele ser un sentimiento, un pensamiento o información adicional.
Si la obra es impresa, es una sección de contenido que se relaciona con el tema, pero no encaja directamente en el flujo principal de contenido, de modo que se presenta por separado (a menudo en una caja de texto en el margen).

Ejercicio propuesto: Café, té y chocolate

Es hora de probar suerte con las listas de descripciones. Crea un nuevo archivo y añade elementos al texto sin formato que tienes a continuación para que aparezca como una lista de descripciones:

Café

El café es una bebida elaborada con un aroma y un sabor distintos que se prepara a partir de las semillas tostadas de la planta Coffea.

Té

El té es una bebida aromática que se prepara comúnmente vertiendo agua caliente o hirviendo sobre las hojas curadas de la planta del té.
 
Chocolate caliente

El chocolate caliente es una bebida que generalmente se obtiene mezclando chocolate rallado, chocolate derretido o cacao en polvo, leche o agua caliente y azúcar.

Ejercicio propuesto: bacon, huevos y café

Crea un nuevo archivo con el texto que tienes a continuación y añade elementos al texto para que aparezca como una lista de descripción. Puedes usar tus propios términos y descripciones si lo deseas.

Nota: observa que el término café tiene dos definiciones.
Bacon

Carne curada preparada a partir de carne de cerdo.

Huevos

Comida común y uno de los ingredientes más versátiles utilizados en la cocina.

Café

La bebida que hace que el mundo funcione por la mañana.
Un color marrón claro.

Ejercicio propuesto: Componentes de ordenador

Escribe una lista de definiciones para explicar el significado de los siguientes términos: unidad central de procesamiento, monitor, ratón, teclado, tarjeta gráfica, tarjeta de sonido, altavoces y placa base.