Curso HTML 1.4 Diferencias entre HTML, CSS y JavaScript

Diferencias entre HTML, CSS y JavaScript

En el desarrollo web, HTML, CSS y JavaScript cumplen roles complementarios. A continuación se detallan sus características, ámbitos y ejemplos de uso para entender en profundidad cómo interactúan y en qué se diferencian.

1. HTML (HyperText Markup Language)

HTML es el lenguaje de marcado encargado de la estructura y el contenido de la página. Define títulos, párrafos, imágenes, enlaces, formularios, tablas y cualquier otro tipo de elemento estático.

• Tipo de lenguaje: Marcado.
• Propósito: Estructurar contenido y semántica.
• Sintaxis: Etiquetas (<tag>…</tag>), atributos (atributo='valor').
• Ámbito de ejecución: Servidor (se envía como HTML estático) y navegador (se interpreta).

<!-- Elemento contenedor -->
<section id='perfil'>
  <h2>Juan Pérez</h2>  <!-- Encabezado de nivel 2 -->
  <p>Desarrollador web con 5 años de experiencia.</p>  <!-- Párrafo descriptivo -->
  <ul>  <!-- Lista de habilidades -->
    <li>HTML5</li>
    <li>CSS3</li>
    <li>JavaScript</li>
  </ul>
  <img src='foto.jpg' alt='Foto de perfil'>  <!-- Imagen con atributo alt -->
</section>
  

2. CSS (Cascading Style Sheets)

CSS se encarga de la presentación y el diseño visual de la página: colores, tipografías, márgenes, distribuciones, efectos y adaptabilidad (responsive design).

• Tipo de lenguaje: Hojas de estilo en cascada.
• Propósito: Maquetación y estética.
• Sintaxis: selector { propiedad: valor; }.
• Ámbito de ejecución: Navegador (interpreta y aplica estilos sobre el HTML).

<style>
  /* Selector de ID para el perfil */
  #perfil {
    max-width: 600px;   /* Ancho máximo del contenedor */
    margin: 0 auto;     /* Centrar horizontalmente */
    padding: 20px;      /* Espaciado interno */
    background: #f9f9f9;/* Color de fondo */
    border-radius: 8px; /* Bordes redondeados */
  }

  /* Selector de elemento h2 */
  #perfil h2 {
    font-family: 'Arial', sans-serif;
    color: #333;
    font-size: 1.8em;
  }

  /* Selector de lista no ordenada */
  #perfil ul {
    list-style: square; /* Viñetas cuadradas */
    margin-left: 20px;
  }
</style>
  

3. JavaScript

JavaScript es el lenguaje de programación que aporta interactividad y dinamismo al sitio. Permite manipular el DOM, gestionar eventos, realizar peticiones al servidor (AJAX/Fetch), animaciones y lógica de negocio en el navegador.

• Tipo de lenguaje: Programación interpretada, orientada a objetos y eventos.
• Propósito: Comportamiento y lógica dinámica.
• Sintaxis: ECMAScript (variables, funciones, eventos, promesas, clases).
• Ámbito de ejecución: Navegador (o servidor con Node.js).

<script>
  // Esperar a que el DOM esté cargado
  document.addEventListener('DOMContentLoaded', function() {
    // Obtener referencia al título
    var titulo = document.querySelector('#perfil h2');

    // Cambiar el contenido de texto después de 3 segundos
    setTimeout(function() {
      titulo.textContent = 'Juan Pérez — Frontend Engineer';
    }, 3000);

    // Añadir evento al clic del botón (si existiera)
    var btn = document.getElementById('miBoton');
    if (btn) {
      btn.addEventListener('click', function() {
        alert('¡Has hecho clic en el botón!');
      });
    }
  });
</script>
  

4. Comparativa rápida

5. Ejemplo integrado (estructura + estilo + comportamiento)

En este fragmento vemos cómo HTML, CSS y JavaScript colaboran para crear un componente interactivo.

<!-- ESTRUCTURA HTML -->
<div id='tarjeta'>
  <h3>Tarjeta Interactiva</h3>
  <button id='toggleTema'>Oscurecer fondo</button>
</div>

<!-- ESTILOS CSS -->
<style>
  #tarjeta {
    width: 300px;
    padding: 15px;
    background: #ffffff;
    border: 1px solid #ccc;
    border-radius: 6px;
    text-align: center;
    transition: background 0.3s;
  }
  #tarjeta.tema-oscuro {
    background: #333;
    color: #fff;
  }
  #toggleTema {
    margin-top: 10px;
    padding: 8px 12px;
    cursor: pointer;
  }
</style>

<!-- COMPORTAMIENTO JavaScript -->
<script>
  var tarjeta = document.getElementById('tarjeta');
  var boton = document.getElementById('toggleTema');

  boton.addEventListener('click', function() {
    tarjeta.classList.toggle('tema-oscuro');
    // Actualizar texto del botón según el modo
    var modo = tarjeta.classList.contains('tema-oscuro') ? 'Aclarar fondo' : 'Oscurecer fondo';
    boton.textContent = modo;
  });
</script>