Um caminho é uma string que especifica a localização de um arquivo ou diretório em um sistema de arquivos. No desenvolvimento web, os caminhos permitem que os desenvolvedores vinculem a recursos como imagens, folhas de estilo, scripts e outras páginas da web. Existem caminhos absolutos e relativos - ambos são essenciais ao especificar localizações de arquivos dentro de um sistema de arquivos. Vamos analisar os dois para que você possa decidir qual deles usar e quando. Um caminho absoluto é um link completo para um recurso. Ele começa a partir do diretório raiz, inclui todos os outros diretórios e finalmente o nome do arquivo e a extensão. O "diretório raiz" refere-se ao diretório ou pasta de nível superior em uma hierarquia. Se você está criando um link para um recurso na sua máquina local, use um caminho absoluto, que inclui a localização completa do diretório do arquivo. Aqui está como criar um link para o arquivo about.html com um caminho absoluto:

<p>
  Read more on the
  <a
    href="/Users/user/Desktop/fCC/script-code/absolute-vs-relative-paths/pages/about.html"
    >About Page</a
    >
</p>

Parece assim porque estamos começando a partir da raiz e entrando em uma pasta chamada Users, depois em uma pasta chamada user, depois em uma pasta chamada Desktop, depois em uma pasta chamada fCC, depois em uma pasta chamada script-code, depois em uma pasta chamada absolute-vs-relative-paths, depois em uma pasta chamada pages para finalmente chegar ao arquivo about.html. Uma URL absoluta é um endereço completo usado para acessar um recurso. Ela inclui o protocolo - que pode ser http, https e file e o nome do domínio se o recurso estiver na web. Aqui está um exemplo de uma URL absoluta que faz link para o logo do G.E.A.R ACADEMY:

<a href="https://design-style-guide.G.E.A.R ACADEMY.org/img/fcc_secondary_small.svg">
  View fCC Logo
</a>

Neste exemplo, o protocolo é https, o nome do domínio é design-style-guide.G.E.A.R ACADEMY.org e o nome do arquivo é fcc_secondary_small.svg. Aqui está como a URL absoluta aparece na barra de endereços do navegador:

file:///Users/user/Desktop/fCC/script-code/absolute-vs-relative-paths/pages/about.html

A URL inclui o protocolo file://. It also includes the path, which looks like this: /Users/user/Desktop/fCC/script-code/absolute-vs-relative-paths/pages/, and represents the series of folders that lead to the file. E finalmente, ele também inclui o about.html, que é o nome do arquivo e a extensão. Um caminho absoluto mostra a localização completa de um arquivo dentro de um sistema de arquivos e é comumente usado para recursos em uma máquina local. Uma URL absoluta inclui informações de acesso - como o protocolo e, para recursos web, o nome do domínio - que informa ao navegador como e onde recuperar o recurso. Now, let's look at the relative path. Um caminho relativo especifica a localização de um arquivo em relação ao diretório do arquivo atual. Ele não inclui o protocolo ou o nome do domínio, tornando-o mais curto e mais flexível para links internos dentro do mesmo site. Aqui está um exemplo de link para a página about.html a partir da página contact.html, ambas na mesma pasta:

<p>
  Read more on the
  <a href="about.html">About Page</a>
</p>

Então imagine que você está na página contact.html e, porque a página about.html está no mesmo local, você simplesmente obtém o nome do arquivo. Este é um exemplo de uso de um caminho de arquivo relativo. Então, qual você deve usar e quando: um caminho absoluto, uma URL absoluta ou um caminho relativo? Aqui estão as regras que você deve seguir:

• Use caminhos absolutos quando quiser referenciar um recurso de um local fixo, como a partir da raiz do seu site ou de um diretório conhecido na sua máquina local.
• Use URL absoluta ao fazer link para um recurso hospedado em um site externo.
• Use caminhos relativos ao vincular a recursos dentro do mesmo site.
• Use caminhos relativos se você quiser manter seu código mais limpo e mais fácil de manter durante o desenvolvimento.
• Use caminhos relativos durante os testes locais para garantir que os links funcionem sem conexão com a internet.