🚀 Ejercicio intermedio: Crea una página de perfil personal con HTML semántico

¿Ya sabes usar encabezados, párrafos, listas y etiquetas básicas? ¡Genial! Hoy vamos a poner a prueba todo eso y más con un reto que te acercará a una estructura real de una página web profesional.

🎯 Objetivo

Construir una página HTML que simule un perfil personal completo, usando etiquetas semánticas y nuevos elementos como imágenes, enlaces, tablas y formularios.

---

🧩 Estructura del ejercicio

Tu archivo se llamará perfil_personal.html y debe incluir:

---

🧱 1. Estructura semántica

Utiliza estas etiquetas semánticas correctamente:
<header>, <nav>, <main>, <section>, <article>, <footer>

Ejemplo:

<header>
  <h1>Mi perfil personal</h1>
</header>

---

🧭 2. Barra de navegación

Crea un menú dentro de <nav> con enlaces internos (anclas). Usa la etiqueta <a> para navegar entre secciones.

<nav>
  <ul>
    <li><a href="#sobre-mi">Sobre mí</a></li>
    <li><a href="#experiencia">Experiencia</a></li>
    <li><a href="#contacto">Contacto</a></li>
  </ul>
</nav>

---

👤 3. Sección «Sobre mí»

Con la etiqueta <section id="sobre-mi">, incluye:

• Un párrafo de presentación.
• Una imagen tuya o de perfil usando <img> (usa una URL o una imagen local).
• Una lista de tus intereses o tecnologías que te gustan.

---

🧰 4. Sección «Experiencia»

Crea una tabla dentro de <section id="experiencia"> con tu experiencia:

<table border="1">
  <thead>
    <tr>
      <th>Año</th>
      <th>Empresa</th>
      <th>Puesto</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>2022</td>
      <td>Empresa X</td>
      <td>Desarrollador Web</td>
    </tr>
    <!-- Añade más filas -->
  </tbody>
</table>

---

✉️ 5. Formulario de contacto

Dentro de <section id="contacto">, crea un formulario que incluya:

• Campo de nombre
• Campo de email
• Área de texto para mensaje
• Botón para enviar

<form>
  <label for="nombre">Nombre:</label>
  <input type="text" id="nombre" name="nombre"><br><br>

  <label for="email">Email:</label>
  <input type="email" id="email" name="email"><br><br>

  <label for="mensaje">Mensaje:</label><br>
  <textarea id="mensaje" name="mensaje" rows="4" cols="40"></textarea><br><br>

  <input type="submit" value="Enviar">
</form>

---

🦶 6. Footer

Cierra tu página con un <footer> que incluya:

• Tu nombre
• Año actual
• Un enlace a tu red social favorita

---

🧠 Reto adicional

1. Usa la etiqueta <aside> para incluir una curiosidad o dato personal.
2. Añade estilos básicos inline (style="color:red;", por ejemplo).

---

✅ Requisitos para aprobar

• Usaste correctamente las etiquetas semánticas.
• Añadiste al menos una imagen, una tabla, un formulario y enlaces internos.
• El código HTML está indentado y bien organizado.

---

📷 ¿Cómo compartir tu trabajo?

Haz una captura de pantalla del resultado final y compártela en los comentarios o súbela a tu repositorio si usas GitHub.