Esta clase pertenece al curso de HTML y CSS, y partiremos desde la clase anterior. Si no sabes de dónde partimos, te ruego revises las clases anteriores.
Las listas son un elemento básico de HTML y muy utilizado en las páginas webs. Por ello, vamos a aprender cómo se trabajan con este lenguaje de marcas. Veremos las listas ordenadas, luego las desordenadas, más tarde veremos cómo se anidan y finalmente haremos unos ejercicios para ver que efectivamente nos ha quedado claro el contenido de esta clase. ¡Vamos a ello!
¿Qué encontrarás aquí?
Listas ordenadas HTML.
Las listas se ordenan con la etiqueta <ol>. Cada elemento de la lista, lleva la etiqueta <li>. Por ejemplo:
<div>
<h1>Ranking FIFA Marzo 2021</h1>
<ol>
<li>Bélgica</li>
<li>Francia</li>
<li>Brasil</li>
<li>Inglaterra</li>
<li>Portugal</li>
</ol>
</div>
Como puedes ver, si yo simplemente uso las etiquetas <ol> y <li> sin atributos, el orden empezará por el número 1 e irá sumando una unidad a los siguientes elementos de la lista.
¿Qué ocurre si quiero que empiece por un número distinto de 1? Es decir, que empiece por el número que yo quiero, el 10, por ejemplo. Pues usaríamos el atributo start. Los atributos son elementos que me permiten modificar o configurar las etiquetas de HTML como yo desee. Se colocan dentro de la etiqueta de apertura, y tras ellos siempre sigue un igual (=) con unas comillas dobles (" ") y dentro de dichas comillas el valor que quiera darle a dicho atributo. Lo vamos a comprender muy bien con este ejemplo.
<div>
<h1>Ranking FIFA Marzo 2021</h1>
<ol start="10">
<li>Bélgica</li>
<li>Francia</li>
<li>Brasil</li>
<li>Inglaterra</li>
<li>Portugal</li>
</ol>
</div>
Pongamos que ahora queremos ordenar con letras en vez de con números. Puedo hacer uso del atributo type, y en función del valor que le de, me ordenará con letras mayúsculas o minúsculas.
<div>
<h1>Ranking FIFA Marzo 2021</h1>
<ol type="a">
<li>Bélgica</li>
<li>Francia</li>
<li>Brasil</li>
<li>Inglaterra</li>
<li>Portugal</li>
</ol>
</div>
Si pongo <ol type="A"> las letras que regirán el orden de esta lista estarán en mayúsculas.
Si quisiera realizar la ordenación con números romanos, usaré para el atributo type el valor de "I" si quiero los números romanos en mayúsculas el de "i" si quiero los números romanos en minúsculas.
<div>
<h1>Ranking FIFA Marzo 2021</h1>
<ol type="I">
<li>Bélgica</li>
<li>Francia</li>
<li>Brasil</li>
<li>Inglaterra</li>
<li>Portugal</li>
</ol>
</div>
Por defecto, HTML ordena siempre desde abajo hacia arriba, es decir, pongamos que estamos haciendo una lista ordenada numérica que empieza por el valor 1. Siempre el primer elemento tendrá el valor número 1, el siguiente el 2 etc. ¿Cómo hago si quiero que la ordenación sea al revés? ¿Es decir, que el primer elemento tenga el valor 5, el segundo el 4, el tercero el 3, el cuarto el 2 y el quinto el 1?
Para ello tengo el atributo reversed. Este atributo cuando está presente le indica a la lista que el orden de la lista ordenada será invertido y cuándo no esté presente será por defecto. Fíjate en el ejemplo de la lista ordenada numérica de antes, cuando este atributo no estaba presente. Fíjate aquí ahora que sí que está presente. ¿Ves la diferencia?
<div>
<h1>Ranking FIFA Marzo 2021</h1>
<ol reversed>
<li>Bélgica</li>
<li>Francia</li>
<li>Brasil</li>
<li>Inglaterra</li>
<li>Portugal</li>
</ol>
</div>
Listas desordenadas
Ahora bien, podemos hacer listas desordenadas. Para ello, podemos utilizar la etiqueta <ul>. Veamos un ejemplo de lista desordenada:
<div>
<h1>Ciudades de España para visitar</h1>
<ul>
<li>Toledo</li>
<li>Sevilla</li>
<li>Santander</li>
<li>Salamanca</li>
<li>Cáceres</li>
</ul>
</div>
¿Te das cuenta que utiliza puntos en la lista no? Puedo utilizar circulitos blancos, usando el atributo type con el valor "circle".
<div>
<h1>Ciudades de España para visitar</h1>
<ul type="circle">
<li>Toledo</li>
<li>Sevilla</li>
<li>Santander</li>
<li>Salamanca</li>
<li>Cáceres</li>
</ul>
</div>
Si usas el atributo type con el valor "square", tendrás cuadraditos negros en la lista desordenada. Si usas el atributo type con el valor disc tendrás como resultado los circulitos negros que nos salían por defecto cuando hacemos una lista desordenada con la etiqueta <ul> pero sin usar ningún atributo.
Más adelante veremos que el estilo de las listas (que si pongo circulito, que si pongo cuadrado…) también lo podremos manejar con CSS.
Listas anidadas
Venga. Vamos a meterle un poco de «complejidad» a esto. ¿Podemos anidar listas? Por supuesto. Con este ejemplo lo verás mejor ya que con anidar me refiero a meter una lista dentro de otra, y así tenemos distintos niveles. En el primer nivel tendríamos en este ejemplo los países y en el segundo la lista de jugadores de fútbol de leyenda de cada país.
<div>
<h1>Jugadores de fútbol de leyenda</h1>
<ul>
<li>España</li>
<ul type="square">
<li>Casillas</li>
<li>Xavi</li>
<li>Iniesta</li>
</ul>
<li>Francia</li>
<ul type="disc">
<li>Zidane</li>
<li>Henry</li>
<li>Barthez</li>
</ul>
<li>Brasil</li>
<ul type="circle">
<li>Ronaldo</li>
<li>Pelé</li>
<li>Ronaldinho</li>
</ul>
</ul>
</div>
Ejercicios
Ejercicio 1
Haz una lista ordenada de los cinco primeros países que vas a visitar en los próximos años. En la lista ordenada usarás números.
Ejercicio 2
Utilizando la lista anterior, invierte el orden de los números.
Ejercicio 3
Haz una lista ordenada con letras en mayúscula de tus comidas favoritas.
Ejercicio 4
Utilizando la lista ordenada del ejercicio 3, ahora ordena tus comidas favoritas con números romanos en mayúscula.
Ejercicio 5
Haz una lista desordenada de tus películas favoritas. Utilizarás para el estilo de la lista cuadraditos negros.
Ejercicio 6
Usando como ejemplo la lista desordenada del ejercicio 5, ahora utiliza como estilo de la lista puntos o circulitos negros.
Ejercicio 7
Haz una lista anidada de ciudades que quieres visitar en los próximos cinco años de al menos tres países distintos.
Ejercicios resueltos
Aquí podrás consultar cómo debería verse tu pantalla si has hecho bien el ejercicio. Te dejaré un enlace en cada ejercicio para que puedas consultar el código (a fin de no hacer esta clase excesivamente larga en cuanto a tamaño).
Ejercicio 1 resuelto
Puedes consultar el código en nuestro GitHub.
Ejercicio 2 resuelto
Puedes consultar el código en nuestro GitHub.
Ejercicio 3 resuelto
Puedes consultar el código en nuestro GitHub.
Ejercicio 4 resuelto
Seguro que lo has hecho bien, pero si quieres revisar el código, puedes consultarlo en nuestro GitHub.
Ejercicio 5 resuelto
Si quieres revisar el código, échale un ojo a nuestro GitHub.
Ejercicio 6 resuelto
Si quieres echarle un vistazo al código, revisa nuestro GitHub.
Ejercicio 7 resuelto
Haciendo este ejercicio te habrás dado cuenta de la importancia de una buena indentación del código para no liarse. Además te habrás dado cuenta que HTML cambia el estilo de forma automática de los estilos de la lista desordenada para ayudarte a diferenciar una lista principal (países, en este caso) de la lista secundaria (ciudades de cada país). Si quieres consultar el código, puedes revisarlo en nuestro GitHub.
Índice del curso
Recuerda que para seguir nuestro curso de HTML y CSS sólo tienes que ir al índice y seguir por la clase de tu interés. ¡Feliz aprendizaje!
Si has podido realizar todo lo que hemos visto en la clase sin problemas, perfecto. En caso de duda, recuerda que puedes preguntarle a la comunidad con el hashtag #SoySalvajeHTMLCSS en Twitter y que puedes contactar con nosotros (aunque no me comprometo a responder por falta de tiempo, aunque responderé si puedo) por Twitter, Instagram o por nuestro formulario. Por supuesto, recuerda que si quieres que te ayudemos a crecer como profesional de forma más personalizada, no dudes en consultar nuestros servicios. Y si estás pensando en comprar algún producto relacionado con informática, no dudes en consultar nuestras recomendaciones en la sección Productos. Nos vemos en la siguiente clase.