8. Listas

  1. Tipos de listas
  2. Cambiar el estilo

Tipos de listas

En lenguaje Html podemos crear diferentes tipos distintos de listas. Estás listas pueden contener a su vez otras listas anidadas.
Existen tres tipos diferentes de listas: las listas numeradas, las listas no numeradas y las listas de definiciones. Veamos las diferencias entre ellas y el formato de escritura.

Listas numeradas
<ol> </ol> Inicio y fin respectivamente de lista numerada
<li> </li> Elemento de la lista
Ejemplo:

  1. Elemento 1
  2. Elemento 2
  3. Elemento 3
 Estructura:

<ol>
  <li>Elemento 1</li>
  <li>Elemento 2</li>
  <li>Elemento 3</li>
</ol>

Al escribir el código es conveniente meter las líneas hacia la derecha a medida que disminuimos los niveles, como se muestra arriba, para una mejor visualización cuando queramos modificar la página posteriormente.
Listas de viñetas o no numeradas
<ul> </ul> Inicio y fin respectivamente de lista numerada
<li> </li> Elemento de la lista
Ejemplo:

  • Elemento 1
  • Elemento 2
  • Elemento 3
 Estructura:

<ul>
  <li>Elemento 1</li>
  <li>Elemento 2</li>
  <li>Elemento 3</li>
</ul>
Listas de definiciones>
<dl> </dl> Inicio y fin respectivamente de lista numerada
<dt> </dt> Elemento de la lista
<dd> </dd> Definición del elemento de la lista
Ejemplo:

Elemento 1
Definición elemento 1
Elemento 2
Definición elemento 2
Elemento 3
Definición elemento 3
 Estructura:

<dl>
  <dt>Elemento 1</dt>
    <dd>Definición elemento 1</dd>
  <dt>Elemento 2</dt>
    <dd>Definición elemento 2</dd>
  <dt>Elemento 3</dt>
   <dd>Definición elemento 3</dd>
</dl>

Un consejo: La creación de listas puede resultar un tanto liosa por la cantidad de etiquetas necesarias, sobretodo si usamos listas anidadas. Por ello es muy recomendable crear la estructura de etiquetas antes de escribir el texto de la lista.

Por ejemplo. Si queremos un lista de viñetas de tres ítem, donde el segundo ítem contiene una lista de definiciones con dos elementos, y el tercero una lista numerada con tres ítem escribiremos la siguiente estructura antes de escribir el texto:

<ul>
  <li></li>
  <li><dl>
    <dt></dt><dd></dd>
    <dt></dt><dd></dd></dl></li>
  <li><ol>
    <li></li>
    <li></li>
    <li></li></ol></li>
</ul>

Ahora sólo queda escribir en el lugar correspondiente los diferentes elementos de la lista.

Veamos un ejemplo y el resultado final:

EjemploResultado
<html>
 <head>
 </head>
 <body>
  <ul>
  <li>Primavera</li>
  <li>Verano<dl>
    <dt>Campo</dt><dd>Destinos de interior</dd>
    <dt>Playa</dt><dd>Destinos de costa</dd></dl></li>
  <li>Invierno<ol>
    <li>Turismo rural</li>
    <li>Esquí</li>
    <li>Turismo urbano</li></ol></li>
</ul>
 </body>
</html>

Actividad 8.1

  1. Crea un nuevo archivo receta.htm
  2. Escribe un encabezado centrado que diga PASTEL
  3. Crea una lista de definiciones con tres ítem: Ingredientes, Pasos a seguir y notas
  4. Dentro de la definición de Ingredientes crea una lista no numerada con los ingredientes:
    • 100 g de harina
    • 10 g de azúcar
    • 1 taza de agua
    • 2 huevos
    • sal y pimienta al gusto
  5. Dentro de la definición de Pasos a seguir crea una lista numerada con los pasos siguientes:
    1. Mezcle bien los ingredientes secos.
    2. Vierta los ingredientes líquidos.
    3. Remueva durante 10 minutos.
    4. Hornear durante una hora a 300 grados.
  6. Dentro de la definición de Notas escribe: Puede añadir pasas y almendras picadas para mejorar la receta.
  7. Este es el aspecto final que debe tener:
    pastel.htm
  8. Guarda la página y ábrela en el navegador para ver el resultado.
Arriba

Cambiar el estilo

Las etiquetas que acabamos de ver para crear listas no tienen atributos opcionales, estos han sido eliminados para dar paso a las propiedades de las hojas de estilo.

• list-style-type

La propiedad list−style−type define el tipo de numeración de las listas numeradas, o el símbolo en las no numeradas, que aparecerá delante de cada ítem.
Estos son sus posibles valores y su resultado (en caso de no ver el resultado esperado es porque el navegador no puede interpretarlo):

Valor Descripción Resultado
Valores para <ol>
decimal Números decimales empezando por 1 (1, 2, 3, 4, ...), es el valor por defecto
  1. Ítem
  2. Ítem
decimal−leading−zero Números decimales precedidos de 0 (01, 02, 03, 04, ...)
  1. Ítem
  2. Ítem
lower-roman Números romanos en minúsculas (i, ii, iii, iv, ...)
  1. Ítem
  2. Ítem
upper-roman Números romanos en mayúsculas (I, II, III, IV, ...)
  1. Ítem
  2. Ítem
hebrew Numeración tradicional hebrea
  1. Ítem
  2. Ítem
georgian Numeración tradicional georgiana (an, ban, gan, ..., he, tan, in, in-an, ...).
  1. Ítem
  2. Ítem
armenian Numeración tradicional armenia
  1. Ítem
  2. Ítem
cjk-ideographic Numeración ideográfica
  1. Ítem
  2. Ítem
hiragana Numeración japonesa hiragana (a, i, u, e, o, ka, ki, ...)
  1. Ítem
  2. Ítem
katakana Numeración japonesa katakana (A, I, U, E, O, KA, KI, ...)
  1. Ítem
  2. Ítem
hiragana-iroha Numeración japonesa hiragana-iroha (i, ro, ha, ni, ho, he, to, ...)
  1. Ítem
  2. Ítem
katakana-iroha Numeración japonesa katakana-iroha (I, RO, HA, NI, HO, HE, TO, ...)
  1. Ítem
  2. Ítem
lower-latin o lower−alpha Minúsculas (a, b, c, ... z)
  1. Ítem
  2. Ítem
upper-latin o upper−alpha Mayúsculas (A, B, C, ... Z)
  1. Ítem
  2. Ítem
lower-greek Minúsculas griegas (α, β, γ, ...)
  1. Ítem
  2. Ítem
Valores para <ul>
disc Discos
  • Ítem
  • Ítem
circle Círculos
  • Ítem
  • Ítem
square Cuadrados
  • Ítem
  • Ítem

Veamos con un ejemplo como se usa esta propiedad:

EjemploResultado
<html>
 <head>
 </head>
 <body>
  <p>Lista con números romanos</p>
  <ol style="list-style-type: lower-roman;">
    <li>Primavera</li>
    <li>Verano</li>
    <li>Otoño</li>
    <li>Invierno</li>
  </ol>
 </body>
</html>

• list-style-image

Esta propiedad permite definir una imagen de un archivo externo como símbolo delante de cada ítem. Observa en el siguiente ejemplo como se usa.

EjemploResultado
<html>
 <head>
 </head>
 <body>
  <p>Lista con imágenes</p>
  <ol style="list−style−image: url('flecha.gif');">
    <li>Primavera</li>
    <li>Verano</li>
    <li>Otoño</li>
    <li>Invierno</li>
  </ol>
 </body>
</html>

• list-style-position

Esta propiedad indica la posición del símbolo o el número con respecto al ítem. Sus dos valores y su resultado son los siguientes:

Valor Descripción Resultado
inside Con este valor el símbolo queda dentro del párrafo
  • Primer ítem. Con este valor el símbolo queda dentro del párrafo
  • Segundo ítem. Con este valor el símbolo queda dentro del párrafo
outside Con este valor el símbolo queda al margen del párrafo
  • Primer ítem. Con este valor el símbolo queda al margen del párrafo
  • Segundo ítem. Con este valor el símbolo queda al margen del párrafo

Actividad 8.2

  1. Crea un archivo musica.htm en el que vamos a crear la lista de tus grupos favoritos utilizando el formato de listas
  2. Escribe un encabezado centrado que diga MIS GRUPOS FAVORITOS
  3. Crea una lista de viñetas con grupos o cantantes que te gusten
  4. Dentro de cada grupo crea una lista de definiciones con tres álbumes suyos
  5. En la definición de cada autor escribe una lista numerada de las canciones del álbum con números romanos
  6. Guarda la página y ábrela en el navegador para ver el resultado.
Arriba
Vínculos Vínculos Valid HTML 4.01! Tablas Tablas