🌐 Tu Primera Web: HTML, CSS y JavaScript

Bienvenidos al mundo del desarrollo web. Hoy dejás de ser un usuario que navega y te convertís en un creador que construye.

Una página web moderna tiene tres capas principales:

HTML (Estructura): El esqueleto. Qué contenido hay.
CSS (Estilo): La piel y la ropa. Cómo se ve.
JavaScript (Comportamiento): Los músculos y el cerebro. Qué hace (interactividad).

🏗️ HTML: El Esqueleto

HTML (HyperText Markup Language) usa “etiquetas” para definir elementos. Es la base de todo.

Etiquetas Esenciales

<!doctype html>
<html>
  <head>
    <title>Mi Primera Web</title>
  </head>
  <body>
    <!-- Encabezados: h1 a h6 -->
    <h1>Hola Mundo!</h1>
    <h2>Subtítulo importante</h2>

    <!-- Párrafos -->
    <p>Esta es mi página web creada en Informática Aplicada.</p>

    <!-- Imágenes -->
    <img src="foto.jpg" alt="Una foto copada" />

    <!-- Listas -->
    <ul>
      <li>Elemento 1</li>
      <li>Elemento 2</li>
    </ul>

    <!-- Enlaces -->
    <a href="https://google.com">Ir a Google</a>

    <!-- Contenedores (Cajas genéricas) -->
    <div class="tarjeta">
      <p>Esto está dentro de una caja.</p>
    </div>
  </body>
</html>

Clases e IDs

Para poder dar estilo a cosas específicas, usamos atributos:

class: Para grupos de elementos (ej. .boton, .tarjeta). Se puede repetir.
id: Para un elemento único (ej. #titulo-principal). No se debe repetir.

🎨 CSS: El Estilo

Sin CSS, la web se ve fea y aburrida (texto negro sobre fondo blanco). Con CSS, le damos vida.

Selectores Básicos

/* Selector de Etiqueta: Afecta a todos los <p> */
p {
  font-size: 16px;
}

/* Selector de Clase: Afecta a todo lo que tenga class="tarjeta" */
.tarjeta {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  padding: 20px;
}

/* Selector de ID: Afecta solo al elemento con id="titulo-principal" */
#titulo-principal {
  color: blue;
  text-align: center;
}

El Modelo de Caja (Box Model)

Todo en la web es una caja rectangular, aunque no lo parezca.

Content: El contenido real (texto, imagen).
Padding: El relleno (espacio interno entre el contenido y el borde).
Border: El borde de la caja.
Margin: El margen (espacio externo que separa la caja de otras cajas).

Flexbox: Acomodando las cosas

La forma moderna de distribuir elementos.

.contenedor {
  display: flex;
  justify-content: center; /* Centra horizontalmente */
  align-items: center; /* Centra verticalmente */
  gap: 10px; /* Espacio entre elementos */
}

⚡ JavaScript: Interactividad

HTML y CSS son estáticos. JavaScript (JS) hace que las cosas pasen. Se escribe dentro de la etiqueta <script>, generalmente antes de cerrar el </body>.

Tu primer Script

<button id="miBoton">Hacé click aquí</button>
<p id="mensaje">Esperando...</p>

<script>
  // 1. Seleccionamos los elementos del HTML
  const boton = document.getElementById("miBoton");
  const parrafo = document.getElementById("mensaje");

  // 2. Definimos una función (qué queremos que pase)
  function saludar() {
    parrafo.innerText = "¡Hola! Has hecho click 🎉";
    parrafo.style.color = "green";
  }

  // 3. Conectamos el evento (click) con la función
  boton.addEventListener("click", saludar);
</script>

Con esto, al hacer click en el botón, el texto del párrafo cambia y se pone verde. ¡Eso es el DOM (Document Object Model) en acción!

🤖 IA: Tu Programador Par (Pair Programmer)

Escribir código desde cero puede ser lento. La IA es genial para esto.

Cómo usarla:

Generar estructura: “Dame el código HTML y CSS para una tarjeta de perfil moderna con sombra suave.”
Explicar código: “¿Qué hace justify-content: space-between en Flexbox?”
Encontrar errores: “Tengo este script y no funciona el botón. ¿Qué está mal?”

📝 Actividad Práctica: Tu Tarjeta de Presentación

Objetivo: Crear una “Profile Card” (Tarjeta de Perfil) digital.

Consigna: Creá un archivo index.html que contenga:

Estructura (HTML):
- Un contenedor principal (div con clase card).
- Una imagen de perfil (usá una real o generada por IA).
- Un título (h2) con tu nombre o apodo.
- Un párrafo (p) con una breve descripción tuya.
- Una lista (ul) de tus 3 hobbies favoritos.
- Un botón (button) que diga “Saludar”.
Estilo (CSS):
- La tarjeta debe tener un color de fondo, bordes redondeados (border-radius) y una sombra (box-shadow).
- La imagen debe ser redonda (tip: border-radius: 50%).
- Todo el contenido debe estar centrado.
- Usá una fuente linda (ej. font-family: sans-serif).
Interactividad (JS):
- Agregá una etiqueta <script>.
- Hacé que cuando se presione el botón “Saludar”, aparezca un alert("¡Hola, bienvenido a mi perfil!");.

Bonus 🔥:

Hacé que el botón cambie el color de fondo de la tarjeta al hacer click.

¡Manos a la obra! 🚀

Tu Primera Web - HTML, CSS y JS desde Cero 🌐