XHTML

 

Listas

Existen 3 tipos de listas: ordenadas, sin ordenar y de definición.

Listas ordenadas

Las listas ordenadas muestran sus elementos con un n úmero delante y se crean mediante la etiqueta <ol>. Para insertar un elemento en una lista se utiliza la etiqueta <li>.

<p>Mis escritores favoritos (en orden de preferencia):</p>
<ol>
<li>R.A.Salvatore</li>
<li>J.K.Rowling</li>
<li>Isabel Allende</li>
</ol>

Hay que tener en cuenta que con CSS podremos 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 muestran los elementos con una viñeta y se crean mediante 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ón</li>
<li>Trocitos de piña y melocotón en almíbar</li>
<li>Sirope de chocolate</li>
</ul>

Listas de definición

Las listas de definición se diferencian de las anteriores en que cada "item" está compuesto por un par de elementos: un término y su definición. Para crear una lista de definción se utilizan 3 etiquetas:

<dl>
para marcar la lista
<dt>
para un término
<dd>
para su definición
<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>

Listas anidadas

Las listas anidadas no son un nuevo tipo de listas. Es una combinación de las anteriores. Anidar signífica colocar una lista dentro de otra. Por ejemplo:

<ul>
<li>I Trilogía del Elfo Oscuro</li>
<li> <ol>
<li>La Morada</li>
<li>El Exilio</li>
<li>El Refugio</li>
</ol> </li>
<li>Trilogía del Valle del Viento Helado</li>
</ul>

Ejercicios

Ejercicio 1

Crea un lista ordenada con las canciones de "Diario de un peatón" de Joaquín Sabina.

Ejercicio 2

Crea listas anidadas con tus enlaces favoritos clasificados por categorías.

Ejercicio 3

Crea un documento XHTML con un mismo menú creado con una lista no ordenada.