Path to access folders of HTML, CSS, PHP and more

When we place our site on a server, it is essential to know how to manage the path to access folders, that’s what you’ll learn in this article.

Hey you all programmers, are you ok? Let’s learn something new!

When we insert CSS and JS files, we need to access the system directories, with “..” or “./”

And what do these symbols mean?

Basically it is a way that in Linux is used to access files and folders that are not in the project file itself.

So we need to change directory via these symbols

Let’s describe each of them:

• ../ – With this symbol we can go back a directory, that is, if you are in a directory x inside y, with .. you would go back to y, being able to access the files that are from there;
• ./ – Accessing files this way you want to access the files that are in the current directory, that is, you have access to all the files that are in the folder of this file;
• / – Using the slash symbol you are going to the root of the project, that is, where you will have access to all folders/directories and files of the same;
• ../folder1 – With this instruction, you are going back one directory and accessing folder1;/css/index.css – With this instruction you are accessing the project root, then the CSS files folder and the CSS file called index.css;
• /folder1/folder2 – From the project root, you are accessing folder1 and then folder2;
• ../../ – With this sequence you are going back two folders/directories;

Basically these are the most used sequences/commands when accessing project files and folders

Let’s look at some practical examples:

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

In this example, we go back a folder and access the CSS folder and finally the file we want to link in the project

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

Here we access the CSS file that is a directory above this file that we are editing

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

Here the images folder is in the same directory as the file we edited, so it is only necessary to access it normally without symbols, and access the image

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

Here in the same way, we go back a directory, to access the JS directory and its scripts.js file

Conclusion

In this article we learned how to use the path to access folders

We learn the main symbols or codes, which are used to link or access files