Las listas (I): ordenadas y no ordenadas

A partir de este capítulo tendremos la posibilidad de organizar y ordenar la información de las páginas utilizando los diferentes modos de hacer las listas y despues con las tablas. En este capítulo vamos a ver las listas ordenadas y las no ordenadas y en el siguiente las listas de definiciones o glosario ylas de menús y directorios.

Como ya habeís deducido por la introducción, tenemos cuatro modos de hacer listas: las ordenadas, no ordenadas, de definición y las de menús y directorios. Las etiquetas que el lenguaje HTML nos ofrece para poderlas hacer son las siguientes: <ol>, <ul>, <li>, <dd>, <dir>, <dl>, <dt> y <menu>. Las etiquetas <dir> y <menu> se han quedado obsoletas en HTML 4.0, la primera sirve para definir una lista de directorio y la segunda una lista de menú. Han sido sustituidas por la etiqueta <ul> que se utiliza para listas no ordenadas.

Listas Ordenadas

Comencemos conlas listas ordenadas. Llamamos lista ordenada a aquellas que presentan un conjunto de elementos con un orden estricto. El ejemplo más corriente que todos podemos asimilar es el de una lista que nos indica los pasos a seguir para lograr un fin determinado. La forma habitual de definir una lista ordenada sería como sigue:

<ol atributos de lista ordenada>
<li atributos de la lista> Elementos de la lista </li>
................................
<li atributos de la lista> Elementos de la lista </li>
</ol>

El comienzo y fin de la lista ordenada están marcadas como veís por las etiquetas <ol> y </ol>. Sin embargo, entre las etiquetas de comienzo y fin <li> y </li> estamos insertando los elementos de la lista. Esta última etiqueta de cierre es opcional (</li>). Hagamos un ejercicio para comprender mejor estas etiquetas. Vereís en elmismo como al comienzo de la lista aparece siempre una línea en blanco y como cada elemento de la lista aparece en una línea distinta, sangrado y numerado según van apareciendo.

Si queremos aun podemos personalizar mas la lista con las etiquetas ya vistas en los últimos capítulos referentes al formato de texto. Es mas, podemos dar una apariencia mucho mas clara y acorde con lo que queremos, utilizando las etiquetas <p> y <br>. Realicemos unos pequeños cambios al ejercicio anterior para comprender mejor lo que se dice.

Tambien es normal que en una lista alguno de sus elementos sea dividido a su vez en mas elementos. Con HTML podemos hacerlo, lo llamamos anidar listas, con la posibilidad de poder cambiar el estilo de numeración de la lista con el atributo type (con sus opciones de numeración: a, A, I ó 1) y su comienzo con el atributo start. Estos atributos están asociados a la etiqueta <ol>. La etiqueta <li> tiene dos atributos similares que son type (que permite cambiar el estiloo de numeración del elemento que lleve asociado ese atributo y de todos los que le siguen, si <ol> no tiene el atributo type) y value que permite cambiar el orden de numeración de los elementos a partir de aquél en el que aparece. Hagamos un tercer ejercicio de lista ordenada utilizando todas estas etiquetas y atributos.

Listas No Ordenadas

Por definición una lista no ordenada es aquella que presenta un conjunto de elementos que están relacionados entre sí pero que no guardan ningun orden. En HTML el modo de hacer una lista no ordenada es muy parecido a la de las listas ordenadas. Su estructura mas normal es:

<ul atributos de lista no ordenada>
<li atributos de la lista> Elementos de la lista </li>
................................
<li atributos de la lista> Elementos de la lista </li>
</ul>

Como vemos lalista no ordenada está delimitada por las etiquetas <ul> y </ul> y como en la anterior lista cada elemento se define con con <li> y </li>. En el comienzo de una lista no ordenada siempre aparecerá una línea en blanco y cada elemento se mostrará en una línea diferente, sangrado y con un símbolo (con el atributo de la etiqueta <ul> type en sus opciones circle, disc o square ). Como en la anterior, el texto de esta lista tambien puede ir personalizado por cualquiera de las etiquetas relacionadas con el formato de texto y también podemos utilizar las etiquetas de salto de línea y de párrafo (<br> y <p>) y ser anidadas. Hagamos el siguiente ejercicio para ver su comportamiento:

En el próximo capítulo continuaremos con las listas que nos faltan: de definiciones y las de menús y directorios.