EPET 20 Taller de Programación Estática y Laboratorio Web

Programación en XHTML: listas

Listas desordenadas, ordenadas y de definición

En la actualidad las listas son el recurso más utilizado para estructurar u organizar el contenido de nuestra página web. No sólo podemos crear simples listas, similares a las viñetas en los procesadores de texto, sino gracias a las hojas de estilos CSS se puede cambiar totalmente su apariencia y crear desde menús hasta galerías fotográficas.

Para definir listas se emplean las etiquetas "ol", "ul" y "li". Las primeras dos definen el tipo de lista y la última se utiliza para cada item. También existen las listas de definición. A continuación veremos cada una de ellas:

Listas desordenadas

Las listas desordenadas son las más simples y las que más se utilizan. Una lista desordenada es un conjunto de elementos relacionados entre sí pero para los que no se indica un orden o secuencia determinados. La etiqueta "ul" encierra todos los elementos de la lista y la etiqueta "li" define cada uno de sus elementos.

Se deben definir de la siguiente forma:

<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>

Todas las etiquetas "li" se deben cerrar y siempre se deben definir dentro de la etiqueta de apertura <ul> y la de cierre </ul>. No puede haber un elemento "li" suelto, de ser así el código no validará.

Por ejemplo:

Ingredientes para Tarta Mousse.
  • Chocolate para taza 200 g
  • Manteca 150 g
  • Azúcar 120 g
  • Claras 6
  • Sal 1 pizca
  • Yemas 6
  • Harina leudante 60 g
  • Crema de leche 300 g
  • Gelatina sin sabor 7 g
  • Agua 50 cc

En este tipo de listas no importa el orden de cada elemento.

Listas ordenadas

Las listas ordenadas son casi idénticas a las listas desordenadas, pero en este caso los elementos se muestran siguiendo un orden determinado. Cuando se crea por ejemplo una lista con las instrucciones de un producto, es importante el orden en el que se realiza cada paso. Se define mediante la etiqueta "ol". Los elementos de la lista se definen mediante la etiqueta "li", la misma que se utiliza en las listas desordenadas.

No se debe indicar el orden de cada elemento ya que el navegador se encarga de mostar el número correspondiente a cada ítem. Estos valores se pueden personalizar.

Se deben definir de la siguiente forma:

<ol>
<li>ítem</li>
<li>ítem</li>
<li>ítem</li>
</ol>

Por ejemplo:

Tarta Mousse preparación.
  1. Picar el chocolate
  2. Colocar en un bol de vidrio junto con la manteca
  3. Llevar al microondas 4 minutos al 40 % de potencia
  4. Revolver con cuchara de madera hasta que se fundan completamente
  5. Dejar entibiar
  6. Preparar un almíbar a 118º C con el azúcar
  7. Batir las claras a nieve con la sal
  8. Incorporar la mitad del almíbar en forma de hilo
  9. Continuar batiendo hasta lograr un merengue

En este caso, si importa el orden de cada elemento.

Listas de definición

Su funcionamiento es similar a un diccionario, ya que cada elemento de la lista está formado por términos y definiciones. La etiqueta "dl" crea la lista de definición y las etiquetas "dt" y "dd" definen el término y la descripción de cada elemento de la lista. Las etiquetas "dt" y "dd" se definen tantas veces como sea necesario.

Ejemplo:

Sinónimos gastronómicos.
<dl>
<dt>Almíbar</dt>
	<dd>sirop, miel, jarabe de azúcar, miel de azúcar</dd>
	
<dt>Azúcar impalpable</dt>
	<dd>azúcar flor, azúcar glass, azúcar pulverizada, nevazucar</dd>

<dt>Buñuelos</dt>
	<dd>bolita de masa de harina</dd>
	
<dt>Burritos</dt>
	<dd>tortilla típica de la gastronomía mexicana.</dd>

<dt>Cereza</dt>
	<dd>guinda, picota, capuli, capullin</dd>
</dl>

En el navegador se verá así:

lista de definición en navegador
Ejemplo de lista de definición.

Listas anidadas

En algunos casos necesitamos incluir una lista dentro de otra lista. Para ello hay que respetar siempre la misma estructura <ul>, <li></li> y </ul> ("ol" para las ordenadas). Sólo hay que verificar que la lista interna (hijo) debe ser parte de un elemento "li" de la lista principal (padre).

Por ejemplo:

Los Simpsons - Temporada 10

  • Capítulos
    1. Especial de noche de brujas
    2. El cuento de Dos cuidades
    3. Lisa y su amor por los árboles:
      • Lisa trata de proteger a un árbol que esta a punto de ser derribado, luego de conocer a unos mainfestantes quienes recriminan a Krusty Burgers por destruir los bosques...
        • Título en EE.UU:"Lisa the Tree Hugger"
        • Título en Espana:"Lisa la ecologista"
    4. Homero contra la dignidad
Este es un ejemplo un poco complejo, hay que tener cuidado con cerrar todas las etiquetas y verificar cada lista "hijo".

El código para crear el ejemplo anterior es:

<h3>Los Simpsons - Temporada 10</h3>
<ul>
<li>Capítulos 
	<ol>
	<li>Especial de noche de brujas</li>
	<li>El cuento de Dos cuidades</li>
	<li>Lisa y su amor por los árboles:
		<ul>
		<li>Lisa trata de proteger a un árbol
		que esta a punto de ser derribado, luego de 
		conocer a unos mainfestantes quienes recriminan
		a Krusty Burgers por destruir los bosques...
			<ul>
			<li>Título en EE.UU:"Lisa the Tree Hugger"</li>
			<li>Título en Espana:"Lisa la ecologista"</li>
			</ul>
		</li>
		</ul>
	</li>
	<li>Homero contra la dignidad</li>
	</ol>
</li>
</ul>
Nótese como se define una lista completa dentro del elemento "li" de otra lista (padre).

Una buena práctica es la indentación (sangrado) del código. Es decir, dejar un espaciado o tabulación para cada nueva lista interna. De esta forma es mas fácil de notar, a simple vista, qué listas (padres) contienen a qué otras listas (hijos).


anterior  arriba  siguiente

arriba