Icono Listas en HTML

Una habitual de organizar la información en un texto es hacer uso de:

  • Listas de términos, precedidos de un punto o cualquier otro signo.

  • Listas numeradas alfabéticamente, o con números arábicos o romanos, y cuyos elementos se diferencia con este número o letra.

  • Listas simples sin indicaciones o separadores.

  • Términos y sus definiciones.

  • Listas en las que los elementos se distribuyen en columnas.

  • Listas de varios de los tipos anteriores anidadas las unas en las otras

Todos estos tipos de listas, son las que podremos definir con ayuda de las directivas que HTML dispone para ello. Todas se explican a continuación, pese a ser empleadas solamente unas cuantas de ellas.


LISTAS MARCADAS O SIN ORDEN

O �Bullet list� por conocerse en inglés al punto o dibujo que precede a cada elemento con el nombre de �bullet�.

La lista se empieza delimitando por la directiva <UL>...</UL> (Unordered List, lista sin orden), entre las que se incluirán los elementos de la lista. Cada uno de los elementos irán precedidos de la directiva <LI> (List Item, artículo de la lista). Veamos un ejemplo:

Animales:
<UL>
<LI>Perros
<LI>Gatos
<LI>Peces
<LI>Hamsters
</UL>

Esto nos define una lista de animales, con un �bullet� o punto al lado del nombre de cada animal. Debe de hacerse notar que la directiva <LI> hace referencia siempre a un elemeto de un tipo de lista, y que tras el siguiente <LI>, hace un retorno de carro, pero no deja un línea en blanco.

Una característica del �punto� o carácter que aparece antes de cada uno de los nombre de animales cuando los visualizamos, es que podemos modificarlo por medio de un atributo que se introduce en la directiva que define la lista <UL>, y que es el atributo TYPE.

TYPE=�bullet�

Es la empleada por defecto y aparecerá un peque�o disco negro o punto.

TYPE=�circle�

aparece un disco vacío en el que se distingue el contorno.

TYPE=�square�

aparece un peque�o cuadrado negro al lado de cada elemento.


LISTAS NUMERADAS

Son semejantes a las anteriores, sólo que en lugar del bullet o punto negro que aparece por defecto, es este tipo de listas aparecen números arábicos, romanos y letras (mayúsculas o minúsculas).

En este caso la directiva que delimita la lista es <OL>...</OL> (Ordered List, lista ordenada), manteniendo la directiva abierta para cada elelmento de la lista tal y como vimos en las listas anteriores <LI>.

Al igual que la anterior directiva de listas con iconos, las listas ordendas también puedes ser modificadas en su apariencia, con un atributo que se introduce en la directiva que define la lista <OL>.

TYPE=�A�

comienza la lista numerándola con la letra A (al primer elemento), y prosigue con el resto de letras del índice alfabético.

TYPE=�a�

comienza la lista numerándola con la letra a (al primer elemento), y prosigue con el resto de letras del índice alfabético. Igual que la anterior pero en minúsculas.

TYPE=�1�

comienza la lista numerándola con la número 1 (al primer elemento), y prosigue con el resto de número arábicos. Este es el empleado por este tipo de listas como defecto.

TYPE=�I�

comienza la lista numerándola con la número I romano (al primer elemento), y prosigue con el resto de número romanos.

TYPE=�i�

comienza la lista numerándola con la número i romano (al primer elemento), y prosigue con el resto de número romanos. Al igual que el anterior, pero con los número en minúscula.

En este tipo de tablas, hay un atributo especialmente útil para la directiva <LI> y es el atributo VALUE, que posee la característica de comenzar el indicador de elemeto de la lista en el valor que a nosotros nos interese.

VALUE=�número indicativo de lugar�

Con este atributo (que debe de figurar en el <LI> que nos interese modificar), lo único que tenemos que hacer es color el número indicativo de lugar en el que queremos que comience. Por ejemplo, con TYPE=�A� y el primer <LI VALUE=5>, el primer elemento comenzaría en el quinto lugar del alfabeto, es decir por el elemento �E�. En el caso de que fuera una lista de tipo TYPE=�1� y el primer elemento tuviera un valor <LI VALUE=5>, el primer elemento comenzaría con el índice �5�. Si la lista fuera de tipo TYPE=�I� (número romanos), y el valor del primer elemento fuera <LI VALUE=5>, el primer elemento tendría un valor de �V� (lo mismo para los indices alfabéticos y romanos en minúsculas).

Otra forma de comenzar la lista por un valor que queremos nosotros predeterminado, es el de indicarlo con el atributo START en la directiva decomienzo de definición de la lista <OL>.

START=�número�

Este atributo indica el índice numérico en el que debe de comenzar la lista.

NOTA: la direfencia entre este atributo y el anterior VALUE, es que el atributo START sólo se puede colocar al comienzo de una lista, y el atributo VALUE se puede indicar en cualquier elemento <LI> que queramos modificar.

Un ejemplo sería <OL START=5 TYPE=i>...</OL>, que haría que comenzara la lista en el valor 5 en números romanos (es decir en �v�).


LISTAS DE DEFINICIONES

O también conocidas como �glossary list� (listas de glosario). Se trata de una lista de 2 niveles: cada elemento se descompone en un nombre que ocupa la primera línea, y una definición que ocupa las siguiente.

La lista está delimitada por la directiva <DL>...</DL> (definition list, lista de definición). En estas listas el elemento a definir debe de llevar la directiva <DT> en lugar de la <LI> anterio, y la definición de este elemento la directiva <DD>.

En este tipo de listas poco más se puede a�adir, ya que no hay atributos de ningún tipo. Un ejemplo de este tipo de listas sería:

<DL>
<DT>Coche
<DD> Vehículo de 4 o más ruedas que sirve para desplazar cosas, personas o animales.
</DL>


MENUS, LISTAS PLANAS

Son la forma más sencilla, pero no resulta habitual encontrarlas. Esto se pude deber a que no es fácil simularlas con párrafos y la directica <QUOTE>, y a que no todos los navegadores las interpretan correctamente.

La lista se delimita con la directiva cerrada <MENU>...</MENU> y cada elemento por <LI>. Un ejemplo de este tipo de lista podría ser:

Los nueve planetas
<MENU>
<LI>Mercurio
<LI>Venus
<LI>Tierra
<LI>Marte
<LI>Jupiter
<LI>Saturno
<LI>Urano
<LI>Neptuno
<LI>Plutón
</MENU>

(En este caso e interpretan igual que una lista del tipo <UL>...</UL>)


DIRECTORIOS

Es un tipo de lista poco frecuente que se delimita por la directiva cerada <DIR>...</DIR>. Aquí al contrario de lo que pasa en el resto de las directivas de trabajo con listas, los elementos no se distribuyen �verticalmente�, uno sobre otro, si no que se usan tabuladores para dsitribuirlas horizontalmente en la línea. Esto no quiere decir que todos los elementos se distribuyan en una sola línea, si no simplemente que se organizan en columnas y líneas. El delimitador de la lista de cada elemento es <LI>, al igual que en las otras listas. Veamos un ejemplo:

Los 15 de la UE
<DIR>
<LI>Alemania
<LI>Austria
<LI>Bélgica
<LI>Dinamarca
<LI>Espa�a
<LI>Francia
<LI>Finlandia
<LI>Grecia
<LI>Holanda
<LI>Irlanda
<LI>Italia
<LI>Luxemburgo <LI>Portugal
<LI>Reino U.
<LI>Suecia
</DIR>

Si el navegador lo interpreta bien se tendría:

Alemania    Austria    Bélgica    Dinamarca    Espa�a    Francia
Finlandia    Grecia     Holanda   Irlanda            Italia         Luxemburgo
Portugal      Reino U. Suecia

NOTA: Ni todos los navegadores interpretan <DIR>...</DIR>, ni los que lo hacen siguen el mismo criterio. Resulta frecuente encontrarse con que el efecto final es similar al de la directiva <MENU>...</MENU>


LISTAS DE VARIOS NIVELES

Con mucha frecuencia se encuentran listas de varios niveles, o también denominadas �listas anidadas�, en los documentos. Además es muy habitual que se mezclen tipos de listas.

�Cómo hacerlo?, sólo hay que tener presente que un elemento de una lista puede ser cualquier otro elemento HTML, por ejemplo otra lista. Este es un ejemplo de lista anidada:

<OL>
  <LI>UNO
  <LI>DOS
  <LI>TRES

   <UL>
   <LI><LI>CUATRO
   <LI><LI>CINCO
   <LI><LI>SEIS
   </UL>

  <DL>
  <DT>ELEMENTO<DD><DT>TERM<DD><LI>SIETE
  <DT>ELEMENTO<DD><LI>OCHO
  <DT>ELEMENTO<DD><LI>NUEVE
  </DL>

<LI>DIEZ
</OL>

Anterior Menu Anterior
Hosted by www.Geocities.ws

1