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 2
Crea la siguiente página usando listas y sublistas.
Actividad 3
Crea la siguiente página usando una lista ordenada.
Actividad 4
Crea la siguiente página usando una lista acompañado de la etiqueta nav
.
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.
¿Me invitas a un café? ☕
Puedes hacerlo usando el terminal.
ssh customer@andros.dev -p 5555
Comentarios
Nuevo comentario
Escribe el primer comentario