Actualizado el 14-01-2007
versión para imprimir
Listas en tu página
listas numeradas o no numeradas
Bien, supongamos que en nuestra página queremos publicar nuestra Carta a los Reyes Magos. Y en ella pedimos un ordenador pentium 1000 (ya, es que la primera versión de este manual es muy antigua ...), tarifa plana, unas vacaciones en el caribe, y que desaparezca nuestro Jefe. No está mal, pero no resalta demasiado.
Pongámoslo en una lista:
<ol> <li>un ordenador pentium 1000</li> <li>tarifa plana ¡ya!</li> <li>vacaciones en el caribe</li> <li>vacaciones para nuestro jefe </li> </ol>
obtenemos:
- Un ordenador Pentium 1000
- Tarifa plana ¡ya!
- Vacaciones en el Caribe
- Vacaciones para nuestro Jefe
<ol> </ol> son las etiquetas que indican el
comienzo y fin de una lista
numerada.
<li></li> son las etiquetas que encierran cada uno de los items de la lista. Como quiera que en este caso la lista es numerada, se agrega automaticamente el número correspondiente.
Si queremos una lista no numerada, basta sustituir la
etiqueta <ol> </ol> por esta otra pareja:
<ul> </ul> (ordered list, unordered list):
<ul> <li>un ordenador pentium 1000 </li> <li>tarifa plana ¡ya! </li> <li>vacaciones en el caribe </li> <li>vacaciones para nuestro jefe</li> </ul>
y obtenemos:
- Un ordenador Pentium 1000
- Tarifa plana ¡ya!
- Vacaciones en el Caribe
- Vacaciones para nuestro Jefe
<ol> y <ul> son elementos formadores de bloque, lo que quiere decir, entre otras cosas, que no deben estar dentro de un párrafo delimitado por <p>
variantes de las listas ordenadas
numerada normal, como hemos visto
<ol> <li>un ordenador pentium 1000</li> <li>tarifa plana ¡ya!</li> <li>vacaciones en el caribe</li> <li>vacaciones para nuestro jefe </li> </ol>
lista ordenada con letras ...:
<ol type="A"> <li>Un ordenador Pentium 1000 </li> <li>Tarifa plana ¡ya! </li> <li>Vacaciones en el Caribe</li> <li>Vacaciones para nuestro Jefe </li> </ol>
lista con formato A, B, C ...
- Un ordenador Pentium 1000
- Tarifa plana ¡ya!
- Vacaciones en el Caribe
- Vacaciones para nuestro Jefe
El mismo tipo de orden, en minúsculas:
<ol type="a"> <li>Un ordenador Pentium 1000 </li> <li>Tarifa plana ¡ya! </li> <li>Vacaciones en el Caribe</li> <li>Vacaciones para nuestro Jefe </li> </ol>
minúsculas
- Un ordenador Pentium 1000
- Tarifa plana ¡ya!
- Vacaciones en el Caribe
- Vacaciones para nuestro Jefe
Ordenada con numeros romanos:
<ol type="I"> <li>Un ordenador Pentium 1000 </li> <li>Tarifa plana ¡ya! </li> <li>Vacaciones en el Caribe</li> <li>Vacaciones para nuestro Jefe </li> </ol>
numeros romanos
- Un ordenador Pentium 1000
- Tarifa plana ¡ya!
- Vacaciones en el Caribe
- Vacaciones para nuestro Jefe
numerada con numeros romanos en minúscula:
<ol type="i"> <li>Un ordenador Pentium 1000 </li> <li>Tarifa plana ¡ya! </li> <li>Vacaciones en el Caribe</li> <li>Vacaciones para nuestro Jefe </li> </ol>
numeros romanos en minúscula
- Un ordenador Pentium 1000
- Tarifa plana ¡ya!
- Vacaciones en el Caribe
- Vacaciones para nuestro Jefe
enredando con el orden de la lista
con el atributo start= añadido a una etiqueta <ol>, la lista comienza donde indiquemos. Y con el atributo value= añadido a una etiqueta <li>, podemos forzar la numeracion de esa etiqueta y las siguientes:
<ol start="7"> <li>Un ordenador Pentium 1000</li> <li>Tarifa plana ¡ya!</li> <li value="10">Vacaciones en el Caribe</li> <li>Vacaciones para nuestro Jefe</li> </ol>
comienza en 7, salta a 10
- Un ordenador Pentium 1000
- Tarifa plana ¡ya!
- Vacaciones en el Caribe
- Vacaciones para nuestro Jefe
enredando con las listas no ordenadas
Por defecto, las listas desordenadas son del tipo "disc", indicando el comienzo de cada item con un circulo relleno:
<ul> <li>Un ordenador Pentium 1000</li> <li>Tarifa plana ¡ya!</li> <li>Vacaciones en el Caribe</li> <li>Vacaciones para nuestro Jefe</li> </ul>
- Un ordenador Pentium 1000
- Tarifa plana ¡ya!
- Vacaciones en el Caribe
- Vacaciones para nuestro Jefe
Podemos cambiar el estilo con los siguientes atributos, que podemos añadir a <ul>, o a <li>, con lo que afectaran a toda la lista, o al item determinado:
<ul type="disc"></ul>: por defecto, circulo color solido. <ul type="circle"></ul>: circulo hueco <ul type="square"></ul>: cuadrado relleno.
- Un ordenador Pentium 1000
- Tarifa plana ¡ya!
- Vacaciones en el Caribe
- Vacaciones para nuestro Jefe
- Un ordenador Pentium 1000
- Tarifa plana ¡ya!
- Vacaciones en el Caribe
- Vacaciones para nuestro Jefe
Y combinando:
<ul style="disk"> <li type="circle">Un ordenador Pentium 1000</li> <li>Tarifa plana ¡ya!</li> <li>Vacaciones en el Caribe</li> <li type="square">Vacaciones para nuestro Jefe</li> </ul>
- Un ordenador Pentium 1000
- Tarifa plana ¡ya!
- Vacaciones en el Caribe
- Vacaciones para nuestro Jefe
Anidando listas
Podemos anidar listas unas dentro de otras:
<ul> <li>Un ordenador Pentium 1000 <ol> <li>128 megas de ram</li> <li>20 gigas de HD</li> <li>DVD</li> </ol> </li> <li>Tarifa plana ¡ya!</li> <li>Vacaciones en el Caribe</li> <li>Vacaciones para nuestro Jefe</li> </ul>
y obtenemos:
- Un ordenador Pentium 1000
- 128 megas de ram
- 20 gigas de HD
- DVD
- Tarifa plana ¡ya!
- Vacaciones en el Caribe
- Vacaciones para nuestro Jefe
Otro ejemplo de listas anidadas
<ul type="circle"> <li>Un ordenador Pentium 1000 <ul type=square> <li type="circle">128 megas de ram</li> <li>20 gigas de HD</li> <li>DVD</li> </ul> </li> <li>Tarifa plana ¡ya!</li> <li>Vacaciones en el Caribe</li> <li>Vacaciones para nuestro Jefe</li> </ul>
Y nos sale lo siguiente:
- Un ordenador Pentium 1000
- 128 megas de ram
- 20 gigas de HD
- DVD
- Tarifa plana ¡ya!
- Vacaciones en el Caribe
- Vacaciones para nuestro Jefe
como vemos, podemos anidar listas dentro de listas, numeradas o no
numeradas, combinando infinitamente estilos.
ATENCION: Aunque técnicamente es posible omitir la etiqueta de cierre </li>, en la práctica, con listas complicadas, te dará errores, asi que acostumbrate a usarla.
Las listas son formadoras de bloque y NO deben estar dentro de párrafos, sino aparte.
Si usas listas anidadas, encierra la lista interior dentro de una pareja de <li> <li>
Atributos en desuso tambien en las listas
Los atributos type, start, value, compact, estan todos declarados en desuso. Puedes ver las alternativas con CSS aqui.