Marcas: Ejercicio final HTML | Donde lo barato es aprender

CV Interactivo y Portfolio Digital en HTML5

El objetivo de este proyecto es construir un sitio web que sirva como Currículum Vitae y Portfolio Digital, demostrando el dominio de la estructura semántica de HTML5, la organización tabular de datos, y la implementación de elementos interactivos (forn, iframe, map) y elementos multimedia (img, galería de imágenes).

Requisitos Técnicos Obligatorios

Los archivos .html deben cumplir rigurosamente con las siguientes especificaciones técnicas, que reflejan las secciones que deberás incluir en el código:

1. Estructura Base y Semántica

Estructura Base: Uso correcto de <!DOCTYPE html>, <html>, <head> (con title, meta charset="UTF-8" y meta viewport).
Organización Semántica: El contenido principal debe estar dividido utilizando <header>, <main> y <footer>.
Secciones: El cuerpo de la página (<main>) debe contener al menos seis (6) etiquetas <section> bien definidas y con identificadores (id) para navegación:
- #perfil
- #formacion
- #habilidades
- #portfolio
- #contacto
- #ubicacion
Separación Visual: Usar la etiqueta <hr> para separar las secciones principales.

2. Organización de Datos y Contenido

Listas: Utilizar al menos una lista ordenada (<ol>) para la sección de Experiencia/Proyectos y una lista no ordenada (<ul>) para la sección de Formación.
Tablas de Datos (<table>):
- Crear una tabla en la sección #habilidades para clasificar las competencias técnicas (Sistemas Operativos, Redes, Lenguajes).
- La tabla debe incluir <thead> (cabecera), <tbody> (cuerpo) y hacer uso de las etiquetas <th> y <td> correctamente.
Galería de Imágenes del Portfolio:
- En la sección #portfolio, crear una subsección de galería.
- Mostrar al menos tres (3) imágenes de proyectos (capturas de pantalla simuladas, diagramas, etc.).
- Cada imagen debe estar encapsulada con la etiqueta <figure> y tener su respectiva descripción breve usando <figcaption>.
- Cada imagen debe tener un texto alternativo (alt) apropiado.

Funcionalidad	Etiqueta(s) Requerida(s)	Requisito Específico
Formulario de Contacto	`<form>`, `<input>`, `<textarea>`, `<label>`	Crear una sección de "Contacto" (`#contacto`) con un formulario completo (nombre, email, mensaje y botón `submit`).
Contenido Incrustado	`<iframe>`	Visualizar en él las distintas secciones del menú
Mapa de Imágenes	`<img>`, `<map>`, `<area>`	Utilizar una imagen como barra de navegación y definir al menos tres (`3`) áreas (`<area>`) clicables que enlacen a las secciones del CV (por ejemplo: `#perfil`, `#portfolio`, `#contacto`).
Enlaces	`<a>`	Uso correcto de hipervínculos internos y externos