Teoría
Teoría

La etiqueta ol: listas ordenadas

Esta entrada incluye una lista de tareas. ¡Y el orden importa! Darle de comer al gato a oscuras o regar el cactus desde la calle no sería muy práctico. Para marcar este texto usaremos otro tipo de lista: una lista ordenada.

Las listas ordenadas se crean con <ol>, de «ordered list». Como su nombre indica, el orden de sus elementos sí importa. Sirven para marcar algoritmos, instrucciones, recetas, resultados de competencias y mucho más.

Los elementos de una lista ordenada también se marcan con <li>. Por ejemplo:

<ol>
  <li>Soy el primero y solo puedo ser el primero</li>
  <li>No sería yo si no fuera el segundo</li>
  <li>¿El tercero después de tantos años? ¡Siempre!</li>
</ol>

De forma predeterminada, cada elemento de <ol> aparece con su número de orden.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Sitio de un principiante en desarrollo web</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <p>Blog</p> <nav> Inicio </nav> </header> <main> <article> <h1>Día tres. Mi gato está enojado conmigo</h1> <p>Ayer, mientras navegaba por internet, volví a olvidar darle de comer a mi gato. Espero que Cupcake no se entere y siga dándome ejercicios. Voy a hacer una lista de tareas diarias.</p> <p>Bien. Estas son las tareas. ¡Hay que hacerlas en este orden!</p>  Darle de comer al gato Regar el cactus Apagar la luz Salir a hacer pendientes <p>Ahora sí que no se me olvida.</p> </article> <aside> Tu anuncio podría estar aquí </aside> </main> <footer> Pie de página </footer> </body> </html>

CSS

body { padding: 0 30px; font-size: 14px; line-height: 22px; font-family: "Georgia", serif; color: #222222; } h1 { font-size: 20px; line-height: normal; } nav { color: #888888; } aside { margin: 20px 0; color: #c4c4c4; }

ObjetivosRealizado

Después del segundo párrafo de <article>, agrega una lista ordenada <ol> que contenga todo el texto sin marcar.
Marca el elemento con el texto Darle de comer al gato.
Marca el elemento con el texto Regar el cactus.
Marca el elemento con el texto Apagar la luz.

Marca el último elemento de la lista con el texto Salir a hacer pendientes.