Saltar al contenido


Comparación visual entre un documento HTML y un fragmento de código en un lenguaje de programación.

Introducción a la Creación de Páginas Web con HTML y XML

Los lenguajes de marcas son la base del desarrollo web moderno. A diferencia de los lenguajes de programación, su propósito principal es estructurar y describir datos, no ejecutar lógicas o algoritmos complejos.

¿Qué son los Lenguajes de Marcas?

Un lenguaje de marcas, también conocido como lenguaje de marcado o de etiquetas, es un sistema de notación que utiliza etiquetas especiales para definir y organizar las diferentes partes de un texto o documento. Estas etiquetas son interpretadas por navegadores u otras herramientas, pero no son visibles directamente para el usuario final.

Ejemplo Básico en HTML:

A continuación, un fragmento simple que ilustra cómo HTML estructura el contenido de una página web:

<!DOCTYPE html>
<html>
<head>
    <title>Mi primera página web</title>
</head>
<body>
    <h1>Hola, mundo</h1>
    <p>Esta es una introducción al lenguaje HTML.</p>
</body>
</html>

Marcas vs. Programación: Entendiendo las Diferencias

Es crucial distinguir entre estos dos tipos de lenguajes:

Lenguajes de Marcas:

  • Son declarativos enfocados en definir la estructura y la presentación del contenido.
  • Ejemplos comunes incluyen HTML (para la estructura de páginas web), XML (para el intercambio y almacenamiento de datos) y Markdown (ideal para documentación sencilla).

Lenguajes de Programación:

  • Son procedimentales, diseñados para ejecutar acciones específicas y lógicas complejas.
  • Algunos ejemplos populares son Python, Java y JavaScript.

Aplicaciones Prácticas de los Lenguajes de Marcas

  • HTML: La base para la creación de páginas web y el diseño de interfaces de usuario.
  • XML: Utilizado ampliamente para el almacenamiento y transporte de datos estructurados entre diferentes aplicaciones.
  • Markdown: Perfecto para la redacción de documentos simples y formateados de manera rápida y eficiente.

Fundamentos de los Lenguajes de Marcas

Los lenguajes de marcas, también conocidos como lenguajes de marcado o de etiquetas, son sistemas que combinan texto con «marcas» o «etiquetas». Estas etiquetas son la clave para definir la estructura del texto y cómo debe ser representado. Es fundamental entender que NO son lenguajes de programación.

A diferencia de los lenguajes de programación, las marcas no incluyen elementos como variables, bucles o condicionales, que son propios de la lógica de ejecución. (Una excepción importante es JavaScript, que sí es un lenguaje de programación, pero se integra a menudo con HTML).

Tipos de Lenguajes de Marcas

Podemos clasificar los lenguajes de marcas según su propósito principal:

  • Orientados a la presentación: Su función es especificar cómo se verá visualmente el documento. El ejemplo más destacado es HTML, utilizado para construir páginas web.
  • Orientados a la descripción: Estos lenguajes no dictan la apariencia, sino que se centran en el significado y la representación de la información. Ejemplos incluyen XML o JSON.
  • Orientados a procedimientos: Sus etiquetas permiten definir secuencias de acciones. Aquí encontramos lenguajes como LaTeX (para documentos científicos) y Postscript (utilizado en impresoras).

En este módulo, nos enfocaremos principalmente en los lenguajes orientados a la presentación y a la descripción, dada su amplia relevancia en el entorno web.

Evolución Histórica de los Lenguajes de Marcas

  1. Los lenguajes de marcas surgieron en los años 60 para añadir anotaciones a documentos electrónicos. Sin embargo, la falta de un estándar generó problemas de compatibilidad entre aplicaciones.
  2. A finales de los 60, IBM propuso el GML (Generalized Markup Language), que utilizaba marcas genéricas e independientes del dispositivo, sentando las bases para la estandarización.
  3. En 1986, la ISO estandarizó un descendiente directo, el SGML (Standard Generalized Markup Language), que tuvo gran aceptación inicial.
  4. Debido a la complejidad del SGML, a finales de los 80, el CERN desarrolló HTML (HyperText Markup Language). Basado en principios de SGML, su sencillez revolucionó la creación de webs y se convirtió en el lenguaje de marcas más utilizado.
  5. A mediados de los 90, el consorcio W3C creó XML (eXtended Markup Language) con el objetivo de añadir semántica a los documentos y facilitar el intercambio de información estructurada.

Características Clave de los Lenguajes de Marcas

  • Texto Plano: Los documentos se crean como archivos de texto simple, lo que facilita su interpretación directa.
  • Compactibilidad: Las etiquetas se integran directamente con la información del documento en un único archivo, manteniendo la cohesión.
  • Flexibilidad: Lenguajes como HTML pueden combinarse con lenguajes de programación (como JavaScript y PHP), lo que permite crear experiencias web dinámicas y complejas. Exploraremos esto en futuros módulos.
  • Independencia del Dispositivo: Un mismo documento marcado puede adaptarse y ser interpretado de manera diferente según el dispositivo final (ordenadores, tablets, móviles), optimizando la visualización.
  • Especialización: Aunque muchos se centran en la web, existen lenguajes de marcas especializados en otras áreas como gráficos vectoriales o notación científica.

Lenguajes que Exploraremos 

  • HTML (HyperText Markup Language): Es el lenguaje predominante para construir páginas web, definiendo su contenido y estructura. Se basa en el uso de etiquetas o marcas, encerradas entre corchetes angulares (`<`, `>`).
  • XML (eXtended Markup Language): Un lenguaje de marcas diseñado para almacenar información de forma legible y estructurada. Permite definir gramáticas personalizadas para organizar documentos y, a diferencia de otros, ofrece soporte para bases de datos. Es un estándar crucial para el intercambio de información entre diversas plataformas, no solo en Internet.

Etiquetas, Elementos y Atributos: Conceptos Fundamentales

Para trabajar con lenguajes de marcas, es esencial comprender estos tres conceptos clave:

  • Etiqueta (o «tag»): Es un texto delimitado por los símbolos de menor que (`<`) y mayor que (`>`).
    • La mayoría de las etiquetas vienen en pares: una de apertura (ej. `<p>`) y una de cierre (ej. `</p>`).
    • Sin embargo, algunas etiquetas son autocerradas y no requieren una etiqueta de cierre separada (ej. `<img>`).
  • Elemento: Se refiere a la estructura completa que incluye la etiqueta de apertura, la etiqueta de cierre (si aplica) y todo el contenido que se encuentra entre ellas. Por ejemplo: `<p>Hola</p>` es un elemento.
  • Atributo: Se presenta en el formato `nombre=»valor»` y se inserta dentro de la etiqueta de apertura de un elemento. Su función es especificar una propiedad o característica adicional de ese elemento. Por ejemplo: `<table border=»1″>` donde `border=»1″` es el atributo.

Ejemplo Visual de Componentes HTML:

Imagina una etiqueta de apertura, un atributo que modifica su comportamiento, el contenido que encierra, y finalmente, la etiqueta de cierre. Todo ello forma un elemento completo.

<p class="ejemplo">Este es el contenido de un elemento.</p>
  • `<p class=»ejemplo»>`: Etiqueta de apertura con atributo
  • `class=»ejemplo»`: Atributo
  • `Este es el contenido de un elemento.`: Contenido
  • `</p>`: Etiqueta de cierre
  • Todo junto forma el Elemento

¿Y qué pasa con CSS?

Otro lenguaje fundamental que abordaremos en este módulo es CSS (Cascading Style Sheets). Su principal función es definir el estilo visual de una página web: colores, tamaños de fuente, disposición de los elementos, y mucho más.

Aunque a veces se discute si es un «lenguaje de marcas» o un «lenguaje de diseño gráfico», lo cierto es que es una pieza clave en el desarrollo web.

Veremos que CSS puede incrustarse directamente en el HTML (recomendado para estilos muy específicos y cortos) o, lo más aconsejable para proyectos grandes, gestionarse en archivos externos separados.

¿Y qué pasa con JavaScript?

El módulo también incluye JavaScript, un lenguaje esencial para añadir dinamismo y comportamientos interactivos a una página web.

Es importante destacar que, a diferencia de HTML o XML, JavaScript NO es un lenguaje de marcas, sino un lenguaje de programación. Lo incluimos por su enorme importancia y su profunda integración con HTML para crear experiencias de usuario ricas y complejas. Lo estudiaremos, aunque sin profundizar excesivamente dada su complejidad y la limitación de tiempo.