Listas ordenadas, desordenadas, definiciones y saltos de línea - HTML5 básico - Capítulo 4


En este cuarto capítulo aprenderás lo que son las listas y como utilizarlas.
Con las listas html podremos ordenar texto en forma de lista. Estas listas se verán normalmente en el navegador con guiones o números. No obstante, esto se puede elegir cambiar por letras, orden inverso, etc.

Tenemos tres tipos de listas:

  1. Listas desordenadas.
  2. Listas ordenadas.
  3. Listas de definiciones.

Listas html desordenadas

Para crear una lista desordenada lo harás con las etiquetas <ul> </ul>. Dentro de estas etiquetas deberás añadir unas etiquetas <li> </li> para cada elemento de la lista.
Las etiquetas <li> </li> provienen del inglés list item (elemento de lista) y las <ul> </ul> de unordered list (lista desordenada). Quizás con esta descripción te sea más fácil recordar estas etiquetas y su utilidad.
Veamos un ejemplo de este tipo de lista:

Etiquetas HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Listas html.</title>
</head>

<body>

    <ul>

        <li>Rojo</li>
        <li>Azul</li>
        <li>Verde</li>
        <li>Amarillo</li>

    </ul>

</body>
</html>

Resultado en el navegador

Lista desordenada html

Listas html ordenadas

Las listas ordenadas son las que siguen un orden, ya sean números (1,2,3,4...) o letras (a, b, c, d...). Sin especificarlos directamente (sin escribirlo manualmente) las listas ordenadas generarán en el navegador una correlación entre elemento y posición. Es más sencillo de lo que parece, veamos algún ejemplo.

Para crear una lista ordenada lo harás con las etiquetas <ol> </ol> de ordered list (lista ordenada). Dentro de estas etiquetas deberás añadir unas etiquetas <li> </li> para cada elemento de la lista al igual que hemos hecho con las listas desordenadas.

Etiquetas HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Listas html.</title>
</head>

<body>

    <ol>

        <li>Rojo</li>
        <li>Azul</li>
        <li>Verde</li>
        <li>Amarillo</li>

    </ol>

</body>
</html>

Resultado en el navegador

Lista ordenada html

Por defecto te aparecerá la lista numerada en orden ascendente (1, 2, 3, 4...). En este capítulo no te voy a enseñar como cambiar esto por letras, por números romanos, de descendente a ascendente, etc. Lo dejo para un poquito más adelante.

Listas de definiciones

Este tipo de listas se utilizan para mostrar un término y una definición. Por ejemplo, palabras de un diccionario con sus respectivas definiciones.
Para crear una lista de definiciones lo harás con las etiquetas <dl> </dl> de description o definition list (lista de definiciones o descripciones). Cada uno de los términos se escribirán con las etiquetas <dt> </dt> de definition term (término de definición) y sus respectivas definiciones con las etiquetas <dd> </dd> de definition description (descripción de definición).
Aquí tienes un ejemplo de su uso:

Etiquetas HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Listas html.</title>
</head>

<body>

    <dl>

      <dt>Hardware</dt>
        <dd>Conjunto de aparatos de un equipo informático.</dd>
      <dt>Software</dt>
        <dd>Conjunto de programas, instrucciones y reglas informáticas para ejecutar ciertas tareas en un equipo informático.</dd>

      </dl>

</body>
</html>

Resultado en el navegador

Lista de definiciones html

Saltos de línea

Aprovecho este capítulo para enseñarte de paso como hacer saltos de línea, que los puedes incorporar dentro de las listas o fuera de ellas. Para hacer un salto de línea (como pulsar la tecla intro en un editor de texto) lo haremos con la etiqueta </br>, ya que sin esta etiqueta, el navegador va a ignorar todos los saltos de línea que hagas con la tecla intro.

Al final del vídeo (sobre el minuto 6 puedes ver como se coloca). Por cierto, en este caso, solo hay etiqueta de apertura.

Ejercicios de html

8- Crea una lista ordenada con los siguientes elementos: Xiaomi, Samsung, Iphone, Huawei.

9- Crea una lista desordenada con los elementos anteriores.

10- Crea una lista de definiciones con 3 términos. Solo el tercero llevará definición.

La solución la encontrarás aquí: Haz click aquí.

Suscríbete a mi canal de YouTube para apoyarme

Si te ha gustado este curso y crees que el trabajo merece la pena, te agradeceré eternamente que te suscribas a mi canal de YouTube para apoyarme y que pueda seguir haciendo cursos gratuitos.

Además, si te encanta la programación, tienes un montón más de cursos gratuitos para ver.

No solo eso, podrás participar enviándome comentarios con tus sugerencias para temas específicos o cursos completos o incluso las dudas que tengas y las intentaré ir resolviendo en los cursos que estén todavía abiertos.

Comentarios

Si te quedan dudas sobre el temario, sobre Python, o cualquier otra cosa relacionada o simplemente quieres agradecer, aquí tienes tu sitio para dejar tu granito de arena. Gracias por tus comentarios y por darle vida a este sitio web.