Listas

Introduccion

En ocasiones, es posible agrupar determinadas palabras o frases en un conjunto de elementos que tienen más significado de forma conjunta. El menú de navegación de un sitio web por ejemplo, está formado por un grupo de palabras. Aunque cada palabra por separado tiene sentido, de forma conjunta constituyen el menú de navegación de la página, por lo que su significado conjunto es mayor que por separado.

Objetivos

1. Conocer como crear listas en las paginas Web.
2. Conocer los diferentes tipos de listas.

Descripcion

El lenguaje HTML define tres tipos diferentes de listas para agrupar los elementos:

+ Listas no ordenadas. Se trata de una colección simple de elementos en la que no importa su orden.

+ Listas ordenadas. Similar a la anterior, pero los elementos están numerados y por tanto, importa su orden.

+ Listas de definición. Un conjunto de términos y definiciones similar a un diccionario.


Listas No Ordenadas

Las listas no ordenadas son las más sencillas y las que más se utilizan. Una lista no ordenada es un conjunto de elementos relacionados entre sí pero para los que no se indica un orden. La etiqueta <ul> encierra todos los elementos de la lista, y la etiqueta <li> cada uno de sus elementos.

Ejemplo:

<h1>Menú</h1>

<ul>

<li>Inicio</li>

<li>Noticias</li>

<li>Artículos</li>

<li>Contacto</li>

</ul>

El navegador por defecto muestra los elementos de la lista tabulados y con una pequeña viñeta formada por un círculo negro. Como ya se sabe, el aspecto con el que se muestran los elementos de las listas se puede modificar mediante las hojas de estilos CSS.

Listas Ordenadas

Las listas ordenadas son casi idénticas a las listas no ordenadas, salvo que en este caso los elementos relacionados se muestran siguiendo un orden determinado. Cuando se crea por ejemplo una lista con las instrucciones de una accion, es importante el orden en el que se realiza cada paso. Cuando se hace una receta, es importante el orden en que se ejecuta.


En todos estos casos, la lista más adecuada es la lista ordenada, que se define mediante la etiqueta <ol>. Los elementos de la lista se definen mediante la etiqueta <li>, la misma que se utiliza en las listas no ordenadas.


Ejemplo:

<h1>Preparar cafe</h1>
<ol>
<li>Calentar agua</li>
<li>Colocar cafe</li>
<li>Colocar azucar</li>
<li>Agitar</li></ol>

El navegador muestra la lista de forma muy parecida a las listas no ordenadas, salvo que en este caso no se emplean viñetas gráficas en los elementos, sino que se numeran de forma consecutiva. El tipo de numeración empleada también se puede modificar aplicando hojas de estilos CSS a los elementos de la lista.




Listas de Definicion

Las listas de definición apenas se utilizan en la mayoría de páginas HTML. Su funcionamiento es similar al de un diccionario, ya que cada elemento de la lista está formado por términos y definiciones. La etiqueta <dl> crea la lista de definición y las etiquetas <dt> y <dd> definen respectivamente el término y la descripción de cada elemento de la lista.


Ejemplo:

<h1>Glosario</h1>
<dl>
<dt>SGML</dt>
<dd>Metalenguaje para la definición de otros lenguajes de marcado</dd>
<dt>XML</dt>
<dd>Lenguaje basado en SGML y que se emplea para describir datos</dd>
<dt>RSS</dt>
<dt>GML</dt>
<dt>XHTML</dt>
<dt>SVG</dt>
<dt>XUL</dt>
<dd>Lenguajes derivados de XML para determinadas aplicaciones</dd>
</dl>

Los navegadores formatean las listas de definición de forma similar a las otras listas, tabulando la definición y alineando a la izquierda los términos. Aunque no es habitual, cada término puede tener asociada más de una definición y cada definición puede tener asociada varios términos.