Tema 1: Introducción a HTML5
¿Qué es HTML5?
Es la última versión del lenguaje HTML, usado para estructurar el contenido de páginas
web.
¿Para qué sirve?
Permite crear la base de una página web usando etiquetas semánticas que describen su
función (por ejemplo: <header>, <footer>, etc.)
Ejemplo:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo HTML5</title>
</head>
<body>
<div>Hola, este es el cuerpo del sitio</div>
</body>
</html>
Tema 2: Etiquetas semánticas (main, aside, nav, footer)
¿Qué son?
Son etiquetas que tienen un significado lógico. Hacen que el código sea más fácil de leer
y mejor para el SEO y accesibilidad.
Etiqueta Uso
<nav> Menú de navegación
<main> Contenido principal
<aside> Contenido lateral (publicidad, enlaces, etc.)
<footer> Pie de página
<body>
<nav><div>Menú principal</div></nav>
<main><div>Contenido principal</div></main>
<aside><div>Barra lateral</div></aside>
<footer><div>Pie de página</div></footer>
</body>
Tema 3: Clases y atributos
¿Qué es una clase (class)?
Es un atributo que se usa para agrupar elementos HTML con un mismo estilo o
comportamiento.
¿Para qué sirve?
Puedes aplicar estilos CSS o JavaScript a varios elementos con la misma clase.
Ejemplo:
<div class="boton">Haz clic</div>
<div class="boton">Otro botón</div>
En CSS podrías hacer:
.boton {
background-color: blue;
color: white;
padding: 10px;
}
Tema 4: Introducción a CSS y Flexbox
¿Qué es Flexbox?
Es una técnica de diseño en CSS que permite distribuir y alinear elementos fácilmente.
¿Para qué sirve?
Para crear layouts flexibles, por ejemplo: menú horizontal, columnas, centrado, etc.
Ejemplo:
<div class="contenedor">
<div>Elemento 1</div>
<div>Elemento 2</div>
</div>
<style>
.contenedor {
display: flex;
gap: 10px;
}
</style>
Tema 5: Crear un layout básico (con div y etiquetas semánticas)
¿Qué es un layout?
Es el diseño o estructura visual de la página.
Estructura:
<div class="container">
<nav><div>Menú</div></nav>
<div class="contenido">
<main><div>Contenido principal</div></main>
<aside><div>Aside</div></aside>
</div>
<footer><div>Footer</div></footer>
</div>
Tema 6: Crear una NavBar con Flexbox
¿Qué es una NavBar?
Es la barra de navegación con enlaces para moverse por la web.
Ejemplo:
<nav class="navbar">
<div class="logo">Logo</div>
<div class="menu">
<div>Inicio</div>
<div>Acerca</div>
<div>Contacto</div>
</div>
</nav>
<style>
.navbar {
display: flex;
justify-content: space-between;
background: #333;
color: white;
padding: 1rem;
}
.menu {
display: flex;
gap: 1rem;
}
</style>
ema 7: Main y Aside con Flexbox (diseño tipo blog o sitio)
¿Qué hacen main y aside?
<main> contiene el contenido principal. <aside> es información relacionada (notas,
enlaces, anuncios).
Ejemplo:
<div class="contenido">
<main><div>Artículo principal</div></main>
<aside><div>Noticias recientes</div></aside>
</div>
<style>
.contenido {
display: flex;
}
main {
flex: 3;
padding: 1rem;
}
aside {
flex: 1;
padding: 1rem;
background: #eee;
}
</style>
Tema 8: Footer adaptable con Flexbox
¿Qué es el footer?
Es la parte final de la página: derechos de autor, enlaces secundarios, redes sociales.
Ejemplo:
<footer class="footer">
<div>© 2025 Mi Sitio</div>
<div>Privacidad | Términos</div
