Construyendo mi primer sitio web: explorando HTML y CSS

Este plan de clase está diseñado para que estudiantes de secundaria (12-15 años) aprendan a desarrollar páginas web utilizando HTML y CSS a través de un proyecto práctico y colaborativo. Los alumnos crearán un sitio web básico que refleje información personal o un tema de su interés, aplicando etiquetas HTML para estructurar el contenido y estilos CSS para personalizar su apariencia.

El aprendizaje se centra en la comprensión de la estructura de una página web, la importancia del diseño visual y la relación entre código y resultado, lo que fomenta el pensamiento lógico y la creatividad. Además, se promueve el trabajo en equipo y la autonomía, habilidades clave para su desarrollo académico y personal.

Al finalizar, los estudiantes tendrán un producto tangible, un sitio web funcional que podrán compartir, y habrán adquirido competencias digitales fundamentales en la era digital, conectando lo aprendido con posibles usos cotidianos como crear blogs personales, portafolios o proyectos escolares digitales.

• Identificar y utilizar etiquetas básicas de HTML para estructurar contenido en una página web.
• Aplicar reglas básicas de CSS para modificar el estilo visual de elementos HTML.
• Diseñar y construir una página web sencilla que integre HTML y CSS de manera funcional y estética.
• Colaborar en equipo para planificar, desarrollar y presentar un proyecto web.
• Evaluar críticamente el diseño y funcionalidad de páginas web propias y de compañeros para mejorar su trabajo.

• Computadoras o laptops con acceso a un editor de texto simple (por ejemplo, Visual Studio Code, Sublime Text o Notepad++)
• Navegador web actualizado (Google Chrome, Firefox, Edge)
• Proyector o pantalla para demostraciones del docente
• Conexión a internet para consulta de recursos y ejemplos
• Material impreso con vocabulario básico de HTML y CSS y ejemplos de etiquetas
• Guías impresas o digitales con pasos para crear archivos HTML y CSS
• Cuaderno y bolígrafo para anotaciones y planificación

• Conocimientos básicos sobre el uso de una computadora y navegación en internet.
• Habilidades iniciales de lectura y comprensión de instrucciones escritas en español.
• Experiencia previa con programas de edición de texto o procesadores (opcional pero recomendable).
• Conceptos básicos sobre estructura de documentos digitales (como títulos, párrafos, listas) vistos en clases anteriores.

Sesión 1: Introducción y primeros pasos en HTML

Fase de Inicio

Tiempo estimado:

30 minutos

Propósito de la sesión:

Presentar el proyecto de crear una página web y motivar a los estudiantes para que se involucren en el aprendizaje de HTML y CSS.

Activación de conocimientos previos:

Docente: "¿Alguno ha visitado una página web y se ha preguntado cómo se hace? ¿Qué elementos notaron en esa página?"

Estudiantes: Responden compartiendo experiencias breves sobre páginas web que usan frecuentemente.

Motivación y enganche:

Docente: Muestra un sitio web simple y colorido que hizo previamente, explica que al final de estas sesiones ellos crearán uno similar que podrán compartir con familia y amigos.

Contextualización:

Docente: "Saber crear páginas web es útil para mostrar lo que sabemos, nuestras ideas o proyectos, y es una habilidad muy demandada hoy en día." Estudiantes: Reflexionan sobre la importancia de estas habilidades en la vida diaria y escolar.

Fase de Desarrollo

Tiempo estimado:

210 minutos

Presentación del contenido:

Docente: Introduce las etiquetas HTML básicas (, , ,