Listas


Listas
 
Existen varios tipos de listas en HTML. Todas ellas se pueden meter unas dentro de otras formando árboles muy bonitos y preciosos. Todos los tipos siguen el siguiente formato:

<tipo_lista>
  <LI>Primer elemento
  <LI>Segundo elemento
</tipo_lista>

tipo_lista puede ser una de las siguientes: DIR, DL, MENU, OL y UL.

Listas desordenadas

 La etiqueta <UL> nos permite presentar listas de elementos sin orden alguno. Cada elemento de la lista irá normalmente precedido por un círculo. Por ejemplo,

<UL>
  <LI>Primer elemento
  <LI>Segundo elemento
</UL>

se verá como

  • Primer elemento
  • Segundo elemento

La etiqueta <UL> admite estos parámetros:

 

Parámetro Utilidad Resultado
COMPACT Indica al navegador que debe representar la lista de la manera más compacta posible.

  • Primer elemento
  • Segundo elemento

 

TYPE="disc", "circle", "square" Indica al navegador el dibujo que precederá a cada elemento de la lista. Para mayor flexibilidad se admite también como parámetro de <LI>.

  • Tipo disc
  • Tipo circle
  • Tipo square

 

También son listas desordenadas aquellas que utilizan las etiquetas <DIR> y <MENU>. En principio tenían como propósito representar una lista estilo directorio (multicolumna) o tipo menú (una sola columna). En la práctica los navegadores lo han implementado como sinonimos de <UL>, por lo que no los estudiaremos aquí.

Listas ordenadas

 La etiqueta <OL> nos permite presentar listas de elementos ordenados de menor a mayor. Normalmente cada elemento de la lista irá precedido por su número en el orden. Por ejemplo,

<OL>
  <LI>Primer elemento
  <LI>Segundo elemento
</OL>

se verá como

  1. Primer elemento
  2. Segundo elemento

La etiqueta <OL> admite estos parámetros:

 

Parámetro Utilidad Resultado
COMPACT Indica al navegador que debe representar la lista de la manera más compacta posible.

  1. Primer elemento
  2. Segundo elemento

 

TYPE="1", "a", "A", "i", "I" Indica al navegador el tipo de numeración que precederá a cada elemento de la lista. Para mayor flexibilidad se admite también como parámetro de <LI>.

  1. Tipo 1
  2. Tipo a
  3. Tipo A
  4. Tipo i
  5. Tipo I

 

START="num" Indica al navegador el número por el que se empezará a contar los elementos de la lista.

  1. Primer elemento
  2. Segundo elemento

 

VALUE="num" Atributo de <LI>, actúa como START pero a partir de un elemento predeterminado.

  1. Primer elemento
  2. Segundo elemento
  3. Tercer elemento

 

Listas de definiciones

 Este es el único tipo de lista que no utiliza la etiqueta <LI>. Al tener como objetivo presentar una lista de definiciones, de modo que tiene que representar de manera distinta el objeto definido y la definición. Esto se hace por medio de las etiquetas <DT> y <DD>:

<DL>
  <DT>Primer elemento<DD>Es un elemento muy bonito.
  <DT>Segundo elemento<DD>Este, en cambio, es peor.
</DL>

se verá como

Primer elemento
Es un elemento muy bonito.
Segundo elemento
Este, en cambio, es peor.

La etiqueta <DL> sólo admite como parámetro el ya conocido COMPACT, que tiene el mismo comportamiento que con los otros dos tipos de lista anteriores.

 

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: