1

HTML Tricks: Como navegar em diretorios?

#HTML #JavaScript #CSS
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.


Saiba mais



 Faça um deploy da sua página no GITHub com domínio e servidor gratuito:  


https://web.digitalinnovation.one/articles/netflix-clone-como-fazer-um-deploy-do-seu-website



 Saiba como usar o arquivo robots.txt e otimizar o acesso ao seu site, ajudando os bots spider a navegaçao, catalogarem, indexarem e ranquearem sua pagina.


https://web.digitalinnovation.one/articles/saiba-como-indexar-seu-website-com-uso-de-robotstxt-tutorial


Momento Jaba, divirta-se com as aventuras do tiozao.


https://www.youtube.com/watch?v=x4mLvgRHIMs


Duvidas deixe nos comentários.



 https://www.linkedin.com/in/vagnerbellacosa/


 https://github.com/VagnerBellacosa/


Pode me dar uma ajudinha no YouTube?


 https://www.youtube.com/user/vagnerbellacosa

2
24

Comentários (2)

1
Bruno Nascimento

Bruno Nascimento

02/06/2021 19:19

Gostei muito interesante.

0
Vagner Bellacosa

Vagner Bellacosa

13/07/2021 16:05

Obrigado Bruno, valeu meu irmao

Analista Programador dinossauro IBM Mainframe

Brasil