—
CURSO: AULA DE HTML Y DESARROLLO WEB BÁSICO PARA REFUERZO ESCOLAR CON DEEPSEEK AI
Subtítulo: Construye tus primeras páginas web desde cero, entiende la estructura de internet y da el primer paso hacia el desarrollo web profesional con un tutor que te explica cada etiqueta y te ayuda a depurar cada error
—
FICHA TÉCNICA
Campo Descripción
Código MUN-HTML-001
Carga horaria total 45 horas (recomendado: 3 horas por semana durante 15 semanas)
Modalidad 100% textual guiada por DeepSeek AI, con ejercicios prácticos de codificación guiados paso a paso, depuración de errores, y un proyecto final de sitio web completo
Nivel educativo Adaptable a Educación Secundaria Obligatoria (3.º y 4.º curso), Bachillerato, Formación Profesional (Informática, Comercio, Imagen y Sonido) y ámbito universitario. La complejidad de los ejercicios se gradúa según el nivel del alumno.
Riesgo Bajo (frustración con errores de sintaxis, posible confusión entre la estructura semántica y el diseño visual si no se diferencia adecuadamente de CSS, riesgo mínimo de exposición de datos si se publican páginas de prueba sin supervisión). La IA no ve la pantalla del alumno; el facilitador humano debe verificar la comprensión de la estructura del código.
Dirigido a Estudiantes que quieren iniciarse en el desarrollo web, que necesitan una base sólida antes de cursar Programación o Robótica, o que desean comprender cómo se construyen las páginas que visitan a diario. No se requiere experiencia previa en programación.
Prerrequisito Saber usar un ordenador a nivel básico (explorador de archivos, editor de texto). Disponer de un editor de texto plano (Bloc de notas, VS Code, Sublime Text) y un navegador web actualizado. Conexión a internet. Autorización parental para menores de edad.
Corpus obligatorio cargado en DeepSeek Documentación oficial de HTML5 (MDN Web Docs adaptada), Referencia de etiquetas HTML, Guía de estándares web y buenas prácticas de la W3C, Referencia de accesibilidad web básica (WCAG nivel A), Ejemplos anonimizados de sitios web sencillos bien estructurados
Certificación Diploma de aprovechamiento en HTML y Desarrollo Web Básico con IA. NO es una certificación profesional de desarrollo web.
—
AVISO PARA EL ESTUDIANTE (LECTURA OBLIGATORIA)
HTML es el esqueleto de todo lo que ves en internet. Aprenderlo es entender de qué está hecha la web.
DeepSeek te guiará en la escritura de código, te ayudará a encontrar errores y te explicará cada concepto. Pero recuerda:
· La IA no ve tu pantalla. Descríbele con precisión qué error te aparece en el navegador para que pueda ayudarte. Si el código no se ve como esperabas, no copies y pegues sin entender; pide que te expliquen qué hace cada línea.
· El código se escribe letra a letra. Un solo carácter mal cerrado (un < en lugar de </) puede romper toda la página. La paciencia y la atención al detalle son tus mejores herramientas.
· HTML es estructura, no diseño. No esperes crear páginas visualmente espectaculares en este curso. Para eso necesitarás CSS (el siguiente paso). Aquí aprenderás a construir el armazón sólido sobre el que luego se pondrá la decoración.
· Valida siempre tu código. Usa el validador de la W3C para comprobar que tu HTML cumple los estándares. La IA puede ayudarte a interpretar los errores de validación.
—
MAPA GENERAL DEL CURSO
Parte Título Horas Enfoque
I Los cimientos de la web: estructura, etiquetas y semántica 12 h Sintaxis HTML, estructura básica, etiquetas de texto, listas, enlaces
II Multimedia, tablas y formularios 14 h Imágenes, audio, vídeo, tablas de datos, formularios funcionales
III Diseño, accesibilidad y publicación 10 h HTML semántico5, accesibilidad básica, SEO elemental, publicación
IV Proyecto integrador: tu sitio web completo 9 h Planificación, desarrollo, validación y presentación de un sitio web
PARTE I: LOS CIMIENTOS DE LA WEB. ESTRUCTURA, ETIQUETAS Y SEMÁNTICA
(12 horas)
—
Capítulo 1. Bienvenido al taller de la web
(1 hora)
· Inciso 1.1. ¿Cómo funciona este curso? Tú escribes código; DeepSeek te guía. Sin miedo al error.
· Inciso 1.2. Conoce a tu tutor DeepSeek: cómo pedirle que te explique una etiqueta, que revise tu código o que te ayude a encontrar un error de sintaxis.
· Inciso 1.3. Tu cuaderno de desarrollador/a web: fragmentos de código, soluciones a errores, ideas de proyectos.
· Inciso 1.4. Primera provocación: «DeepSeek, si pudieras ver el código fuente de cualquier página web del mundo, ¿cuál mirarías primero y por qué?»
—
Capítulo 2. ¿Qué es HTML y cómo funciona la web?
(2 horas)
· Inciso 2.1. Arquitectura cliente-servidor explicada sin tecnicismos: tú escribes una dirección, un servidor te envía una página, tu navegador la interpreta.
· Inciso 2.2. HTML, CSS y JavaScript: los tres pilares del desarrollo web. HTML es el esqueleto (contenido y estructura), CSS es la piel y la ropa (diseño), JavaScript son los músculos (interactividad). En este curso aprenderás el esqueleto.
· Inciso 2.3. Tu primer archivo HTML. Crea una carpeta mi_web. Abre el bloc de notas. Escribe:
«`html
<!DOCTYPE html>
<html>
<head><title>Mi primera página</title></head>
<body><h1>Hola, mundo</h1><p>Esta es mi primera página web.</p></body>
</html>
«`
Guárdalo como index.html. Ábrelo en tu navegador.
· Inciso 2.4. Explicación línea por línea: <!DOCTYPE html> (dice al navegador que es HTML5), <html> (raíz), <head> (metadatos, título), <body> (contenido visible).
· Subinciso 2.4.1. Ejercicio guiado: «DeepSeek, acabo de crear mi primera página. Ayúdame a cambiar el título de la pestaña y el texto del párrafo. Explícame cada paso.»
—
Capítulo 3. Etiquetas de texto y estructura semántica básica
(3 horas)
· Inciso 3.1. Encabezados: <h1> a <h6>. Jerarquía y buenas prácticas: un solo <h1> por página, no saltarse niveles.
· Inciso 3.2. Párrafos <p>, saltos de línea <br>, líneas horizontales <hr>.
· Inciso 3.3. Formato de texto: negrita (<strong> y <b>), cursiva (<em> y <i>), subrayado (<u>), texto resaltado (<mark>).
· Inciso 3.4. Listas: ordenadas (<ol> con <li>), desordenadas (<ul> con <li>), de definición (<dl>, <dt>, <dd>). Listas anidadas.
· Inciso 3.5. Citas: <blockquote> (cita larga), <q> (cita corta). Atributo cite.
· Inciso 3.6. Ejercicio práctico: crea una página de presentación personal con tu nombre (h1), una breve biografía (párrafo), una lista de tus hobbies y una cita que te guste.
—
Capítulo 4. Atributos, enlaces y navegación
(3 horas)
· Inciso 4.1. ¿Qué es un atributo? Pares nombre=»valor» dentro de las etiquetas. Atributos universales: id, class, title, lang.
· Inciso 4.2. Enlaces: <a href=»url»>texto</a>. Rutas relativas vs. absolutas. Enlace a otra página de tu sitio, a una web externa, a un correo electrónico (mailto:), a un teléfono (tel:).
· Inciso 4.3. Atributo target: _self (misma pestaña), _blank (nueva pestaña), _parent, _top. Buenas prácticas de accesibilidad: avisar cuando un enlace abre en nueva pestaña.
· Inciso 4.4. Anclas internas (#seccion). Cómo crear un índice al inicio de una página larga que lleve a cada sección.
· Inciso 4.5. Ejercicio práctico: crea un mini-sitio de 3 páginas (inicio, sobre mí, contacto) enlazadas entre sí con un menú de navegación textual.
—
Capítulo 5. Elementos de bloque y de línea. Comentarios.
(1 hora)
· Inciso 5.1. Diferencia entre elementos de bloque (<div>, <p>, <h1>-<h6>, <ul>) y de línea (<span>, <a>, <strong>, <em>). Los de bloque ocupan todo el ancho disponible; los de línea solo el espacio necesario.
· Inciso 5.2. <div> y <span> como contenedores neutros. Cuándo usar cada uno.
· Inciso 5.3. Comentarios en HTML: <!– Esto es un comentario, no se ve en pantalla –>.
—
Capítulo 6. Estructura semántica de la página con HTML5
(2 horas)
· Inciso 6.1. Etiquetas semánticas: <header>, <nav>, <main>, <section>, <article>, <aside>, <footer>. No cambian la apariencia, pero sí el significado para navegadores, buscadores y lectores de pantalla.
· Inciso 6.2. Cómo estructurar una página con estas etiquetas. Ejemplo de layout básico.
· Inciso 6.3. Ejercicio: reescribe tu sitio de presentación usando etiquetas semánticas en lugar de <div> genéricos. «DeepSeek, revisa mi código y dime si mi estructura semántica es correcta.»
PARTE II: MULTIMEDIA, TABLAS Y FORMULARIOS
(14 horas)
—
Capítulo 7. Imágenes
(3 horas)
· Inciso 7.1. La etiqueta <img>. Atributos obligatorios: src (ruta de la imagen) y alt (texto alternativo para accesibilidad y SEO).
· Inciso 7.2. Atributos opcionales: width, height (píxeles o porcentaje), loading=»lazy» (carga diferida para mejorar el rendimiento).
· Inciso 7.3. Formatos de imagen para la web: JPEG (fotos), PNG (transparencias), GIF (animaciones simples), SVG (gráficos vectoriales), WebP (moderno y más ligero).
· Inciso 7.4. Rutas relativas: imagenes/foto.jpg (dentro de una carpeta), ../foto.jpg (subir un nivel).
· Inciso 7.5. Ejercicio práctico: crea una galería de 3-5 imágenes con texto descriptivo.
—
Capítulo 8. Audio y vídeo
(2 horas)
· Inciso 8.1. La etiqueta <audio>. Atributos: controls, autoplay, loop, muted.
· Inciso 8.2. La etiqueta <video>. Atributos: controls, poster (imagen previa), width, height.
· Inciso 8.3. Etiqueta <source> para ofrecer varios formatos y asegurar compatibilidad con todos los navegadores.
· Inciso 8.4. Incrustar contenido externo: <iframe> para vídeos de YouTube, mapas, o documentos.
—
Capítulo 9. Tablas de datos
(3 horas)
· Inciso 9.1. Estructura básica: <table>, <tr> (fila), <td> (celda de datos), <th> (celda de encabezado).
· Inciso 9.2. Secciones de tabla: <thead> (encabezado), <tbody> (cuerpo), <tfoot> (pie).
· Inciso 9.3. Atributos: colspan (fusionar columnas), rowspan (fusionar filas), scope (para accesibilidad en th).
· Inciso 9.4. Buenas prácticas: las tablas son para datos, no para maquetación. Para maquetación se usa CSS Grid o Flexbox.
· Inciso 9.5. Ejercicio: crea una tabla con tu horario de clases semanal.
—
Capítulo 10. Formularios
(4 horas)
· Inciso 10.1. La etiqueta <form>. Atributos: action (a dónde se envían los datos), method (GET o POST).
· Inciso 10.2. Campos de entrada: <input> con atributo type.
· text (texto simple), email, password, number, date, tel, url, search, color, range, file.
· Atributos comunes: name (nombre del campo), placeholder (texto de sugerencia), required (obligatorio), value (valor por defecto), maxlength, min/max.
· Inciso 10.3. Etiqueta <label> asociada al campo (atributo for). Importante para accesibilidad y usabilidad.
· Inciso 10.4. Áreas de texto: <textarea> (con rows y cols). Selectores: <select> con <option>. Grupos de opciones: <optgroup>.
· Inciso 10.5. Botones: <button type=»submit»>, <button type=»reset»>, <button type=»button»>. Checkboxes y radio buttons.
· Inciso 10.6. Organización del formulario: <fieldset> y <legend> para agrupar campos relacionados.
· Inciso 10.7. Ejercicio práctico: crea un formulario de contacto con nombre, email, asunto (selector), mensaje (área de texto) y botón de enviar. «DeepSeek, revisa mi formulario y dime si falta algún atributo importante de accesibilidad.»
—
Capítulo 11. Repaso y práctica integrada de la Parte II
(2 horas)
· Inciso 11.1. Crea una página llamada galeria.html que incluya imágenes, una tabla con información y un formulario de suscripción inventado.
· Inciso 11.2. DeepSeek revisa el código y señala puntos de mejora.
PARTE III: DISEÑO, ACCESIBILIDAD Y PUBLICACIÓN
(10 horas)
—
Capítulo 12. HTML semántico5 avanzado y SEO básico
(3 horas)
· Inciso 12.1. Repaso de etiquetas semánticas5.
· Inciso 12.2. Metadatos en <head>: <title> (el más importante para SEO), <meta charset=»UTF-8″>, <meta name=»description» content=»…»>, <meta name=»viewport» content=»width=device-width, initial-scale=1.0″>.
· Inciso 12.3. Datos estructurados con Schema.org (introducción con microdatos).
· Inciso 12.4. Favicon: el icono que aparece en la pestaña del navegador.
—
Capítulo 13. Accesibilidad web básica (WCAG nivel A)
(3 horas)
· Inciso 13.1. ¿Por qué es importante la accesibilidad? Personas con discapacidad visual, motriz, auditiva o cognitiva.
· Inciso 13.2. Texto alternativo en imágenes (alt descriptivo, vacío si es decorativa).
· Inciso 13.3. Contraste de color suficiente y navegación por teclado.
· Inciso 13.4. Roles ARIA básicos (role=»navigation», aria-label).
· Inciso 13.5. Ejercicio práctico: audita tu sitio web con el validador WAVE y corrige los problemas de accesibilidad.
—
Capítulo 14. Publicación de tu sitio web en internet
(2 horas)
· Inciso 14.1. Opciones gratuitas de alojamiento: GitHub Pages, Netlify Drop, Vercel.
· Inciso 14.2. Crear una cuenta en GitHub, subir los archivos mediante la interfaz web y activar GitHub Pages.
· Inciso 14.3. Comprobar que todo funciona: accede a tu URL pública y verifica las páginas, enlaces e imágenes.
· Inciso 14.4. Ejercicio: publica tu sitio de presentación personal y comparte la URL.
· Inciso 14.5. Actualización del contenido: cómo modificar index.html y volver a desplegar.
—
Capítulo 15. Validación y herramientas de desarrollo
(2 horas)
· Inciso 15.1. El validador de la W3C: copiar y pegar tu código para encontrar errores de sintaxis.
· Inciso 15.2. Herramientas de desarrollo del navegador (F12): pestaña Inspector para ver el DOM, pestaña Consola para detectar errores.
· Inciso 15.3. Ejercicio: encuentra y corrige 5 errores en un código roto que te proporcionará DeepSeek.
PARTE IV: PROYECTO INTEGRADOR. TU SITIO WEB COMPLETO
(9 horas)
—
Capítulo 16. Planificación del proyecto
(2 horas)
· Inciso 16.1. Tema del proyecto: tu portfolio personal, una web para tu club o asociación, una guía turística de tu barrio, un blog, o una web temática (recetas, videojuegos, música).
· Inciso 16.2. Estructura de páginas del sitio: mínimo 4 páginas HTML (inicio, sobre el tema, galería, contacto).
· Inciso 16.3. Boceto textual de cada página, navegación entre ellas y jerarquía de contenidos.
· Inciso 16.4. «DeepSeek, te describo mi idea. Ayúdame a planificar la estructura de mi sitio (páginas, secciones, navegación). No decidas por mí.»
—
Capítulo 17. Desarrollo del sitio
(3 horas)
· Inciso 17.1. Crea las páginas planificadas con HTML semántico, incluyendo:
· Encabezado con menú de navegación.
· Contenido principal con texto, listas, imágenes y tablas donde corresponda.
· Un formulario de contacto.
· Pie de página con datos del autor y año de creación.
· Inciso 17.2. Aplica atributos de accesibilidad (alt, label, aria-label, lang).
· Inciso 17.3. Optimiza los metadatos para SEO básico (title, description, viewport).
—
Capítulo 18. Revisión, validación y publicación
(2 horas)
· Inciso 18.1. Valida todas las páginas con el validador de la W3C.
· Inciso 18.2. Audita la accesibilidad con la extensión WAVE.
· Inciso 18.3. Publica el sitio en GitHub Pages (o similar).
· Inciso 18.4. «DeepSeek, revisa mi código y dime si hay algún problema de semántica, accesibilidad o navegación.»
—
Capítulo 19. Presentación, cierre y diploma
(2 horas)
· Inciso 19.1. Presenta tu sitio web al grupo o al facilitador.
· Inciso 19.2. Recapitulación: ¿qué sabes ahora sobre cómo se construye la web que antes no sabías?
· Inciso 19.3. Próximos pasos: CSS para diseño, JavaScript para interactividad, frameworks.
· Inciso 19.4. Diploma de aprovechamiento y cierre.
—
RESUMEN EJECUTIVO DEL CURSO
Dimensión Resumen
Rol de la IA Tutora de sintaxis HTML, revisora de código, depuradora de errores, guía de validación y publicación
Rol del estudiante Desarrollador/a web en formación: escribe, depura, valida y publica sus primeras páginas web con HTML semántico y accesible
Rol del facilitador Apoyo técnico, verificador de la comprensión de la estructura y la semántica
Meta última Que el alumno construya y publique un sitio web completo con HTML semántico, accesible y validado, comprendiendo la arquitectura fundamental de la web
Horas 45
Estructura 4 Partes, 19 Capítulos
—
Con este curso de HTML, el ecosistema municipal suma un componente de desarrollo web básico que puede integrarse como paso previo a los cursos de Programación y Pensamiento Computacional y Robótica, formando una progresión natural dentro de la Ruta Científico-Tecnológica. ¿Deseas que desarrollemos algún otro curso de la lista de alternativas o prefieres avanzar hacia otro ámbito?
