8.- Listas.
Otro elemento muy común a la hora de elaborar contenidos es el uso de listas, que las utilizamos cuando queremos enumerar algo, ya que siempre aportan un aspecto más visual, que ayuda a captar cuáles son los elementos que forman parte de esa enumeración, cómo se estructuran en el caso de que haya varios niveles, y a recordar cuáles son, y cómo dependen jerárquicamente unos de otros.
A la hora de utilizar listas contamos con dos opciones:
- Listas ordenadas (ol): en las que el orden de la enumeración es importante. Por ejemplo, si quiero enumerar los pasos a seguir en un determinado protocolo, quiero mostrar un índice de contenidos, etc. Estas listas llevan delante de cada elemento el orden que dicho elemento ocupa dentro de la lista y pueden ser numéricas o alfabéticas. Para la FPaD y FPS además se añade a estas listas la clase
lista_esquema
, que además muestra la numeración completa y separa la numeración del elemento por los caracteres ".- ". Esta numeración es automática. - Listas desordenadas (ul): en las que el orden de la enumeración no es importante. Por ejemplo, si quiero enumerar diferentes conceptos que no guardan un orden entre ellos. Estas listas llevan delante de cada elemento una viñeta que hace referencia a su nivel de anidamiento dentro de la lista. Para la FPaD y FPS se añade a estas listas la clase
lista_verificacion
que define 6 viñetas diferentes para cada nivel y así conseguimos darle uniformidad a todas nuestras listas.
En XHTML también existen las llamadas listas de definiciones, en las que no nos vamos a parar, ya que su uso es muy específico y poco común.
Un ejemplo del aspecto de cada una de ellas podría ser el que sigue:
Desordenadas | Ordenadas |
---|---|
|
|
Para insertar una lista lo más cómodo es añadir todos los elementos, independientemente de su anidamiento, uno detrás de otro.
Posteriormente los seleccionamos todos y le decimos el tipo de lista que queremos mediante el botón adecuado: para desordenadas y para ordenadas.
Por último nos queda anidar correctamente los diferentes elementos, utilizando el botón Aumentar sangría o Disminuir sangría .
Veamos de forma visual cómo hacerlo.
En los siguientes vídeos te muestro el proceso para crear las listas de ejemplo que hemos utilizado en este apartado.
¿Cómo puedes hacer que en un elemento de una lista se inserte una nueva línea sin que nos aparezca un nuevo elemento de lista y que podamos seguir en el mismo elemento?