Clase |

Cómo funciona la Web, por qué el candado importa y cómo se escribe una página

DocenteProf. Jhon Jairo Murillo Flórez

Semestre

Duración4 horas

UnidadUnidad 2 · Corte 2 · Semana 8 (26-10-2026)

Código

AgendaRuta de la clase

World Wide Web

Definición, historia, URL, funcionamiento, evolución e impacto en los negocios.

≈ 70 min

HTTP y HTTPS

Petición y respuesta, métodos, códigos de estado, TLS y certificados.

≈ 70 min

Lenguaje HTML

Estructura, etiquetas, enlaces, formularios, semántica y campos de aplicación.

≈ 100 min

Al finalizar, usted estará en capacidad deResultados de aprendizaje

RA1

Describir qué es la World Wide Web, cómo funciona el modelo cliente–servidor y cómo ha evolucionado.

RA2

Explicar la diferencia entre HTTP y HTTPS, e interpretar métodos y códigos de estado.

RA3

Escribir una página HTML básica con encabezados, texto, enlaces, imágenes, listas y formulario.

RA4

Valorar el impacto de la Web en los negocios y reconocer sitios seguros.

Si la Web fuera una ciudad, ¿qué serían las URL, el HTTP y el HTML?

Las direcciones, el idioma de las conversaciones y los planos de cada edificio. Entender esos tres pilares permite crear sitios, detectar fraudes y comprar con seguridad.

World Wide Web

El servicio que convirtió a Internet en un medio de masas.

World Wide Web, HTTP y HTMLLa Web es un sistema de documentos enlazados accesibles por Internet

WWW (World Wide Web): espacio de información donde cada recurso tiene una URL.
Se basa en tres tecnologías: URL, HTTP y HTML.
Se consulta con un navegador.
Internet es la infraestructura; la Web es un servicio que corre sobre ella.
Hipertexto: textos con enlaces a otros textos.

Aclaración frecuente

Decir «Internet se cayó» cuando falla una página es impreciso. El correo, las videollamadas y los juegos también usan Internet y no son la Web.

World Wide Web, HTTP y HTMLLa Web nació en el CERN en 1989 y se hizo pública en 1993

Hitos de la World Wide Web.

Dato

El 30 de abril de 1993 el CERN puso el software de la Web en el dominio público, lo que impulsó su expansión sin regalías (CERN).

World Wide Web, HTTP y HTMLTres pilares sostienen la Web

URL

Dirección única de cada recurso. Dice dónde está y cómo pedirlo.

HTTP

Protocolo de comunicación entre navegador y servidor. Define cómo se pide y se responde.

HTML

Lenguaje de marcado que describe la estructura y el contenido de las páginas.

World Wide Web, HTTP y HTMLUna URL se descompone en partes con función propia

Partes de la URL `https://www.unipacifico.edu.co/programas/ani?id=4#perfil`.
Parte	Ejemplo	Función
Esquema	https://	Protocolo a usar (HTTP seguro)
Dominio	www.unipacifico.edu.co	Servidor (se traduce por DNS)
Ruta	/programas/ani	Recurso dentro del sitio
Parámetros	?id=4	Datos que se envían al servidor
Fragmento	#perfil	Sección dentro de la página

World Wide Web, HTTP y HTMLCómo funciona la Web: el modelo cliente–servidor en cinco pasos

Secuencia de una visita a una página web.

Idea clave

La página que usted ve se arma en su navegador a partir de archivos HTML, CSS, JavaScript e imágenes que envía el servidor.

World Wide Web, HTTP y HTMLLos navegadores se apoyan en pocos motores de renderizado

Navegadores populares y su motor.
Navegador	Motor	Observación
Google Chrome	Blink (Chromium)	El más usado del mundo
Microsoft Edge	Blink (Chromium)	Integrado en Windows
Mozilla Firefox	Gecko	Orientado a privacidad
Safari	WebKit	Dispositivos Apple
Brave / Opera	Blink (Chromium)	Variantes con funciones propias

World Wide Web, HTTP y HTMLNo todos los sitios son iguales: estático, dinámico y CMS

Páginas HTML fijas, iguales para todos. Rápidas y simples. Ejemplo: sitio institucional pequeño.

El servidor genera la página según el usuario o la base de datos: tiendas en línea, bancos, redes sociales.

Plataformas como WordPress, Joomla o Shopify permiten crear y administrar sitios con plantillas, sin programar cada página.

Para este curso

Crearemos y modificaremos páginas desde plataformas con plantillas (Google Sites, Wix, WordPress.com).

World Wide Web, HTTP y HTMLLa Web ha pasado por tres grandes etapas

Evolución de la Web (clasificación didáctica; los límites son discutidos).
Etapa	Años	Característica	Ejemplo
Web 1.0	1991–2003	Páginas estáticas; usuario solo lee	Sitios institucionales
Web 2.0	2004–2015	Participativa y social	Blogs, redes, wikis
Web 3.0	Hoy	Semántica, datos conectados, personalización con IA; también se asocia a la descentralización	Asistentes con IA, datos abiertos

World Wide Web, HTTP y HTMLEl impacto de la Web en los negocios se ve en tres frentes

Presencia

Un sitio es la sede abierta 24/7 de la empresa; sin él, el cliente duda.

Ventas

Tiendas en línea, reservas, cotizaciones y atención sin límite geográfico.

Datos

La analítica web mide visitas, origen y comportamiento para mejorar decisiones.

ActividadCompruebe su comprensión

¿Cuál de estas afirmaciones sobre Internet y la Web es correcta?

HTTP y HTTPS

Cómo conversan el navegador y el servidor, y cómo se protege esa conversación.

World Wide Web, HTTP y HTMLHTTP es el idioma de petición y respuesta de la Web

HTTP (Protocolo de Transferencia de Hipertexto) define cómo se pide y se entrega un recurso.
Modelo petición → respuesta.
Es sin estado: cada petición es independiente (las cookies recuerdan al usuario).
Puerto por defecto: 80 (HTTP) y 443 (HTTPS).
Versiones: HTTP/1.1, HTTP/2 y HTTP/3.

# Petición
GET /index.html HTTP/1.1
Host: www.ejemplo.co

# Respuesta
HTTP/1.1 200 OK
Content-Type: text/html

<html>…

World Wide Web, HTTP y HTMLLos métodos HTTP indican qué quiere hacer el cliente

Métodos HTTP principales.
Método	Acción	Ejemplo de uso
GET	Obtener un recurso	Abrir una página o ver un producto
POST	Enviar datos para crear algo	Enviar un formulario de pedido
PUT	Reemplazar un recurso	Actualizar el perfil completo
DELETE	Eliminar un recurso	Borrar un producto del carrito
HEAD	Pedir solo los encabezados	Comprobar si una página existe

World Wide Web, HTTP y HTMLLos códigos de estado explican cómo respondió el servidor

Familias de códigos de estado HTTP.
Código	Significado	Ejemplo
1xx	Informativo	100 Continue
2xx	Éxito	200 OK
3xx	Redirección	301 Movido permanentemente
4xx	Error del cliente	403 Prohibido · 404 No encontrado
5xx	Error del servidor	500 Error interno · 503 No disponible

World Wide Web, HTTP y HTMLTres códigos que usted verá casi a diario

World Wide Web, HTTP y HTMLHTTP viaja en texto plano: cualquiera en la ruta puede leerlo

En una red Wi‑Fi pública, un tercero podría interceptar contraseñas y datos de pago enviados por HTTP.
Podría incluso alterar la página recibida.
Los navegadores marcan los sitios HTTP como «No seguro».

Riesgo

No ingrese contraseñas ni tarjetas en una página que no use https://.

Por eso

Se creó HTTPS, que cifra la comunicación.

World Wide Web, HTTP y HTMLHTTPS es HTTP protegido con TLS

Apretón de manos TLS simplificado.

TLS 1.3

La versión actual del protocolo es TLS 1.3 (RFC 8446). SSL es el nombre antiguo y ya no se usa.

World Wide Web, HTTP y HTMLHTTPS ofrece tres garantías

Confidencialidad

Los datos se cifran: un tercero solo ve información ilegible.

Integridad

Nadie puede alterar el contenido en el camino sin que se note.

Autenticidad

El certificado confirma que el sitio es de quien dice ser (el dominio).

World Wide Web, HTTP y HTMLEl candado no garantiza que el sitio sea honesto

Un certificado lo emite una Autoridad de Certificación (CA) que verifica el control del dominio.
El candado significa conexión cifrada, no que la empresa sea confiable.
Los estafadores también obtienen certificados para dominios falsos.
Revise el nombre exacto del dominio antes de escribir datos.

Dominios parecidos

bancolombia-seguro.co no es bancolombia.com.co. Un candado en el primero no lo hace legítimo.

Revise

Dominio correcto · https:// · candado · reputación del vendedor.

World Wide Web, HTTP y HTMLCookies y rastreo: lo que la Web recuerda de usted

Pequeños archivos que el sitio guarda en su navegador para recordar sesión, carrito o preferencias.

Necesarias: sesión y carrito.
Analíticas: miden el uso.
Publicitarias: rastrean entre sitios.

En Colombia, la Ley 1581 de 2012 exige autorización previa e informada para tratar sus datos personales. Puede revisar y borrar cookies en la configuración del navegador.

Ejemplo prácticoInspeccionar una petición con las herramientas del navegador

Datos: Navegador Chrome o Edge; cualquier página web.

Se pide: Ver el método, el código de estado y el protocolo de una página real.

Interprete

Cada recurso (imágenes, estilos, scripts) generó su propia petición. Una página moderna puede hacer decenas de peticiones HTTP.

Abra la página y presione F12.
Entre a la pestaña Red (Network) y recargue con F5.
Haga clic en el primer elemento (el documento).
Lea: Método GET, Código 200, protocolo h2 o h3.

ActividadCompruebe su comprensión

Un sitio de una tienda muestra «No seguro» en la barra de direcciones y pide número de tarjeta. ¿Qué significa y qué debe hacer?

ActividadCompruebe su comprensión

Al abrir una URL aparece «404». ¿Qué significa?

Lenguaje HTML

El lenguaje de marcado que da forma a todas las páginas web.

World Wide Web, HTTP y HTMLHTML describe la estructura de una página mediante etiquetas

HTML = HyperText Markup Language (Lenguaje de Marcado de Hipertexto).
No es un lenguaje de programación: marca el contenido (título, párrafo, enlace).
Usa etiquetas entre < >, normalmente en pareja: <p>texto</p>.
El estándar actual es el HTML Living Standard (HTML5 evolucionado).
Un archivo .html se abre con cualquier navegador.

Historia breve

Berners-Lee lo creó hacia 1990; HTML5 fue Recomendación W3C en 2014 y hoy el estándar vivo lo mantiene el WHATWG.

World Wide Web, HTTP y HTMLToda página HTML comparte el mismo esqueleto

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <title>Mi primera página</title>
</head>
<body>
  <h1>Hola, mundo</h1>
  <p>Contenido visible.</p>
</body>
</html>

head y body

head contiene información sobre la página (título, codificación); body contiene lo que el usuario ve.

World Wide Web, HTTP y HTMLLas etiquetas de texto más frecuentes

Etiquetas HTML para estructurar texto.
Etiqueta	Uso	Ejemplo
<h1>…<h6>	Títulos por niveles	<h1>Mi tienda</h1>
<p>	Párrafo	<p>Bienvenido.</p>
<strong> / <em>	Negrita / énfasis	<strong>Oferta</strong>
<br>	Salto de línea	Línea 1<br>Línea 2
<hr>	Línea separadora	<hr>

World Wide Web, HTTP y HTMLEnlaces e imágenes conectan y enriquecen la página

<!-- Enlace -->
<a href="https://www.mozilla.org">
  Visite Mozilla
</a>

<!-- Imagen con texto alternativo -->
<img src="cacao.jpg"
     alt="Mazorca de cacao"
     width="300">

Texto alternativo

El atributo alt describe la imagen a quienes usan lector de pantalla y se muestra si la imagen no carga. Es obligatorio por accesibilidad.

World Wide Web, HTTP y HTMLListas y tablas organizan información

<ul>
  <li>Café</li>
  <li>Cacao</li>
</ul>

<table border="1">
  <tr><th>Producto</th><th>Precio</th></tr>
  <tr><td>Café</td><td>18</td></tr>
</table>

Qué usar y cuándo

ul lista con viñetas, ol lista numerada, table para datos tabulares (no para diseñar la página).

World Wide Web, HTTP y HTMLLos formularios recogen datos del visitante

<form action="/pedido" method="post">
  <label>Nombre
    <input type="text" name="nombre">
  </label>
  <label>Correo
    <input type="email" name="correo">
  </label>
  <button type="submit">Enviar</button>
</form>

Conexión con HTTP

Al presionar Enviar el navegador hace una petición POST (método HTTP) a la ruta /pedido. Por eso el formulario debe viajar por HTTPS.

World Wide Web, HTTP y HTMLHTML semántico: etiquetas con significado

Estructura semántica de una página.

Ventaja

Los buscadores y lectores de pantalla entienden mejor una página que usa etiquetas semánticas.

World Wide Web, HTTP y HTMLUna página se construye en tres capas: HTML, CSS y JavaScript

Las tres capas del desarrollo web (estructura, presentación y comportamiento).

Alcance del curso

Este curso se centra en la capa HTML y en el uso de plataformas con plantillas. CSS y JavaScript se estudian en cursos de programación web.

World Wide Web, HTTP y HTMLHTML se usa mucho más allá de los sitios web

Campos de aplicación del lenguaje HTML.
Campo	Uso de HTML	Ejemplo
Sitios web corporativos	Estructura de páginas	Portal institucional
Comercio electrónico	Catálogo, carrito, formularios	Tienda en línea
Correo electrónico	Boletines con formato	Newsletters de marketing
Aplicaciones híbridas	Interfaz de apps móviles	Apps empaquetadas con web
Educación virtual	Contenidos y actividades	Moodle, cursos en línea
Documentación	Manuales navegables	Ayuda en línea

World Wide Web, HTTP y HTMLCrear una página sin programar: plataformas con plantillas

Gratuito con cuenta Google. Arrastrar y soltar; ideal para sitios académicos y portafolios.

Plantillas profesionales, tienda en línea y dominio propio; plan gratuito con limitaciones y publicidad.

Páginas de una sola sección a partir de diseños; rápido para presentar un emprendimiento.

Elija según el objetivo: informar (Google Sites), vender (Wix, WordPress, Shopify) o presentar rápido (Canva). Siempre revise HTTPS y el dominio.

Ejemplo prácticoMini página de presentación para su emprendimiento

Datos: Un archivo emprendimiento.html creado en el Bloc de notas.

Se pide: Mostrar nombre, descripción, tres productos y un enlace de contacto.

Interprete

Con menos de 20 líneas ya tiene una página funcional. El siguiente paso es darle estilo con CSS o migrarla a una plataforma con plantillas.

Escriba el esqueleto con DOCTYPE, html, head y body.
Agregue <h1> con el nombre y un <p> descriptivo.
Incluya una lista <ul> con los tres productos.
Cierre con <a href="mailto:..."> y guarde con extensión .html.

World Wide Web, HTTP y HTMLCinco buenas prácticas al escribir HTML

Estructura

Un solo h1 por página.
Títulos en orden (h1 → h2 → h3).
Etiquetas bien cerradas y anidadas.

Calidad

alt en todas las imágenes.
title y lang definidos.
Validar en validator.w3.org.

ActividadCompruebe su comprensión

¿Qué etiqueta HTML correcta crea un enlace a una página externa?

ActividadCompruebe su comprensión

¿Qué función cumple el atributo alt de una imagen?

Marco normativoNormas y estándares aplicables

Norma internacionalRFC 9110 · HTTP SemanticsIETF · define métodos y códigos de estado de HTTP

Norma internacionalHTML Living StandardWHATWG · especifica las etiquetas y atributos de HTML

Norma internacionalRFC 8446 · TLS 1.3IETF · protocolo que cifra HTTPS

Norma nacional · ColombiaLey 1273 de 2009 · Delitos informáticosCongreso de Colombia · protege la información y los datos

Estudio independienteRecursos para profundizar

Video tutorial · búsqueda guiadaHTTP, HTTPS y HTML para principiantes (búsqueda guiada)YouTube · elija un video en español con subtítulos

Tutorial oficialHTML: crear el contenidoMDN Web Docs (Mozilla) · en español

Tutorial oficialHTTP: guía de referenciaMDN Web Docs

Ejemplo prácticoPlayground de MDNEscriba y pruebe HTML en línea

ResumenIdeas clave

La Web es un servicio sobre Internet sostenido por URL, HTTP y HTML, y transformó la presencia y las ventas de las empresas (RA1 y RA4).

HTTP pide y responde; HTTPS añade cifrado TLS, pero el candado no certifica la honestidad del sitio (RA2 y RA4).

HTML marca la estructura con etiquetas; con menos de 20 líneas se crea una página funcional (RA3).

Para continuarTrabajo independiente y próxima clase

Antes de la próxima clase

Crear emprendimiento.html y probarlo en el navegador.
Avanzar en el Taller 2 (grupo).
Revisar las funciones de búsqueda de Google (clase 9).

Próxima clase

Clase 9 (02-nov): funciones de búsqueda especiales y aprovechamiento del motor de Google.

FuentesBibliografía y fuentes originales

M. Rubiales Gómez, Curso de Desarrollo Web: HTML, CSS y JavaScript. Madrid: Anaya Multimedia, 2021.
MDN Web Docs, «HTML: Lenguaje de Marcado de Hipertexto». [En línea]. Disponible en: developer.mozilla.org/es/docs/Web/HTML
IETF, RFC 9110: HTTP Semantics, 2022. [En línea]. Disponible en: rfc-editor.org/rfc/rfc9110
CERN, «The birth of the Web». [En línea]. Disponible en: home.web.cern.ch
WHATWG, HTML Standard. [En línea]. Disponible en: html.spec.whatwg.org
Video tutorial: búsqueda guiada en YouTube — HTTP, HTTPS y HTML

Gracias¿Preguntas?

Elaborado por: Prof. Jhon Jairo Murillo Flórez ·

Código: · · versión ,

Este material se distribuye bajo licencia Creative Commons Atribución–NoComercial–CompartirIgual 4.0 (CC BY-NC-SA 4.0). Las imágenes de terceros conservan la licencia indicada en su crédito.