Caminho para acesso de pastas HTML, CSS, PHP e etc

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

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

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 120 aulas
• 4 projetos
• 9h 45min

Conhecer formação

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