Listas

All you base are belong to us.
Zero Wing, video juego arcade.

Ahora veremos cómo implementar listas en nuestras páginas. Las hay de tres tipos: ordenadas, sin ordenar, y de definición. Venga, que esto es muy facilito.

Listas ordenadas

Las listas ordenadas muestran sus elementos numerados. Se crean con la etiqueta <ol>:

<p>Mis escritores favoritos (en orden de preferencia):</p>
<ol>
 <li>R. A. Salvatore</li>
 <li>George R R Martin</li>

 <li>Isabel Allende</li>
</ol>

Hay que tener en cuenta que con CSS podemos cambiar el número por el que queremos empezar a contar, así como el tipo de numeración (números arábigos, romanos, letras del abecedario, mayúsculas).

Listas sin ordenar

Las listas sin ordenar marcan cada elemento con una viñeta, de modo que no se sigue una numeración. Se crean con la etiqueta <ul>.

<p>El helado perfecto (¡ñam!): </p>
<ul>
 <li>1 bola de helado de chocolate </li>

 <li>1 bola de helado de lim&oacute;n </li>
 <li>Trocitos de pi&ntilde;a y melocot&oacute;n en alm&iacute;bar </li>
 <li>Sirope de chocolate</li>
</ul>

Al igual que con las listas ordenadas, podemos modificar su apariencia con CSS y elegir el tipo de viñetas que queremos¹. Por cierto, prueba el helado, está riquísimo².

¹Es más, podemos sustituir las viñetas por imágenes.

²También puedes añadir guindas y nata.

Listas de definición

Las listas de definición se diferencian de las anteriores en que cada ítem está compuesto por un par de elementos: un término y su definición. Se usan estas etiquetas: <dl> para crear la lista, <dt> para cáda término y <dd> para las definiciones.

<p>Significado de algunos smileys : </p>
<dl>
 <dt>:)</dt>
 <dd>Sonrisa</dd>
 <dt>xD</dt>
 <dd>Carcajada</dd>

 <dt>:P</dt>
 <dd>Sacar la lengua</dd>
</dl>

Y sí, también se puede cambiar el aspecto y bla, bla, bla. Comentar que las palabras término y definición no sólo se refieren a una palabra y a su significado. También podemos usar una lista de definición para crear un perfil (por ejemplo), relacionando los pares Nombre-Leia, Ciudad-Coruscant y Profesión-Senadora.

Listas anidadas

No, las listas anidadas no son un nuevo tipo de lista, sólo una combinación de las anteriores. Anidar significa meter una lista dentro de otra. Por ejemplo:

<p>Algunos libros de Salvatore :</p>
<ul>
  <li>I Trilogía de El Elfo Oscuro
   <ol>

     <li>La Morada</li>
     <li>El Exilio</li>
     <li>El Refugio</li>
   </ol>
  </li>
  <li>Trilogía de El Valle del Viento Helado
   <ol>

     <li>La Piedra de Cristal</li>
     <li>Ríos de Plata</li>
     <li>La Gema del Halfling</li>
   </ol>
  </li>
</ul>

No es difícil, sólo debemos tener cuidado cerrando la etiqueta que toque. ¿Cómo lo sabemos? Fácil: primero se cierran las interiores, y después las de fuera. Es por esto, que cuando insertamos una lista dentro de un ítem de otra lista (esto es, primero <li> y después <ol>, después debemos cerrar primero la lista, y luego el ítem de la lista “exterior”. Un buen sangrado como el del ejemplo ayuda mucho.

 

Información adicional

Contenido publicado bajo licencia Creative Commons. Belén Albeza (BenKo)

Si tienes alguna pregunta de este ejemplo; puedes hacerla aqui en los foros.