sábado, 2 de noviembre de 2024

HTML: La Estructura Básica de la Web

HTML (HyperText Markup Language) es el "esqueleto" de cualquier página web. Nos permite definir qué contenido queremos mostrar (texto, imágenes, botones, formularios, etc.) y estructurarlo de forma jerárquica.

1. HTML: La Estructura Básica de la Web

HTML (HyperText Markup Language) es el "esqueleto" de cualquier página web. Nos permite definir qué contenido queremos mostrar (texto, imágenes, botones, formularios, etc.) y estructurarlo de forma jerárquica.

Conceptos Básicos

  • Etiquetas HTML: Todo en HTML se basa en etiquetas. Cada etiqueta tiene un nombre encerrado entre < y >. Por ejemplo, <h1> para encabezados, <p> para párrafos, y <img> para imágenes.


    <h1>¡Hola, Mundo!</h1>
    <p>Este es un párrafo de texto.</p>
    <img src="ruta/de/la/imagen.jpg" alt="Descripción de la imagen">

  • Elementos y Atributos: Un elemento HTML puede contener texto o más elementos. Los atributos son características adicionales que dan información extra sobre los elementos, como src en <img> o href en <a>.


    <a href="https://example.com">Visita nuestro sitio</a>

  • Estructura de una Página Web: Toda página HTML necesita una estructura básica. Esto incluye las etiquetas <html>, <head>, y <body>.


    <!DOCTYPE html>
    <html lang="es">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Mi Página Web</title>
    </head>
    <body>
        <h1>Bienvenidos a Mi Página</h1>
        <p>Esta es una página de ejemplo.</p>
    </body>
    </html>

Ejercicio

  1. Crea un archivo llamado index.html.
  2. Escribe la estructura básica de HTML.
  3. Agrega un título (<h1>) y un párrafo (<p>).
  4. Agrega una imagen usando la etiqueta <img>.

2. CSS: Dándole Estilo a la Web

CSS (Cascading Style Sheets) se usa para dar estilo a una página HTML. Gracias a CSS, puedes cambiar el color, tamaño, y posición de los elementos.

Conceptos Básicos

  • Selectores: Los selectores se usan para seleccionar elementos HTML que queremos estilizar. Los tipos más comunes son:

    • Tag Selector: Selecciona elementos por su etiqueta (ej., p para todos los párrafos).
    • ID Selector: Selecciona un elemento único usando # (ej., #miElemento).
    • Class Selector: Selecciona elementos con una clase común usando . (ej., .clase-comun).

    h1 {
        color: blue;
        font-size: 2em;
    }
.subtitulo {
        color: gray;
        font-style: italic;
    }
#especial {
        background-color: yellow;
    }

  • Propiedades y Valores: Cada estilo en CSS tiene una propiedad (como color, font-size) y un valor (como red, 16px).

Ejercicio

  1. Crea un archivo llamado style.css.

  2. Enlaza este archivo en tu index.html dentro de la etiqueta <head>.


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

  3. En style.css, agrega estilos para cambiar el color de fondo del <body>, el color del <h1>, y el tamaño del texto del <p>.

3. JavaScript: La Lógica y Dinamismo de la Web

JavaScript es el lenguaje de programación que le da dinamismo a tu página. Con él, puedes hacer que los elementos respondan a las acciones del usuario (como hacer clic o pasar el ratón), validar formularios, o crear animaciones.

Conceptos Básicos

  • Variables: Sirven para almacenar datos. Puedes crear una variable con let, const o var.


    let nombre = "Juan";
    const edad = 25;

  • Funciones: Son bloques de código que realizan una acción específica. Puedes invocarlas (llamarlas) cuando necesites.


    function saludar() {
        alert("Hola, bienvenido a la página!");
    }

  • Manipulación del DOM: El DOM (Document Object Model) representa la estructura de tu página HTML en JavaScript. Puedes usar funciones para seleccionar y modificar elementos.


    document.getElementById("especial").style.color = "red";

Ejercicio

  1. En tu archivo index.html, antes de cerrar el </body>, agrega una etiqueta <script src="script.js"></script> para enlazar un archivo JavaScript.

  2. Crea un archivo llamado script.js.

  3. Dentro de script.js, escribe una función que muestre un mensaje en la consola cada vez que el usuario haga clic en el título <h1>.

    document.querySelector("h1").addEventListener("click", function() {
        console.log("¡Hiciste clic en el título!");
    });

4. Integración: HTML + CSS + JavaScript

Ahora que tienes los tres componentes básicos, vamos a integrarlos para crear una página interactiva y estilizada.

  1. HTML: Define la estructura de los elementos.
  2. CSS: Añade estilo y colores.
  3. JavaScript: Agrega interacción.

Para empezar, crea un botón en HTML, estilízalo en CSS, y agrégale una funcionalidad de clic en JavaScript.

Ejercicio Final

  1. En index.html, agrega un botón:


    <button id="miBoton">Haz clic aquí</button>

  2. En style.css, dale estilo:


    #miBoton {
        background-color: blue;
        color: white;
        padding: 10px;
        border: none;
        cursor: pointer;
    }

  3. En script.js, agrega una funcionalidad que muestre una alerta cuando se haga clic en el botón:


    document.getElementById("miBoton").addEventListener("click", function() {
        alert("¡Botón clickeado!");
    });

Recursos Útiles

  1. MDN Web Docs - La referencia definitiva para HTML, CSS, y JavaScript.
  2. W3Schools - Un sitio con muchos ejemplos y tutoriales.
  3. freeCodeCamp - Ejercicios gratuitos y prácticos para aprender programación web.
Publicado por en
Etiquetas: , , ,

No hay comentarios:

Publicar un comentario

Suscribirse a: Enviar comentarios (Atom)