5. Rutas y navbar

Redirecciones entre vistas

Redirigir es que un enlace lleve a otro archivo. Lo único que cambia es la ruta que escribes en el href.

Llamamos vista (o página) a cada archivo .html del sitio: una pantalla que el usuario ve.

Caso	Cómo se escribe	Qué significa
Misma carpeta	<a href="contacto.html">	El archivo está al lado
Dentro de una carpeta	<a href="paginas/contacto.html">	Nombre de la carpeta, barra, archivo
Subir un nivel	<a href="../index.html">	../ es “la carpeta de arriba”
Sitio externo	<a href="https://umag.cl" target="_blank">	URL completa, en pestaña nueva
Ancla en la misma vista	<a href="#contacto">	Salta al elemento con ese id

La puerta de entrada se llama index.html

Es el nombre que el servidor busca cuando alguien entra a una carpeta sin especificar archivo. Tu página de inicio tiene que llamarse así, siempre.

Rutas de archivos

Una ruta dice dónde está un archivo respecto del que lo usa. Con esta estructura de ejemplo:

La estructura de ejemplo para las rutas

mi-sitio/
|-- index.html           <- estas aqui
|-- sobre-mi.html
|-- img/
|   `-- logo.png
`-- paginas/
    `-- contacto.html

Ruta	Qué hace
sobre-mi.html	Está al lado del archivo actual: se escribe solo el nombre
img/logo.png	Entra a una carpeta: nombre de la carpeta + / + archivo
paginas/contacto.html	Lo mismo, una carpeta más abajo
../index.html	Sale de la carpeta actual. Desde paginas/contacto.html, así se vuelve al inicio
https://umag.cl	Ruta absoluta: empieza con https:// y apunta a otro sitio

Las cuatro primeras son rutas relativas: se leen desde donde está el archivo que las escribe. La última es absoluta: vale igual escrita desde cualquier parte.

Las rutas distinguen mayúsculas, tildes y espacios

img/Foto.PNG y img/foto.png son dos archivos distintos para un servidor Linux, que es donde terminará publicada tu página. Windows y macOS no distinguen mayúsculas, así que la página puede funcionar perfecta en tu máquina y llenarse de imágenes rotas al subirla. Un espacio o una tilde rompen la ruta en cualquier sistema.

Por eso los archivos se nombran en minúscula y con guiones: foto-perfil.jpg, sobre-mi.html. Es la misma regla que viste en estructura de un proyecto.

La navbar

La navbar es el menú del sitio: el bloque de enlaces que permite moverse entre las vistas. Va dentro de <nav> y se arma con una lista de enlaces.

<nav>
  <ul>
    <li><a href="index.html">Inicio</a></li>
    <li><a href="sobre-mi.html">Sobre mí</a></li>
    <li><a href="contacto.html">Contacto</a></li>
  </ul>
</nav>

Va al inicio del <body>, arriba de todo: es el primer patrón que el usuario busca.

Es el mismo bloque en todas las páginas

La navbar se copia igual en cada archivo .html del sitio. Si a una página le falta, el usuario que llegue ahí queda atrapado: no tiene forma de volver sin escribir la dirección a mano o usar el botón “atrás”.

Conviene marcar la vista actual (por ejemplo con class="activa") para que se sepa dónde está parado. El estilo de esa marca lo daremos en CSS; por ahora basta con dejar la clase puesta.

¿Y si tengo diez páginas?

Copiar la navbar diez veces funciona, pero cada cambio hay que hacerlo diez veces. Es una de las razones por las que existe PHP: en la Unidad 2 podrás escribir la navbar una sola vez e incluirla en todas las vistas (include y require).

Errores comunes

Los cuatro que más se repiten. Reconocerlos te ahorra horas.

Error	Ejemplo	Qué pasa
Olvidar el cierre	<p>Un párrafo sin cerrar	Todo lo que sigue queda dentro del párrafo
Cruzar etiquetas	<p><strong>Hola</p></strong>	Se cierra primero la de afuera: resultado impredecible
Ruta mal escrita	src="IMG/Mi Foto.PNG"	Mayúsculas, tildes o espacios rompen la ruta: sale el ícono roto
Elegir por cómo se ve	<h3> usado como párrafo	La etiqueta se elige por lo que significa, no por su tamaño

Qué revisar primero cuando algo se ve mal

Los cierres y las comillas. El resaltado de color de VSCode delata casi todos estos errores: si media página se puso del color de un atributo, falta una comilla; si el color de una etiqueta no termina donde esperabas, falta un cierre.

Checkpoint

Intenta responder antes de desplegar cada pregunta.

¿Cómo escribes una ruta que sube un nivel, una que entra a una carpeta y una que está en la misma carpeta?

• Misma carpeta (solo el nombre: contacto.html)
• Entrar a una carpeta (carpeta, barra, archivo: paginas/contacto.html)
• Subir un nivel (../ delante: ../index.html)

Y la absoluta, para otro sitio, va completa: https://umag.cl.

¿Qué diferencia hay entre una ruta relativa y una absoluta?

La relativa se lee desde donde está el archivo que la escribe (img/foto.png, ../index.html): si mueves el archivo, la ruta cambia de destino. La absoluta empieza con https:// y apunta siempre al mismo lugar, se escriba desde donde se escriba.

¿Por qué los archivos se nombran en minúscula y sin tildes ni espacios?

Porque el nombre es parte de la ruta. Un servidor Linux distingue mayúsculas de minúsculas, así que Foto.PNG y foto.png son dos archivos distintos. Los espacios y las tildes rompen la ruta directamente.

El síntoma clásico: la página funciona en tu computador (Windows no distingue mayúsculas) y se llena de imágenes rotas al publicarla.

¿Por qué la navbar debe ser la misma en todas las vistas?

Porque es lo que permite moverse por el sitio. Si a una página le falta, el usuario que llegue ahí queda atrapado: no tiene enlaces para ir a ninguna otra parte.

Además, repetirla igual en todas hace que el sitio se sienta uno solo y no una colección de archivos sueltos.

Nombra dos errores comunes al escribir HTML.

Cualquiera de estos cuatro:

• Olvidar la etiqueta de cierre (todo lo que sigue queda dentro del elemento).
• Cruzar etiquetas al anidar (<p><strong>Hola</p></strong>).
• Escribir mal la ruta (mayúsculas, tildes o espacios; sale el ícono roto).
• Elegir la etiqueta por cómo se ve (un h3 usado como párrafo pequeño).

¿Cuándo conviene target="_blank" y cuándo no?

Sí para enlaces a sitios externos: así el usuario no pierde tu página al salir. No para enlaces dentro de tu propio sitio: abrir una pestaña nueva por cada vista llena el navegador y rompe el botón “atrás”, que es como la mayoría de la gente navega.