LISTAS

Las listas representan uno de los instrumentos más difundidos para organizar la información dentro de los sitios web. Una de sus características principales es la de proporcionar un cuadro claro y sintético del tema tratado.

 

TIPOS DE LISTAS

 

Las listas ordenadas constan de una sola marca de apertura y cierre <OL></OL> Cada punto que queramos añadir a la lista, lo haremos dentro de la etiqueta <li> . La sintaxis correcta para elaborar listas ordenadas es:

<OL> Algunas localidades de Bogotá son: 
<LI> Usaquén   
<LI> Chapinero 

<LI> Santa Fe

 <LI> San Cristobal
</OL>

 

El resultado será

 

 Algunas localidades de Bogotá son:

  1. Usaquén

  2. Chapinero

  3. Santa Fe

  4. San Cristobal

 

Orden con letras mayúsculas:

<OL TYPE=A> Los países más grandes de Suramérica son:
<LI> Brasil
<LI> Venezuela
<LI> Colombia
</OL>

 

El resultado será

Los países más grandes de Suramérica son

A. Brasil

B. Venezuela

C. Colombia

Orden con letras minúsculas:

<OL TYPE=a> Las estaciones son: 
<LI> Primavera
<LI> Verano
<LI> Otoño

<LI> Invierno
</OL>

Orden con números romanos en mayúscula:

<OL TYPE=I> Eventos importantes en mi vida
<LI> Nacimiento
<LI> Bautismo
<LI> Primera comunión
</OL>

Orden con números romanos en minúscula (romanitos):

<OL TYPE=i> Grados de bachillerato
<LI> Sexto
<LI> Séptimo
<LI> Octavo
</OL>

 

Las listas desordenadas funcionan de manera similar a las ordenadas. La diferencia básica es que en el caso de las listas desordenadas no existen relaciones jerárquicas entre los elementos, por lo cual no se prevén ordenaciones progresivas como las obtenidas mediante números o letras.

Las listas desordenadas constan de una sola marca de apertura y cierre<UL></UL> y Cada punto que queramos añadir a la lista, lo haremos dentro de la etiqueta <li> . La sintaxis correcta para definir una lista desordenada es:

<UL> En la cafetería hay
<LI> empanadas
<LI> jugos
<LI> paquetes
</UL>

 

El atributo circle inserta circunferencias:

<UL TYPE=circle> Mis amigos son
<LI> Lucía
<LI> Pedro
<LI> Juan
</UL>

El atributo square inserta listas definidas por cuadrados sólidos:

<UL TYPE=square> Mis frutas favoritas son:
<LI> Manzana
<LI> Pera
<LI> Uvas
</UL>

 

LISTAS DE DEFINICIÓN:

Son aquellas que permiten crear una lista de elementos a manera

de diccionario, de ahí su nombre. Su utilización es muy simple,

puesto que sólo se requieren tres etiquetas básicas.<dl>: Crea una lista de definición.

<dt>: Define el título de un elemento de la lista.

<dd>: Define un elemento de la lista.

 

<DL>
<DT>MENOR COSTE
<DD>¡La nueva versión cuesta menos que la versión anterior!
<DT>MÁS FÁCIL DE USAR
<DD>¡Hemos cambiado el producto para que sea más fácil de usar!
<DT>SEGURO PARA LOS NIÑOS
<DD>Puede dejar a sus hijos solos en una habitación y no se harán daño 
</DL>

Resultado..
MENOR COSTE
  ¡La nueva versión cuesta menos que la versión anterior!
MAS FÁCIL DE USAR
  ¡Hemos cambiado el producto para que sea más fácil de usar!
SEGURO PARA LOS NIÑOS
  Puede dejar a sus hijos solos en una habitación y no se harán daño 

 

LISTAS ANIDADAS

Anidar quiere decir incluir una lista dentro de otra

Veamos el siguiente ejemplo:

<ol> Almacén por departamentos

   <li>Bebidas

     <ul>

      <li>Refrescos</li>

      <li>Zumos</li>

    </ul>

   </li>

 

  <li>Ropa

    <ul>

      <li>Pantalones</li>

      <li>faldas</li>

    </ul>

 

  </li>

</ol>