One of the articles I was reading didn't include the ./ when linking to a local file.
Is the ./ necessary when linking to local files?
1 Like
necessary? No
should you use it? Not perse, but you could argue its more explicit to look for the file in the current directory.
19 Likes
Do we need the dot - ./about.html
Can we use /about.html without the dot.
5 Likes
The dot represent the current directory, it can be without but then it becomes about.html
/about.html would mean looking in the root directory.
26 Likes
What if I save these html files in different folder??
2 Likes
then you would have to change the path to something like ./path/to/file.html
11 Likes
Does it matter if you search in the route directory? I tried it without ./ and used / and nothing different happened.
On our local machine we need to be mindful of where our code is located with respect to the root directory, or volume root, C:\. For instance,
/ => C:\
On a web server, / is the site root, as in where the home page is located. A web server is configured to domain roots and is able to map its drive to serve the sites it hosts.
Within a site, / is the same as, http://www.domain.tld. Say we have the domain, example.com, then we can, within our site’s pages refer to the home page with that simple forward slash. It would be the same thing to the server as,
http://www.example.com/index.html
The absolute forward slash is the reference to the site root. Any folders we have there can be got to directly…
/css/
/js/
/images/
/pdf/
etcetera.
Now as eloquent as that is, we don’t have the same luxury on our local machine. In most cases our content is nicely tucked away in user folders. Consider if we were to have an IDE that gave us user content space within its own file structure. Where would that folder be relative to the volume root? A long ways off, to be sure. There will be several folder layers to traverse through to find your code. The IDE is probably able to map the site root for your local project in an effort to keep us from traversing the outward tree in which it is contained.
Toss the IDE, for now. How do we emulate web server behavior in our local site project? Answer: relative path addressing.
absolute path => begins at site root up to resource
relative path => traverses backward from request
Bottom line, use relative path and memorize the site architecture so you instantly know how many levels to jump back to access folders from where that resource is located in the site volume.
site/
+ css/
+ level1/
+ level2/
+ level3/
On the site root, the path to the css folder will be,
href="css/style.css"
On level1 it will be,
href="../css/style.css"
On level2 it will be,
href="../../css/style.css"
On level3 it will be,
href="../../../css/style.css"
It may seem an inconvenience but sure saves us a bother on our local machine if we are working directly with HTML, a site project, and using a conventional text editor that can only launch in a browser, rather an IDE mapped environment.
Don’t rush out and buy an expensive IDE until you are prepared to make a living at this craft. You really don’t need it to get an adequate learning experience. IDEs are about work flow and when that becomes an actual concern, you will be fully able to transition into that environment if you grind your way through this local machine site project model.
When a person and a computer are in the same room, there is only one brain present. Computers are dumb. Sure they may be powerful, but they only know how to do what we tell them. Document traversal is a fundamental process of a disk operating system. Explore the DOS in terms of history and command line and everything said above is reduced to its real simplicity.
87 Likes
Thank you so much for responding!
4 Likes
Indeed the dot represents the current folder>> ./about.html
I think it’s good to use it, in case you want to link it to a file above your current folder, then you need two dots >> …/about.html (by using the two dots you tell the browser to move up one folder above your current folder).
5 Likes
What is the difference between
- about.html
- /about.html
- ./about.html
- …/about.html ?
1 Like
about.html and ./about.html are the same, although the latter is more explicit. The first on you rely on the fact that the program uses the CWD (current working directory) by default
/about.html will look for about.html in the root directory
where as . is hard-link to the current directory, .. is a hard-link for the parent directory.
2 Likes
So when I have a website, and I refer to “/about.html”, it may lead to “www.mysite.com/about.html” instead of “www.mysite.com/folder/subfolder/about.html”?
Not may, but will. It is an absolute address for local site navigation.
2 Likes
@mtf I always love to read your responses. Very enlightening and confusing at the same time… raising even more questions. Thank you.
8 Likes
@core2914185074 hahaha! I swear! I always look forward to his comments. But they can be confusing at the same lol.
1 Like
By that logic, does adding more dots mean moving up directories or does it stop at 2? For example, would .../about.html mean the program is going to read a file from parent’s parent directory?
. and .. are hard-links (at least, in unix) to current directory (.) and parent directory (..)
... would require the use of aliases
1 Like
If you want to move to the parent of the parent directory, you would first have to move up to the parent directory, and then to the parent of the parent directory, like so:
../../
4 Likes
I starting learning html and CSS recently and I started my very first project and created a website with multiple web pages. My question is I have used href=“index.html” and it’s working just fine. I tried to do it with (./) or with (/) and changed the file directory from the root folder to a sub folder inside the root folder. The only way I can get it to work is if I make the path for it like so, href=“newfolder/index.html” Can someone please explain to me why I could not get it to work? Thank you!
1 Like