Consisten en un conjunto de elementos ordenados identificados mediante
números griegos (1, 2, ...), números latinos (en mayúsculas
I, II, III, IV,..., o minúsculas i, ii, iii, iv, ...) o letras (en
mayúsculas: A, B, C, ..., o minúsculas: a, b, c, ...). El comienzo y
final de la lista se indica mediante las etiquetas
<ol>...</ol> (del inglés Ordered
List). Cada elemento de la lista, al igual que en la listas
desordenadas se indica mediante las etiquetas
<li>...</li> (del inglés List
Item).
El atributo type dentro del elemento <ul> nos
indica el tipo de marcador elegido para cada elemento de la lista. Se
escribe <ul
type="valor">...</ul>. El atributo
type puede tomar varios valores, en la siguiente tabla se
muestran los más utilizados:
Valor del atributo type |
Estilo |
Ejemplo |
<ul>...</ul> |
Numeración griega (valor por defecto si no existe type)
|
- Primer elemento
- Segundo elemento
|
<ul type="1">...</ul>
|
Numeración griega |
- Primer elemento
- Segundo elemento
|
<ul type="I">...</ul>
|
Numeración latina (Mayúsculas) |
- Primer elemento
- Segundo elemento
|
<ul type="i">...</ul>
|
Numeración latina (Minúsculas) |
- Primer elemento
- Segundo elemento
|
<ul type="A">...</ul>
|
Numeración alfabética (Mayúsculas) |
- Primer elemento
- Segundo elemento
|
<ul type="a">...</ul>
|
Numeración alfabética (Minúsculas) |
- Primer elemento
- Segundo elemento
|
Ejercicio
Tarea
Practica las listas ordenadas utilizando el editor interactivo.
Procedimiento:
- Abre el editor interactivo pulsando aquí.
-
Escribe en el lado izquierdo el siguiente código HTML:
<HTML>
<body>
<h3>Listas ordenadas sencillas</h3>
<ol type="1">
<li>Primer elemento</li>
<li>Segundo elemento</li>
</ol>
<h3>Listas ordenadas anidadas</h3>
<ol>
<li>Listas con letras
<ol type="A">
<li>Primer elemento de la lista anidada</li>
<li>Segundo elemento de la lista anidada</li>
</ol>
</li>
<li>Listas con numeración latina
<ol type="I">
<li>Primer elemento de la lista anidada</li>
<li>Segundo elemento de la lista anidada</li>
</ol>
</li>
</ol>
</body>
</HTML>
- Pulsa el botón submit y comprueba el resultado.
|