En ocasiones es necesario presentar información de manera ordenada mediante listas con viñetas o listas numeradas. Con HTML se pueden crear tres de estos tipos de listados: listas ordenadas o numeradas, listas con viñetas o listas de definición, cada una de ellas con sus variaciones.
LISTA ORDENADA <OL>
Considere el caso en el que debe presentar la lista numerada de algunas de
las dependencias de la empresa donde trabaja, comenzando con un número en
particular:
las dependencias de la empresa donde trabaja, comenzando con un número en
particular:
4. Dirección de Informática
5. Planeación
6. Vicepresidencia Financiera
7. Comunicaciones
El listado anterior se consigue en HTML mediante el uso de las etiquetas <OL> (Ordered List) y <LI> (List Item):
<OL TYPE ="1" START ="4">
<LI>Dirección de Informática
<LI>Planeación
<LI>Planeación
<LI>Vicepresidencia Financiera
<LI>Comunicaciones
<LI>Comunicaciones
</OL>
En la etiqueta <OL>, el atributo TYPE ="1" indica que la lista será
numérica (el número entre comillas puede ser cualquier entero y el resultado será el mismo), mientras que el atributo START ="4" hace que el primer elemento del listado esté precedido por el número 4, el segundo por el número
sucesivamente. Sí no se incluye ninguno de los dos atributos anteriores, el explorador desplegará la misma lista pero comenzando el listado en 1.
Sí se quiere presentar el mismo listado pero de la siguiente manera:
B. Planeación
C. Vicepresidencia Financiera
D. Comunicaciones
Bastará con cambiar el 1 del atributo TYPE por una A y el 4 del atributo START por un 1, o simplemente omitir éste último:
<OL TYPE = "A" START ="1">
<LI>Dirección de Informática
<LI>Planeación
<LI>Planeación
<LI>Vicepresidencia Financiera
<LI>Comunicaciones
<LI>Comunicaciones
</OL>
EJERCICIO PROPUESTO
Cambie la A mayúscula del tributo TYPE por una i, luego por una I y finalmente por una a y observe los resultados.
LISTA CON VIÑETAS <UL>
Sí en lugar de una letra o un número precediendo los ítems del listado, lo que se quiere es que aparezca una viñeta, se debe entonces utilizar la etiqueta <UL> (Unorderd List) de la siguiente manera:
<UL TYPE = "circle">
<LI> Ítem 1
<LI> Ítem 2
<LI> Ítem 3
<LI> Ítem 4
</UL>
<LI> Ítem 3
<LI> Ítem 4
</UL>
lo que producirá una lista similar a:
La etiqueta <UL> únicamente tiene el atributo TYPE, que se refiere al tipo de viñeta que presentará. Pruebe omitiendo este atributo o cambiando circle por disc o por square.
LISTA DE DEFINICIÓN <DL>
Esta etiqueta como su nombre lo indica, permite desplegar listas de palabras con su correspondiente definición. Se utiliza típicamente en la construcción de glosarios. Considere por ejemplo, la siguiente lista de términos que definen las funciones de algunas dependencias de la empresa:
PLANEACIÓN:
Encargada de ejecutar y revisar los planes de inversión.
INFORMÁTICA:
Encargada de diseñar, implementar y ejecutar los planes de desarrollo informático en la empresa.
RECURSOS HUMANOS:
Encargada de los asuntos relacionados con el recurso humano.
El listado anterior se comienza y termina con las etiquetas <DL> y </DL>. Cada uno de los términos a definir se precede con la etiqueta <DT>, mientras que a la definición en sí, se le antepone la etiqueta <DD>:
<DL>
<DT>PLANEACIÓN:
<DD>Encargada de ejecutar y revisar los planes de inversión. <DT>INFORMÁTICA:
<DD>Encargada de diseñar, implementar y ejecutar los planes de desarrollo informático
en la empresa.
<DT>RECURSOS HUMANOS.
<DD>Encargada de los asuntos relacionados con el recurso humano.
</DL>
