html

Diferencias entre HTML, CSS y JavaScript

Por Mtro. Fernando Omar Arciniega Martínez · Profe ArciPublicado el 31 enero, 2025

El desarrollo web se basa en tres tecnologías fundamentales: HTML, CSS y JavaScript. Cada una cumple una función específica dentro de una página web, permitiendo que los sitios sean estructurados, diseñados e interactivos.

¿Qué es HTML y para qué sirve?

HTML (HyperText Markup Language) es el lenguaje de marcado o marcas (etiquetas) que define la estructura de una página web.

🔹 Organiza el contenido mediante etiquetas.
🔹 Define elementos como títulos, párrafos, imágenes, enlaces y tablas.
🔹 No tiene funcionalidad dinámica, solo estructura la información.

Ejemplo básico de HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Mi Página</title>
</head>
<body>
    <h1>Bienvenido a mi sitio web</h1>
    <p>Este es un párrafo con información.</p>
</body>
</html>

¿Qué es CSS y para qué sirve?

CSS (Cascading Style Sheets) es el lenguaje que se encarga del diseño y la apariencia de una página web.

🔹 Define colores, tipografías y tamaños de texto.
🔹 Establece diseños flexibles y adaptables.
🔹 Permite organizar los elementos visualmente con márgenes y espaciados.

Ejemplo de CSS:

body {
    background-color: lightblue;
    font-family: Arial, sans-serif;
}
h1 {
    color: darkblue;
    text-align: center;
}

¿Qué es JavaScript y para qué sirve?

JavaScript es un lenguaje de programación que permite interactividad en las páginas web.

🔹 Crea efectos dinámicos como animaciones o formularios interactivos.
🔹 Valida datos en formularios antes de enviarlos.
🔹 Permite actualizar el contenido de la página sin recargarla.

Ejemplo de JavaScript:

document.querySelector("h1").innerHTML = "¡Bienvenido a mi sitio dinámico!";

Comparación entre HTML, CSS y JavaScript

HTML, CSS y JavaScript trabajan juntos para construir una página web funcional y atractiva. HTML define la estructura, CSS mejora la presentación y JavaScript añade dinamismo. Conocer sus diferencias es clave para desarrollar sitios web efectivos.

Ejemplo paso a paso para aplicar HTML, CSS y JavaScript

1️⃣ Escribe el código HTML en tu libreta

<!DOCTYPE html>
<html>
<head>
    <title>Ejemplo HTML, CSS y JavaScript</title>
    <link rel="stylesheet" href="estilos.css">
</head>
<body>
    <h1>¡Hola, estudiante!</h1>
    <p>Presiona el botón para cambiar el color del texto.</p>
    <button onclick="cambiarColor()">Cambiar Color</button>
</body>
</html>

📌 Explicación:
✅ <h1> agrega un título.
✅ <p> es un párrafo de texto.
✅ <button> es un botón que activará una función de JavaScript.
✅ <link> conecta la página con un archivo CSS externo (estilos.css).

2️⃣ Escribe el código CSS en tu libreta

body {
    font-family: Arial, sans-serif;
    text-align: center;
    background-color: #f0f0f0;
}
h1 {
    color: blue;
}
button {
    padding: 10px;
    font-size: 16px;
    background-color: lightgray;
    border: none;
    cursor: pointer;
}

📌 Explicación:
✅ body define el estilo general de la página.
✅ h1 establece el color azul en el título.
✅ button da estilo al botón, haciéndolo más atractivo.

3️⃣ Escribe el código JavaScript en tu libreta

function cambiarColor() {
    document.querySelector("h1").style.color = "red";
}

📌 Explicación:
✅ function cambiarColor() crea una función para cambiar el color.
✅ document.querySelector("h1").style.color = "red"; selecciona el <h1> y cambia su color a rojo cuando se presiona el botón.

4️⃣ Explicación del funcionamiento

✅ HTML estructura la página con un título, un párrafo y un botón.
✅ CSS da color y estilo al contenido.
✅ JavaScript cambia el color del <h1> cuando se presiona el botón.

📌 Conclusión: Al juntar estos tres lenguajes, logramos una página interactiva.