©JJCP 2001 Curso de HTML Iniciación. Tema 6

Tema 6 - LISTAS

LISTAS

Requieren etiqueta de cierre de Bloque (Lista).
No requieren etiqueta de cierre de Elemento.
Es posible anidar cualquier tipo de lista entre sí, incluso listas de distinto tipo.
Pueden incluirse dentro de formularios, tablas, etc.
Pueden incluir, en general, cualquiera de los elementos HTML.

Tipos de Listas	Etiqueta de Bloque	Etiqueta de Elementos	TYPE	Atributos
No ordenadas.	<UL>	<LI>	disc, circle, square	COMPACT
Ordenadas.	<OL>	<LI>	1, A, a, I, i	START (<OL>) VALUE (<LI>)
de Definiciones.	<DL>	<DT> (Término) <DD> (Definición)
de Directorio.	<DIR>	<LI>	(Obsoletas)
de Menú.	<MENU>	<LI>	(Obsoletas)

<UL> Listas No Ordenadas

Se usan para enumerar elementos que no tengan un orden definido.
La etiqueta <LH> para el título es opcional.

<UL TYPE = "disc | circle | square">
         <LH> Título de la lista </LH>
         <LI> Elemento 1
         <LI> Elemento 2
                 . . .
         <LI> Elemento n
</UL>

Ejemplos
Inst. HTML	<UL > <LH> Título </LH> <LI> Elemento 1 <LI> Elemento 2 <LI> Elemento 3 </UL>
Resul tado	Título Elemento 1 Elemento 2 Elemento 3
Explica ción	Este será el caso básico de lista no ordenada. Se podrán incluir tantos elementos como se deseen y estos podrán ser texto normal, texto resaltado con alguno de los estilos, imágenes, etc ...

Inst. HTML	<UL TYPE="square"> <LI> Elemento 1 <LI> Elemento 2 <UL TYPE="circle"> <LI> Elemento 3.1 <LI> Elemento 3.2 </UL> <LI> Elemento 4 </UL>
Resul tado	Elemento 1 Elemento 2 Elemento 3.1 Elemento 3.2 Elemento 4
Explica ción	Ahora definimos una lista anidada, es decir una lista dentro de otra lista, basta con incluir el nuevo elemento UL dentro del elemento UL de la lista original. En este ejemplo también usamos distintos elementos definibles con TYPE, para indicar los componentes de la lista.

<OL> Listas Ordenadas

Se usan para enumerar elementos que siguen un orden definido.
La etiqueta <LH> para el título es opcional.
El punto de comienzo siempre será el 1 si no se indica otro en START.
En cualquier Elemento se puede cambiar la numeración con VALUE, que actua en adelante.
El tipo de numeración puede seleccionarse con el atributo TYPE. Sus posibles valores son:

A : Letras mayúsculas.
a : Letras minúsculas.
I : Números romanos en mayúsculas.
i : Números romanos en minúsculas.
1 : Números arábigos (es por defecto por tanto no hay que indicarlo).

<OL START= "n" TYPE = "A | a | I | i | 1" >
         <LH> Título de la lista </LH>
         <LI> Elemento 1
         <LI VALUE="n"> Elemento 2
                 . . .
         <LI> Elemento n
</OL>

Ejemplos
Inst. HTML	<OL > <LI> Elemento 1 <LI> Elemento 2 <LI> Elemento 3 </OL>
Resul tado	Elemento 1 Elemento 2 Elemento 3
Explica ción	Este será el caso básico de lista ordenada.

Inst. HTML	<OL TYPE="I"> <LI> Elemento 1 <LI> Elemento 2 <OL TYPE="a"> <LI> Elemento 3.1 <LI> Elemento 3.2 </OL> <LI> Elemento 4 </OL>
Resul tado	Elemento 1 Elemento 2 Elemento 3.1 Elemento 3.2 Elemento 4
Explica ción	Ahora definimos una lista anidada y usamos distintos elementos para la numeración de las opciones.

<DL> Listas de Definiciones

Existen dos tipos de elementos: la definición <DD> y el termino <DT>.
Se puede usar uno solo de ellos.
La etiqueta <LH> para el título es opcional.

<DL>
     <LH>Título de la lista </LH>
     <DT>Término 1
     <DD>Definición 1
     <DT>Término 2
     <DD>Definición 2
       . . .
     <DT>Término N
     <DD>Definición N
</DL>

Ejemplos
Inst. HTML	<DL > <DT> Coche <DD> Vehículo de cuatro ruedas <DT> Moto <DD> Vehículo de dos ruedas </DL>
Resul tado	Coche Vehículo de cuatro ruedas Moto Vehículo de dos ruedas
Explica ción	Como se ve, se coloca en una posición la definición y en otra el término.

Ejemplos
Resul tado	Conexión a la Red. Normativa de conexión a Red. Instalación de Software de Comunicaciones. Solicitud de Servicios de Comunicaciones. Servidores Proxy. Actualización del Software de Comunicaciones. Mensajería Electrónica. Manual Práctico de Eudora. Mensajería Institucional.
Explica ción	En este ejemplo utilizaremos solo los elementos DD (definiciones) para crear un menu, en el que se incluyen tanto imágenes como texto. La lista de definiciones se utiliza para mostrar el menu de forma correcta con sus correspondientes niveles y subniveles.

Ejercicios con Listas