Al crear un sitio web, necesita una forma de acceder a los archivos y recursos. Estos archivos pueden ser locales (dentro de la estructura de carpetas del sitio) o externos (desde una dirección en Internet).
Para los archivos locales, colocarlos en carpetas separadas es la mejor solución para garantizar la separación de problemas y la modularidad del código. Para archivos ubicados en otro lugar, necesita una forma igualmente eficiente de referirse a ellos. Las rutas de archivo proporcionan acceso a estos recursos.
En este artículo, cubriremos las diferentes rutas de los archivos HTML, incluida la comparación de rutas de archivos relativas y absolutas, así como las mejores prácticas para usar rutas de archivos en HTML. Finalmente, veremos algunos casos de uso y ejemplos para aprender sobre su sintaxis.
¿Cuál es la ruta a un archivo HTML?
La ruta a un archivo HTML es la ubicación o dirección de un recurso de archivo específico. En los casos en que desee que estos archivos se comuniquen o se vinculen entre sí, debe proporcionar una ruta de archivo para que el navegador sepa y comprenda cómo acceder a ellos.
Las rutas de archivos HTML son útiles porque sin ellas no hay forma de ingresar o hacer referencia a las dependencias requeridas para un sitio web completamente funcional. Estas dependencias incluyen código JavaScript en un archivo separado, necesario para la función de pago cuando se hace clic en un botón en el archivo HTML, o incluso solo una referencia a un recurso de video de un sitio externo.
Rutas de archivo relativas versus absolutas
Para usar rutas de archivo HTML, las dos opciones son rutas de archivo relativas o absolutas. Para las rutas de archivo relativas, los archivos a los que desea hacer referencia están en la misma carpeta en la estructura de carpetas del sitio web. Por otro lado, con las rutas de archivo absolutas se refiere a recursos externos ubicados en otra parte de la red.
Al usar rutas de archivo absolutas, podemos acceder al contenido de un archivo o recurso utilizando la ruta completa de la URL, lo que significa que también puede hacer referencia al contenido directamente desde la web. Por ejemplo, puede hacer referencia a una imagen desde una URL como:
img src="https://www.hubspot.com/images/hub.jpg" alt="hub"
los origen también se conoce como el atributo fuente que nos dice la ruta del archivo.
Alternativamente, para rutas de archivo relativas, la ruta de archivo se refiere al archivo relativo a la ubicación de trabajo actual o un archivo en la estructura de carpetas. Por ejemplo, suponga que tiene un concentrador.jpg un archivo en la carpeta de imágenes, un nivel más arriba en la jerarquía de carpetas. Puedes acceder fácilmente de esta manera: 
. El primer punto representa el directorio actual y el siguiente punto lo sube un nivel en la estructura del directorio.
Para rutas de archivos relativas, para vincular a un archivo específico en la misma carpeta, use el nombre del archivo en sí, como hub.jpg. Para hacer referencia a un archivo dentro de una carpeta de imágenes anidadas, simplemente escriba el nombre de la carpeta antes de la ruta y la barra inclinada: imágenes / abrazos.jpg.
Es mejor utilizar rutas de archivos relativas, ya que son locales en la jerarquía de carpetas del proyecto y siempre son las mismas. Por el contrario, las rutas de archivo absolutas pueden estar en cualquier lugar de Internet y pueden cambiar en cualquier momento, lo que puede provocar enlaces rotos.
Para las rutas de archivo relativas, debe prestar atención a cómo se hace referencia a estos archivos, la ortografía de los nombres de archivo, su ubicación, la extensión de archivo, etc. Esto es para garantizar que el recurso se cargue correctamente. Para las rutas de archivo absolutas, la URL debe ser válida y contener el recurso necesario para que el sitio web se cargue correctamente.
Además, con rutas de archivo relativas, las imágenes (por ejemplo) deben cargarse a través de Internet. En algunos casos, las imágenes grandes pueden tardar un poco en cargarse, lo que puede hacer que las páginas web sean más lentas. Por lo tanto, a menos que necesite confiar más en una URL externa, se recomienda utilizar rutas de archivo relativas en lugar de rutas de archivo absolutas cuando sea posible.
Ejemplo de ruta de archivo HTML
Como se mencionó anteriormente, las rutas a los archivos HTML pueden ser relativas o absolutas. En esta sección, repasaremos algunos ejemplos de cómo usar ambos tipos de rutas de archivo para comprender su sintaxis y cómo usarlos en escenarios del mundo real.
Primero, demostremos cómo puede hacer referencia a una imagen o un archivo de recursos en un documento HTML usando su ruta relativa. Continúe e inicie el editor de código, cree un nuevo archivo y llámelo índice.html. Agrega el siguiente código al archivo que acabas de crear:
<!DOCTYPE html><html>
<head>
<title>HTML File Path Example</title>
</head>
<body>
<h2>HTML File Path Example</h2>
<img src="https://blog.hubspot.com/website/sample-image.jpeg" alt="Image File path example">
</body>
</html>
Luego descargue una imagen de muestra (imagen-muestra.jpeg) y agréguelo en la misma ubicación que su directorio de archivos HTML actual.
En el archivo HTML anterior, dentro de la etiqueta del cuerpo nos referimos al archivo de imagen con la fuente (pág.rc) que nos dice dónde está la imagen. Después de abrir el archivo HTML, la salida debería verse así:
Continuando, echemos un vistazo a cómo funciona una ruta de archivo absoluta en un documento HTML.
En el siguiente ejemplo, importará el código CSS y JavaScript alojado en un archivo HTML. Para empezar, crea uno nuevo índice.html archivo y agregue el siguiente código:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Button Example with Relative Path</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="m-4">
<button type="button" class="btn btn-primary">Primary</button>
</div>
</body>
</html>
Después de abrir el archivo HTML, la salida debería verse así:
Ha utilizado con éxito Bootstrap CSS y JavaScript alojado en algún lugar de Internet para conectarse a su archivo HTML y mostrar su botón de inicio personalizado.
Finalmente, demostremos cómo puede incluir un archivo JavaScript ubicado en la misma jerarquía de carpetas que el archivo HTML usando una etiqueta de secuencia de comandos etiquetada con origen atributo.
Primero crea uno nuevo índice.html archivo en una carpeta llamada acorde y agrega el siguiente código:
<!DOCTYPE html><html>
<head>
<script type="text/javascript" src="https://blog.hubspot.com/website/js/sample.js"></script>
</head>
<body>
<h1>HTML File Path Example with JS</h1>
<form>
<input type="button" value="click" onclick="sayHello()"/>
</form>
</body>
</html>
Entonces crea js carpeta. Dentro de esta carpeta, crea un archivo: ejemplo.js. En el interior ejemplo.jsagregue este código a continuación, que muestra «Hola mundo» en su navegador cuando hace clic en el botón en la página.
function sayHello() { alert('Hello World!');
}
Si abre el código HTML en su navegador y hace clic en el botón, el resultado debería verse así:
Como puede ver en el ejemplo anterior, el valor de origen el atributo es una ruta relativa a la ubicación del archivo JavaScript en la ruta del sistema para el directorio de trabajo actual. En nuestro caso, está dentro. JS carpeta. Vea la estructura de carpetas a continuación:
Uso de rutas de archivos HTML
En este artículo, aprendió sobre las rutas de los archivos HTML y cómo funcionan. Las rutas de archivos HTML brindan acceso a recursos o archivos en función de su ubicación, ya sea una ubicación local en la estructura de carpetas del sitio web o desde cualquier otro lugar de Internet.
Con rutas absolutas y relativas, se debe tener cuidado al hacer referencia a estas ubicaciones de archivos para que el navegador sepa cómo acceder a ellos. Por lo general, la mejor solución son los archivos que son relativos al documento HTML porque su ubicación es estática.
Además, asegúrese siempre de utilizar un atributo alternativo que proporcione una alternativa en caso de que se cambie el recurso o se haga una referencia incorrecta al archivo.
Ahora que sabe cómo funcionan las rutas de archivos HTML, puede usar este conocimiento para tomar decisiones informadas sobre cuándo usar rutas de archivos relativas o absolutas.
