¿Cómo volver a vincular una carpeta con la etiqueta a-href?

Introducción:

Siempre que hacemos un proyecto generalmente se distribuye entre varias carpetas. Esto generalmente se hace para mejorar la conectividad y la legibilidad para los distintos desarrolladores web que trabajan en el mismo proyecto. Por ejemplo:

La clasificación anterior es solo un ejemplo, pero la clasificación puede ser mayor. Entonces, si tiene que llamar a una imagen de la carpeta de imágenes para la página de inicio o desea llamar a una página en forma de artículo, la página de inicio sería una URL directa, es decir. “ Imágenes/gfg.jpg ” o “ Otras páginas/Artículos/Gfg Article1.html ”. Pero si tiene que llamar a una imagen desde la carpeta de imágenes para la página Gfg Article1, entonces la URL general no funcionará. Tienes que usar una ruta de archivo relativa.

Para obtener más información sobre la ruta relativa, siga este artículo .

Ejemplo 1:

Muestra la ruta del archivo presente en una carpeta encima de la carpeta del archivo de la página web actual. El archivo de imagen presente en una carpeta llamada imágenes y el archivo de la página web actual existe dentro de una subcarpeta, entonces el código será el siguiente:

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Relative file path</title> 
    </head> 
    <body> 
        <h2>File present in a folder above the current folder</h2> 
        <img src="../images/gfg.jpg" alt="My Image" style="width:200px"> 
    </body> 
</html>

Producción:

Ejemplo 2:

Muestra la ruta del archivo presente en una carpeta que se encuentra en la raíz de los subdirectorios actuales.

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Relative file path</title> 
    </head> 
    <body> 
        <h2>File present in a folder which is located at<br> 
        the root of the current subdirectories</h2> 
        <img src="/images/picture.jpg" alt="My Image" style="width:200px"> 
    </body> 
</html>

Producción:

Publicación traducida automáticamente

Artículo escrito por aditya_taparia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *