Quando inserimos nosso site em um servidor é fundamental saber manejar o caminho para acesso de pastas, é isso que você verá nesse artigo.

caminho para acesso das pastas capa

Fala programador(a), beleza? Bora aprender coisa nova!

Quando inserimos arquivos CSS e JS, precisamos acessar os diretórios do sistema, com “..” ou “./”

E o que significa estes símbolos?

Basicamente é uma forma que no Linux se usa para acessar arquivos e pastas que não estão no próprio arquivo do projeto

Então precisamos mudar de diretório via estes símbolos

Vamos então descrever cada um deles:

  • ../ – Com este símbolo podemos voltar um diretório, ou seja, se você está em um diretório x dentro de y, com os .. você voltaria para o y, podendo acessar os arquivos que estão a partir de lá;
  • ./ – Acessando arquivos desta forma você está querendo acessar os arquivos que estão no diretório atual, ou seja, você tem acesso a todos os arquivos que estão na pasta deste arquivo;
  • / – Utilizando o símbolo de barra você está indo até a raiz do projeto, ou seja, onde você terá acesso a todas as pastas/diretórios e arquivos do mesmo;
  • ../pasta1 – Com esta instrução, você está voltando um diretório e acessando a pasta1;
  • /css/index.css – Com esta instrução você está acessando a  raiz do projeto, depois a pasta de arquivos CSS e o arquivo de CSS chamado index.css;
  • /pasta1/pasta2 – A partir da raiz do projeto, você está acessando a pasta1 e depois a pasta2;
  • ../../ – Com esta sequência você está voltando duas pastas/diretórios;

Basicamente são estas as sequências/comandos mais utilizados ao acessarem arquivos e pastas do projeto

Quer se especializar em Desenvolvimento Web? Veja o nosso catálogo de cursos.

Vamos a alguns exemplos práticos:

<link rel="stylesheet" type="text/css" href="../CSS/styles.css">

Neste exemplo, voltamos uma pasta e acessamos a pasta CSS e por fim o arquivo que queremos linkar no projeto

<link rel="stylesheet" type="text/css" href="../styles.css">

Aqui acessamos o arquivo CSS que está um diretório acima deste arquivo que estamos editando

<img class="user-photo" src="img/avatar4.png">

Aqui a pasta de imagens está no mesmo diretório do arquivo que editamos, assim só é necessário acessar ela normalmente sem símbolos, e acessar a imagem

<script type="text/javascript" src="../js/scripts.js"></script>

Aqui da mesma maneira, voltamos um diretório, para acessar o diretório JS e seu arquivo scripts.js

Conclusão

Neste artigo vimos como utilizar o caminho para acesso de pastas

Aprendemos os principais símbolos ou códigos, que são utilizados para linkar ou acessar arquivos

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube

Inscrever-se
Notificar de
guest

15 Comentários
mais antigos
mais recentes Mais votado
Feedbacks embutidos
Ver todos os comentários
Lucas

Muito obrigado, me ajudou muito!

Battisti

de nada Lucas, tamo junto!

Pedro Victor

“Fala galera Beleza”
Muito obrigado por partilhar o conhecimento, aqui, na youtube, na udemy.
Muita forca

Battisti

hahahah valeu Pedro!

Jansen Muniz

tava empancado nisso num site que tô criando, me ajudou, valeu!

Battisti

de nada Jansen!

Luiz

Muito obrigado mesmo, foi uma ajuda e tanto!!!
Estava com problemas aqui sobre esta questão de localizar pastas e seu website foi uma luz no fim do túnel, vlw mesmo!!!!

Última edição 2 anos atrás por Luiz
Battisti

show Luiz!

José Maurício

Realmente, me ajudou muito. Algo bem simples, mas de enorme serventia.
Grato pelo compartilhamento.

Battisti

de nada!

Júlio

Obrigado!

Battisti

de nada =)

Daniel Estevao

muito Bom

Battisti

valeu!

dada
<link rel="stylesheet" type="text/css" href="../CSS/styles.css">