Ejercicio: página de recomendaciones

⏱ 20 minutos
📶 Nivel: principiante

Objetivo

Crear una página sobre un tema que te guste (libros, series, música, recetas…) usando títulos jerarquizados, párrafos, texto con énfasis y distintos tipos de enlaces.

Pasos

Parte del esqueleto de la lección 1. Tu avance se guarda en este navegador.

Crea recomendaciones.html con el esqueleto completo y un title adecuado.
Escribe un único <h1> con el tema de tu página.
Crea al menos dos secciones con <h2> y, en una de ellas, un <h3>.
Escribe un párrafo debajo de cada título.
Usa <strong> y <em> al menos una vez cada uno, con intención.
Agrega un enlace externo con target="_blank" y rel="noopener".
Agrega un índice al inicio con enlaces ancla (#id) a tus secciones.
Agrega un enlace mailto: y una línea <hr> antes del pie.
Prueba todos los enlaces en el navegador.

💡 Pista 1: mi ancla no funciona

Comprueba que el id del título y el valor del href coincidan exactamente, sin # en el id y con # en el href. Por ejemplo: id="libros" y href="#libros".

💡 Pista 2: mi enlace externo no abre el sitio

Asegúrate de escribir la dirección completa con https://. Sin eso, el navegador busca un archivo local con ese nombre.

🔎 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.

Tu código HTML (el archivo completo)

✅ Ver una solución de ejemplo

Intenta resolverlo antes de mirar. Tu tema y tus textos serán distintos, y eso está bien.

recomendaciones.html

<!doctype html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Mis recomendaciones de libros</title>
  </head>
  <body>
    <h1>Mis recomendaciones de libros</h1>

    <p>Índice:
      <a href="#novela">Novela</a> ·
      <a href="#ciencia">Divulgación</a>
    </p>

    <h2 id="novela">Novela</h2>
    <p>Si buscas una historia <em>entretenida</em>, empieza por aquí.</p>
    <h3>Mi favorito</h3>
    <p>Lo recomiendo <strong>sin dudarlo</strong>.</p>

    <h2 id="ciencia">Divulgación</h2>
    <p>Más lecturas en
      <a href="https://es.wikipedia.org/" target="_blank" rel="noopener">Wikipedia</a>.
    </p>

    <hr>
    <p><a href="mailto:hola@ejemplo.com">Escríbeme tus recomendaciones</a></p>
  </body>
</html>

🏁 Reto extra (opcional)

Crea una segunda página, sobre-mi.html, en la misma carpeta. Enlaza ambas páginas entre sí. Luego colócalas en carpetas distintas y ajusta las rutas con ../.