Curso HTML 1. Introducción a la Web y al HTML

1. ¿Qué es la Web?

La Web (World Wide Web) es un sistema de documentos interconectados mediante hipervínculos y accesibles a través de Internet. Cada recurso en la Web se identifica con una URL, y se obtiene mediante protocolos como HTTP o HTTPS.

• URL (Uniform Resource Locator): dirección única de un recurso. Ejemplo: https://www.ejemplo.com/index.html.
• HTTP (HyperText Transfer Protocol): protocolo de petición-respuesta entre cliente (navegador) y servidor.
• Navegador: programa que interpreta HTML, CSS y JavaScript para presentar la página al usuario.
• Servidor web: almacena y sirve archivos (HTML, imágenes, CSS, etc.) cuando recibe peticiones HTTP.

2. Historia de la Web

• 1989: Tim Berners-Lee propone el proyecto de la Web en el CERN.
• 1991: primera página web disponible públicamente.
• 1993–1995: RFC y primeras versiones de HTML (HTML 2.0, 3.2 y 4.0).
• 2000–2014: XHTML y estandarización por parte del W3C.
• 2014–presente: HTML5, con nuevas APIs y elementos semánticos.

3. Modelo Cliente–Servidor y HTTP

Cuando el usuario escribe una URL o hace clic en un enlace, el navegador actúa como cliente y envía una petición HTTP al servidor. El servidor responde con un documento HTML, que el navegador procesa y presenta.

3.1 Flujo de una petición HTTP

• Cliente envía GET /ruta/recurso al servidor.
• Servidor responde con status code y contenido.
• Cliente descarga recursos referenciados (CSS, JS, imágenes).
• Navegador construye el DOM y pinta la página.

3.2 Códigos de estado HTTP (ejemplos)

4. ¿Qué es HTML?

HTML (HyperText Markup Language) es el lenguaje de marcado estándar para crear páginas web. Define la estructura y el contenido de un documento mediante etiquetas.

• Las etiquetas (tags) delimitan elementos: <p>, <a>, <>div>, etc.
• Los atributos proporcionan información adicional: href en enlaces, src en imágenes.
• HTML es semántico: etiquetas describen propósito y significado.

5. Evolución: HTML4 vs XHTML vs HTML5

• HTML4: basado en SGML, etiquetas en mayúsculas o minúsculas, no estrictamente bien formado.
• XHTML: HTML reformulado en XML, exige cierre de todas las etiquetas y sintaxis estricta.
• HTML5: no depende de SGML, incorpora nuevas etiquetas semánticas (section, article), APIs de audio/vídeo, Canvas, Web Storage, etc.

6. Estructura básica de un documento HTML (conceptual)

Un documento HTML típicamente consta de estas secciones:

• Doctype: declara la versión de HTML.
• <html>: elemento raíz.
• <head>: metadatos, <title>, <meta>, enlaces a CSS/JS.
• <body>: contenido visible: texto, imágenes, enlaces, formularios.

En estos ejemplos omitimos <!DOCTYPE>, <html> y <body> para centrarnos en la sintaxis interna.

7. Sintaxis básica: etiquetas, elementos y atributos

7.1 Etiquetas de apertura y cierre

Este es un párrafo en HTML.
  

7.2 Elementos vacíos (self-closing)

7.3 Atributos

Los atributos se incluyen en la etiqueta de apertura. Siempre entre comillas (»), aunque el estándar permite omitirlas en atributos sin espacios.

Visitar Ejemplo



  

8. Comentarios en HTML

Se usan para anotar el código y no afectan la presentación.

9. Codificación de caracteres y entidades

Para representar caracteres especiales (<, >, &) usamos entidades HTML:

• < para <
• > para >
• & para &

5 < 10 y 10 > 5, reconocidos correctamente con &amp;lt; y &amp;gt;.
  

10. Buenas prácticas y validación

• Usar siempre alt en imágenes para accesibilidad.
• Cerrar todos los elementos (incluso los vacíos, en XHTML).
• Mantener la semántica: usar <nav> para navegación, <article> para artículos independientes.
• Validar el código en W3C Validator para detectar errores.
• Organizar el código con indentación clara para legibilidad.