Una lista es un párrafo estructurado que contiene una serie de elementos. HTML define tres tipos de 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 así 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:
|
|
- Listas sin orden, sin numeración: <UL> , <LI>
- Listas ordenadas, con numeración: <OL> , <LI>
- Listas de directorio, similares a las listas sin orden: <DIR> , <LI>
- Listas de menú , similares a las listas sin orden: <MENU> , <LI>
- Listas de definición, típicamente un glosario: <DL> , <DT> , <DD>
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 NO ORDENADAS
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: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á:
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>También puede usarse el valor SQUARE. Así:
- Primera línea
- segunda línea
<UL TYPE=CIRCLE> <LI>Primera línea <LI>Segunda línea </UL>
- Primera línea
- segunda línea
<UL TYPE=SQUARE> <LI>Primera línea <LI>Segunda línea </UL>
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:
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:
Ejemplo de lista ordenada
- Fichero HTML
- Fichero de imagen
- Fichero de sonido
- Fichero de vídeo
- 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>
- 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:
- Primera línea
- Segunda línea
- Tercera línea
- 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:
- Primera línea
- Segunda línea
- Tercera línea
- 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:
- Primera línea
- Segunda línea
- Tercera línea
- 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 numeración romana
en minúsculas:
- Primera línea
- Segunda línea
- Tercera línea
- 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 letras mayúsculas y
que comienza por la E:
- Primera línea
- Segunda línea
- Tercera línea
- 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>
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:
width="x" Permite al navegador predeterminar el ancho, en pixles, que tendrá tu imagen.
IDEAS