Listas ordenadas (numeradas) y desordenadas (con viñetas)

Avanzaremos ahora un paso más en la panorámica sobre los recursos para organizar y dar formato visual al texto.

Las listas nos van a servir para ir organizando la información de acuerdo con alguno de los siguientes formatos:

Listas ordenadas Listas desordenadas Listas de definición

Los elementos se presentan numerados
Los elementos van precedidos por un "boliche"
Presentan términos y definiciones con diferente tabulación

Elemento nº 1

Elemento nº 2

...

Elemento nº 1

Elemento nº 2

...

Término nº 1

Definición del término 1

Término nº 2

Definición del término 2

Listas ordenadas	Listas desordenadas	Listas de definición
Los elementos se presentan numerados	Los elementos van precedidos por un "boliche"	Presentan términos y definiciones con diferente tabulación
Elemento nº 1 Elemento nº 2 ...	Elemento nº 1 Elemento nº 2 ...	Término nº 1 Definición del término 1 Término nº 2 Definición del término 2

Iconos de tipo de lista y nivel de tabulación en la barra de formato

Veremos en primer lugar los dos primeros tipos, cuya única diferencia estriba en el símbolo que precede a cada elemento. Para iniciar la creación de este tipo de listas basta pulsar el botón que las identifica en la barra de formato.

Una forma alternativa para crear una lista consiste en tomar una serie de líneas que ya estén escritas, seleccionarlas y hacer clic en uno de los botones de listas. De este modo, cada párrafo se convierte automáticamente en un elemento de la lista. Posteriormente se pueden modificar los niveles de la lista a nuestro gusto.

También en la misma barra, tras los iconos de alineación del texto, aparecen otros dos iconos que nos van a permitir ir aumentando o disminuyendo los niveles dentro de la lista. Llamamos nivel a la tabulación que se aplica a cada ítem de la lista y que nos va a permitir establecer visualmente las categorías y las dependencias de unos elementos respecto a los otros.

La forma de introducir nuevos elementos en la lista, una vez que la hemos empezado consiste sencillamente en pulsar la tecla Intro , con lo que se añade a la lista otro ítem del mismo nivel que el precedente. (Si queremos variar el nivel, hacia la derecha o hacia la izquierda pulsaremos el icono correspondiente ).

Una forma muy sencilla para obtener un nivel situado más a la derecha es la pulsación de la tecla . Para retornar al nivel precedente bastará con una doble pulsación sobre Intro . Cuando nos encontramos en el primer nivel de la lista esta doble pulsación servirá también para finalizar la introducción de elementos en la misma. También podemos volver a pulsar el botón con el que la iniciamos, que hasta ese momento habrá permanecido "presionado".

Abre una nueva pestaña del editor utilizando la opción archivo nuevo o el icono
Crea una lista numerada que esté formada por dos elementos del primer nivel, de uno de los cuales colgarán dos elementos de segundo nivel. (Llamamos primer nivel al que está más próximo al margen izquierdo y 2º, 3º o sucesivos a los que se encuentran más alejados, en la 2ª, 3ª y sucesivas tabulaciones)
Cierra la lista y escribe un renglón de texto normal.
Guarda el trabajo pulsando en el icono que tiene el disquete con el nombre actividad10.html

Volvemos a la ventana del editor en la que teníamos el documento que acabamos de crear y seleccionamos todo el contenido con el ratón. Borramos para dejar la página en blanco.
Creamos ahora una lista de viñetas con características semejantes a la anterior. (Dos elementos de primer nivel de uno de los cuales cuelgan dos elementos de segundo nivel)
Guardamos el trabajo como actividad11.html, para lo que usaremos la opción archivo guardar como, y comprobamos los resultados.

Listas de definiciones

Las listas de definiciones no tienen un icono específico para su creación, aunque podemos emplear un truco para no tener que recurrir a escribir las etiquetas a mano. Para ello...

Habrá que recurrir al menú formato submenú lista término para el término que deseamos definir y formatolista definición para la definición del mismo. Comprobaremos que mientras que el título permanece alineado en el margen izquierdo el texto salta a la primera tabulación.

Atención Realmente no será necesario especificar el salto entre el término y la definición, ya que al indicar que un texto es un término de una lista de definiciones la pulsación de la tecla Intro hace que automáticamente se genere la etiqueta para la definición del mismo. Si necesitamos que la definición esté compuesta por varios párrafos habría que pulsar + Intro .

Para finalizar una lista de este tipo podremos hacerlo seleccionando ninguno en el menú formato submenú lista término o, más sencillamente, con una doble pulsación de la tecla Intro tras completar la última definición de la lista.

Crea un documento que contenga tres términos con sus correspondientes definiciones, como por ejemplo la definiciones de carnívoros, herbívoros y omnívoros.
Resalta utilizando la negrita cada uno de los términos
Si los párrafos quedan demasiado ajustados al margen izquierdo puedes utilizar los botones de salto de nivel para modificar su posición.
Guarda el documento como actividad12.html y comprueba el resultado.

Profundizando en las listas

Habrás comprobado que en las listas con viñetas iba variando la viñeta que precedía a cada uno de los niveles. Sin embargo, en las numeradas vemos que los diferentes niveles se van alineando con un mayor grado de tabulación a la derecha, pero no cambian el símbolo que los precede. Es posible que nos resulte útil para presentar la información con mayor claridad que dicho símbolo se modifique en cada nivel.

Vamos a verlo con un ejemplo práctico.

Iniciamos la creación de una lista ordenada en la que incluiremos tres ítems del primer nivel. En dos de ellos añadiremos dos ítems de segundo nivel y en uno de estos añadiremos un ítem de tercer nivel.
Pulsamos el icono y cuando nos informe de que debemos guardar el archivo aceptamos y le damos el nombre actividad13.html
Comprobamos en el navegador cómo todos los niveles llevan el mismo tipo de numeración.

Vuelve al editor para seguir trabajando con el archivo actividad13.html si lo habías cerrado.
Pulsa con el botón derecho sobre uno de los párrafos del segundo nivel (vale cualquiera).
Elige propiedades de lista y selecciona en el campo estilo de número las letras mayúsculas. (Comprueba cuáles son los niveles que se han visto afectados por el cambio)
Modifica el tercer nivel eligiendo letras minúsculas y salva el trabajo como actividad14a.html para poder verlo en el navegador.
Acaba de modificar la lista para que todos los elementos de segundo nivel aparezcan precedidos por letras mayúsculas.
Puedes realizar un trabajo similar con una lista de viñetas y salvarlo como actividad14b.html

Es posible que la práctica anterior te haya suscitado algunas dudas acerca del comportamiento de los cambios de numeración cuando las condiciones de la lista se hacen algo más complejas... ¡Ánimo, dale rienda a tu espíritu de investigación!

Vamos a ver ahora otra posibilidad interesante: combinar los diferentes tipos de listas entre sí.

No es muy habitual mezclar la lista de definiciones con los otros tipos, pero sí puede resultar útil anidar listas desordenadas dentro de otras ordenadas o viceversa.

Lo veremos con un ejercicio semejante al anterior.

Crea un documento nuevo y construye una lista ordenada suficientemente compleja.
Elige el nivel que desees modificar y pulsa el botón de las listas con viñetas.
Guarda el documento como actividad15.html y comprueba el efecto obtenido.
Podemos complicar algo más la situación combinando el cambio de tipo de lista y el de tipo de numeración... A estas alturas no te resultará difícil prever el resultado final de las acciones que vayas realizando.