Creando Listas en HTML

Una lista es un conjunto de elementos que tienen alguna relación, por ejemplo, la lista de compras de artículos del mercado, la lista de las personas más ricas del mundo, la lista de las marcas de automóviles, y así por el estilo se pueden confeccionar una infinidad de listas.

En HTML se manejan cinco tipos de listas, aunque tres son las más usuales:

  • Listas no ordenadas
  • Listas ordenadas
  • Listas de definición

Los otros dos tipos de listas son menos usuales y se comportan como listas no ordenadas.

  • Menús
  • Directorios

 

Listas no Ordenadas (Unordered lists)

En una lista no ordenada se colocan los elementos de la lista sin anteponer un valor numérico, en su lugar se coloca una marca (viñeta), que puede ser un circulo relleno, por ejemplo.

Para crear una lista no ordenada se utiliza <ul>——-</ul>, donde ul viene de la abreviación para unordered list. Cada elemento de la lista se agrega con <li>—-</li>, donde li significa list ítem (elemento de lista).

Asi una lista de animales de granjas puede ser introducida de la siguiente manera:

listas1
Fragmento de documento HTML con etiquetas para listas no ordenadas.

Como se observa <ul>—-</ul> es el contenedor de la lista no ordenada y <li>—</li> es el contenedor de cada elemento.

El documento HTML para crear esa lista se muestra a continuación:

listas2
Documento HTML con lista no ordenada.

Lo cual produce la siguiente salida. La marca que se antepone a cada elemento es por defecto un disco relleno.

listas3
Salida del navegador con lista no ordenada. viñeta por defecto disco relleno (disc)

El atributo type controla el tipo de viñeta que se utiliza en los elementos de la lista.

Atributo Opciones Descripción
type square

circle

disc

Tipo de viñeta que se utiliza en los elementos de la lista. Por defecto se aplica la opción disc.

 

Si se aplica a la etiqueta <ul type=”opción”> aplica el tipo de viñeta a todos los elementos de la lista. Pero se puede aplicar a elementos individuales utilizados en la etiqueta <li type=”opción”>.

En este ejemplo se está utilizando un tipo de viñeta diferente para cada elemento de la lista.

listas4
Fragmento de documento HTML con uso de viñetas diferentes para cada elemento de la lista.
listas5
Lista no ordenada con viñetas diferentes para cada elemento.

Para utilizar la misma viñeta para todos los elementos de la lista se aplica el atributo type a la etiqueta <ul>:

 

listas6
Uso de atributo type aplicado a etiqueta <ul>. para el mismo tipo de viñeta.
listas7
El mismo tipo de viñeta para cada elemento.

Listas Ordenadas (Ordered lists)

En una lista ordenada los elementos se colocan en un orden que puede ser numérico, romano (mayúscula y minúscula) y alfabético (mayúscula y minúscula).

La lista ordenada se crea con la etiqueta <ol>—-</ol>, y cada elemento se coloca con <li>—-</li>.

Los diferentes tipos de orden se controlan utilizando el atributo type, y el valor inicial de la lista con el atributo start.

Atributo Opciones Descripción
type 1 = numérico

I = romano mayúscula

i = romano minúscula

A = alfabético mayúscula

a = alfabético minúscula

Tipo de ordenamiento que se utiliza en los elementos de la lista. Por defecto se aplica la opción numérica.
start Número Valor de inicio de la lista, por defecto 1.

 

A continuación, se muestra un ejemplo de lista ordenada.

listas8
Fragmento de documento HTML utilizando la etiqueta <ol> para listas ordenadas.

Esto produce la siguiente salida.

listas9
Salida de lista ordenada con orden numérico.

Por defecto se utiliza el orden numérico, a partir de 1. Pero si quisiéramos utilizar el orden alfabético, a partir de la posición 5(E).

listas10
Fragmento de documento HTML con lista ordenada alfabética en mayúscula y comenzando en E.

La cual produce una salida con orden alfabético en mayúscula a partir de la letra E.

listas11
Lista ordenada alfabética en mayúscula, comenzando por E.

Listas de Definición (Definition lists)

En este tipo de lista existen dos elementos un término y su definición. Por lo que se requieren tres tipos de etiquetas:

 

Descripción Etiqueta de apertura Etiqueta de cierre
Crear la lista de definición <dl> </dl>
Crear elemento a definir <dt> </dt>
Crear una definición <dd> </dd>
listas12
Fragmento de documento HTML con uso de etiquetas para lista de definición.

 

La salida que se produce se muestra a continuación:

listas13
Ejemplo de salida de lista de definición.
Anuncios

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