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.

Precalentar horno
Mezclar la Harina con agua
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>

Precalentar horno
Mezclar la Harina con agua
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>

Precalentar horno
Mezclar la Harina con agua
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>

Precalentar horno
Mezclar la Harina con agua
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>

Precalentar horno
Mezclar la Harina con agua

No olvidemos remover bien
Cuidado con los grumos

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 informar cuales eran los dinosaurios más grandes que han existido nunca. El título será su nombre y la 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?

Comprame un café — Pulsa sobre la imagen

No te sientas obligado a realizar una donación, pero cada aportación mantiene el sitio en activo logrando que continúe existiendo y sea accesible para otras personas. Además me motiva a crear nuevo contenido.

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

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

Escribe el primer comentario