Listas


Una lista permite organizar la totalidad o parte de un documento HTML estructurándolo de la forma más clara posible para hacerlo más perceptible al lector. Las listas se utilizan para dividir el documento asi como para efectuar numeraciones de objetos, pero la diferencia con los procesadores de texto es que no permite la numeración automática para niveles jerárquicos diferentes:

  1. Ficheros HTML
  2. Ficheros de texto
  3. Ficheros de imágenes
es posible automáticamente...
  1. Ficheros de sonido
    1.1 Ficheros WAV
  2. Ficheros de imágenes
    2.1 Ficheros GIF
    2.2 Ficheros BMP
no es posible automáticamente...
HTML define varios tipos de listas:
Cualquiera de los tipos de listas nombrados puede ser anidado. En el caso de las listas ordenadas no se consique una numeración escalonada al anidar una lista dentro de otra, como se vió en el ejemplo anterior. Las listas sin orden cambian el símbolo de comienzo al anidarse unas dentro de otras. Al final de esta página se muestran varios ejemplos de listas anidadas.
Como puede comprobar los primeros cuatro tipos de listas, denominados listas regulares, hacen uso de la marca <LI>. La cual se explica a continuación.

LI

La marca <LI> es un elemento vacío, o sea, no requiere de marca de fin, y es común a las denominadas listas regulares. La sintáxis general de estas listas será:
<marca de comienzo>
  <li> Primer elemento de la lista
  <li> Segundo elemento de la lista
  <li> ...
<marca de cierre> 

Listas sin orden


UL

La marca <UL> permite generar listas no ordenadas, cada uno de los elementos de la lista irá precedido por un símbolo (fijo por defecto) que puede variar según el nivel de anidamiento de la lista.

Ejemplo:

Ejemplo de lista no ordenada

  • Fichero HTML
  • Fichero de imagen
  • Fichero de sonido
  • Fichero de vídeo
  • Fichero de ejemplo
<H3>Ejemplo de lista no ordenada</H3>
<UL>
  <LI>Fichero HTML</LI>
  <LI>Fichero de imagen</LI>
  <LI>Fichero de sonido</LI>
  <LI>Fichero de vídeo</LI>
  <LI>Fichero de ejemplo</LI>
</UL>
Los puntos gruesos se pueden cambiar usando el atributo TYPE con tres valores (el valor por defecto es DISC). Con el valor CIRCLE se verá:
  • Primera línea
  • segunda línea
<UL TYPE=CIRCLE>
  <LI>Primera línea
  <LI>Segunda línea
</UL>
También puede usarse el valor SQUARE. Así:
  • Primera línea
  • segunda línea
<UL TYPE=SQUARE>
  <LI>Primera línea
  <LI>Segunda línea
</UL>
Inicio

Listas ordenadas


OL

La marca <OL> se utiliza para una lista ordenada o numerada. Cada marca </LI> incrementará el número que se visualizará delante del elemento de la lista.

Ejemplo:

Ejemplo de lista ordenada

  1. Fichero HTML
  2. Fichero de imagen
  3. Fichero de sonido
  4. Fichero de vídeo
  5. Fichero de ejemplo
<H3>Ejemplo de lista ordenada</H3>
<OL>
  <LI>Fichero HTML</LI>
  <LI>Fichero de imagen</LI>
  <LI>Fichero de sonido</LI>
  <LI>Fichero de vídeo</LI>
  <LI>Fichero de ejemplo</LI>
</OL>
Las listas ordenadas no sólo se pueden ordenar con números. También se pueden utilizar letras y numeración romana tanto en mayúsculas como minúsculas. Para esto se utiliza el atributo TYPE del elemento <OL> con los siguientes valores:
TYPE=1
(por defecto) para números,
TYPE=A
para letras mayúsculas,
TYPE=a
para letras minúsculas,
TYPE=I
para numeración romana en mayúsculas,
TYPE=i
para numeración romana en minúsculas.

Esto es una lista ordenada con letras mayúsculas:
  1. Primera línea
  2. Segunda línea
  3. Tercera línea
  4. Cuarta línea
<OL TYPE=A>
  <LI>Primera línea
  <LI>Segunda línea
  <LI>Tercera línea
  <LI>Cuarta línea
</OL>
Esto es una lista ordenada con letras minúsculas:
  1. Primera línea
  2. Segunda línea
  3. Tercera línea
  4. Cuarta línea
<OL TYPE=a>
  <LI>Primera línea
  <LI>Segunda línea
  <LI>Tercera línea
  <LI>Cuarta línea
</OL>
Esto es una lista ordenada con numeración romana
en mayúsculas
:
  1. Primera línea
  2. Segunda línea
  3. Tercera línea
  4. Cuarta línea
<OL TYPE=I>
  <LI>Primera línea
  <LI>Segunda línea
  <LI>Tercera línea
  <LI>Cuarta línea
</OL>
Esto es una lista ordenada con numeración romana
en minúsculas
:
  1. Primera línea
  2. Segunda línea
  3. Tercera línea
  4. Cuarta línea
<OL TYPE=i>
  <LI>Primera línea
  <LI>Segunda línea
  <LI>Tercera línea
  <LI>Cuarta línea
</OL>
En algunos casos puede interesarnos que la lista no comience por el número 1 (por ejemplo si es una lista que continua en otra página). Se puede conseguir con el atributo START combinado con TYPE.

Esto es una lista ordenada con letras mayúsculas y
que comienza por la E
:
  1. Primera línea
  2. Segunda línea
  3. Tercera línea
  4. Cuarta línea
<OL TYPE=A START=5>
  <LI>Primera línea
  <LI>Segunda línea
  <LI>Tercera línea
  <LI>Cuarta línea
</OL>
El número que se pone en el atributo START indica en que número o letra comenzará la lista. La E es la quinta letra.

Inicio

Listas de directorio


DIR

Las listas de directorio son similares a las listas sin orden. En el Netscape no se ve diferencia entre una y otra. La única diferencia es la sintáxis del código donde en vez de utilizar la marca <UL> se utiliza la marca <DIR>.
La marca <DIR> admite los mismos atributos que la marca <UL>.
Ejemplo:

Ejemplo de lista de directorio

  • Español
  • Inglés
  • Francés
  • Alemán
  • <H3>Ejemplo de lista directorio</H3>
    <DIR>
      <LI>Español</LI>
      <LI>Inglés</LI>
      <LI>Francés</LI>
      <LI>Alemán</LI>
    </DIR>
    
    Inicio

    Listas de menú


    MENU

    Las listas de menu son similares a las listas sin orden. En el Netscape no se ve diferencia entre una y otra. La única diferencia es la sintáxis del código donde en vez de utilizar la marca <UL> se utiliza la marca <MENU>.
    La marca <MENU> admite los mismos atributos que la marca <UL>.
    Ejemplo:

    Ejemplo de lista de menu

  • Opción 1
  • Opción 2
  • Opción 3
  • <H3>Ejemplo de lista directorio</H3>
    <MENU>
      <LI>Opción 1</LI>
      <LI>Opción 2</LI>
      <LI>Opción 3</LI>
    </MENU>
    
    Inicio

    Listas de definición


    Una lista de definición es una lista no enumerada en la que se da una descripción de cada uno de sus elementos. Un ejemplo típico es un glosario. Las listas descriptivas están definidas por los siguientes elementos:

    DL

    El elemento <DL> abre una lista descriptiva y finaliza con </DL>. Define el inicio de la lista y englobará otras dos marcas (DT y DD) cuya función es caracterizar el elemento y definirlo.
    El atributo COMPACT está asociado a la marca DL (<DL COMPACT>) y permite mostrar en la misma línea el elemento y su descripción.

    DT

    El elemento <DT> precede a cada item de la lista, el cual no puede sobrepasar la longitud de una línea. Este elemento no resalta el texto de cada item por lo tanto si quiere algún formato especial como negrita o cusiva habrá que especificarlo con sus correspondientes marcas.
    No tiene final de marca.

    DD

    La marca <DD> corresponde a la zona de definición de cada item. El tamaño de esta zona no está limitado y cada línea se sangrará hacia la derecha.
    No tiene final de marca.
    La estructura de este modelo de lista será la siguiente:
    <DL>
      <DT> Identificación del elemento <DD> Descripción del elemento
      <DT> ... <DD> ...
    </DL>
    Inicio

    Ejemplo:


    GLOSARIO (Ejemplo de lista de tipo de definición (<dl compact>))

    ASCII
    Juego de caracteres que asigna valores numéricos estándar a las letras, cifras y signos de puntuación.
    EPS
    Formato de descripción de ficheros PostScript.
    FUENTE
    Conjunto de estilos que posee una categoría de caracteres (negrita, cursiva, etc...).

    <H3>GLOSARIO (Ejemplo de lista de tipo de definición (<dl compact>))</H3>
    <dl compact>
      <dt>ASCII <dd> Juego de caracteres que asigna valores 
    numéricos estándar a las letras, cifras y signos de puntuación.
      <dt>EPS <dd> Formato de descripción de ficheros PostScript.
      <dt>FUENTE <dd> Conjunto de estilos que posee una categoría 
    de caracteres (negrita, cursiva, etc...).
    </dl>
    Inicio

    Anidamiento de listas


    Anidamiento de listas no ordenadas

    En el siguiente ejemplo el browser Netscape visualizará tres símbolos distintos en función del grado de anidamiento, y posteriormente utilizará el último símbolo (el cuadro vacío) para los siguientes niveles. El browser Mosaic, sin embargo, utilizará el mismo símbolo para todos los niveles:

    Ejemplo de lista no ordenada anidada

    • Ficheros HTML
      • Ejemplos
        • Listas
        • Tablas
        • Estilos
          • Cita
          • Texto en énfasis
      • En curso
      • Prescritos
    • Ficheros de imágenes
    <H3>Ejemplo de lista no ordenada 
    anidada</H3> <UL> <LI>Ficheros HTML <UL> <LI>Ejemplos <UL> <LI>Listas <LI>Tablas <LI>Estilos <UL> <LI>Cita <LI>Texto en énfasis </UL> </UL> <LI>En curso <LI>Prescritos </UL> <LI>Ficheros de imágenes </UL>
    Inicio

    Anidamiento de listas ordenadas

    En el siguiente ejemplo se aprecia que la enumeración según el grado de anidamiento no es automática:

    Ejemplo de lista ordenada anidada

    1. Fichero HTML
    2. Fichero de imágenes
      1. Naturalezas muertas
      2. Paisajes
        1. Verano
        2. Invierno
    3. Fichero de sonidos
    <H3>Ejemplo de lista ordenada anidada</H3>
    <OL>
      <LI>Fichero HTML
      <LI>Fichero de imágenes
      <OL>
        <LI>Naturalezas muertas
        <LI>Paisajes
        <OL>
          <LI>Verano
          <LI>Invierno
        </OL>
      </OL>
      <LI>Fichero de sonidos
    </OL>
    
    Inicio

    Anidamiento de listas ordenadas con listas no ordenadas

    A continuación mostraremos un ejemplo de listas de varios niveles, en el que se muestra listas ordenadas con listas no ordenadas:

    Ejemplo de lista anidada

    
    <H3>Ejemplo de lista anidada</H3>
    <UL>
      <LI>Ficheros HTML
      <OL>
        <LI>Ficheros de prueba
        <UL>
          <LI>prueba 1.html
          <LI>prueba 2.html
          <LI>prueba 3.html
        </UL>
        <LI>Ficheros de ejemplo
        <LI>Ficheros del servidor
      </OL>
      <LI>Ficheros de imágenes
      <LI>Ficheros de sonidos
      <LI>Ficheros de vídeo
    </UL>
    
    Inicio

    Indice

    Facultad de Informática de la Universidad de Las Palmas de Gran Canaria