Curso completo de HTML - Listas en HTML (II)

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.

En la figura 4.9 se muestra la misma vista con el navegador Lynx.

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>
       

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 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.

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>
       

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.