Junto con los párrafos y los encabezados, las listas son uno de los elementos HTML más comúnmente usados en las páginas web. Tras este capítulo sabremos, no sólo crear listas, sino crear varios estilos de estas, una para cada ocasión. Y no tardaremos en ponerlas en práctica ya que al final del capítulo crearemos la segunda página de la cual podemos ver un anticipo en la figura 4.1.
Una lista, o listado, es una enumeración de dos o más elementos y suelen disponerse de tal forma que se facilite la distinción entre ellos.
El lenguaje HTML define los siguientes tipos de listas:
Pronto sabremos como crear cada una de ellas y cuando es conveniente usar una u otras, y comprobaremos, una vez más, la gran sencillez del lenguaje HTML una vez nos hemos habituado a él.
Etiquetas necesarias para crear listas
La forma de crear listas difiere ligeramente de los elementos HTML vistos hasta ahora, ya que consta de dos pasos. Primero hay que definir el tipo de lista y después deben insertarse cada uno de los elementos de lista.
Al crear una lista deberemos indicar su inicio y su fin. Para empezar la lista usaremos la instrucción de inicio de la etiqueta de esa lista. Existe una etiqueta para cada tipo distinto de lista, por ejemplo, para crear una lista no ordenada será necesario usar la etiqueta UL (su instrucción de inicio será <UL>). Una vez hemos abierto la lista deberemos insertar, como hemos dicho antes, cada uno de los elementos de lista. Para ello usaremos una nueva etiqueta (o dos en algún caso) que dependerá del tipo de lista. En el caso de la lista no ordenada los elementos se introducen con la etiqueta de una única instrucción LI, por ejemplo:
Yo practico:
<UL>
<LI>Fútbol
<LI>Baloncesto
<LI>Tenis
<LI>etc.
</UL>
|
En la figura 4.2 podemos ver como muestra Internet Explorer este código
El último paso, que ya hemos anticipado en este ejemplo, será cerrar la lista, para lo cual usaremos la instrucción de fin de UL: </UL>.
Y a todo esto, ¿dónde está la diferencia?. Pues bien, la diferencia es la etiqueta LI (En otras listas se usará también LI o alguna etiqueta similar, como luego veremos). La etiqueta UL no tiene ningún significado por sí sola, necesita a LI. Y por otro lado LI no puede ser usada como una etiqueta independiente sino que debe ir dentro de UL. Por esta razón en ocasiones se suele llamar a LI subetiqueta.
|
Algunos navegadores permiten el uso de <LI> fuera de ninguna lista como si se tratara de una etiqueta independiente. Estos navegadores mostrarán el elemento de lista como si fuese perteneciese a una lista no numerada pero sin sangrado. Sin embargo esta forma de usar <LI> no está admitida por el estándar y por tanto no es recomendable si queremos que todos los navegadores entiendan nuestras intenciones. |
Antes de comenzar haremos un comentario más. La etiqueta <LI> tiene instrucción de fin (</LI>) que delimita el final del elemento de lista actual, pero es opcional usarla o no. Si no se hace se considera que el elemento termina cuando empieza el siguiente o cuando termina la lista. De hecho algunos navegadores al interpretar el código HTML ignoran completamente esta instrucción y sólo entienden que el elemento de lista ha terminado cuando se empieza otro o se acaba la lista.
Vista la teoría nos adentramos en los distintos tipos de listas en las que veremos varios ejemplos prácticos.
Listas no ordenadas
Probablemente el tipo de listas más usados en las páginas web son las listas no ordenadas. Como hemos adelantado antes a modo de ejemplo, este tipo de lista queda delimitada por la etiqueta <UL>...</UL> (UL proviene de Unordered List, que significa lista no ordenada). Dentro de estas etiquetas insertaremos cada elemento con la etiqueta <LI>. Veamos un ejemplo ligeramente más completo que el anterior:
Mi ordenador tiene las siguientes características:
<UL>
<LI>Procesador Pentium 166
<LI>CD-ROM 8x
<LI>Tarjeta de sonido 16 bits
<LI>Tarjeta de vídeo con 2 Mb
</UL>
|
En la figura 4.3 podemos ver como muestra esta lista el navegador Explorer. Vemos que está ligeramente sangrada hacia la derecha y con un símbolo gráfico para distinguir cada elemento de lista, este símbolo recibe el nombre de viñeta.
En la figura 4.4 vemos como a falta de viñetas gráficas Lynx diferencia cada elemento con un asterisco (*).
Listas ordenadas
Este tipo de listas numera los elementos de lista en el orden en el que se han introducido en el código HTML. La numeración se realiza con números empezando por el 1.
|
Las últimas extensiones de HTML permiten elegir entre distintos tipos de numeración para las listas ordenadas. Estas extensiones serán cubiertas en un capítulo posterior. |
Este tipo de listas queda delimitado por la etiqueta <OL>...</OL> (OL: Ordered List, Lista ordenada), y cada elemento se inserta, al igual que en el caso de listas no ordenadas, con la etiqueta <LI>.
En la figura 4.5 vemos un ejemplo de uso de listas ordenadas
que se corresponde con el siguiente código:
Un buen equipo adaptado a las nuevas tecnologías consta de:
<OL>
<LI>CPU rápida
<LI>Impresora a color de buena definición.
<LI>Altavoces y cámara de vídeo.
<LI>Módem de velocidad 28K o superior.
</OL>
|
El navegador automáticamente numera los elementos de lista. Si en algún momento queremos insertar un nuevo elemento entre los existentes usando, de nuevo, <LI>, se realiza automáticamente una renumeración de los elementos de la lista. Tal y como podemos ver en la figura 4.6.
que se corresponde con este código:
Un buen equipo adaptado a las nuevas tecnologías consta de:
<OL>
<LI>CPU rápida
<LI>Impresora a color de buena definición.
<LI>Altavoces y cámara de vídeo.
<LI>Escaner color
<LI>Módem de velocidad 28K o superior.
</OL>
|
En el navegador Lynx las listas numeradas se muestran como vemos en la figura 4.7.
