Diferencias entre HTML, CSS y JavaScript
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
| Lenguaje | Función principal | ¿Qué controla? |
|---|---|---|
| HTML | Estructura | Contenido y organización |
| CSS | Diseño | Colores, tamaños, distribución |
| JavaScript | Interactividad | Animaciones, eventos, lógica |
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.