Lección 4: Listas | Curso HTML

Lección 4: Listas

En el momento que sea necesario agrupar elementos podemos acudir a las listas. Si los componentes pueden encajar en un orden caótico, que no es importante su colocación, la llamamos lista desordenada (lista de ingredientes, tareas, películas vistas, archienemigos…). Y cuando es necesario una armonía es llamado lista ordenada (pasos para una receta de cocina, prioridades, ganadores…).

Desordenada

Etiqueta <ul>
Descripción Lista desordenada.
Atributos Globales
Tipo Bloque

Cada elemento de su interior necesitará la etiqueta <li>.

Etiqueta <li>
Descripción Elemento de lista.
Atributos Globales
Tipo Bloque

Un ejemplo de su estructura.

<ul>
    <li>Aceite</li>
    <li>Harina</li>
    <li>Mermelada</li>
</ul>
  • Aceite
  • Harina
  • Mermelada

Ordenada

Etiqueta <ol>
Descripción Lista ordenada.
Atributos reversed: Dar la vuelta al orden.
start: Inicio.
type: Tipo de numerador (a, A, i, I y 1).
Tipo Bloque

Un ejemplo de su estructura.

<ol>
    <li>Precalentar horno</li>
    <li>Mezclar la Harina con agua</li>
    <li>Dejar que repose</li>
</ol>

El resultado será el siguiente.

  1. Precalentar horno
  2. Mezclar la Harina con agua
  3. Dejar que repose

Si quisieramos cambiar el orden descendiente.

<ol reversed>
    <li>Precalentar horno</li>
    <li>Mezclar la Harina con agua</li>
    <li>Dejar que repose</li>
</ol>
  1. Precalentar horno
  2. Mezclar la Harina con agua
  3. Dejar que repose

Indicar por el numera que se iniciará.

<ol start="8">
    <li>Precalentar horno</li>
    <li>Mezclar la Harina con agua</li>
    <li>Dejar que repose</li>
</ol>
  1. Precalentar horno
  2. Mezclar la Harina con agua
  3. Dejar que repose

O indicar que tipo de enumeración. Por ejemplo números romanos.

<ol type="I">
    <li>Precalentar horno</li>
    <li>Mezclar la Harina con agua</li>
    <li>Dejar que repose</li>
</ol>
  1. Precalentar horno
  2. Mezclar la Harina con agua
  3. Dejar que repose

Sublistas

Para lograr elementos en jerarquía, uno dentro de otro, debemos repetir la estructura anterior entre los <li> adecuados.

<ol>
    <li>Precalentar horno</li>
    <li>Mezclar la Harina con agua</li>
    <ul>
        <li>No olvidemos remover bien</li>
        <li> Cuidado con los grumos</li>
    </ul>
    <li>Dejar que repose</li>
</ol>
  1. Precalentar horno
  2. Mezclar la Harina con agua
    • No olvidemos remover bien
    • Cuidado con los grumos
  3. Dejar que repose

Pueden ser mezclados de todas las combinaciones posibles.

<ul>
    <li>Aceite</li>
    <li>Harina</li>
    <li>Mermelada</li>
    <ul>
        <li>Fresas</li>
        <li>Ciruela</li>
    </ul>
</ul>

  • Aceite
  • Harina
  • Mermelada
    • Fresas
    • Ciruela
<ul>
    <li>Aceite</li>
    <li>Harina</li>
    <li>Mermelada</li>
    <ul>
        <li>Fresas</li>
            <ul>
                <li>Grandes</li>
                <li>Pequeñas</li>
            </ul>
        <li>Ciruela</li>
    </ul>
</ul>

  • Aceite
  • Harina
  • Mermelada
    • Fresas
      • Grandes
      • Pequeñas
    • Ciruela

Menú de navegación

Para realizar un conjunto de hipervínculos ordenador que pueda ser utilizado para navegar por el sitio debemos seguir una estructura cerrada (que a día de hoy es un estándar). La etiqueta <nav>, en su interior una lista desordenada que a su vez contiene hipervínculos en cada elemento.

Etiqueta <nav>
Descripción Contenido de seccionamiento para navegación.
Atributos Globales
Tipo Bloque

Más adelante descubriremos que las etiquetas llamadas Contenido de seccionamiento, de momento declararemos para indicar donde se encuentra nuestro menú.

<nav>
  <ul>
    <li><a href="#">Inicio</a></li>
    <li><a href="#">Portafolio</a></li>
    <li><a href="#">¿Hablamos?</a></li>
  </ul>
</nav>

Listas de definición

Representa una lista de términos con su correspondiente definición.

Necesitaremos 3 etiquetas.

Etiqueta <dl>
Descripción Contenedor de la lista de definición.
Atributos Globales
Tipo Bloque
Etiqueta <dt>
Descripción Título de la definición.
Atributos Globales
Tipo Bloque
Etiqueta <dd>
Descripción Descripción de la definición.
Atributos Globales
Tipo Bloque
<h1>Animales extintos</h1>

<dl>
    <dt>Pez de mano liso</dt>
    <dd>El pez de mano rojo es un pariente cercano.</dd>

    <dt>El lobo de Tasmania</dt>
    <dd>Eran unos animales feroces pero tímidos que se alimentaban de roedores y canguros y que fueron cazados hasta la extinción por los humanos.</dd>

    <dt>La paloma pasajera</dt>
    <dd>La especie más abundante de las Américas hace un siglo. No quedan ningunas.</dd>
</dl>

Animales extintos

Pez de mano liso
El pez de mano rojo es un pariente cercano.
El lobo de Tasmania
Eran unos animales feroces pero tímidos que se alimentaban de roedores y canguros y que fueron cazados hasta la extinción por los humanos.
La paloma pasajera
La especie más abundante de las Américas hace un siglo. No quedan ningunas.
Actividad 1

Crea la siguiente página usando listas.

Actividad periodicos

Actividad 2

Crea la siguiente página usando listas y sublistas.

Actividad series

Actividad 3

Crea la siguiente página usando una lista ordenada.

Actividad arreglar equipo

Actividad 4

Crea la siguiente página usando una lista acompañado de la etiqueta nav.

Actividad menú simple

Actividad 5

Utiliza una lista de definición para lista los dinosaurios más grandes que han existido nunca, cuyo título sea su nombre y su descripción sus medidas (como mínimo, puedes incluir más información).

Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial-SinDerivadas 4.0 Internacional.

Atribución/Reconocimiento-NoComercial-SinDerivados 4.0 Internacional

¿Me ayudas?

No te sientas obligado a realizarme una donación, pero cada aportación me ayuda a mantener el sitio en activo para que continúe existiendo y me motiva a continuar creando nuevo contenido.

Comprame un café
Pulsa sobre la imagen
  • 1 café: Se mantiene el dominio durante 4 meses.
  • 2 cafés: Se liquida 1 mes del Servidor Web.
  • 3 cafés: Se paga 1 mes de Newsletter.

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

Nueva replica  {{ formatEllipsisAuthor(replyComment.author) }}

Acepto la política de Protección de Datos.

Escribe el primer comentario