Taller básico de desarrollo web: HTML, CSS y JavaScript

El desarrollo web se basa en tres tecnologías fundamentales:

HTML (HyperText Markup Language) → estructura el contenido.
CSS (Cascading Style Sheets) → define la apariencia y estilos.
JavaScript (JS) → agrega interactividad y lógica.

Este taller te ayudará a dar tus primeros pasos construyendo una página web sencilla desde cero.

1. Fundamentos de la Web

Cada página web se construye con estos tres bloques:

HTML → esqueleto del sitio (titulares, párrafos, imágenes, formularios).
CSS → piel y estilo (colores, tamaños, tipografía, diseño responsivo).
JavaScript → cerebro (animaciones, validación de formularios, interacción con el usuario).

Cuando un navegador abre una página:

Descarga el archivo .html.
Aplica las reglas definidas en el .css.
Ejecuta el código .js.

2. Primer documento HTML

Crea un archivo llamado index.html con el siguiente contenido:

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Mi primera página web</title>
  </head>
  <body>
    <h1>¡Hola Mundo!</h1>
    <p>Este es mi primer sitio web con HTML, CSS y JavaScript.</p>
  </body>
</html>

Abrir este archivo en el navegador mostrará tu primera página web. 🎉

3. Agregando estilos con CSS

Crea un archivo styles.css y agrega:

body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f9;
  color: #333;
  margin: 20px;
  padding: 20px;
}

h1 {
  color: #0077cc;
}

p {
  font-size: 18px;
}

Enlaza el CSS en tu index.html:

<link rel="stylesheet" href="styles.css" />

Ahora tu página tendrá un diseño básico.

4. Interactividad con JavaScript

Crea un archivo script.js:

// Mostrar un mensaje en consola
console.log("Bienvenido a mi primera página con JavaScript");

// Cambiar el texto al hacer clic en un botón
function cambiarMensaje() {
  document.getElementById("mensaje").innerText = "¡Has hecho clic en el botón!";
}

Modifica index.html para incluir el script:

<body>
  <h1>¡Hola Mundo!</h1>
  <p id="mensaje">Este es mi primer sitio web con HTML, CSS y JavaScript.</p>
  <button onclick="cambiarMensaje()">Haz clic aquí</button>

  <script src="script.js"></script>
</body>

5. Ejercicio práctico

Crea una página llamada perfil.html.
Agrega un título con tu nombre.
Inserta una imagen de perfil (usa cualquier imagen local o de internet).
Estiliza con CSS: cambia el color de fondo, tipografía y centra el contenido.
Con JavaScript, agrega un botón que al hacer clic muestre un alert con un mensaje de bienvenida.

6. Estructura recomendada del proyecto

proyecto-web/
│
├── index.html
├── styles.css
├── script.js
└── perfil.html

7. Siguientes pasos

Con esta base ya puedes:

Explorar etiquetas HTML (listas, tablas, formularios).
Aprender más propiedades de CSS (flexbox, grid, animaciones).
Practicar JavaScript (eventos, funciones, DOM, JSON, APIs).

HTML = contenido, CSS = estilo, JS = interacción. Con estas tres tecnologías ya puedes construir páginas web básicas y funcionales.