miércoles, 18 de abril de 2012

Listas en HTML


-->
HTML nos permite definir listas y enumeraciones de tres tipos principales:

•   Listas no ordenadas.
•   Listas ordenadas (numeradas).
•   Listas de definiciones.

7.1.- Listas no ordenadas

Para introducir listas no ordenadas disponemos de la etiqueta <UL>, que nos indica el inicio de la lista, de </UL>, que nos indicará el final de la lista y de <LI>, que nos indica cada uno de los elementos de la lista.

Disponemos además de un atributo TYPE que nos indica el marcador que hay que usar para señalar los diferentes elementos: DISC, CIRCLE, SQUARE.

Debemos introducir todos los elementos entre <LI> y </LI>.

7.2.- Listas ordenadas (numeradas)

El funcionamiento de las listas ordenadas es muy similar al de las listas no ordenadas. Para éstas disponemos de la etiqueta <OL>, que nos indica el inicio de la lista, de </OL> que nos indicará el final de la lista y de <LI> que nos indica cada uno de los elementos de la misma.

Disponemos, además, de un atributo TYPE que nos indica el marcador que conviene usar para enumerar los diferentes elementos:

TYPE=1 Números (la elegida por defecto).
TYPE=A Letras mayúsculas.
TYPE=a Letras minúsculas.
TYPE=I Numeración romana en mayúsculas.
TYPE=i Numeración romana en minúsculas.

Disponemos también de un atributo START que nos indica en qué punto debe comenzar la numeración de la línea. El atributo TYPE también puede usarse en los elementos individuales.

Debemos introducir todos los elementos entre <LI> y </LI>.

7.3.- Listas de definiciones

Una lista de definiciones es una lista no numerada que nos permite dar una descripción o definición de cada elemento. Las listas descriptivas están formadas con las etiquetas: <DL> y </DL> para definir la lista, <DT> para indicar el término que hay que definir y <DD> para indicar la definición.

Disponemos para DL de un atributo, COMPACT, que indica al navegador que muestre la lista de la forma más compacta posible, incluyendo el término y su definición en la misma línea.

CODIGO DE LISTAS:


<HTML>
<HEAD>
<TITLE>Título del documento</TITLE>
</HEAD>
<BODY>
<UL type =square >
<LI>Primer elemento
<LI>Segundo elemento
<LI>Tercer elemento
</UL>
<P>
<OL>
<LI>Primer elemento
<LI>Segundo elemento
<LI TYPE=A>Tercer elemento
</OL>
<P>
<dl compact>
<dt>ASCII <dd>
Juego de caracteres de 7 bits. Sólo permite 127 caracteres.
 <dt>EPS <dd>
Formato Postscript encapsulado.
 <dt>PNG<dd>
Portable Network Graphics,
formato gráfico de alta eficiencia.</dl>
</BODY>
</HTML>

Podemos ver diferentes ejemplos de listas de HTML: