Objetivos de la lección
-
Objetivo Principal: Comprender la estructura y sintaxis básicas de HTML y CSS, y su aplicación en el diseño de páginas web interactivas.
-
Objetivo Secundario: Desarrollar habilidades prácticas en la creación de páginas web simples utilizando HTML y CSS, promoviendo la creatividad y el pensamiento crítico.
-
Objetivo Secundario: Reconocer la importancia de HTML y CSS en la construcción de sitios web y la interacción del usuario en la web.
Introducción (10 - 15 minutos)
-
Revisión de Contenidos Anteriores:
- El profesor debe recordar a los alumnos el concepto de Internet y la importancia de la web para la comunicación, información y comercio.
- Además, debe reforzar la noción de que la web es un espacio donde se pueden crear y compartir contenidos de forma interactiva.
-
Situaciones Problema:
- El profesor puede presentar dos situaciones problemáticas para estimular el pensamiento crítico de los alumnos. La primera puede ser: "¿Cómo se organizan y estructuran todos los contenidos que vemos en la web?" Y la segunda: "¿Cómo podemos personalizar la apariencia y el diseño de una página web para hacerla más atractiva e interactiva?"
-
Contextualización:
- El profesor debe contextualizar la importancia del tema, explicando que HTML y CSS son los lenguajes fundamentales para la creación de páginas web, y que el conocimiento de estos lenguajes es una habilidad muy valorada en el mercado laboral actual.
- Además, puede mencionar ejemplos de cómo se utilizan HTML y CSS en la construcción de sitios web populares, como Google, Facebook y Amazon.
-
Introducción al Tema:
- Para introducir el tema, el profesor puede compartir algunas curiosidades. Por ejemplo, el hecho de que HTML fue creado en 1993 por Tim Berners-Lee, el inventor de la web, y que CSS fue desarrollado poco después, en 1996, para permitir la personalización del diseño de las páginas.
- Otra curiosidad interesante es que, aunque HTML y CSS son lenguajes diferentes, están estrechamente relacionados. HTML se utiliza para estructurar el contenido de la página, mientras que CSS se utiliza para dar estilo y diseño a ese contenido.
Desarrollo (20 - 25 minutos)
-
Teoría (10 - 15 minutos):
-
Introducción a HTML (3 - 5 minutos):
- El profesor debe comenzar explicando que HTML, que significa Lenguaje de Marcado de Hipertexto, es el lenguaje principal utilizado para crear páginas web.
- Debe resaltar que HTML se utiliza para estructurar el contenido de la página, como títulos, párrafos, listas, imágenes y enlaces.
- Se debe presentar la estructura básica de un documento HTML, que incluye las etiquetas
<html>,<head>y<body>. - El profesor debe explicar que las etiquetas HTML se utilizan en pares, con una etiqueta de apertura y una etiqueta de cierre. Por ejemplo, la etiqueta
<p>se utiliza para crear un párrafo, y la etiqueta</p>se utiliza para cerrar el párrafo.
-
Introducción a CSS (3 - 5 minutos):
- A continuación, el profesor debe explicar que CSS, que significa Hojas de Estilo en Cascada, es el lenguaje utilizado para definir la apariencia y el diseño de una página web.
- Debe resaltar que CSS se utiliza para dar estilo a las etiquetas HTML, como el color, el tamaño y el tipo de fuente, el color y el fondo del texto, el espaciado, el borde y el relleno, y la disposición de los elementos en la página.
- El profesor debe presentar la estructura básica de una regla CSS, que incluye un selector, que define el elemento HTML al que se aplica el estilo, y una declaración, que define el estilo en sí. Por ejemplo, la regla
h1 { color: blue; }cambiará el color de todos los encabezados de nivel 1 (h1) a azul.
-
Diferencias entre HTML y CSS (3 - 5 minutos):
- El profesor debe aclarar que, aunque HTML y CSS son lenguajes diferentes, están estrechamente relacionados y se utilizan juntos para crear páginas web.
- Debe enfatizar que HTML se utiliza para estructurar el contenido de la página, mientras que CSS se utiliza para dar estilo y diseño a ese contenido.
- El profesor puede presentar un ejemplo práctico, mostrando un fragmento de código HTML y el CSS correspondiente, para ilustrar cómo se utilizan juntos.
-
-
Práctica (10 - 15 minutos):
-
Actividad 1 - Creando una Página Web Simple (5 - 7 minutos):
- El profesor debe proporcionar a los alumnos un archivo de texto vacío y pedirles que creen una página web simple, que incluya un título, un párrafo y una imagen.
- Los alumnos deben escribir el código HTML correspondiente y guardar el archivo con la extensión .html.
- A continuación, deben crear un archivo CSS que defina el estilo de la página, como el color y el tamaño del título, el color y el tamaño del texto del párrafo, y el borde y el relleno de la imagen.
- Los alumnos deben guardar el archivo CSS con la extensión .css.
- Por último, los alumnos deben vincular el archivo CSS al archivo HTML, utilizando la etiqueta
<link>en la sección<head>del documento HTML. - El profesor debe circular por el aula, ayudando a los alumnos según sea necesario.
-
Actividad 2 - Personalizando una Página Web Existente (5 - 7 minutos):
- El profesor debe proporcionar a los alumnos un archivo HTML de una página web simple, que incluya varios elementos, como encabezados, párrafos, listas, imágenes y enlaces.
- Los alumnos deben crear un archivo CSS que personalice la apariencia y el diseño de la página, utilizando todas las propiedades de estilo CSS que aprendieron.
- Los alumnos deben guardar el archivo CSS con la extensión .css.
- Por último, los alumnos deben vincular el archivo CSS al archivo HTML, como en la actividad anterior.
- El profesor debe circular por el aula, ayudando a los alumnos según sea necesario.
-
Retorno (10 - 15 minutos)
-
Discusión en Grupo (5 - 7 minutos):
- El profesor debe reunir a todos los alumnos para una discusión en grupo. Cada grupo debe compartir sus soluciones y experiencias de las actividades prácticas realizadas.
- Se debe alentar a los alumnos a hacer preguntas y comentarios sobre el trabajo de los demás. El profesor debe facilitar la discusión, asegurando que todos los alumnos tengan la oportunidad de participar y que la discusión se mantenga enfocada y productiva.
-
Conexión con la Teoría (2 - 3 minutos):
- El profesor debe explicar cómo las actividades prácticas se conectan con la teoría presentada. Por ejemplo, puede destacar cómo la creación de una página web simple con HTML y CSS ilustra la estructura y la sintaxis de estos lenguajes, y cómo la personalización de una página web existente demuestra la aplicación práctica de HTML y CSS en el diseño de páginas web interactivas.
-
Reflexión Individual (3 - 5 minutos):
- El profesor debe proponer que los alumnos reflexionen individualmente sobre lo que aprendieron durante la lección. Puede hacer preguntas como:
- ¿Cuál fue el concepto más importante que aprendiste hoy?
- ¿Qué preguntas aún no han sido respondidas?
- ¿Cómo puedes aplicar lo que aprendiste hoy en el diseño de tus propias páginas web?
- Los alumnos deben tener un minuto para pensar en sus respuestas. Luego, el profesor puede pedir a algunos alumnos que compartan sus reflexiones con la clase.
- El profesor debe proponer que los alumnos reflexionen individualmente sobre lo que aprendieron durante la lección. Puede hacer preguntas como:
-
Feedback del Profesor (1 - 2 minutos):
- Basándose en la discusión en grupo, la conexión con la teoría y la reflexión individual, el profesor debe proporcionar un feedback general sobre la lección. Debe elogiar los puntos fuertes de los alumnos, identificar áreas que necesitan mejorar y sugerir formas de seguir aprendiendo sobre HTML y CSS.
Conclusión (5 - 10 minutos)
-
Resumen de los Contenidos (2 - 3 minutos):
- El profesor debe recapitular los puntos principales de la lección, reforzando la estructura y sintaxis de HTML y CSS, y su aplicación en el diseño de páginas web interactivas.
- Debe recordar a los alumnos la importancia de HTML en la estructuración del contenido de la página, y de CSS en la personalización de la apariencia y diseño de ese contenido.
- El profesor debe destacar la diferencia entre HTML y CSS, enfatizando que, aunque son lenguajes diferentes, están estrechamente relacionados y se utilizan juntos para crear páginas web.
-
Conexión entre Teoría, Práctica y Aplicaciones (1 - 2 minutos):
- El profesor debe explicar cómo la lección conectó la teoría, la práctica y las aplicaciones. Puede mencionar cómo las actividades prácticas permitieron a los alumnos aplicar la teoría de HTML y CSS en la creación y personalización de páginas web.
- Debe resaltar que el conocimiento de HTML y CSS es una habilidad valiosa en el mundo digital actual, y que los alumnos pueden utilizar esta habilidad para crear sus propias páginas web o personalizar páginas web existentes.
-
Materiales Extras (1 - 2 minutos):
- El profesor debe sugerir materiales adicionales para los alumnos que deseen profundizar sus conocimientos sobre HTML y CSS. Puede recomendar tutoriales en línea, libros, videos y sitios web de enseñanza de programación.
- También puede sugerir que los alumnos practiquen lo aprendido creando más páginas web y experimentando con diferentes etiquetas HTML y propiedades CSS.
-
Aplicaciones en el Día a Día (1 - 2 minutos):
- Por último, el profesor debe discutir las aplicaciones de HTML y CSS en el día a día. Puede mencionar cómo se utilizan estos lenguajes en la creación de sitios web y aplicaciones que los alumnos utilizan regularmente, como redes sociales, sitios de noticias y tiendas en línea.
- Debe enfatizar que, al comprender HTML y CSS, los alumnos pueden tener una mejor apreciación y comprensión del mundo digital que les rodea, y pueden incluso comenzar a crear sus propias páginas web y aplicaciones.
