UT 2: Lenguajes de Marcas: HTML
2.9.- Listas
Es una enumeración de dos o más elementos y suelen disponerse de tal forma que se facilite la
distinción entre ellos.
Podemos distinguir los siguientes tipos de listas:
✔ Listas no ordenadas
✔ Listas ordenadas
✔ Listas de definición
Cada uno de los tipos de listas tiene su propia etiqueta, y para su creación seguimos dos pasos:
1. Determinar el tipo de lista a crear
2. Insertar cada uno de los elementos de la lista
2.9.1.- Listas no ordenadas
Se trata de una colección de elementos en los que no importa el orden. Para su creación utilizamos la
etiqueta <ul> y </ul>, y entre ambas insertamos cada uno de los elementos que la componen.
Consta de un atributo type mediante el cual especificamos el tipo de viñeta con la que vamos a
preceder al elemento. Sus posibles valores son los siguientes:
✔ circle
✔ disc (valor por defecto)
✔ square
Para la inserción de cada uno de los elementos de la lista, usamo la etiqueta <li> y </li>, y entre
ambas ponemos el elemento HTML que forma parte de la lista.
22
UT 2: Lenguajes de Marcas: HTML
Ejemplo 11: Código XHTML
<html>
<head>
<title>Jacarandá :: XHTML :: Listas Ordenadas</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
</head>
<body>
<h1>Mi ordenador tienes las siguientes características:</h1>
<h3> Listas Ordenadas tipo disc</h3>
<ul>
<li>Procesador Pentium IV</li>
<li> CD-ROM</li>
<li> Tarjeta de sonido</li>
<li> Tarjeta de vídeo</li>
</ul>
<h3> Listas Ordenadas tipo circle</h3>
<ul type="circle">
<li>Procesador Pentium IV</li>
<li> CD-ROM</li>
<li> Tarjeta de sonido</li>
<li> Tarjeta de vídeo</li>
</ul>
<h3> Listas Ordenadas tipo square</h3>
<ul type="square">
<li>Procesador Pentium IV</li>
<li> CD-ROM</li>
<li> Tarjeta de sonido</li>
<li> Tarjeta de vídeo</li>
</ul>
</body>
</html>
23
UT 2: Lenguajes de Marcas: HTML
Figura 12. Ejemplo 11. Listas No Ordenadas
2.9.2.- Listas ordenadas
Este tipo de listas numera los elementos de la lista en el orden en el que se han introducido en el
código XHTML.
La numeración se realiza con números empezando por el 1, y para su creación hacemos uso de la
etiqueta <ol> y </ol>, y entre ambas insertamos los elementos que componen la lista, al igual que en
las listas no ordenadas.
24
UT 2: Lenguajes de Marcas: HTML
Consta de un atributo type mediante el cual especificamos el tipo de numeración con la que vamos a
preceder al elemento. Sus posibles valores son los siguientes:
✔ 1: números (valor por defecto)
✔ a: letras en minúsculas
✔ A: letras en mayúsculas
✔ i: números romanos en minúsculas
✔ I: números romanos en mayúsculas
25
UT 2: Lenguajes de Marcas: HTML
Ejemplo 12: Código XHTML
<html>
<head>
<title>Jacarandá :: XHTML :: Listas Ordenadas</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
</head>
<body>
<h1>Mi ordenador tienes las siguientes características:</h1>
<h3> Listas Ordenadas tipo 1</h3>
<ol>
<li>Procesador Pentium IV</li>
<li> CD-ROM</li>
<li> Tarjeta de sonido</li>
<li> Tarjeta de vídeo</li>
</ol>
<h3> Listas Ordenadas tipo a</h3>
<ol type="a">
<li>Procesador Pentium IV</li>
<li> CD-ROM</li>
<li> Tarjeta de sonido</li>
<li> Tarjeta de vídeo</li>
</ol>
<h3> Listas Ordenadas tipo i</h3>
<ol type="i">
<li>Procesador Pentium IV</li>
<li> CD-ROM</li>
<li> Tarjeta de sonido</li>
<li> Tarjeta de vídeo</li>
26
UT 2: Lenguajes de Marcas: HTML
</ol>
<h3> Listas Ordenadas tipo A</h3>
<ol type="A">
<li>Procesador Pentium IV</li>
<li> CD-ROM</li>
<li> Tarjeta de sonido</li>
<li> Tarjeta de vídeo</li>
</ol>
<h3> Listas Ordenadas tipo I</h3>
<ol type="I">
<li>Procesador Pentium IV</li>
<li> CD-ROM</li>
<li> Tarjeta de sonido</li>
<li> Tarjeta de vídeo</li>
</ol>
</body>
</html>
En cualquiera de las listas, si en algún momento queremos insertar un nuevo elemento entre los ya
existentes usamos la etiqueta <li>, y automáticamente se realiza una renumeración de los elementos
de la lista.
2.9.3.- Listas de definición
Se usan para crear un conjunto de definiciones o descripciones.
Para su creación utilizamos la etiqueta <dl> y </dl>. En este caso no usamo la etiqueta <li> para
insertar cada uno de sus elementos, ya que ahora cada elemento de la lista consta de dos partes:
✔ El término a definir
Para lo cual usamos la etiqueta <dt> y </dt>, y entre ambas ponemos la palabra que
queremos definir.
✔ La definición del término
Para lo cual usamos la etiqueta <dd> y </dd>, y entre ambas ponemos el párrafo que
define el término, y que será mostrado sangrado con respecto a la palabra a definir.
27
UT 2: Lenguajes de Marcas: HTML
28
UT 2: Lenguajes de Marcas: HTML
Figura 13. Ejemplo 12. Listas Ordenadas
Ejemplo 13: Código XHTML
<html>
<head>
<title>Jacarandá :: XHTML :: Listas de Definición</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
</head>
<body>
<h1>Metalenguajes</h1>
<dl>
<dt>SGML</dt>
<dd>Metalenguaje para la definición de otros lenguajes de marcado</dd>
<dt>XML</dt>
<dd>Lenguaje basado en SGML y que se emplea para describir datos</dd>
<dt>RSS</dt>
<dt>GML</dt>
<dt>XHTML</dt>
<dt>SVG</dt>
<dt>XUL</dt>
<dd>Lenguajes derivados de XML para determinadas aplicaciones</dd>
</dl>
</body>
</html>
29
UT 2: Lenguajes de Marcas: HTML
Figura 14. Ejemplo 13. Listas de Definición
2.9.4.- Anidamiento de listas
En XHTML podemos insertar listas dentro de otras listas, del mismo o de distinto tipo. A esta
posibilidad se le llama anidamiento de listas, y la forma de realizarlo es incluir todo el código de una
lista dentro de uno de los elementos de la otra lista.
30
UT 2: Lenguajes de Marcas: HTML
Ejemplo 14: Código XHTML
<html>
<head>
<title>Jacarandá :: XHTML :: Anidamientos de listas</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
</head>
<body>
<h1>Ejemplo de anidamiento</h1>
<ol>
<li>Lunes
<ul type="square">
<li>Inglés</li>
<li>Francés</li>
</ul>
</li>
<li>Martes
<ol type="A">
<li>Propuesta de Ejercicios</li>
<li>Correción de Ejercicios</li>
</ol>
</li>
</ol>
</body>
</html>
Figura 15. Ejemplo 14. Anidamiento de listas
31