Tema 6Listas

Las listas pueden utilizarse para enumerar elementos o enlistarlos con viñeta. Existen 3 tipos de listas: ordenadas, desordenadas y descriptivas. Cada tipo cuenta con su propia etiqueta y se utiliza en diferentes contextos. Estos elementos son muy útiles; un uso común de estos elementos es en las barras de navegación como la que está a la izquierda de esta página.

Listas Ordenadas

Las listas ordenadas, como su nombre lo indica, muestran sus elementos en orden. Su etiqueta es <ol> por su nombre en inglés, ordered list. Por cada elemento de la lista tienes que añadir la etiqueta <li>. El atributo type especifica el tipo de numeración que utlizará la lista ordenada. Observa el siguiente ejemplo:

<ol>
<li> Primer elemento </li>
<li> Segundo elemento </li>
<li> Tercer elemento </li>
<li> Cuarto elemento </li>
<li>
    <ol type="a">
       <li> Otro primer elemento </li>
       <li> Otro segundo elemento </li>
    </ol>
</li>
</ol>

Este ejemplo se vería así:

  1. Primer elemento
  2. Segundo elemento
  3. Tercer elemento
  4. Cuarto elemento

    1. Otro primer elemento
    2. Otro segundo elemento

Puedes notar que utilizamos dos listas, una dentro de otra, y que cambiamos el atributo type para que nos muestre la lista con incisos alfabéticos asignándole "a".

El atributo type es numérico por defecto (por eso no lo incluimos en la primera lista). Además de type="a" , podemos hacer listas ordenadas de los siguientes tipos:

  • type="A" Alfabético mayúscula.

  • type="I" Números romanos mayúscula.

  • type="i" Números romanos minúscula.

Listas Desordenadas

Los elementos de estas listas no se ordenan. Su etiqueta es <ul> por su nombre en inglés, unordered list; al igual que las listas ordenadas, cada elemento debe de estar dentro de la etiqueta <li>. Este tipo de lista no tiene atributo type, para modificar su estilo podemos utilizar el atributo style, pero es mejor utilizar un archivo CSS aparte para mantener el orden de los archivos. Veremos cómo modificar los estilos en el siguiente módulo.

<ul>
<li> Café </li>
<li> Leche </li>
<li> Pan </li>
<li> Huevos </li>
<li> Verduras
    <ul>
       <li> Lechuga </li>
       <li> Tomate </li>
       <li> Cebolla </li>
    </ul>
</li>
</ul>

El código anterior se ve de la siguiente manera:

  • Café
  • Leche
  • Pan
  • Huevos
  • Verduras
    • Lechuga
    • Tomate
    • Cebolla

En este ejemplo también utilizamos una lista dentro de otra; como puedes ver, no hay ningún tipo de numeración u orden en los elementos.

Módulo 2

Tu Progreso

100%

Progreso General del Curso