Secuencia didáctica para introducir la estructura básica de HTML

Contexto y meta de aprendizaje

Nivel educativo: Media (15-17 años)

Área y asignatura: Tecnología e Informática | Tecnología

Tiempo total disponible: 21 horas (3 semanas, 7 horas por semana)

Meta de aprendizaje: Conocer las herramientas básicas para programar en código HTML, comprendiendo la estructura fundamental de una página HTML, las etiquetas esenciales y el uso de editores de código.

Descripción general

Esta secuencia didáctica está diseñada para guiar al docente en la enseñanza de HTML a estudiantes sin conocimientos previos, pero que pueden haber tenido alguna experiencia básica. Se busca superar la desmotivación y dificultades con la estructura y sintaxis, a través de actividades prácticas en sala de computadores, con enfoque progresivo, desde la teoría básica hasta la práctica aplicada.

Actividades de la secuencia didáctica

Actividad 1: Introducción a la estructura básica de una página HTML

Objetivo parcial: Identificar y comprender la estructura general de un documento HTML y las etiquetas fundamentales.

Materiales: Presentación digital (proyector o pantalla), hojas impresas con la estructura básica de una página HTML, sala de computadores con editor de texto simple (Ej: Notepad++, Sublime Text o editor básico de la sala).

Exploración guiada (30 min): El docente explica la estructura básica de una página HTML: , , , </code>, <code><body></code>. Utiliza ejemplos visuales y analogías para facilitar la comprensión.</li> <li><strong>Lectura y análisis (20 min):</strong> Los estudiantes, en parejas, analizan un documento HTML simple impreso, identificando las etiquetas estudiadas y su función. El docente circula para apoyar y aclarar dudas.</li> <li><strong>Discusión colectiva (20 min):</strong> Se comparten hallazgos y se responde a preguntas. Se enfatiza la importancia de la estructura para que los navegadores interpreten correctamente el contenido.</li> </ol> <p><strong>Tiempo total:</strong> 70 minutos</p> <h3>Actividad 2: Práctica en sala de computadores — Creando la primera página HTML</h3> <p><strong>Objetivo parcial:</strong> Aplicar conocimientos para crear una página HTML básica usando un editor de código.</p> <p><strong>Materiales:</strong> Sala de computadores con editor de código instalado, guía paso a paso impresa o digital con instrucciones para crear la página, acceso a un proyector para demostraciones.</p> <ol> <li><strong>Demostración inicial (15 min):</strong> El docente muestra en el proyector cómo abrir un editor, escribir la estructura básica y guardar un archivo <code>.html</code>. Explica cómo abrirlo en un navegador.</li> <li><strong>Práctica individual (60 min):</strong> Cada estudiante crea su propia página HTML básica con título, encabezado y un párrafo. El docente supervisa, corrige errores comunes (como etiquetas mal cerradas, errores de sintaxis) y motiva la experimentación.</li> <li><strong>Compartir en parejas (15 min):</strong> Los estudiantes abren sus páginas en el navegador y comentan con un compañero qué aprendieron y qué dificultades tuvieron.</li> </ol> <p><strong>Tiempo total:</strong> 90 minutos</p> <h3>Actividad 3: Reconocimiento y uso de etiquetas fundamentales en HTML</h3> <p><strong>Objetivo parcial:</strong> Identificar y utilizar etiquetas HTML básicas para estructurar contenido (encabezados, párrafos, listas, enlaces).</p> <p><strong>Materiales:</strong> Sala de computadores, editor de código, guía de etiquetas básicas impresa o digital.</p> <ol> <li><strong>Explicación y ejemplos (20 min):</strong> El docente presenta las etiquetas <code><h1></code> a <code><h6></code>, <code><p></code>, <code><ul></code>, <code><ol></code>, <code><li></code> y <code><a></code>. Muestra ejemplos de cada una y su función.</li> <li><strong>Ejercicio práctico (50 min):</strong> Los estudiantes modifican su página HTML para incluir una lista de sus intereses o hobbies, agregan enlaces a páginas web relacionadas (pueden ser URLs generales, no requiere conexión activa), y organizan el contenido con encabezados y párrafos.</li> <li><strong>Revisión y retroalimentación grupal (20 min):</strong> El docente selecciona ejemplos en pantalla para analizar aciertos y errores, destacando buenas prácticas y corregir malentendidos.</li> </ol> <p><strong>Tiempo total:</strong> 90 minutos</p> <h3>Actividad 4: Proyecto integrador — Planificación y presentación de una página HTML personal</h3> <p><strong>Objetivo parcial:</strong> Planificar y crear una página HTML que refleje aspectos personales (proyecto de vida, intereses), aplicando la estructura y etiquetas aprendidas.</p> <p><strong>Materiales:</strong> Sala de computadores, editor de código, hoja de planificación (puede imprimirse), ejemplos inspiradores, proyector para presentaciones.</p> <ol> <li><strong>Planeación (30 min):</strong> Los estudiantes bosquejan en papel el contenido y estructura de su página personal: título, encabezados, párrafos, listas y enlaces que reflejen su proyecto de vida e intereses.</li> <li><strong>Desarrollo en computador (90 min):</strong> Crean su página HTML siguiendo su plan, aplicando las etiquetas y estructura básicas. El docente apoya individualmente y motiva la creatividad y cuidado en la sintaxis.</li> <li><strong>Presentación y retroalimentación (30 min):</strong> Los estudiantes presentan su página a un grupo pequeño (3-4 compañeros), explicando su contenido y lo que aprendieron. Se promueve retroalimentación constructiva.</li> </ol> <p><strong>Tiempo total:</strong> 150 minutos (2 horas 30 min)</p> <h2>Transiciones entre actividades</h2> <ul> <li>Antes de pasar de la actividad 1 a la 2, verifica que los estudiantes puedan identificar la estructura básica y las etiquetas principales, y comprendan su función. Resuelve dudas prioritarias.</li> <li>Antes de avanzar de la actividad 2 a la 3, asegúrate que los estudiantes hayan creado y abierto correctamente una página HTML básica, reconociendo etiquetas y sintaxis.</li> <li>Antes de iniciar la actividad 4, confirma que los estudiantes dominen las etiquetas fundamentales y la estructura, y que puedan planificar su contenido en papel.</li> </ul> <h2>Consideraciones y recomendaciones para el docente</h2> <ul> <li>Utiliza metodologías activas y colaborativas para aumentar la motivación, como trabajo en parejas y pequeños grupos.</li> <li>Anticipa errores comunes: etiquetas mal cerradas, olvidar signos menores y mayores (<, >), confusión entre atributos y etiquetas.</li> <li>Fomenta la reflexión sobre la estructura lógica del código y su relación con el resultado visual.</li> <li>Incluye pausas cortas para resolver dudas y reforzar conceptos, evitando la sobrecarga.</li> <li>Si falla la conectividad o el acceso a software específico, utiliza editores de texto básico instalados en los computadores y predispón hojas impresas con ejemplos y ejercicios para trabajar inicialmente sin equipos.</li> </ul> <h2>Duración total estimada de la secuencia</h2> <p>Las cuatro actividades suman aproximadamente 7 horas, lo que permite distribuirlas a lo largo de las 3 semanas disponibles, dejando espacio para reforzamientos y evaluaciones formativas.</p> </div> </div>  <div class="card mb-6 border-l-4 border-l-marca-azul"> <h2 class="text-lg font-bold text-on-surface mb-3"> <i class="fa-solid fa-calendar-check mr-2 text-marca-azul"></i>Micro-plan de implementación </h2> <div class="prose prose-sm max-w-none"> <p><strong>Preparación del aula y materiales:</strong></p> <ul> <li>Verificar que la sala de computadores tenga instalado un editor de texto adecuado para HTML (Notepad++, Sublime Text, Visual Studio Code o similar).</li> <li>Preparar presentaciones digitales para las explicaciones teóricas.</li> <li>Imprimir guías de estructura básica y etiquetas para distribuir.</li> <li>Configurar el proyector y probar abrir archivos HTML en navegadores disponibles.</li> </ul> <p><strong>Inicio:</strong> (Actividad 1)</p> <ol> <li>Presentar la estructura básica de HTML usando ejemplos claros (30 min).</li> <li>Guiar análisis en parejas de un documento HTML impreso (20 min).</li> <li>Facilitar discusión y aclarar dudas (20 min).</li> </ol> <p><strong>Desarrollo:</strong> (Actividad 2 y 3)</p> <ol> <li>Demostrar creación de página HTML básica (15 min).</li> <li>Supervisar práctica individual creando páginas (60 min).</li> <li>Intercambio entre estudiantes (15 min).</li> <li>Presentar etiquetas fundamentales (20 min).</li> <li>Ejercicio práctico con listas, enlaces y encabezados (50 min).</li> <li>Retroalimentación grupal (20 min).</li> </ol> <p><strong>Cierre:</strong> (Actividad 4)</p> <ol> <li>Planificación en papel de página personal (30 min).</li> <li>Desarrollo y codificación en computadora (90 min).</li> <li>Presentación en grupos pequeños y reflexión (30 min).</li> </ol> <p><strong>Evaluación formativa:</strong></p> <ul> <li>Observación directa durante prácticas y discusión.</li> <li>Revisión de páginas creadas y corregidas.</li> <li>Preguntas orales para verificar comprensión de estructura y etiquetas.</li> <li>Presentación final como evidencia de logro.</li> </ul> <p><strong>Tips de contingencia:</strong></p> <ul> <li>Si falla el software, usar editores de texto básicos preinstalados.</li> <li>Si no hay internet, preparar ejemplos y guías impresas para trabajar offline.</li> <li>Fomentar trabajo colaborativo para aumentar motivación y compromiso.</li> <li>Controlar tiempos con reloj visible y pausas programadas.</li> </ul> </div> </div>  </div> </main> </div> <footer style="background:#0F0F1A;" class="no-print text-white/85 pt-14"> <div class="max-w-6xl mx-auto px-4 grid grid-cols-2 md:grid-cols-4 gap-x-8 gap-y-10"> <div class="col-span-2 md:col-span-1"> <a href="/" class="inline-block mb-4 text-2xl font-extrabold tracking-tight text-white hover:text-white/85">Eduteka+</a> <p class="text-sm text-white/60 max-w-xs"> Plataforma educativa del Centro de Innovación Educativa y TIC de la Universidad Icesi: materiales de calidad para docentes, directivos y formadores de maestros, <strong class="text-white">completamente gratuita.</strong> </p> <div class="flex gap-2.5 mt-5"> <a href="https://www.facebook.com/portaleduteka/" target="_blank" rel="noopener noreferrer" aria-label="Eduteka en Facebook" title="Facebook" class="w-10 h-10 bg-white/10 hover:bg-white/20 rounded-sm flex items-center justify-center text-sm text-white transition"><i class="fa-brands fa-facebook-f" aria-hidden="true"></i></a> <a href="https://www.instagram.com/portaleduteka/" target="_blank" rel="noopener noreferrer" aria-label="Eduteka en Instagram" title="Instagram" class="w-10 h-10 bg-white/10 hover:bg-white/20 rounded-sm flex items-center justify-center text-sm text-white transition"><i class="fa-brands fa-instagram" aria-hidden="true"></i></a> <a href="https://www.linkedin.com/in/eduteka/" target="_blank" rel="noopener noreferrer" aria-label="Eduteka en LinkedIn" title="LinkedIn" class="w-10 h-10 bg-white/10 hover:bg-white/20 rounded-sm flex items-center justify-center text-sm text-white transition"><i class="fa-brands fa-linkedin-in" aria-hidden="true"></i></a> <a href="https://twitter.com/eduteka" target="_blank" rel="noopener noreferrer" aria-label="Eduteka en X" title="X" class="w-10 h-10 bg-white/10 hover:bg-white/20 rounded-sm flex items-center justify-center text-sm text-white transition"><i class="fa-brands fa-x-twitter" aria-hidden="true"></i></a> <a href="https://www.youtube.com/channel/UCHFE2RwLxGzdPaWfjI33psQ" target="_blank" rel="noopener noreferrer" aria-label="Eduteka en YouTube" title="YouTube" class="w-10 h-10 bg-white/10 hover:bg-white/20 rounded-sm flex items-center justify-center text-sm text-white transition"><i class="fa-brands fa-youtube" aria-hidden="true"></i></a> <a href="https://wa.link/9ycdu2" target="_blank" rel="noopener noreferrer" aria-label="Eduteka en WhatsApp" title="WhatsApp" class="w-10 h-10 bg-white/10 hover:bg-white/20 rounded-sm flex items-center justify-center text-sm text-white transition"><i class="fa-brands fa-whatsapp" aria-hidden="true"></i></a> </div> </div> <div> <h4 class="text-xs font-bold text-white uppercase tracking-wide mb-3 pb-2 border-b border-white/15">Contenidos</h4> <nav class="flex flex-col text-sm" aria-label="Contenidos"> <a href="/articulos/index.php" class="block py-1.5 md:py-1 text-white/70 hover:text-white transition">Artículos</a> <a href="/contenidos/documentos" class="block py-1.5 md:py-1 text-white/70 hover:text-white transition">Documentos</a> <a href="/contenidos/videos" class="block py-1.5 md:py-1 text-white/70 hover:text-white transition">Webinars</a> <a href="/contenidos/podcast" class="block py-1.5 md:py-1 text-white/70 hover:text-white transition">Podcast</a> <a href="/contenidos/herramientas" class="block py-1.5 md:py-1 text-white/70 hover:text-white transition">Herramientas recomendadas</a> <a href="/consulta" class="block py-1.5 md:py-1 text-white/70 hover:text-white transition">Pregúntale a Eduteka</a> </nav> </div> <div> <h4 class="text-xs font-bold text-white uppercase tracking-wide mb-3 pb-2 border-b border-white/15">EdutekaLab</h4> <nav class="flex flex-col text-sm" aria-label="EdutekaLab"> <a href="/herramientas/agente" class="block py-1.5 md:py-1 text-white/70 hover:text-white transition">Agente Pedagógico</a> <a href="/herramientas/idea" class="block py-1.5 md:py-1 text-white/70 hover:text-white transition">Planes de Clase</a> <a href="/herramientas/rubrik" class="block py-1.5 md:py-1 text-white/70 hover:text-white transition">Rúbricas</a> <a href="/herramientas/planeo" class="block py-1.5 md:py-1 text-white/70 hover:text-white transition">Cursos</a> <a href="/herramientas/gamifika" class="block py-1.5 md:py-1 text-white/70 hover:text-white transition">Gamificaciones</a> <a href="/herramientas/genera" class="block py-1.5 md:py-1 text-white/70 hover:text-white transition">Recursos</a> <a href="/herramientas/mitica" class="block py-1.5 md:py-1 text-white/70 hover:text-white transition">Diagnóstico TIC</a> <a href="/articulos/index.php?q=Matem%C3%A1tica+Interactiva" class="block py-1.5 md:py-1 text-white/70 hover:text-white transition">Matemática Interactiva</a> <span class="block py-1.5 md:py-1 text-white/55">Evento Eduteka (pronto)</span> </nav> </div> <div> <h4 class="text-xs font-bold text-white uppercase tracking-wide mb-3 pb-2 border-b border-white/15">Información</h4> <nav class="flex flex-col text-sm" aria-label="Información"> <a href="/ayuda" class="block py-1.5 md:py-1 text-white/70 hover:text-white transition">Ayuda</a> <a href="/nosotros" class="block py-1.5 md:py-1 text-white/70 hover:text-white transition">Sobre nosotros</a> <a href="/comunidad" class="block py-1.5 md:py-1 text-white/70 hover:text-white transition">Comunidad</a> <a href="/comunidad/condiciones" class="block py-1.5 md:py-1 text-white/70 hover:text-white transition">Condiciones de la comunidad</a> <a href="/herramientas/creditos" class="block py-1.5 md:py-1 text-white/70 hover:text-white transition">Créditos</a> </nav> </div> </div> <div class="mt-12 border-t border-white/10 py-5"> <div class="max-w-6xl mx-auto px-4 flex items-center justify-between flex-wrap gap-3"> <span class="text-xs text-white/60">© Eduteka 2001–2026 · Universidad Icesi</span> <div class="flex gap-5 text-xs"> <a href="/terminos" class="py-1.5 text-white/60 hover:text-white">Políticas de uso</a> <a href="/privacidad" class="py-1.5 text-white/60 hover:text-white">Datos personales</a> </div> </div> </div> </footer>  <script src="https://edukatic.co/herramientas/assets/js/app.js"></script> <script src="https://edukatic.co/herramientas/assets/js/modules/recommendations.js"></script>  </body> </html>

Secuencia didáctica para introducir la estructura básica de HTML

Cómo fue en el aula

Secuencia didáctica para introducir la estructura básica de HTML

Contexto y meta de aprendizaje

Descripción general

Actividades de la secuencia didáctica

Actividad 1: Introducción a la estructura básica de una página HTML