En este capítulo veremos cómo crear diferentes tipos de listas en XHTML.
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.
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.
Serviweb
Diseño web Murcia