Listas Ordenadas OL y Desordenadas UL en el lenguaje HTML.
Las listas son muy utilizadas en los documentos HTML para enumerar ítem o categorías de ejemplos.
Un ejemplo claro de listas es lo que se ve en el mapa del sitio, donde cada capítulo y sección está "listado", teniendo así una estructura tipo lista.
Las listas permiten organizar la información para que ésta sea lo más clara posible a los ojos del lector. Se pueden utilizar listas para estructurar documentos y/o listar artículos e ítems. Hay varios tipos de listas en el lenguaje HTML.
A continuación detallamos los diferentes tipos.
|| Listas desordenadas
| La etiqueta <UL> y </UL>
Este tipo de lista nos enumera los ítem precedidos mediante un símbolo que puede ser un círculo vacío, un circulo lleno (disco) o un cuadrado. El atributo que nos permite elegir el tipo de símbolo utilizado en nuestra lista es type. Este atributo puede tomar los siguientes valores:
| Valores del atributo type de la etiqueta <UL>
- circle: lista con símbolo círculo vacío
- disc: lista con símbolo disco lleno
- square: lista con símbolo cuadrado
Esta etiqueta no se utiliza sola, debemos complementarla con la etiqueta <LI> que nos permite definir el ítem de la lista.
| La etiqueta <LI> y </LI>
Como dijimos anteriormente estas dos etiquetas se utilizan conjuntamente. Vemos un ejemplo:
|| Ejemplo de Lista Desordenada o No numerada.
<HTML><HEAD>Encabezamiento del documento...</HEAD><BODY><UL type="circle"><LI type="square">Primer ítem de la lista</LI><LI>Segundo ítem de la lista</LI><LI>Tercer ítem de la lista</LI></UL></BODY></HTML>
Vemos que cada lista tiene su correspondiente etiqueta de cierre. Este código nos mostrará lo siguiente en cualquier browser:
- Primer ítem de la lista
- Segundo ítem de la lista
- Tercer ítem de la lista
En el ejemplo se utilizó el atributo type en la etiqueta <UL>
para definir un símbolo tipo "circulo vacío" general para todos los ítem de la lista, excepto para el primer ítem de la lista que tiene su propio símbolo definido también con el atributo type.
El uso de las listas no es para nada difícil. Lo anterior explicado sirve para que te des cuenta de qué estamos hablando cuando hablamos de Listas ordenadas o desordenadas (no numeradas>), pero la verdad es que con la actual versión del HTML y las
Hojas de estilo en cascada (CSS) el uso de las listas como se explicó anteriormente ya no se utiliza más. Con las hojas de estilos podemos formatear las listas como queramos sin la necesidad de utilizar las etiquetas <UL> (listas desordenadas) ni las <OL> (listas ordenadas). Podemos aplicar atributos directamente a la etiqueta <LI> para que la lista se muestre numerada o precedida de un símbolo, podemos aplicar diferentes tipos de márgenes y hasta colocar una imagen como símbolo de la lista. Entonces más adelante cuando ya el lenguaje HTML te sea demasiado fácil podrás seguir con las hojas de estilos en cascada (CSS) con las cuales podrás realizar trabajos mucho más eficientes y atractivos.
Igualmente te invito a que experimentes con estas etiquetas, puedes crear páginas de ejemplo con listas ordenadas y desordenadas y ver como funcionan, más adelante podrás aplicar atributos a estas listas para que tengan un estilo propio y atractivo.
|| Listas ordenadas
| La etiqueta <OL> y </OL>
El uso de esta etiqueta es idéntico a la anterior. La diferencia está en el símbolo que precede al texto de la lista, que en este caso será un número (decimal o romano) o una letra. En ambos casos los ítem de la lista estarán siempre ordenados de acuerdo al símbolo que se utilice. Lo vemos en un ejemplo:
|| Ejemplo de Lista ordenada o numerada.
<HTML><HEAD>Encabezamiento del documento...</HEAD><BODY><OL type="1"><LI>Primer ítem de la lista</LI><LI>Segundo ítem de la lista</LI><LI>Tercer ítem de la lista</LI></OL></BODY></HTML>
En este caso los valores posibles del atributo type para la etiqueta <OL> son:
| Valores del atributo type de la etiqueta <OL>
- 1: lista con símbolo numérico decimal
- i: lista con símbolo numérico romano en minúscula
- I: lista con símbolo numérico romano en MAYUSCULA
- a: lista con símbolo alfabético en minúscula
- A: lista con símbolo alfabético en MAYUSCULA
En este caso también es posible definir en la etiqueta <LI> un tipo de símbolo diferente al definido en la etiqueta <OL>.
Dejo un ejemplo de listas utilizando las etiquetas nombradas anteriormente para que estudies el código, no es nada difícil:)
|| Ejemplo de listas ordenadas y desordenadas en el lenguaje HTML.
En el ejemplo podemos ver que es posible utilizar las listas desordenadas y ordenadas de manera conjunta, es decir anidar las listas para lograr una estructura bien ordenada en las listas a crear. Es importante que entiendas bien el funcionamiento de la anidación ya que más adelante cuando veamos Creación de tablas en el lenguaje HTML este método se utilizará bastante. Quizás las listas no te resulten muy interesantes pero las Tablas conforman la estructura de todo sitio web elaborado. Por ejemplo este sitio tiene más de una docena de tablas anidadas, todas ellas forman y estructuran el sitio que estás viendo.
En el ejemplo anterior vemos un texto de color verde al lado de cada línea de código. Estos son comentarios que suelen poner los programadores para ayudar a identificar qué hace cada etiqueta. No es obligatorio usarlos pero son muy útiles para algunos casos. Los comentarios se colocan entre los símbolos <!--
y --> y no son visibles en el navegador, es decir que solo los vemos en el código fuente de nuestra página.
Información relativa al artículo.
