Clase: Introducción a HTML y CSS
Objetivos de aprendizaje
Al finalizar la clase, el estudiante será capaz de:
-
Comprender qué son HTML y CSS y para qué sirven en el desarrollo web.
-
Identificar las etiquetas básicas de HTML y su función en la estructura de una página.
-
Reconocer cómo CSS permite aplicar estilos y dar diseño a las páginas web.
-
Crear páginas web sencillas combinando HTML y CSS.
Actividad investigativa previa
Pregunta: ¿Qué páginas web te gustan más visualmente y qué crees que las hace atractivas: su estructura (contenido) o su diseño (colores, estilos, formas)?
Desarrollo de la clase
¿Qué es HTML?
HTML (HyperText Markup Language) es el lenguaje de marcado estándar utilizado para crear páginas web. Funciona como el esqueleto de una página, definiendo su estructura y contenido.
-
Etiquetas básicas:
-
<h1>→ encabezado principal. -
<p>→ párrafo de texto. -
<img>→ imagen. -
<a>→ enlace.
-
Ejemplo:
¿Qué es CSS?
CSS (Cascading Style Sheets) es un lenguaje de estilo que se utiliza para dar apariencia y diseño a las páginas creadas con HTML. Es como el “maquillaje” de una página web: define colores, fuentes, tamaños y disposición.
Ejemplo:
(Este código hace que todos los párrafos tengan texto azul de tamaño 16px.)
Los estilos se pueden aplicar de tres formas:
-
En línea (dentro de la etiqueta HTML).
-
En una sección
<style>dentro del HTML. -
En un archivo CSS externo vinculado al HTML.
Actividad en clase
-
Crear un archivo index.html con el siguiente contenido:
-
Un título con
<h1>que diga “Mi primera página web”. -
Un párrafo que explique quién eres.
-
Una imagen (puede ser de internet).
-
Un enlace hacia tu red social favorita.
-
-
Crear un archivo style.css y aplicarle estilos:
-
Cambiar el color del título.
-
Cambiar el tamaño de la fuente del párrafo.
-
Centrar la imagen.
-
Conclusión
-
HTML da la estructura y el contenido a una página web.
-
CSS se encarga de la apariencia y el diseño.
-
Juntos, permiten crear sitios web dinámicos, atractivos y funcionales.
Tarea para casa (Compromiso)
-
Reto: Crea una calculadora sencilla en HTML y CSS que realice operaciones básicas de matemáticas (suma, resta, multiplicación y división).
Rúbrica de Evaluación – Introducción a HTML y CSS
| Criterio | Excelente (10) | Satisfactorio (7) | Básico (4) | Insuficiente (1) | Peso |
|---|---|---|---|---|---|
| Comprensión de HTML | Explica y utiliza correctamente etiquetas básicas (h1, p, img, a). | Utiliza etiquetas con algunos errores menores. | Utiliza etiquetas básicas de manera incompleta o incorrecta. | No logra aplicar etiquetas HTML. | 20% |
| Comprensión de CSS | Aplica correctamente estilos básicos (color, tamaño, alineación). | Aplica estilos con algunos errores. | Aplica pocos estilos o de forma incompleta. | No aplica estilos CSS. | 20% |
| Actividad en clase (página web) | Crea una página web completa con título, párrafo, imagen y enlace, con estilos aplicados. | Crea la página con la mayoría de los elementos, aunque falta alguno. | Crea la página incompleta (2 elementos). | No crea la página. | 20% |
| Tarea: Calculadora en HTML y CSS | Entrega una calculadora funcional con operaciones básicas. | Entrega la calculadora con una o dos operaciones incompletas. | Entrega la calculadora con errores que dificultan su uso. | No entrega la tarea. | 20% |
| Explicación y organización del código | Código ordenado, comentado y fácil de leer. | Código entendible, con pequeños errores de orden. | Código poco claro o sin organización. | Código desordenado o no funcional. | 20% |
