Listas XHTML

07/12/07 - Listas ordenadas

Las listas ordenadas se crean con la etiqueta <ol> y muestran sus elementos numerados:

<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>

Tengamos presente que con CSS podremos modificar el número por el que empieza a contar, también elegir el tipo de numeración (números romanos, arábigos, letras, mayúsculas, etc…).

Listas sin ordenar

Este tipo de listas sin orden se crean con la etiqueta <ul> y marcan cada elemento con una viñeta:

<p>El helado perfecto (¡ñam!):</p>
<ul>
<li>1 bola de helado de chocolate</li>
<li>1 bola de helado de limón</li>
<li>Trocitos de piña y melocotón en almíbar</li>
<li>Sirope de chocolate</li>
</ul>

De la misma manera que con las listas ordenadas, es posible cambiar su aspecto con hojas de estilo y elegir la clase de viñetas e incluso cambiar las viñetas por una imagen.

Listas de definición

Estas listas son diferentes a las anteriores porque cada ítem se compone de dos elementos; un término y su definición. Las etiquetas que se utilizan son: <dl> para crear la lista, <dt> para cada término y <dd> para las definiciones.

Por ejemplo:

<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>

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.

También podemos cambiar su aspecto con CSS.

Listas anidadas

Anidar significa meter una lista dentro de otra. Las listas anidadas son sólo una combinación de las anteriores.

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>

La precaución que debemos tener es cerrar la etiqueta que corresponda. Cerraremos primero las etiquetas interiores y luego las de afuera. Como se trata de insertar una lista dentro de un ítem de otra lista, debemos cerrar primero la lista interior y después el ítem de la lista exterior. Para esto no podemos ayudar visualmente con un buen tabulado.

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

Informe de Serviweb* Diseño web Murcia URL: http://www.serviweb.es/ Atención: Copyright. Este artículo no se puede reproducir sin la autorización expresa del autor. * 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

Comentarios de los visitantes

Añadir un comentario del artículo Aun no hemos recibido comentarios de este artículo. Puedes ser el primero en enviar tu comentario.

Enlaces:

Maestrosdelweb

  Ir arriba