Clase No. 4

LISTAS  

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:

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>Vicepresidencia Financiera
<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:

A. Dirección de Informática

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>Vicepresidencia Financiera
<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>

lo que producirá una lista similar a:

o   Ítem 1
o   Ítem 2
o   Ítem 3
o   Ítem 4

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>