Clase de HTML y CSS – Nivel Intermedio
Duración: 90 minutos
Nivel: Secundaria – Nivel Intermedio
Tema: Explicación técnica del código HTML + CSS
Objetivo:
Explicar en profundidad cada línea de un documento HTML simple con estilos CSS
incorporados, comprendiendo estructura, buenas prácticas y sintaxis básica.
Código HTML + CSS:
<!DOCTYPE html>
<html>
<head>
<title>Mi Perfil</title>
<style>
body { background-color: #f0f0f0; font-family: Verdana; }
h1 { color: darkgreen; }
p { font-size: 16px; }
</style>
</head>
<body>
<h1>Mi Nombre</h1>
<p>Mi comida favorita es...</p>
<p>Me gusta aprender sobre...</p>
</body>
</html>
Explicación Línea por Línea:
<!DOCTYPE html> → Define que el documento está escrito en HTML5. Mejora la
compatibilidad con los navegadores modernos.
<html> → Etiqueta raíz que encierra todo el contenido HTML.
<head> → Sección que contiene metadatos y configuraciones no visibles directamente.
<title>Mi Perfil</title> → Título de la pestaña del navegador y para motores de búsqueda.
<style>...</style> → Sección interna de CSS para aplicar estilos al HTML.
body { background-color: #f0f0f0; font-family: Verdana; } → Estilo aplicado al cuerpo:
fondo gris claro y fuente Verdana.
h1 { color: darkgreen; } → Estilo para títulos de nivel 1: color verde oscuro.
p { font-size: 16px; } → Estilo para párrafos: tamaño de letra fijo de 16 píxeles.
</head> → Cierra la cabecera del documento.
<body> → Sección visible del documento, donde va el contenido que ve el usuario.
<h1>Mi Nombre</h1> → Título principal de la página. Sólo uno por documento para fines
semánticos.
<p>Mi comida favorita es...</p> → Primer párrafo con texto personalizado por el
estudiante.
<p>Me gusta aprender sobre...</p> → Segundo párrafo personalizable.
</body> → Cierre del contenido visible.
</html> → Fin del documento HTML.
Temas adicionales para reforzar:
- Buenas prácticas: indentación, cierre de etiquetas, estructura limpia.
- Sintaxis de CSS: selectores, propiedades y valores.
- Introducción al modelo de caja (box model) para futuras clases.
Clase 2 de HTML y CSS – Nivel Intermedio
Duración: 90 minutos
Nivel: Secundaria – Nivel Intermedio
Tema: Estructura de una página web y uso de etiquetas HTML comunes
Objetivo:
Aplicar etiquetas HTML para crear contenido estructurado, como listas, enlaces, imágenes y
divisiones; introducir atributos y conceptos clave como clases y estilos.
Contenido:
- Etiquetas de contenido: <ul>, <ol>, <li>, <a>, <img>, <div>, <span>
- Atributos comunes: href, src, alt, class, id
- Introducción al uso de clases y estilos internos
- Práctica guiada con estructura semántica básica
Código de ejemplo con explicación:
<!DOCTYPE html>
<html>
<head>
<title>Mi Página Web</title>
<style>
body { font-family: Arial; background-color: #fffbe6; }
.resaltado { color: blue; font-weight: bold; }
</style>
</head>
<body>
<h1 class="resaltado">Bienvenidos a mi página</h1>
<p>Este es un párrafo con una <span class="resaltado">palabra resaltada</span>.</p>
<a href="[Link] a Google</a>
<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
</ul>
<img src="[Link]" alt="Descripción de la imagen" width="200">
</body>
</html>
Explicación de nuevas etiquetas:
<ul> → Crea una lista desordenada (con viñetas).
<ol> → Crea una lista ordenada (numerada).
<li> → Define cada ítem dentro de una lista.
<a href='...'> → Crea un enlace a otra página web.
<img src='...'> → Inserta una imagen desde una URL o archivo local.
alt → Texto alternativo para describir la imagen.
<div> → Contenedor genérico para agrupar contenido.
<span> → Contenedor en línea, usado para aplicar estilos.
class → Atributo que asocia un elemento con un estilo CSS.
Actividad práctica sugerida:
Los estudiantes deben crear una página con:
- Un título principal
- Una lista de sus pasatiempos o intereses
- Un enlace a su sitio web favorito
- Una imagen relacionada con sus intereses
- Uso de al menos una clase CSS para aplicar estilo
Clase 3 de HTML y CSS – Nivel Intermedio
Duración: 90 minutos
Nivel: Secundaria – Intermedio
Tema: Formularios HTML y diseño básico responsivo con CSS
Objetivo:
Comprender cómo crear formularios básicos en HTML, manejar sus elementos y aplicar
principios básicos de diseño responsivo con CSS.
Contenido:
Formularios en HTML: <form>, <input>, <label>, <textarea>, <select>,
<button>
Atributos comunes: type, name, value, placeholder, required
Introducción al diseño responsivo: uso de % y media queries
Práctica guiada: Crear un formulario de contacto
Código de ejemplo:
html
CopiarEditar
<!DOCTYPE html>
<html>
<head>
<title>Formulario de Contacto</title>
<style>
body { font-family: sans-serif; padding: 20px; }
form { max-width: 500px; margin: auto; }
input, textarea, select { width: 100%; margin-bottom: 10px;
padding: 8px; }
@media (max-width: 600px) {
body { background-color: #f0f8ff; }
}
</style>
</head>
<body>
<h2>Contáctanos</h2>
<form>
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre" required>
<label for="correo">Correo electrónico:</label>
<input type="email" id="correo" name="correo" required>
<label for="mensaje">Mensaje:</label>
<textarea id="mensaje" name="mensaje"></textarea>
<label for="opcion">Motivo de contacto:</label>
<select id="opcion" name="opcion">
<option value="consulta">Consulta</option>
<option value="sugerencia">Sugerencia</option>
</select>
<button type="submit">Enviar</button>
</form>
</body>
</html>
Explicación de etiquetas y conceptos nuevos:
<form> → Define el formulario.
<input> → Campo para ingresar datos (texto, correo, etc.).
<label> → Describe el propósito de un campo.
<textarea> → Área de texto más grande para mensajes.
<select> y <option> → Lista desplegable de opciones.
<button type="submit"> → Botón para enviar el formulario.
required → Hace obligatorio el campo antes de enviar.
@media (max-width: 600px) → Aplica estilos solo si la pantalla tiene máximo
600px de ancho (para celulares).
Actividad práctica sugerida:
Los estudiantes deben crear una página web que incluya:
Un formulario de contacto con:
o Nombre
o Correo electrónico
o Mensaje
o Motivo de contacto (select)
Estilos responsivos (que cambien color o tipografía en pantallas pequeñas)
Buenas prácticas: indentación clara, etiquetas cerradas, uso de clases
Clase 4 de HTML y CSS – Nivel Intermedio
Duración: 90 minutos
Tema: Posicionamiento en CSS y uso de Flexbox
Objetivo:
Aprender a posicionar elementos en una página web utilizando propiedades CSS como
position, display y especialmente el sistema Flexbox para diseño adaptable.
Contenido:
Propiedades de posicionamiento: static, relative, absolute, fixed
Uso de display: flex
Propiedades de Flexbox: justify-content, align-items, flex-direction
Diseño de cajas adaptable y centrado de elementos
Código de ejemplo:
html
CopiarEditar
<!DOCTYPE html>
<html>
<head>
<title>Diseño con Flexbox</title>
<style>
body { font-family: Arial; margin: 0; padding: 0; }
.contenedor {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f2f2f2;
}
.caja {
width: 200px;
height: 200px;
margin: 10px;
background-color: lightcoral;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-size: 20px;
}
</style>
</head>
<body>
<div class="contenedor">
<div class="caja">Caja 1</div>
<div class="caja">Caja 2</div>
</div>
</body>
</html>
Explicación de propiedades nuevas:
display: flex → Convierte un contenedor en flexible, para organizar elementos
hijos.
justify-content: center → Centra los elementos horizontalmente.
align-items: center → Centra los elementos verticalmente.
height: 100vh → Altura del 100% de la pantalla.
margin → Espaciado exterior entre elementos.
position → Controla cómo se ubica el elemento en la página.
relative / absolute → Permiten posicionar elementos de forma específica.
Actividad práctica sugerida:
Los estudiantes deben:
Crear una sección con tres bloques alineados horizontalmente usando Flexbox
Centrar los bloques en la pantalla
Personalizar colores, texto y tamaños
Agregar un diseño responsivo con @media para que los bloques se alineen
verticalmente en pantallas pequeñas
Clase 5 de HTML y CSS – Nivel Intermedio
Duración: 90 minutos
Tema: CSS Grid y animaciones básicas
Objetivo:
Aprender a usar CSS Grid para crear diseños de cuadrícula modernos y aplicar
animaciones básicas con @keyframes y transition.
Contenido:
Introducción a CSS Grid: display: grid, grid-template-columns, gap, grid-
area
Diferencias entre Flexbox y Grid
Animaciones CSS: @keyframes, animation, transition
Aplicación práctica: crear una galería de imágenes animada
Código de ejemplo – CSS Grid + Animación:
html
CopiarEditar
<!DOCTYPE html>
<html>
<head>
<title>Galería con Grid y Animación</title>
<style>
.galeria {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
padding: 20px;
}
.imagen {
background-color: lightblue;
height: 150px;
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
color: white;
transition: transform 0.5s ease;
}
.imagen:hover {
transform: scale(1.1);
animation: cambiarColor 1s infinite alternate;
}
@keyframes cambiarColor {
0% { background-color: lightblue; }
100% { background-color: deepskyblue; }
}
@media (max-width: 600px) {
.galeria {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<h2 style="text-align:center;">Mi Galería</h2>
<div class="galeria">
<div class="imagen">1</div>
<div class="imagen">2</div>
<div class="imagen">3</div>
<div class="imagen">4</div>
<div class="imagen">5</div>
<div class="imagen">6</div>
</div>
</body>
</html>
Explicación de conceptos clave:
display: grid → Activa el sistema de cuadrícula en el contenedor.
grid-template-columns: repeat(3, 1fr) → Divide el contenedor en 3
columnas iguales.
gap: 15px → Espaciado entre filas y columnas.
transition: transform 0.5s → Suaviza el efecto al hacer hover.
@keyframes → Define animaciones personalizadas (en este caso, cambio de
color).
transform: scale(1.1) → Agranda el elemento al pasar el mouse.
@media (max-width: 600px) → Hace que el grid sea de 1 sola columna en
pantallas pequeñas.
Actividad práctica sugerida:
Pide a los estudiantes:
Crear una galería de imágenes o bloques de contenido usando Grid
Aplicar una animación al pasar el cursor (color, tamaño o rotación)
Hacerla responsiva con media queries
Personalizar colores, tamaños y número de columnas
Clase 5 de HTML y CSS – Nivel Intermedio
Duración: 90 minutos
Tema: CSS Grid y animaciones básicas
Objetivo:
Aprender a usar CSS Grid para crear diseños de cuadrícula modernos y aplicar
animaciones básicas con @keyframes y transition.
Contenido:
Introducción a CSS Grid: display: grid, grid-template-columns, gap, grid-
area
Diferencias entre Flexbox y Grid
Animaciones CSS: @keyframes, animation, transition
Aplicación práctica: crear una galería de imágenes animada
Código de ejemplo – CSS Grid + Animación:
html
CopiarEditar
<!DOCTYPE html>
<html>
<head>
<title>Galería con Grid y Animación</title>
<style>
.galeria {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
padding: 20px;
}
.imagen {
background-color: lightblue;
height: 150px;
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
color: white;
transition: transform 0.5s ease;
}
.imagen:hover {
transform: scale(1.1);
animation: cambiarColor 1s infinite alternate;
}
@keyframes cambiarColor {
0% { background-color: lightblue; }
100% { background-color: deepskyblue; }
}
@media (max-width: 600px) {
.galeria {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<h2 style="text-align:center;">Mi Galería</h2>
<div class="galeria">
<div class="imagen">1</div>
<div class="imagen">2</div>
<div class="imagen">3</div>
<div class="imagen">4</div>
<div class="imagen">5</div>
<div class="imagen">6</div>
</div>
</body>
</html>
Explicación de conceptos clave:
display: grid → Activa el sistema de cuadrícula en el contenedor.
grid-template-columns: repeat(3, 1fr) → Divide el contenedor en 3
columnas iguales.
gap: 15px → Espaciado entre filas y columnas.
transition: transform 0.5s → Suaviza el efecto al hacer hover.
@keyframes → Define animaciones personalizadas (en este caso, cambio de
color).
transform: scale(1.1) → Agranda el elemento al pasar el mouse.
@media (max-width: 600px) → Hace que el grid sea de 1 sola columna en
pantallas pequeñas.
Actividad práctica sugerida:
Pide a los estudiantes:
Crear una galería de imágenes o bloques de contenido usando Grid
Aplicar una animación al pasar el cursor (color, tamaño o rotación)
Hacerla responsiva con media queries
Personalizar colores, tamaños y número de columnas
¿Quieres que la Clase 6 se enfoque en formularios avanzados con validación o en
integración de HTML y CSS con JavaScript básico?
4o
Dijiste:
si
ChatGPT dijo:
¡Genial! Vamos con la Clase 6 de HTML y CSS – Nivel Intermedio, enfocada en
integración básica con JavaScript para hacer formularios interactivos y dinámicos.
Diseñada para 90 minutos.
Clase 6 de HTML, CSS y JavaScript – Introducción a la interacción
Duración: 90 minutos
Tema: Validación básica y manipulación de formularios con JavaScript
Objetivo:
Introducir a los estudiantes al uso de JavaScript para validar formularios, mostrar
mensajes interactivos y modificar contenido de la página en respuesta a eventos del
usuario.
Contenido:
¿Qué es JavaScript y cómo se conecta a HTML?
Validar campos de formulario (por ejemplo, verificar si están vacíos)
Mostrar alertas, mensajes personalizados o cambiar estilos
Eventos comunes: onclick, oninput, onsubmit
Código de ejemplo – HTML, CSS y JavaScript:
html
CopiarEditar
<!DOCTYPE html>
<html>
<head>
<title>Formulario con Validación</title>
<style>
body { font-family: Arial; padding: 20px; }
.error { color: red; display: none; }
input { display: block; margin-bottom: 10px; padding: 8px; width:
300px; }
</style>
</head>
<body>
<h2>Formulario de Registro</h2>
<form id="miFormulario">
<label>Nombre:</label>
<input type="text" id="nombre">
<span class="error" id="errorNombre">Este campo es
obligatorio</span>
<label>Email:</label>
<input type="email" id="email">
<span class="error" id="errorEmail">Ingrese un correo válido</span>
<button type="submit">Enviar</button>
</form>
<script>
[Link]("miFormulario").addEventListener("submit",
function(event) {
[Link](); // Evita que el formulario se envíe
automáticamente
var nombre = [Link]("nombre").value;
var email = [Link]("email").value;
var error = false;
// Validación del nombre
if ([Link]() === "") {
[Link]("errorNombre").[Link] = "block";
error = true;
} else {
[Link]("errorNombre").[Link] = "none";
}
// Validación básica del email
if (![Link]("@")) {
[Link]("errorEmail").[Link] = "block";
error = true;
} else {
[Link]("errorEmail").[Link] = "none";
}
if (!error) {
alert("Formulario enviado correctamente 🎉");
// Aquí podrías limpiar el formulario o enviarlo
}
});
</script>
</body>
</html>
Explicación de elementos clave:
<script> → Inserta código JavaScript dentro del HTML.
addEventListener("submit", ...) → Ejecuta una función cuando se envía el
formulario.
[Link]() → Evita que el formulario se recargue al enviarse.
trim() → Elimina espacios al inicio y al final del texto.
[Link] = "block" / "none" → Muestra u oculta elementos.
alert() → Muestra una ventana emergente.
Actividad práctica sugerida:
Crear un formulario con al menos 3 campos (nombre, correo, mensaje).
Mostrar mensajes de error si algún campo está vacío o el correo no es válido.
Al completar correctamente, mostrar un mensaje de confirmación con alert.
Como reto: cambiar el color del borde del campo cuando hay un error.
Clase 7 de HTML, CSS y JavaScript – Nivel Intermedio
Duración: 90 minutos
Tema: Manejo avanzado de eventos y manipulación del DOM
Objetivo:
Comprender cómo manejar eventos más complejos, manipular el DOM de manera
avanzada y actualizar dinámicamente el contenido de la página web utilizando
JavaScript.
Contenido:
Eventos más avanzados: mousemove, keydown, scroll, resize, entre otros.
Métodos para manipular el DOM:
o getElementById, getElementsByClassName, querySelector,
querySelectorAll
o createElement, appendChild, removeChild, innerHTML
Eventos dinámicos: Delegación de eventos.
Animaciones básicas con JavaScript: Modificar propiedades como style.
Código de ejemplo – Manejo avanzado de eventos y DOM:
html
CopiarEditar
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Eventos Avanzados y Manipulación del DOM</title>
<style>
body {
font-family: Arial, sans-serif;
}
.cuadro {
width: 100px;
height: 100px;
background-color: lightcoral;
margin: 20px;
display: inline-block;
transition: transform 0.3s;
}
.activo {
background-color: lightgreen;
transform: rotate(45deg);
}
</style>
</head>
<body>
<h1>Eventos Avanzados y Manipulación del DOM</h1>
<div class="cuadro"></div>
<div class="cuadro"></div>
<div class="cuadro"></div>
<script>
// Selección de elementos
const cuadros = [Link]('.cuadro');
// Manejo de evento 'click' en los cuadros
[Link](cuadro => {
[Link]('click', () => {
[Link]('activo');
});
});
// Evento 'mousemove' para cambiar el color de fondo al mover el
mouse
[Link]('mousemove', (event) => {
[Link] = `rgb(${[Link] % 255},
${[Link] % 255}, 150)`;
});
// Evento 'scroll' para mostrar un mensaje en la consola cuando el
usuario se desplaza
[Link]('scroll', () => {
[Link]('¡Estás desplazándote!');
});
// Evento 'keydown' para capturar una tecla presionada
[Link]('keydown', (event) => {
[Link](`Tecla presionada: ${[Link]}`);
});
// Manipulación del DOM: Crear un nuevo elemento
const nuevoElemento = [Link]('div');
[Link] = 'Soy un nuevo cuadro';
[Link] = '150px';
[Link] = '150px';
[Link] = 'lightblue';
[Link] = '20px';
[Link](nuevoElemento);
</script>
</body>
</html>
Explicación de conceptos clave:
Eventos más avanzados:
o mousemove: Detecta el movimiento del mouse sobre la pantalla.
o keydown: Detecta cuando una tecla del teclado es presionada.
o scroll: Detecta cuando el usuario se desplaza hacia arriba o hacia abajo
en la página.
o resize: Detecta cuando la ventana del navegador es redimensionada.
Manipulación del DOM:
o querySelectorAll('.cuadro'): Selecciona todos los elementos con la
clase .cuadro.
o addEventListener('click', ...): Asocia un evento a un elemento, en
este caso, un click.
o [Link]('activo'): Cambia la clase de un elemento (añadir
o quitar la clase activo).
o createElement('div'): Crea un nuevo elemento div.
o appendChild(nuevoElemento): Añade un nuevo elemento al final del
cuerpo de la página.
Actividad práctica sugerida:
Crear una página que tenga varios cuadros de colores.
Al hacer click en cada cuadro, este debe rotar y cambiar de color.
Implementar un efecto dinámico de fondo que cambie según la posición del
mouse (al moverlo).
Utilizar scroll para agregar un contador que muestre el número de veces que el
usuario ha hecho scroll.
Permitir al usuario agregar un cuadro nuevo con un botón. El nuevo cuadro
debe tener el mismo comportamiento que los cuadros iniciales.
Conclusión:
En esta clase, los estudiantes han aprendido a manejar eventos avanzados y a modificar
el DOM con JavaScript. Estas habilidades son clave para hacer páginas web más
interactivas y dinámicas. Además, se les ha mostrado cómo crear, modificar y eliminar
elementos en el DOM mediante eventos, lo que abre la puerta a la creación de
aplicaciones web más complejas.