Listas III

Vemos las listas de definición y aprendemos a anidar listas para crear estructuras lista más complejas.

11/10/01 - Terminamos el tema de listas estudiando las listas de definición. Veremos también la anidación de listas.

Listas de definición

Cada elemento es presentado junto con su definición. La etiqueta principal es <dl> y </dl> (definition list). La etiquetas del elemento y su definición son <dt> (definition term) y <dd> (definition definition) respectivamente.

Aquí os proponemos un código que podrá aclarar este sistema:

<p>Diccionario de la Real Academia</p>
<dl>
    <dt>Brujula
    <dd>Señórula montada en una escóbula
    <dt>Oreja
    <dd>Sesenta minutejos
</dl>

El efecto producido:

Diccionario de la Real Academia

Brujula

Señórula montada en una escóbula

Oreja

Sesenta minutejos

Fijaos en que cada línea <dd> esta desplazada hacia la izquierda. Este tipo de etiquetas son usadas a menudo con el propósito de crear textos más o menos desplazados hacia la izquierda.

El código:

<dl>
<dd>Primer nivel de desplazamiento
    <dl>
       <dd>Segundo nivel de desplazamiento
       <dl>
          <dd>Tercer nivel de desplazamiento
       </dl>
    </dl>
</dl>

El resultado:

Primer nivel de desplazamiento

Segundo nivel de desplazamiento

Tercer nivel de desplazamiento

Anidando listas

Nada nos impide utilizar todas estas etiquetas de forma anidada como hemos visto en otros casos. De esta forma, podemos conseguir listas mixtas como por ejemplo:

<p>Ciudades del mundo</p>
<ul>
    <li>Argentina
    <ol>
       <li>Buenos Aires
       <li>Bariloche
    </ol>
    <li>Uruguay
    <ol>
       <li>Montevideo
       <li>Punta del Este
    </ol>
</ul>

De esta forma creamos una lista como esta:

Ciudades del mundo

• Argentina
  1. Buenos Aires
  2. Bariloche
• Uruguay
  1. Montevideo
  2. Punta del Este

+ 1 manual relacionado
+ 1 categoria relacionada
+ 3 comentarios (Añadir)
+ 1 comentario no revisado

Autoría, licencia y acciones sobre este artículo

Informe de Rubén Alvarez* Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright. * Para consultas técnicas utilizar la lista de correo. Versión imprimible del artículo Enviar artículo por e-mail Publicar un comentario del artículo

+ Entrar en Manuales de HTML

Añadir un comentario del artículo Los comentarios de los visitantes son para ampliar la información del artículo. Cualquiera puede participar.

Se muestran 3 comentarios revisados

Añadir un comentario del artículo

Comentarios sin revisar

Añadir un comentario del artículo Entre los comentarios no revisados puede haber algunos interesantes que se hayan enviado recientemente.

 Se ha encontrado un comentario sin revisar

Ver los comentarios no revisados

Añadir un comentario del artículo

Enlaces:

Maestrosdelweb

  Ir arriba