01
Una web puede tener muchas páginas.
Una página sencilla puede funcionar perfectamente con un único archivo HTML, pero muchos proyectos necesitan separar el contenido.
Por ejemplo, una web profesional podría tener:
sobre.html
servicios.html
contacto.html
Cada archivo representa una página distinta dentro del mismo sitio.
02
Organiza tu proyecto.
Tu carpeta podría quedar así:
├── index.html
├── sobre.html
├── servicios.html
├── contacto.html
├── styles.css
└── images/
└── proyecto.jpg
Todos los archivos HTML pueden utilizar el mismo styles.css.
03
Crea la página Sobre.
Crea un archivo nuevo llamado:
Puedes comenzar con una estructura como esta:
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sobre | Mi proyecto</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Sobre el proyecto</h1>
<p>
Aquí puedes presentar tu proyecto.
</p>
</body>
</html>
04
Conecta Inicio con Sobre.
Desde `index.html` podemos crear:
Al pulsar el enlace, el navegador buscará `sobre.html` dentro de la misma carpeta.
Para volver a Inicio desde `sobre.html`:
05
Reutiliza el mismo menú.
Cada página debería permitir al visitante desplazarse por el sitio sin quedarse atrapado.
Podemos reutilizar este menú:
<a href="index.html">Inicio</a>
<a href="sobre.html">Sobre</a>
<a href="servicios.html">Servicios</a>
<a href="contacto.html">Contacto</a>
</nav>
06
Qué es una ruta relativa.
Una ruta indica dónde se encuentra un archivo.
Cuando escribes:
estás utilizando una ruta relativa.
Significa: busca `servicios.html` tomando como referencia la ubicación del documento actual.
07
Qué ocurre con las subcarpetas.
Imagina esta estructura:
├── index.html
├── styles.css
└── paginas/
└── servicios.html
Desde `index.html`, para entrar en Servicios usaríamos:
Pero desde `servicios.html` para volver a Inicio necesitamos subir un nivel:
Los dos puntos:
significan subir a la carpeta anterior.
08
Por qué aparece un error 404.
Un error 404 significa que el navegador o servidor no ha encontrado el recurso solicitado.
Puede ocurrir por varios motivos:
El archivo no existe.
El nombre está mal escrito.
La ruta apunta a una carpeta incorrecta.
Las mayúsculas y minúsculas no coinciden.
09
Los nombres de archivo deben ser consistentes.
Es recomendable utilizar nombres simples y descriptivos.
Por ejemplo:
sobre-nosotros.html
contacto.html
Evita espacios:
Una alternativa mejor sería:
10
Mantén la identidad visual entre páginas.
Aunque cada página tenga un contenido diferente, el sitio debería sentirse como una única experiencia.
Utiliza la misma navegación.
Mantén las mismas tipografías.
Repite la paleta de colores.
Mantén estilos de botones coherentes.
Utiliza espacios y anchos similares.
Al compartir `styles.css`, resulta más fácil mantener esta coherencia.
11
Crea una estructura multipágina sencilla.
Para practicar, crea cuatro páginas:
sobre.html
servicios.html
contacto.html
En todas ellas incluye:
y el mismo menú de navegación.
De esta forma ya tendrás un pequeño sitio web real, no solamente una página aislada.
12
Comprueba todos los enlaces.
Antes de publicar, recorre tu web como si fueras un visitante.
Inicio → Sobre.
Sobre → Servicios.
Servicios → Contacto.
Contacto → Inicio.
También revisa botones, imágenes y enlaces internos.
RESUMEN
Lo que has aprendido.
- Una web puede estar formada por varios archivos HTML.
- index.html suele representar la página principal.
- Los enlaces permiten conectar diferentes páginas.
- Las rutas relativas dependen de la ubicación del archivo.
- ../ permite subir un nivel de carpeta.
- Una ruta incorrecta puede generar un error 404.
- Los nombres de archivo deben ser claros y consistentes.
- Varias páginas pueden compartir un mismo styles.css.
- La navegación debe mantenerse coherente.
- Todos los enlaces deben probarse antes de publicar.
PONLO EN PRÁCTICA
Convierte tu proyecto en una web multipágina.
Utiliza el proyecto que has construido durante esta ruta.
- Mantén `index.html` como Inicio.
- Crea `sobre.html`.
- Crea `servicios.html`.
- Crea `contacto.html`.
- Conecta `styles.css` en las cuatro páginas.
- Añade el mismo menú en todas.
- Comprueba todas las rutas.
- Visita todas las páginas desde el navegador.