HTML y XML ========== `Ver presentación del curso <../../_static/pdf/html-css.pdf>`_ En esta parte del curso se introducen **HTML y CSS** como las tecnologías base para la construcción de interfaces web. Antes de hablar de estilos, animaciones o frameworks, es fundamental comprender que la Web se apoya en documentos **estructurados**, cuya organización permite que tanto las personas como los programas puedan interpretar su contenido. Introducción ------------ La estructura de un documento no es un detalle visual, sino un mecanismo para dar significado a la información. Al igual que en un periódico o un libro, encabezados, secciones y párrafos permiten entender qué información es más importante, cómo se relaciona y en qué orden debe leerse. En la Web, esta estructura se expresa mediante **lenguajes de marcas**, siendo HTML el estándar principal. Desde el punto de vista de los datos, las aplicaciones web trabajan con distintos niveles de estructuración. Los datos estructurados, típicos de bases de datos relacionales, siguen esquemas rígidos y son fáciles de procesar con lenguajes como SQL. Los datos semi estructurados, como JSON o XML, ofrecen mayor flexibilidad y son ampliamente utilizados en la comunicación entre aplicaciones web. Por otro lado, los datos no estructurados (como texto libre, imágenes o video) requieren tratamiento adicional para ser procesados por programas. HTML se ubica en un punto intermedio: es **semi estructurado**, lo que permite que sea legible tanto para humanos como para máquinas. HTML permite describir la **estructura lógica** de un documento web mediante elementos y etiquetas. Estos elementos indican el propósito del contenido, no su apariencia visual. Encabezados, párrafos, listas, enlaces, imágenes y formularios permiten organizar la información de manera semántica, facilitando la accesibilidad, el posicionamiento en buscadores y la reutilización del contenido en distintos contextos. Estructura global de un documento Web ------------------------------------- El siguiente ejemplo muestra una estructura típica de un documento HTML5, incluyendo encabezado, navegación, contenido principal, secciones y pie de página. También incluye un formulario sencillo para ilustrar la interacción con el usuario. .. code-block:: html :linenos: Mi primera página

Programación Web

Ejemplo básico de estructura HTML5.

Introducción

HTML describe la estructura del documento. CSS se utiliza para la presentación.

Icono representando la Web
Ejemplo de imagen con texto descriptivo.

Contenidos

Elementos comunes

  1. Encabezados (h1..h6)
  2. Párrafos (p)
  3. Enlaces (a)
  4. Listas (ul/ol)

Un enlace a un sitio externo: MDN Web Docs

Formulario de contacto

Los formularios representan uno de los mecanismos más importantes de interacción en la Web. A través de ellos, el navegador puede recolectar información del usuario y enviarla al servidor utilizando métodos HTTP como ``GET`` o ``POST``. Comprender la estructura y los atributos de los formularios permite entender cómo fluye la información entre el cliente y el servidor, y por qué HTML y HTTP están estrechamente relacionados. Lenguajes de presentación en documentos Web (*CSS, Tailwind CSS*) ----------------------------------------------------------------- `Ver presentación del curso <../../_static/pdf/tailwindcss.pdf>`_ Una vez definida la estructura del documento, **CSS** se encarga de su presentación. CSS permite controlar la apariencia visual y la distribución de los elementos sin modificar la estructura HTML. Conceptos como el flujo normal del documento, la propiedad ``display`` y los distintos modelos de layout permiten entender cómo el navegador decide colocar los elementos en pantalla. Herramientas modernas de CSS, como **Flexbox**, facilitan la construcción de interfaces flexibles y adaptables, permitiendo alinear, distribuir y reorganizar elementos de forma dinámica según el tamaño de la pantalla. A esto se suman las *media queries*, que hacen posible el diseño responsivo y la adaptación del contenido a distintos dispositivos y contextos de visualización. El objetivo de esta unidad no es memorizar etiquetas o propiedades, sino comprender la **separación de responsabilidades** entre estructura (HTML) y presentación (CSS). Esta distinción es clave para construir interfaces mantenibles, accesibles y preparadas para integrarse posteriormente con lógica del lado del cliente y del servidor.