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 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.
¿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.
- 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
Nuevo comentario
Nueva replica {{ formatEllipsisAuthor(replyComment.author) }}
Escribe el primer comentario
{{ comments.length }} comentarios