 |
Lista ordenadas
Las listas en HTML ordenadas son aquellas que nos muestran los elementos de la lista en orden. Para representar el orden tendremos los elementos numerados. Es decir, cada uno de los elementos irá precedido de un número o letra que establezca su orden. Las listas en HTML ordenadas se representan mediante el elemento OL.
Las listas en HTML nos permite crear conjuntos de elementos en forma de lista dentro de una página, todos los cuales irán precedidos, generalmente, por un guión o número.
Este elemento HTML es útil cuando debemos numerar una serie de objetos. Veamos con un ejemplo una lista ordenada para conocer su sintaxis. Mostraremos el orden de llegada de tres corredores:
<head>
</head>
<body>
<ol>
<li>Rodriguez Pablo</li>
<li>Gonzalez Raul</li>
<li>Lopez Hector</li>
</ol>
</body>
</html>
Que produciría el siguiente efecto:
- Rodriguez Pablo
- Gonzalez Raul
- Lopez Hector
Número de inicio de la lista: start
El atributo start nos permite indicar el número por el cual queremos que empiece la lista, ya que por defecto las listas ordenadas en HTML empiezan por el número 1.
De esta forma, si queremos que la lista empiece por el número 5, escribiremos el siguiente código:
<li> Julio</li>
<li> Carmen</li>
<li> Ignacio</li>
<li> Elena</li>
</ol>
Que produciría el siguiente efecto:
- Julio
- Carmen
- Ignacio
- Elena
Tipo de lista ordenada: type
De igual manera podemos indicar el tipo de lista ordenada en HTML que queremos representar.
Entre los tipos de listas que podemos representar tenemos:
- 1 - Listas decimales
- a - Listas alfabéticas en minúsculas
- A - Listas alfabéticas en mayúsculas
- i - Listas de números romanos en minúsculas
- I - Listas de números romanos en mayúsculas
Los valores indicados al principio son los que le podemos asignar al atributo type de la lista ordenada en HTML.
Si queremos que nuestra lista aparezca ordenada mediante letras en mayúsculas escribimos lo siguiente:
<li> Julio </li>
<li> Carmen </li>
<li> Ignacio </li>
<li> Elena </li>
</ol>
En este caso la lista se representará de la siguiente forma:
- Julio
- Carmen
- Ignacio
- Elena
Listas en orden inverso: reversed
En HTML 5 aparece el atributo reversed para las listas ordenadas. El atributo reversed nos permite invertir el orden de la lista. Es decir, realiza la numeración de la lista de forma inversa.
Para utilizarlo simplemente indicamos el atributo reversed sobre el elemento OL.
En este caso, si escribimos la siguiente lista:
<li>Julio</li>
<li>Carmen</li>
<li>Ignacio</li>
<li>Elena</li>
</ol>
Lo que obtendremos por pantalla será lo siguiente:
- Julio
- Carmen
- Ignacio
- Elena
La marca <ol> y su correspondiente marca de cerrado es </ol>
En su interior cada uno de los items se los dispone con el elemento li, que también tiene la marca de comienzo <li> y la marca de fin de item </li>
Luego se encarga el navegador de numerar cada uno de los items contenidos en la lista, tengamos en cuenta que se numeran porque se trata de una lista ordenada.
Para recordar el nombre de estos elementos HTML: