Atom

Increíble editor web, uno de mis favoritos.
Gratis, multiplataforma, de código abierto, ligero y personalizable. No se le puede pedir más.
En este cuarto capítulo aprenderás lo que son las listas html 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:
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:
<!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>
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.
<!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>
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, solo te lo comento para que sepas que se puede hacer.
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:
<!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>
Aprovecho este capítulo para enseñarte de paso como hacer saltos de línea en html, que los puedes incorporar dentro de las listas o fuera de ellas. Para hacer un salto de línea (como pulsar la tecla ENTER 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 ENTER.
Al final del vídeo (sobre el minuto seis puedes ver como se coloca). Por cierto, en este caso, solo hay etiqueta de apertura.
La solución la encontrarás aquí: Haz click aquí.
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.
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.