Manual HTML Aversitenteras

16 pasos sencillos para construir tu propia web




8. LISTAS ORDENADAS



.

Las listas son una relación de elementos enumerados. Vamos a contemplar 3 tipos de listas: listas ordenadas, listas no-ordenadas y listas de definición. Estas listas se pueden utilizar por separado o anidadas entre si, como veremos más adelante.


bullet  Listas ordenadas:

Este tipo de listas se identifican con la etiqueta <OL> (Ordered List). Cada ítem de la lista va incluido dentro de las etiquetas <LI> (List Item) con el fin de diferenciarlos entre sí correctamente.

Ejercicio:  Veamos a continuación con un ejercicio un ejemplo de lista ordenada:

<HTML>
<HEAD>
<TITLE>Listas ordenadas</TITLE>
</HEAD>
<BODY>
<H2>Ejemplo de lista ordenada:</H2>
<OL>
<LI>Introducción</LI>
<LI>La Primera Página</LI>
<LI>Escribir texto</LI>
</OL>
</BODY>
</HTML>

Guardamos el resultado como ejercicio7.htm y comprobamos el resultado en el navegador.

listas ordenadas

También podemos modificar valores de las propiedades de estas listas con los siguientes atributos:

a) Start. Este atributo permite iniciar la lista ordenada en el ítem que convenga al diseñador de la página.

Ejercicio:  Vamos a modificar el ejercicio7.htm para añadirle este atributo.

<HTML>
<HEAD>
<TITLE>Listas ordenadas</TITLE>
</HEAD>
<BODY>
<H2>Ejemplo de lista ordenada:</H2>
<OL Start="4">
<LI>Introducción</LI>
<LI>La Primera Página</LI>
<LI>Escribir texto</LI>
</OL>
</BODY>
</HTML>

Como podéis observar en el resultado ahora empezamos la lista con el número 4:

listas ordenadas

b) Type. Por defecto las listas ordenadas se ordenan con la numeración común y se inicializan en 1. Con este atributo puedes cambiar la manera de ordenar la lista. Type puede tomar los siguientes valores en este tipo de listas:

1 numeración común (por defecto)
I numeración romana en mayúsculas
i numeración romana en minúsculas
A letras mayúsculas
a letras minúsculas

Ejercicio:  Una vez más usamos el ejercicio7.htm para empezar una lista con números romanos.

<HTML>
<HEAD>
<TITLE>Listas ordenadas</TITLE>
</HEAD>
<BODY>
<H2>Ejemplo de lista ordenada:</H2>
<OL Type="I">
<LI>Introducción</LI>
<LI>La Primera Página</LI>
<LI>Escribir texto</LI>
</OL>
</BODY>
</HTML>

Comprobamos en el navegador el resultado:

listas ordenadas

Por supuesto los atributos Start y Type se pueden utilizar a la vez dentro de la etiqueta <OL>.




anterior     indice     siguiente