Listas en la Web

A menudo nos interesará presentar las cosas en forma de listas. Podemos escoger entre tres tipos distintos:

1. Listas desordenas
2. Listas ordenadas
3. Listas de definición

Listas Desordenadas (UNORDERED LISTS)

Este formato nos sirve para presentar cosas que, por no tener un orden determinado, no necesitan ir precedidas por un número. Su estructura es la siguiente:

<ul> <li>Una cosa <li>Otra cosa <li>Otra cosa mas <li>Etc. </ul>

Es decir, toda la lista está dentro de la etiqueta <ul> y </ul>, y luego cada cosa va precedida de la etiqueta <li> (list item). El resultado de lo anterior es el siguiente:

• Una cosa
• Otra cosa
• Otra cosa mas
• Etc.

Se puede anidar una lista dentro de otra. Por ejemplo:

<ul> <li>Mamíferos <li>Peces <ul> <li>Sardina <li>Bacalao </ul> <li>Aves </ul>

Que daría el siguiente resultado:

• Mamíferos
• Peces
• Sardina
• Bacalao
• Aves

Esta lista tiene un atributo type que define el tipo de viñeta a usar, sus posibles valores son:

• disc: Disco (valor por defecto)
• square: Cuadrado
• circle: Círculo

Ejemplo:

<ul type="square"> <li>La Molina <li>Magadalena <li>Miraflores <li>San Isidro </ul>

Se vera de la siguiente manera:

• La Molina
• Magadalena
• Miraflores
• San Isidro

Listas Ordendas (ORDERED LISTS)

Estas listas nos sirven para presentar listados en un orden determinado. Su estructura es muy similar a la anterior. La diferencia estriba en que en el resultado aparecerá automáticamente un número correlativo para cada cosa. Por ejemplo:

<ol> <li>Primera cosa <li>Segunda cosa <li>Tercera cosa <li>Etc. </ol>

El resultado es:

1. Primera cosa
2. Segunda cosa
3. Tercera cosa
4. Etc.

Al igual que las listas desordenadas, también se pueden anidar las listas ordenadas.

Por defecto muestra números para cada elemento, pero existe el atributo type, que puede tomar los siguientes valores:

• 1: Lista numérica (valor por defecto)
• a: Letras minúsculas
• A: Letras mayúsculas
• I: Números romanos en mayúscula
• i: Números romanos en minúscula

Utilizando números romanos en mayusculas: <ol type="I"> <li>Primer elemento <li>Segundo elemento </ol> Utilizando números romanos en minusculas: <ol type="i"> <li>Primer elemento <li>Segundo elemento </ol> Utilizando letras mayusculas <ol type="A"> <li>Primer elemento <li>Segundo elemento </ol> Utilizando letras minusculas <ol type="a"> <li>Primer elemento <li>Segundo elemento </ol>

Da como resultado:

Listas de Definición

Como su nombre indica, son apropiadas para glosarios (o definiciones de términos). Toda la lista debe ir englobada entre las etiquetas <dl> y </dl>. Y a diferencia de las dos que hemos visto, cada renglón de la lista tiene dos partes; 1) el nombre de la cosa a definir, que se consigue con la etiqueta <dt> (definition term) y 2) la definición de dicha cosa, que se consigue con la etiqueta <dd> (definition definition).

<dl> <dt>Una cosa a definir <dd>La definición de esta cosa <dt>Otra cosa a definir <dd>La definición de esta otra cosa </dl>

Su resultado es:

Una cosa a definir

La definición de esta cosa

Otra cosa a definir

La definición de esta otra cosa