Saltar al contenido

📚 Post de ejercicios resueltos – HTML nivel medio

⚠️ Todos los ejemplos son autosuficientes; basta crear los archivos con el nombre indicado.
Valídalos en https://validator.w3.org y comprueba que no aparezcan errores.

1. Maqueta de noticia (noticia.html)

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8" />
  <title>Gran inauguración del Parque Tecnológico</title>
  <style>
    body {font-family: system-ui; margin: 0 1rem;}
    header, main, footer {max-width: 800px; margin: auto;}
    nav a {margin-right: .8rem;}
    aside {background:#f5f5f5; padding:.8rem; border-left:4px solid #999;}
  </style>
</head>
<body>
  <header>
    <h1>Gran inauguración del Parque Tecnológico</h1>
    <time datetime="2025-05-02">2 de mayo de 2025</time>
    <nav>
      <a href="#">Inicio</a>
      <a href="#">Tecnología</a>
    </nav>
  </header>

  <main>
    <article>
      <p>El nuevo Parque Tecnológico abrió sus puertas con más de 30 start‑ups locales…</p>
      <p>La ceremonia contó con la presencia de la alcaldesa…</p>
      <p>Se espera que genere 800 puestos de trabajo directos…</p>
    </article>

    <aside>
      <h2>Dato curioso</h2>
      <p>El terreno era antes una estación de tren abandonada de 1920.</p>
    </aside>
  </main>

  <footer>
    &copy; 2025 TechNews
  </footer>
</body>
</html>

2. Formulario de reserva de pista (reserva.html)

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8" />
  <title>Reserva de pista</title>
  <style>
    body{font-family:system-ui;margin:1rem;max-width:600px}
    fieldset{border:1px solid #ccc;padding:1rem}
    label{display:block;margin-top:.7rem}
    input[type=range]{width:100
  </style>
</head>
<body>
  <h1>Reserva tu pista deportiva</h1>

  <form action="#" aria-describedby="ayuda-nivel">
    <fieldset>
      <legend>Datos de reserva</legend>

      <label>Nombre
        <input type="text" name="nombre" required />
      </label>

      <label>E‑mail
        <input type="email" name="email" required />
      </label>

      <label>Fecha
        <input type="date" name="fecha" required />
      </label>

      <p>Turno</p>
      <label><input type="radio" name="turno" value="mañana" required /> Mañana</label>
      <label><input type="radio" name="turno" value="tarde"  required /> Tarde</label>

      <label>Nivel (1 bajo – 10 pro)
        <input type="range" name="nivel" min="1" max="10" value="5" aria-describedby="ayuda-nivel" />
      </label>
      <small id="ayuda-nivel">Selecciona tu nivel aproximado.</small>

      <label>
        <input type="checkbox" name="seguro" /> Contratar seguro de lesiones
      </label>
    </fieldset>

    <button type="submit">Reservar</button>
  </form>
</body>
</html>

3. Tabla de horarios de trenes (horarios.html)

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8" />
  <title>Horarios de tren</title>
  <style>
    table{border-collapse:collapse;width:100
    th,td{border:1px solid #555;padding:.4rem;text-align:center}
    thead th{background:#eee}
    tfoot td{background:#fafafa;font-weight:600}
  </style>
</head>
<body>
  <table>
    <caption>Salidas estación Central – 2 de mayo 2025</caption>

    <thead>
      <tr>
        <th rowspan="2">Línea</th>
        <th rowspan="2">Destino</th>
        <th colspan="3">Horario</th>
      </tr>
      <tr>
        <th>Mañana</th><th>Tarde</th><th>Noche</th>
      </tr>
    </thead>

    <tbody>
      <tr><td rowspan="2">R‑1</td><td>Sevilla</td><td>09:10</td><td>15:05</td><td>21:55</td></tr>
      <tr><td>Córdoba</td><td>10:25</td><td>16:15</td><td>22:30</td></tr>

      <tr><td>R‑2</td><td>Granada</td><td>08:45</td><td>14:30</td><td>20:10</td></tr>
    </tbody>

    <tfoot>
      <tr><td colspan="5">Horarios sujetos a cambios sin previo aviso</td></tr>
    </tfoot>
  </table>
</body>
</html>

4. Galería responsiva (galeria.html)

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8"/>
<title>Galería de fotos</title>
<style>
  body{font-family:system-ui;margin:1rem}
  .grid{
    display:grid;
    gap:1rem;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  }
  figure{margin:0;border:1px solid #ddd;padding:.5rem;border-radius:4px}
  figcaption{text-align:center;margin-top:.4rem;font-size:.9rem;color:#555}
</style>
</head>
<body>
  <h1>Galería de primavera</h1>
  <section class="grid">
    <!-- Reemplaza las URLs si quieres imágenes propias -->
    <figure>
      <img src="https://picsum.photos/seed/1/600/400" alt="Paisaje 1" width="100
      <figcaption>Río al atardecer</figcaption>
    </figure>
    <figure>
      <img src="https://picsum.photos/seed/2/600/400" alt="Paisaje 2" />
      <figcaption>Campo en flor</figcaption>
    </figure>
    <figure>
      <img src="https://picsum.photos/seed/3/600/400" alt="Paisaje 3" />
      <figcaption>Nubes primaverales</figcaption>
    </figure>
    <figure>
      <img src="https://picsum.photos/seed/4/600/400" alt="Paisaje 4" />
      <figcaption>Lago cristalino</figcaption>
    </figure>
    <figure>
      <img src="https://picsum.photos/seed/5/600/400" alt="Paisaje 5" />
      <figcaption>Sendero verde</figcaption>
    </figure>
    <figure>
      <img src="https://picsum.photos/seed/6/600/400" alt="Paisaje 6" />
      <figcaption>Flores silvestres</figcaption>
    </figure>
  </section>
</body>
</html>

5. Vídeo con subtítulos (video.html)

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8"/>
<title>Vídeo accesible</title>
<style>
  body{font-family:system-ui;margin:1rem;text-align:center}
  video{max-width:100
</style>
</head>
<body>
  <h1>Presentación del proyecto</h1>

  <video controls poster="poster.jpg">
    <!-- Usa tu propio vídeo -->
    <source src="proyecto.mp4" type="video/mp4">
    <track src="sub-es.vtt" kind="subtitles" srclang="es" label="Español" default>
    <track src="sub-en.vtt" kind="subtitles" srclang="en" label="English">
    Tu navegador no soporta vídeo HTML5.
  </video>
</body>
</html>

6. Página 404 con animación (404.html)

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8"/>
<title>404 – Página no encontrada</title>
<style>
  @keyframes flotar{
    0
    50
    100
  }
  body{display:flex;flex-direction:column;justify-content:center;align-items:center;
       min-height:100vh;font-family:system-ui;background:#fdfdfd;margin:0}
  h1{font-size:4rem;margin:0;animation:flotar 1.5s ease-out forwards}
  a{margin-top:1.5rem;font-size:1.2rem;text-decoration:none;border:1px solid #333;
     padding:.6rem 1.2rem;border-radius:4px;color:#333;transition:background .3s}
  a:hover,a:focus{background:#333;color:#fff}
</style>
</head>
<body>
  <h1>404</h1>
  <p>Página no encontrada</p>
  <a href="index.html">Volver al inicio</a>
</body>
</html>

7. Tarjetas de producto con data-* (cards.html)

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8"/>
<title>Tarjetas de producto</title>
<style>
  body{font-family:system-ui;margin:1rem;display:grid;gap:1rem;
       grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
  .card{border:2px solid;padding:1rem;border-radius:6px}
  [data-category="tecnología"]{border-color:#4078f2}
  [data-category="hogar"]     {border-color:#d97706}
  [data-category="deporte"]   {border-color:#059669}
  .precio{font-weight:700}
</style>
</head>
<body>
  <article class="card" data-category="tecnología">
    <h2>Auriculares Bluetooth</h2>
    <p class="precio">39 €</p>
    <p>Sonido Hi‑Fi y cancelación de ruido.</p>
  </article>

  <article class="card" data-category="hogar">
    <h2>Aspiradora Robot</h2>
    <p class="precio">189 €</p>
    <p>Limpieza inteligente con app móvil.</p>
  </article>

  <article class="card" data-category="deporte">
    <h2>Esterilla Yoga Pro</h2>
    <p class="precio">25 €</p>
    <p>Antideslizante, 6 mm grosor.</p>
  </article>
</body>
</html>

8. Mini landing “Próximamente” (landing.html)

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8"/>
<title>Próximamente</title>
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" integrity="sha512-...." crossorigin="anonymous" referrerpolicy="no-referrer">
<style>
  :root{--prim:#2b5bff}
  *{box-sizing:border-box}
  body{font-family:'Inter',sans-serif;display:flex;flex-direction:column;
       align-items:center;justify-content:center;text-align:center;height:100vh;margin:0;padding:1rem}
  h1{font-size:3rem;margin:.5rem 0}
  p{font-size:1.25rem;color:#555;margin:0 0 1.5rem}
  button{display:flex;align-items:center;gap:.6rem;padding:.8rem 1.6rem;
         font-size:1rem;border:none;border-radius:8px;background:var(--prim);color:#fff;
         cursor:pointer;transition:transform .3s}
  button:hover,button:focus{transform:scale(1.05)}
  @media (prefers-reduced-motion: reduce){
    button{transition:none}
  }
</style>
</head>
<body>
  <h1>Nuestra web está en construcción</h1>
  <p>Déjanos avisarte cuando lancemos&nbsp;🚀</p>
  <button>
    <i class="fa-regular fa-bell"></i>
    Avísame
  </button>
</body>
</html>

✔️ Cómo practicar con estas soluciones

  1. Estudia cada fragmento: identifica el uso de etiqueta, atributo o regla que el profesor podría preguntar.
  2. Modifica: cambia contenidos, colores o estructura y valida otra vez.
  3. Integra en tu proyecto: sube los 8 archivos a un repositorio Git y usa GitHub Pages para verlos online.
  4. Repasa las WCAG 2.2 básicas (accesibilidad): aria‑*, foco, contraste y motion‑safe.
Etiquetas:

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Información básica sobre protección de datos Ver más

  • Responsable: Tomas Gonzalez.
  • Finalidad:  Moderar los comentarios.
  • Legitimación:  Por consentimiento del interesado.
  • Destinatarios y encargados de tratamiento:  No se ceden o comunican datos a terceros para prestar este servicio.
  • Derechos: Acceder, rectificar y suprimir los datos.
  • Información Adicional: Puede consultar la información detallada en la Política de Privacidad.

¿Atascado con tu proyecto? Presupuesto GRATIS

Agendar llamada
X
error: Content is protected !!
Este sitio web utiliza cookies, si necesitas más información puedes visitar nuestra política de privacidad    Ver
Privacidad