🎯 Objetivo
Diseñar una página HTML que simule un blog con varias entradas, navegación interna, estructura semántica completa, formularios de comentarios y elementos multimedia.
🗂️ Archivos requeridos
- Crea un archivo llamado
mi_blog.html
🧱 1. Estructura base con etiquetas semánticas
Tu archivo debe tener esta estructura principal:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Mi Blog Personal</title>
</head>
<body>
<header>...</header>
<nav>...</nav>
<main>
<section>...</section>
<aside>...</aside>
</main>
<footer>...</footer>
</body>
</html>
🧭 2. Cabecera del blog
Dentro del <header> coloca:
<h1>Mi Blog Personal</h1>
<p>Reflexiones, aprendizajes y proyectos.</p>
Incluye una imagen representativa.
🧭 3. Menú de navegación
En <nav>, crea enlaces internos a las secciones del blog:
<nav>
<ul>
<li><a href="#entrada1">Primera entrada</a></li>
<li><a href="#entrada2">Segunda entrada</a></li>
<li><a href="#acerca-de">Acerca de mí</a></li>
</ul>
</nav>
🖋️ 4. Entradas del blog
Dentro de <main>, crea al menos dos entradas de blog usando <article>:
<article id="entrada1">
<h2>Mi primera entrada</h2>
<p><time datetime="2025-04-08">8 de abril de 2025</time></p>
<p>Texto de tu entrada...</p>
<img src="..." alt="Imagen relacionada">
<section>
<h3>Comentarios</h3>
<form>
<label>Nombre:</label><br>
<input type="text"><br>
<label>Comentario:</label><br>
<textarea></textarea><br>
<input type="submit" value="Enviar comentario">
</form>
</section>
</article>
Repite para la segunda entrada con otro id.
👤 5. Acerca de mí (aside)
En un <aside>, crea una breve biografía, una lista de tus intereses o tecnologías favoritas y un enlace a tu red social.
📩 6. Pie de página
En <footer> agrega:
<footer>
<p>© 2025 - Blog creado por [Tu Nombre]</p>
<p>Contacto: <a href="mailto:tu@email.com">tu@email.com</a></p>
</footer>
🧠 Reto adicional
- Añade una entrada adicional con un video embebido de YouTube usando
<iframe>. - Usa
<figure>y<figcaption>para describir una imagen de una entrada. - Añade una lista de artículos destacados con
<ul>dentro de<aside>.
✅ ¿Qué se evalúa?
- Buen uso de etiquetas semánticas.
- Uso de
article,section,time,form,aside,footer. - Organización clara y jerárquica del contenido.
- Creatividad al estructurar las entradas y comentarios.
🎁 Bonus: Mejora futura
Una vez completado este ejercicio, estarás listo para aplicar CSS y JavaScript para transformar tu blog en una web interactiva.