HTML y CSS

¿Qué es HTML?

HTML (HyperText Markup Language) es el lenguaje principal para crear páginas web. Permite estructurar el contenido mediante etiquetas que indican al navegador cómo mostrar cada parte de la página.

HTML no es un lenguaje de programación, sino un lenguaje de marcado. Esto significa que define la estructura del contenido, pero no puede realizar cálculos ni ejecutar lógica. Por ejemplo, se usa para títulos, párrafos, listas, imágenes, enlaces, tablas y formularios.

Estructura básica de un documento HTML

Un documento HTML se organiza de la siguiente manera:

<!DOCTYPE html> — declara que es un documento HTML5, asegurando compatibilidad con navegadores modernos.
<html> — contenedor principal de todo el contenido de la página.
<head> — sección que incluye información sobre la página, como el título, meta etiquetas, enlaces a CSS y scripts.
<body> — sección donde va todo el contenido visible para el usuario.

Ejemplo de estructura mínima de HTML5:

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8">
    <title>Mi primera página</title>
  </head>
  <body>
    <h1>Hola Mundo</h1>
    <p>Este es mi primer sitio web.</p>
  </body>
</html>

Etiquetas y atributos

Las etiquetas indican al navegador cómo interpretar el contenido. Por ejemplo: <p> define un párrafo, <h1> un título principal, y <img> una imagen.

Los atributos agregan información adicional a las etiquetas. Por ejemplo:

src — indica la ruta de una imagen (<img src="imagen.png">).
href — indica la dirección de un enlace (<a href="pagina.html">Enlace</a>).
alt — texto alternativo para imágenes que ayuda a la accesibilidad.

¿Qué es CSS?

CSS (Cascading Style Sheets) es un lenguaje que permite dar estilo y formato al contenido HTML. Con CSS se pueden cambiar colores, fuentes, tamaños, márgenes, posiciones, fondos, animaciones y mucho más.

CSS trabaja aplicando reglas a las etiquetas HTML. Cada regla tiene un selector (qué elemento se va a modificar) y un conjunto de propiedades con sus valores (cómo se modificará). Por ejemplo:

h1 {
    color: #c2185b;
    text-align: center;
    font-style: italic;
}

p {
    font-size: 18px;
    line-height: 1.6;
}

CSS puede estar incluido directamente en la página (estilos embebidos), en la etiqueta <style> del <head>, o en un archivo externo vinculado con <link>. Esto permite mantener el código organizado y reutilizable.