Saltar al contenido
Curso de HTML
Todos los cursos
Curso de HTML › Lección 3 › Ejercicio

Ejercicio: mi Top 5

  • ⏱ 25 minutos
  • 📶 Nivel: principiante

Objetivo

Crear una página con tu ranking de cinco cosas favoritas (películas, juegos, comidas, lugares…), con una imagen descriptiva y listas de varios tipos.

Pasos

Tu avance se guarda en este navegador.

💡 Pista 1: la imagen no aparece

Revisa que la ruta coincida con tu estructura. Si el archivo está en img/foto.jpg y tu página en la raíz, el src es img/foto.jpg. También revisa mayúsculas, la extensión (.jpg o .jpeg) y que el archivo esté guardado en esa carpeta.

💡 Pista 2: mi lista anidada se ve rara

La lista interna debe estar dentro del <li> que la contiene, antes de su </li> de cierre. Revisa la sección «Listas anidadas» de la lección.

🔎 Comprueba tu trabajo

Pega tu código y pulsa Comprobar. La revisión ocurre en tu navegador; nada se envía a ningún sitio. Cada punto en rojo incluye una pista.

    ✅ Ver una solución de ejemplo

    Intenta resolverlo antes de mirar. La imagen del ejemplo usa la del curso; tú usa la tuya.

    top5.html
    <body>
  <h1>Mi Top 5 de lugares para viajar</h1>
  <p>Estos son los destinos que más me gustaría <strong>conocer</strong>.</p>

  <figure>
    <img src="img/montanas.jpg" alt="Montañas nevadas al amanecer"
         width="480" height="288">
    <figcaption>Mi primer destino de la lista.</figcaption>
  </figure>

  <h2>Ranking</h2>
  <ol>
    <li><a href="https://es.wikipedia.org/wiki/Cusco" target="_blank" rel="noopener">Cusco</a>
      <ul>
        <li>Historia y cultura</li>
        <li>Paisajes únicos</li>
      </ul>
    </li>
    <li>Oaxaca</li>
    <li>Lisboa</li>
    <li>Kioto</li>
    <li>Reikiavik</li>
  </ol>

  <h2>Datos del primer lugar</h2>
  <dl>
    <dt>País</dt><dd>Perú</dd>
    <dt>Mejor época</dt><dd>De mayo a septiembre</dd>
  </dl>
</body>

    🏁 Reto extra (opcional)

    Haz que la lista ordenada cuente hacia atrás (de 5 a 1) con el atributo reversed, y que la imagen sea un enlace que lleve a otra página. ¿Qué alt le pondrías en ese caso?