Tema 6. HTML

Currículo: esta unidad cubre parte de los saberes básicos del Bloque C – Desarrollo web (PRYC.2.C.1.1 y PRYC.2.C.1.2) correspondiente a 2º Bachillerato. Además, se evalúan los criterios que puedes encontrar al final de esta página.

Tabla de contenidos

• 6.1. Fundamentos básicos de la web
  • 6.1.1. Características de la web
  • 5.1.2. Funcionamiento de la web
• 6.2. Introducción a HTML y CSS
  • 6.2.1. HTML: la estructura de la web

Desde los primeros días de la Web en los laboratorios del CERN, cuando Tim Berners-Lee ideó una manera de interconectar la información a través de hipertextos, hasta el dinámico  universo digital en el que hoy nos movemos, la Web ha sido testigo y protagonista de revoluciones tanto silenciosas como explosivas. 

Pero, ¿qué hace a la Web tan importante en nuestros días? La respuesta esta no solo en su capacidad para almacenar y transmitir información, sino en cómo ha redefinido las relaciones humanas, el comercio, la educación, y hasta nuestra percepción de la realidad. 

A través de ejemplos contemporáneos, como el impacto de las redes sociales en las dinámicas políticas y sociales, o el surgimiento de la economía del compartir, observamos cómo la Web no es un mero canal de información, sino un espacio de interacción humana sin precedentes.

Cada página web que visitamos, cada aplicación que usamos, y cada servicio online al que accedemos son piezas de un rompecabezas que nos ayuda a comprender el mundo en el que vivimos. Adentrarnos en el estudio de la Web es, por tanto, explorar cómo la tecnología moldea la sociedad y viceversa. 

6.1. Fundamentos básicos de la web

La web, como la conocemos hoy, es un entramado complejo de tecnologías, protocolos y prácticas diseñadas para interconectar a las personas con la información. 

Vamos a intentar aportar algo de comprensión, describiendo algunas de sus características principales.

6.1.1. Características de la web

La web no es una vía de comunicación unidireccional; permite la interacción entre los usuarios y los sistemas.

Ejemplo de ello son los formularios web que recopilan información de los usuarios, permitiendo una experiencia personalizada.

Una de las metas de la web es ser accesible por cualquier persona, en cualquier lugar y en cualquier dispositivo o navegador, es decir, que sea accesible. Un ejemplo claro es la iniciativa Web Accessibility Initiative (WAI), que promueve directrices para asegurar que la web sea accesible para personas con discapacidades.

Los sitios web pueden cambiar y actualizarse en tiempo real, ofreciendo contenido dinámico basado en las interacciones del usuario o eventos externos. Las páginas de noticias que actualizan sus titulares conforme ocurren son un ejemplo sencillo, pero lo vemos con mucha más claridad en las redes sociales, aplicaciones cuyo contenido es completamente distinto de un usuario a otro.

La web se estructura en torno al concepto de hipertexto, que permite enlazar documentos entre sí mediante enlaces. Wikipedia es el ejemplo emblemático de cómo la hipertextualidad facilita el acceso a gigantescas cantidades de información de manera intuitiva.

5.1.2. Funcionamiento de la web

Para entender cómo funciona la web, podemos imaginarla como el almacén de cajas fuertes de un banco, pero en lugar de cajas llenas de bienes personales, tiene servidores llenos de páginas web accesibles desde cualquier parte del mundo. 

Vamos a desglosar este proceso en pasos simples.

1: La solicitud del usuario

Quieres encontrar información sobre «el sistema solar». Lo primero que haces es abrir tu navegador web (como Chrome, Firefox o Safari) y escribes tu consulta en un buscador como Google o directamente una dirección web que ya conoces. 

Un compañero te ha dicho que en cienciaespacial.com hay datos curiosos que te pueden servir. Así que tecleas era dirección en tu navegador y pulsas [INTRO]:

En este momento, estás haciendo una «solicitud» para ver una página web específica.

Acabas de presenciar un HTTP Request.

2: Localizando el recurso

Cada página web tiene una dirección única, conocida como URL –Uniform Resource Locator-, que funciona como la dirección de una casa -en nuestro caso cienciaespacial.com-.

Pero, para que el navegador encuentre la página que has solicitado, necesita convertir esa dirección legible por humanos en una dirección numérica llamada dirección IP –Internet Protocol–, que identifica de manera única a un servidor en la web. 

¿Te has fijado que las cajas fuertes del banco no tienen el nombre de sus propietarios? Tienen un número que las identifica. Los servidores funcionan igual, los identificamos por un número con el formato de una dirección IP –cuatro números de 0 a 255, separados por un punto-:

80.123.45.251

Este proceso de traducción de la dirección de una web en la dirección IP del servidor que la aloja se realiza a través de algo llamado DNS –Domain Name System–, que actúa como una guía telefónica, traduciendo nombres de dominio en direcciones IP. Este proceso se llama Domain Name Resolution.

3: El servidor web responde

Una vez que el navegador sabe la dirección IP del servidor donde reside la página web que quieres visitar, envía una solicitud a ese servidor. Piensa en el servidor como un gran archivo donde se guardan todas las páginas web. Cuando el servidor recibe tu solicitud, busca la página que has pedido, procesa los datos necesarios para elaborar la respuesta y la envía de vuelta a tu navegador.

Esa respuesta es una HTTP Response.

Todo esto ocurre en el lado servidor -donde se aloja la web-, y lo que ha procesado el servidor es el Backend -la parte privada- de la web.

4: Cargando la página web

Al recibir la información del servidor, tu navegador comienza a cargar la página web. Esto incluye texto, imágenes, videos y cualquier otro contenido. El navegador interpreta el código HTML (el lenguaje con el que se escriben las páginas web), lo estiliza con CSS (que define el aspecto de la página) y ejecuta cualquier código JavaScript (que añade interactividad a la página) para presentarte la página web tal y como fue diseñada.

Todo esto ocurre en el lado cliente -tú y tu equipo-, y lo que acaba de hacer tu navegador es mostrar el Frontend -la parte pública- de la web.

5: Interacción y más solicitudes

Una vez que la página está cargada, puedes interactuar con ella: hacer clic en enlaces, ver vídeos, rellenar formularios, dejar comentarios, etc. 

Cada vez que interactúas, es posible que tu navegador haga más solicitudes al servidor, por ejemplo, si haces clic en un enlace para ir a una nueva página. El proceso desde el paso 1 se repite, y el ciclo continúa mientras navegas por la web.

Este proceso, que puede parecer complicado en teoría, ocurre en cuestión de segundos gracias a la arquitectura cliente-servidor (que acabamos de describir), en la que intervienen numerosos protocolos de comunicación tremendamente eficientes.

Bien.

Conoces cómo funciona la web, sabes de dónde parte la solicitud, cómo esa solicitud consigue encontrar el servidor que la atiende, y también que un archivo llega de vuelta a tu navegador y lo muestra.

Pero, ¿cómo consigue el navegador mostrar en pantalla toda la información de una web?

Ese es nuestro siguiente paso.

6.2. Introducción a HTML y CSS

Estamos ante los dos pilares fundamentales del desarrollo web del lado cliente.

Estas dos tecnologías hacen posible la creación y el diseño de sitios web: 

• HTML (HyperText Markup Language – Lenguaje de Marcado de Hipertexto).

• CSS (Cascading Style Sheets – Hojas de Estilo en Cascada). 

Estas tecnologías son fundamentales para construir y estilizar las páginas web, ofreciendo una base sólida sobre la cual se apoyan todos los sitios web modernos. 

A continuación, exploraremos qué son, cómo funcionan y por qué son tan importantes en el diseño web.

6.2.1. HTML: la estructura de la web

HTML es el lenguaje estándar de marcado utilizado para crear y estructurar páginas web.

A través de HTML, definimos elementos como títulos, párrafos, enlaces, imágenes y muchas otras estructuras que componen una página web.

Piensa en HTML como el esqueleto de un sitio web, proporcionando la estructura básica sobre la cual todo lo demás se construye.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Esqueleto de una web</title>
</head>
<body>
	<!-- Contenido principal -->
</body>
</html>

HTML utiliza etiquetas –tags– para marcar diferentes partes del contenido de una página web, indicando al navegador cómo debe ser mostrado el contenido. Por ejemplo, la etiqueta <h1> se usa para los títulos principales, <p> para párrafos, <a> para enlaces, y así sucesivamente. 

Cada etiqueta tiene un propósito específico y ayuda a organizar el contenido de manera semántica.

Aprender HTML es el primer paso para cualquier desarrollador web, ya que proporciona la base necesaria para construir sitios web. Además, un buen manejo de HTML es imprescindible para la accesibilidad web, asegurando que el contenido sea accesible para todos los usuarios, incluidos aquellos que utilizan lectores de pantalla u otras tecnologías de asistencia.