Descubriendo el Lenguaje Web: Introducción Práctica a los Códigos Básicos de HTML

Ciencias de la Educación Licenciatura en tecnología e informática Aprendizaje Basado en Proyectos 25 ago 2026 Publicado en EdutekaLab · términos de origen

Creado por Aiya B.

DOCX PDF

Me sirvió · 0

Guardar en un portafolio

Cómo fue en el aula

Todavía nadie ha contado cómo le fue con este recurso.

Descripción

Este plan de clase está diseñado para estudiantes de educación técnica y tecnológica en la Licenciatura en Tecnología e Informática, con el propósito de introducirlos a los códigos básicos de HTML, el lenguaje fundamental para la creación de páginas web. Durante la sesión, los estudiantes aprenderán a identificar y utilizar etiquetas esenciales de HTML para estructurar contenido digital, desarrollando así una base sólida para su futuro desempeño en programación y diseño web.

El conocimiento de HTML es relevante porque permite a los estudiantes comprender cómo se construyen los sitios web que visitan diariamente y les abre la puerta para crear sus propios proyectos digitales. Además, esta habilidad es una competencia técnica demandada en el mercado laboral actual, lo que conecta directamente con las oportunidades profesionales de los estudiantes. La metodología de Aprendizaje Basado en Proyectos (ABP) fomenta que los estudiantes trabajen de manera colaborativa y autónoma, enfrentando un desafío real: diseñar una pequeña página web básica con contenido propio.

Al finalizar la sesión, los estudiantes no solo habrán reconocido y aplicado códigos HTML básicos, sino que también habrán experimentado el proceso creativo y técnico que implica desarrollar contenido web, fortaleciendo sus competencias técnicas y de trabajo en equipo.

Objetivos de Aprendizaje

Reconocer las etiquetas básicas y su sintaxis en HTML para la estructuración de páginas web.
Crear una página web simple utilizando códigos HTML básicos.
Colaborar en equipo para desarrollar un producto digital tangible que responda a una necesidad comunicativa concreta.
Aplicar conocimientos previos de informática en la construcción de contenido web.

Recursos Necesarios

Computadoras o laptops con editor de texto simple (como Notepad++ o Visual Studio Code) – 1 por estudiante o pareja.
Navegador web actualizado (Google Chrome, Firefox o Edge) – instalado en cada equipo.
Proyector y pantalla para demostraciones del docente.
Conexión a internet para consulta rápida de referencias.
Material impreso con ejemplos de etiquetas HTML básicas (1 por estudiante).
Plantilla base de código HTML para iniciar el proyecto (digital y en papel).
Hoja de actividades y preguntas guía (1 por estudiante).

Requisitos Previos

Conocimientos básicos de informática: manejo de teclado, archivos y carpetas.
Familiaridad con el uso de navegadores web.
Experiencia previa mínima en edición de texto simple.
Comprensión básica de estructura lógica y secuencial.

Actividades

Fase de Inicio

Tiempo estimado: 10 minutos

Propósito de la sesión:

El docente explica que en esta sesión aprenderán a reconocer y utilizar los códigos básicos del lenguaje HTML para crear páginas web simples, destacando la importancia de este conocimiento como base para el desarrollo de sitios web y aplicaciones digitales.

Activación de conocimientos previos:

Docente: Pregunta a los estudiantes: “¿Alguna vez han visitado una página web y se han preguntado cómo está hecha? ¿Qué creen que es HTML y para qué sirve?”
Estudiantes: Responden a la pregunta en plenaria, compartiendo sus ideas y experiencias.
Docente: Muestra un ejemplo sencillo de una página web (proyectada) y señala las diferentes partes (título, texto, enlaces).

Motivación y enganche:

Docente: Presenta un dato curioso: “¿Sabían que el primer sitio web fue creado en 1991 y usaba HTML para mostrar información? Hoy, millones de sitios usan este lenguaje para comunicarse con el mundo.” Luego, plantea el reto: “Hoy ustedes crearán su propia página web básica que podrán mostrar a sus amigos y familiares.”

Contextualización:

Docente: Explica cómo el conocimiento de HTML conecta con su futuro profesional: “En tecnología e informática, saber cómo funciona una página web es fundamental para cualquier proyecto digital que desarrollen, desde blogs hasta aplicaciones.”

Fase de Desarrollo

Tiempo estimado: 40 minutos

Presentación del contenido:

Docente: Introduce las etiquetas básicas de HTML (como , , , <body>, <h1> a <h3>, <p>, <a>), mostrando ejemplos claros y sencillos en el proyector. Explica la sintaxis, apertura y cierre de etiquetas, y la estructura general de una página web básica.</p> <h4><strong>Actividades de aprendizaje activo:</strong></h4> <h4>Actividad 1: Explorando etiquetas HTML</h4> <ul> <li><strong>Objetivo:</strong> Reconocer etiquetas básicas y su función en HTML.</li> <li><strong>Instrucciones:</strong></li> <ul> <li><strong>Docente:</strong> Entrega a cada estudiante una hoja con ejemplos de etiquetas HTML básicas y sus descripciones.</li> <li>Los estudiantes leen y subrayan las etiquetas que creen más importantes.</li> <li>En parejas, discuten para identificar al menos 5 etiquetas y explican para qué sirven.</li> </ul> <li><strong>Organización:</strong> Parejas</li> <li><strong>Producto:</strong> Lista escrita de etiquetas identificadas y función resumida.</li> <li><strong>Tiempo:</strong> 10 minutos</li> <li><strong>Rol del docente:</strong> Circula entre parejas, formula preguntas guía como “¿Por qué creen que esta etiqueta es importante?”, “¿Cómo creen que afecta al contenido de la página?”</li> </ul> <h4>Actividad 2: Construyendo la estructura básica</h4> <ul> <li><strong>Objetivo:</strong> Crear la estructura básica de una página web usando HTML.</li> <li><strong>Instrucciones:</strong></li> <ul> <li><strong>Docente:</strong> Proyecta una plantilla base de código HTML y la explica paso a paso.</li> <li>Los estudiantes abren el editor de texto en sus computadoras y replican la estructura básica, escribiendo las etiquetas mostradas.</li> <li>Agregan un título y un párrafo que describa su proyecto o algo de interés personal.</li> </ul> <li><strong>Organización:</strong> Individual</li> <li><strong>Producto:</strong> Archivo HTML con estructura básica y contenido propio.</li> <li><strong>Tiempo:</strong> 20 minutos</li> <li><strong>Rol del docente:</strong> Asiste individualmente, responde dudas, observa la correcta escritura de etiquetas y la estructura del código.</li> </ul> <h4>Actividad 3: Enlazando y enriqueciendo la página</h4> <ul> <li><strong>Objetivo:</strong> Aplicar etiquetas para crear enlaces y encabezados adicionales.</li> <li><strong>Instrucciones:</strong></li> <ul> <li><strong>Docente:</strong> Explica el uso de la etiqueta <a href="..."> para crear enlaces y cómo usar encabezados <h2> y <h3> para organizar el contenido.</li> <li>Los estudiantes agregan al archivo HTML un enlace a un sitio web de su preferencia y dos encabezados con texto descriptivo.</li> </ul> <li><strong>Organización:</strong> Individual</li> <li><strong>Producto:</strong> Archivo HTML actualizado con enlaces y encabezados.</li> <li><strong>Tiempo:</strong> 10 minutos</li> <li><strong>Rol del docente:</strong> Supervisa, corrige errores de sintaxis, sugiere mejoras y fomenta la creatividad.</li> </ul> <h4><strong>Diferenciación:</strong></h4> <ul> <li><strong>Para estudiantes que terminan antes:</strong> Se les invita a experimentar añadiendo una lista con <ul> y <li> o insertar imágenes simples con la etiqueta <img> usando URLs.</li> <li><strong>Para estudiantes que necesitan más apoyo:</strong> Se ofrece ayuda personalizada para repasar la sintaxis básica, uso de etiquetas y revisión paso a paso del código con asistencia directa del docente o compañeros con más experiencia.</li> </ul> <h4><strong>Transiciones:</strong></h4> <p>Después de cada actividad, el docente resume brevemente lo aprendido y presenta la siguiente tarea conectando la importancia de cada etiqueta para construir una página funcional y atractiva.</p> <h3>Fase de Cierre</h3> <h4><strong>Tiempo estimado:</strong> 10 minutos</h4> <h4><strong>Síntesis:</strong></h4> <p><strong>Docente:</strong> Solicita a cada estudiante que comparta en voz alta una etiqueta HTML que aprendió hoy y explique en una frase cómo la usaría en su página web.</p> <p><strong>Estudiantes:</strong> Participan compartiendo su aprendizaje y escuchando a sus compañeros.</p> <h4><strong>Reflexión metacognitiva:</strong></h4> <ul> <li>¿Qué etiqueta HTML te pareció más fácil de entender y por qué?</li> <li>¿Qué parte del código te resultó más desafiante y cómo lo resolviste?</li> <li>¿Cómo puedes usar lo aprendido hoy para crear páginas web más complejas en el futuro?</li> </ul> <h4><strong>Retroalimentación:</strong></h4> <p><strong>Docente:</strong> Brinda comentarios inmediatos, destacando aciertos en el código y sugiriendo correcciones puntuales para mejorar, motivando a continuar practicando.</p> <h4><strong>Transferencia:</strong></h4> <p><strong>Docente:</strong> Explica que el conocimiento de HTML básico es la base para aprender CSS y JavaScript, que permiten diseñar y dar interactividad a las páginas web, invitando a los estudiantes a explorar estos temas en futuras sesiones.</p> <h4><strong>Tarea o reto:</strong></h4> <p>Diseñar una página web sencilla en casa, agregando un título, un párrafo, un enlace y al menos un encabezado, para compartir en la próxima clase o en un foro en línea.</p></div> </div> <div class="card"> <h2 class="text-lg font-bold text-on-surface mb-3">Evaluación</h2> <div class="prose max-w-none text-on-surface-variant"><p><strong>Tipo de evaluación:</strong></p> <ul> <li>Diagnóstica: En la fase de inicio, al preguntar sobre conocimientos previos de HTML y páginas web.</li> <li>Formativa: Durante el desarrollo, observando la construcción del código, participación en actividades y corrección de errores en tiempo real.</li> <li>Sumativa: En el cierre, evaluando el archivo HTML final creado, la participación en la síntesis y la reflexión metacognitiva.</li> </ul> <p><strong>Criterios de evaluación:</strong></p> <ul> <li>Identifica correctamente al menos cinco etiquetas básicas de HTML (Objetivo 1).</li> <li>Construye la estructura básica de una página web con sintaxis adecuada y contenido coherente (Objetivo 2).</li> <li>Participa activamente en actividades grupales y colabora en la discusión y construcción del conocimiento (Objetivo 3).</li> <li>Aplica conocimientos previos de informática para manejar herramientas digitales necesarias (Objetivo 4).</li> </ul> <p><strong>Instrumentos sugeridos:</strong></p> <ul> <li>Lista de cotejo para verificar etiquetas y estructura en el archivo HTML.</li> <li>Observación directa durante actividades prácticas.</li> <li>Rúbrica para evaluar el proyecto final considerando sintaxis, creatividad y funcionalidad básica.</li> <li>Autoevaluación guiada con preguntas reflexivas al final de la sesión.</li> </ul> <p><strong>Evidencias de aprendizaje:</strong></p> <ul> <li>Archivo HTML con etiquetas básicas correctamente implementadas.</li> <li>Lista escrita de etiquetas y funciones identificadas durante la actividad en parejas.</li> <li>Participación en la reflexión y síntesis oral.</li> </ul></div> </div>   </div>  <div class="mt-10 text-center bg-marca-azul border border-marca-azul rounded-sm shadow-sm p-8"> <h2 class="text-xl font-bold text-white mb-2">Crea tu propio plan de clase con IA</h2> <p class="text-white/75 mb-4">100 créditos gratuitos cada mes</p> <a href="https://edukatic.co/cuenta/iniciar-sesion" class="inline-flex items-center px-6 py-3 bg-white text-marca-azul font-semibold rounded-sm hover:bg-white/90 transition-colors"> Comenzar gratis </a> </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>