Curso online de HTML (Avanzado) bonificado

💻 Software

• Editor de código: VS Code (gratis) — es más que suficiente. Alternativas igualmente válidas: Notepad++, Sublime Text o cualquier editor de texto plano.
• Navegador web: Chrome, Firefox o Edge en su versión actual — todos gratuitos. Necesitarás las herramientas de desarrollo (F12).
• Sin servidor local obligatorio: para HTML puro basta con abrir los archivos directamente en el navegador. Si el curso toca formularios con procesado real, XAMPP (gratis) es suficiente.

?️ Hardware

• Cualquier PC o portátil de los últimos 5 años con 4 GB de RAM es más que suficiente.
• No necesitas tarjeta gráfica, SSD ni procesador específico. HTML se edita y prueba en cualquier máquina.

🔑 Cuentas y servicios

• No se requiere ninguna cuenta de pago. Si quieres publicar tu web en la parte final del curso, GitHub Pages o Netlify tienen plan gratuito completo.

📚 Conocimientos previos

• Se recomienda haber completado un curso de HTML básico o tener experiencia creando páginas simples con etiquetas básicas (<p>, <h1>, <a>, listas).
• No se requiere saber programar ni conocer CSS en profundidad, aunque se introduce en el temario.

A lo largo del curso construyes páginas web reales aplicando cada técnica en cuanto la aprendes. Estos son los proyectos principales que completarás:

1. Página de galería con mosaico de imágenes optimizadas — practicas escalado, formatos JPEG/GIF y composición visual; útil para portfolios o catálogos de productos.
2. Sitio de varias páginas sobre Andalucía y sus provincias — enlazas documentos internos y externos, mejoras la apariencia de los enlaces y estructuras la navegación; replica el flujo de cualquier web informativa real.
3. Tabla compleja con fusión de celdas — maquetas datos estructurados (horarios, comparativas, fichas) que siguen siendo necesarios en webs corporativas y paneles de administración.
4. Mapa sensible interactivo — defines zonas clicables sobre una imagen; caso de uso directo en mapas geográficos, planos de edificios o infografías interactivas.
5. Formulario de contacto o registro con validación HTML5 — campos de texto, selección, botones de envío y borrado; base de cualquier página de login, encuesta o pedido online.
6. Página completa con hojas de estilo y capas posicionadas — aplicas CSS básico y posicionamiento para lograr un diseño coherente; punto de partida antes de pasar a CSS moderno.

Estos son los fallos que aparecen una y otra vez cuando se trabaja con HTML avanzado. Conocerlos antes te ahorra horas de depuración:

• Rutas rotas en imágenes y enlaces: usar barras invertidas (\) en lugar de barras normales (/), o escribir rutas absolutas del disco local (C:\Users\...) que no funcionan en el servidor.
• No cerrar etiquetas correctamente: olvidar </td>, </tr> o </table> provoca que el navegador reinterprete la estructura y rompa la maquetación de forma poco obvia.
• Confundir colspan y rowspan: intercambiar estos atributos en tablas complejas descoloca todas las celdas siguientes y es difícil de detectar visualmente al principio.
• Coordenadas incorrectas en mapas sensibles: definir las áreas (coords) sin herramienta de ayuda lleva a zonas desplazadas respecto a la imagen real, especialmente si la imagen se muestra a tamaño diferente al original.
• Usar <frameset> en documentos HTML5: los marcos están obsoletos desde HTML5; el navegador moderno los ignora o muestra advertencias. Este temario los incluye por contexto histórico, pero en proyectos reales se usan <iframe> con restricciones.
• No especificar enctype en formularios con archivos: olvidar enctype="multipart/form-data" en un <form> que sube archivos hace que el servidor reciba el nombre del archivo en lugar de su contenido.
• Mezclar estilos en línea con hojas de estilo externas: usar style="..." directamente en etiquetas mientras también hay una hoja CSS externa genera conflictos de especificidad difíciles de rastrear.
• Imágenes sin atributo alt: además de ser un problema de accesibilidad, los validadores HTML lo marcan como error y los buscadores penalizan las páginas que lo omiten sistemáticamente.
• Confundir id con class: asignar el mismo id a varios elementos rompe los anclajes internos y cualquier selector de CSS o JavaScript que dependa de ese identificador.

Recursos gratuitos que complementan el curso y te serán útiles mucho más allá de él:

⌨️ Atajos y referencias rápidas

• devhints.io/html — cheat sheet de etiquetas HTML con atributos y ejemplos en una sola página.
• overapi.com/html — referencia visual rápida de todas las etiquetas, ideal para consultar sin salir del editor.
• En VS Code: Ctrl+Shift+P abre la paleta de comandos; escribe Format Document para indentar tu HTML automáticamente.

📖 Documentación oficial

• developer.mozilla.org (MDN Web Docs) — la referencia más completa y actualizada de HTML, CSS y JavaScript. Busca cualquier etiqueta o atributo aquí primero.
• html.spec.whatwg.org — especificación oficial del estándar HTML Living Standard si necesitas saber qué comportamiento es correcto.

?️ Herramientas gratuitas

• validator.w3.org — valida tu HTML y te indica errores de sintaxis antes de publicar.
• imagecolorpicker.com o mapeador de imágenes online — para generar coordenadas de mapas sensibles sin calcularlas a mano.
• Squoosh (squoosh.app) — optimiza imágenes JPEG, WebP y PNG directamente en el navegador, sin instalar nada.
• GitHub Pages — publica tu web estática gratis con un simple repositorio Git; perfecto para los proyectos del curso.

👥 Comunidades donde resolver dudas

• Stack Overflow — busca el error exacto antes de preguntar; el 90% de los problemas de HTML ya tienen respuesta.
• r/learnprogramming y r/webdev en Reddit — comunidades activas para dudas de nivel principiante-intermedio.
• dev.to — artículos prácticos sobre HTML, CSS y buenas prácticas escritos por desarrolladores reales.

🤖 IA como tutor de código

• ChatGPT, Claude o Copilot (todos con plan gratuito) pueden explicarte por qué una etiqueta no funciona como esperas, revisar tu HTML y sugerirte mejoras. Úsalos para entender, no para copiar sin leer.