0

HTML Tricks: Como navegar em diretorios?

Vagner Bellacosa
Vagner Bellacosa

Estrutura da Pagina WEB


Como codificar usando subdiretorios em HMTL, JS e CSS


Muitas vezes paramos para perguntar como seguir o caminho das Indias, digo, das  pastas em um pagina HTML, fica uma grande barafunda de pontos e barras para la e ca.


Antes de avançarmos lembre-se que em HTML  usamos a  barra inclinada : /


Uma duvida a menos, agora vamos a proxima parte como diria Jack, o Estripador,  piadas ruins a parte, quando inserimos arquivos externos tais como  Imagens, Videos, Audios, CSS e JS e etc, precisamos acessar os diretórios do sistema, nessa hora  começa a confusao:  “..” ou “./”


Afinal o que significam estes símbolos?


Em linhas gerais, podemos falar que é uma forma que o servidor usa para acessar  arquivos e pastas que não estão no próprio arquivo do projeto. Esta definição foi herdada do Sistema UNIX, que eram as maquinas dominantes nos primórdios da Internet, la no século passado, e que se mantem até nossos dias, lembre-se é diferente da maneira usada no Sistema Windows (MS-DOS)


Pois bem, então precisamos mudar de diretório por via destes símbolos:  .  ..  /   ./  ../ etc


Descrevo cada um deles:


1. ../  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á;


2. *./* 

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;


3. */*  

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;


4. ../diretorio1

Com esta instrução, você está voltando um diretório e acessando o diretorio1 na raiz do projeto;


5. /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;


6. /diretorio1/diretorio2

 A partir da raiz do projeto, você está acessando a pasta1 e depois a pasta2;


7. ../../  Com esta sequência você está voltando duas pastas/diretórios;


Importante estes sao apenas alguns exemplos.


Infelizmente em nosso dia a dia poderemos encontrar inúmeras outras combinações, tudo a depender da imaginação do criador, nos exemplos listei as mais comuns de  sequências/comandos para acessarem arquivos e diretórios do projeto.


Bonus, mais exemplos


Ficou meio nebuloso né? Que tal vermos mais detalhes, com exemplos práticos:


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

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


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

No código acessamos o arquivo CSS que está um diretório acima deste arquivo que estamos editando


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

No código o diretório 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>

Neste codigo voltamos um diretório, para acessar o diretório JS e seu arquivo scripts.js


Conclusão


Neste artigo espero ter ajudado a clarificar como utilizar o caminho para acesso de  diretórios e arquivos numa pagina HTML de um projeto WEB.


Tivemos uma noção do UNIX e seu sistema de navegação em diretórios, que foi legado a WEB e as paginas HTML (JS CSS) e gera algumas confusões nos  codificadores de origem MS Windows.


Duvidas deixe nos comentários.

0
0

Comentários (1)

0
Bruno Nascimento

Bruno Nascimento

02/06/2021 19:19

Gostei muito interesante.

Analista Programador dinossauro IBM Mainframe

Brasil