1. Listas en HTML
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.
Figura 4.1. En esta figura podemos apreciar la presentación de la segunda práctica del curso que realizaremos al final del capítulo.
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:
Numerada u ordenada.
No ordenada.
Listas de glosario o de definición.
Menús.
Usadas con párrafos cortos.
Listas de directorio.
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.
1.1. 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
Figura 4.2. Como aperitivo mostramos una lista no numerada en la que ya se pueden apreciar las características fundamentales que tienen en HTML.
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.
1.2. 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.
Figura 4.3. Los elementos de las listas no numeradas van precedidos de una viñeta. En Explorer esta viñeta es habitualmente un punto grande.
En la figura 4.4 vemos como a falta de viñetas gráficas Lynx diferencia cada elemento con un asterisco (*).
1.3. 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
Figura 4.5. En las listas ordenadas cada uno de los elementos de lista aparecen numerados y sangrados hacia la derecha.
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.
Figura 4.6. Cuando insertamos un nuevo elemento de lista en una lista ordenada los elementos siguientes son automáticamente renumerados.
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.
1.4. Listas de glosario
Este tipo de listas es usado, como su nombre indica, para crear glosarios, es decir listas de definiciones o de descripciones. El principio y final de este tipo de listas se delimitan con la etiqueta <DL>...</DL > (DL: Definition List, Lista de definición). La inserción de elemento es ligeramente distinta a la del resto de listas ya que no se usa la etiqueta <<LI>>. Esto es así porque en este caso cada uno de los elementos de lista está compuesta de dos partes:
La palabra que queremos definir: para insertar la palabra usaremos la etiqueta <DT> que proviene de Definition Term (Término de definición). Esta nueva etiqueta funciona de forma muy similar a <LI> y la instrucción de fin (</DT>) es igualmente optativa.
La definición o descripción de esa palabra: una vez indicada la palabra es hora de poner su definición. Para ello usamos otra nueva etiqueta: <DD> cuyas siglas significan Definition Descriptión (parte de la definición que contiene la descripción). La definición suele ser un párrafo y será mostrado por los navegadores sangrado con respecto al texto anterior.
En la figura 4.8 podemos ver un ejemplo de listas de glosario vistas con Internet Explorer.
Figura 4.8. Las listas de glosario constan de dos partes la palabra de definición y la propia de definición que es mostrada como un nuevo párrafo con sangrado.
En la figura 4.9 se muestra la misma vista con el navegador Lynx.
Figura 4.9. Listas de glosario en Lynx. De nuevo las diferencias respecto a la visualización con Explorer son escasas.
En ambos ejemplos el código usado es el siguiente:
<DL>
<DT>Hipertexto
<DD>Se llama documento hipertexto a aquel
que tiene zonas activas donde el
usuario puede pulsar con el ratón
para acceder a otro documento. Estas
zonas pueden ser imágenes o texto.
<DT>Ancho de banda de una red
<DD>Es, en pocas palabras, la capacidad
de transmisión que soporta y está
muy relacionada con la velocidad de
transmisión que se puede alcanzar.
<DT>HTML
<DD>HiperText Markup Language, Lenguaje
de marcas hipertexto. Lenguaje para
diseñar páginas del World Wide Web.
</DL>
|
1.5. Directorios y menús
Las listas vistas hasta ahora son, sin duda, las más usadas, pero existen otros dos tipos que están algo más olvidadas por los creadores de webs: las listas de directorio y las listas de menú.
Las listas de menú son usadas cuando los elementos de lista son frases de una sola línea mientras que las listas de directorio fueron creadas para ser usadas cuando son términos cortos que pueden ser mostrados en múltiples columnas.
| A pesar de las recomendaciones del estándar HTML los principales navegadores muestran las listas de directorios y menús de igual manera (o muy similar) a las listas no ordenadas. Por esta razón es aconsejable usar únicamente los tres primeros tipos de lista vistos. |
A continuación mostramos un ejemplo de listas de menú y listas de directorio. En la figura 4.10 podemos ver dos ejemplo ambos tipos en Explorer y en la figura 4.11 el mismo ejemplo tal y como se vería en Lynx.
Figura 4.10. En Explorer las listas de menú (<MENU>) y de directorio (<DIR>) son mostradas de igual manera que las listas no numeradas (<UL>).
Figura 4.11. En Lynx las listas de menú y de directorio son mostradas simplemente insertando cada elemento de lista en una nueva línea.
El código usado es:
<MENU>
<LI>Canción 1: Tranquilo majete
<LI>Canción 2: Lluvia en soledad
<LI>Canción 3: La mujer barbuda
<LI>Canción 4: Madera de colleja
<LI>etc.
</MENU>
<DIR>
<LI>Juegos
<LI>Gráficos
<LI>Internet
<LI>Programación
</DIR>
|
1.6. Anidamiento de listas
Vistos todos los tipos de listas se nos puede plantear una pregunta: ¿Se puede incluir una lista dentro de otra?. La respuesta es SI. El lenguaje HTML permite insertar unas listas dentro de otras ya sean del mismo o de distinto tipo. A esta posibilidad se le llama anidamiento de listas y la forma de realizarlo es incluir todo el código de una lista dentro de uno de los elementos de la otra. En el siguiente ejemplo combinaremos algunos de los ejemplos anteriores para dar lugar a un listado con varios listas anidadas unas dentro de otras:
Los temas del número de este mes de nuestra revista son:
<MENU>
<LI>Un nuevo Internet: IPv6
<LI>El WWW cobra vida: ha llegado el
HTML dinámico
<LI>Qué ordenador comprarse:
<OL>
<LI>CPU rápida. Con 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>
<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>
</MENU>
|
En las figuras 4.12 y 4.13 podemos ver como se muestra este ejemplo en los navegadores Explorer y Netscape Navigator. Aunque hay ligeras diferencias, en ambos se puede observar cómo cada nuevo nivel de anidamiento se produce un sangrado en la lista. Además se observa que en la segunda lista no numerada la viñeta que precede cada elemento ha cambiado, lo que ayuda a diferenciar entre ambas listas.
