Difference between "../" and "~/" relative path - html

I am storing style sheets in {root}/styles while images in {root}/images for a website.
what is difference between ../ and ~/. ?

../ references the parent directory.
~/ has no special meaning in standard URLs. It does have special meaning in
ASP.NET where it references the root of the application
UNIX shells where it references the current user's home directory

../ is relative to the current path of the file.
~/ is relative to the root of the application (in ASP.NET).

../ goes up one dir from the current dir.
~/ goes to the dir where you originally came from (not usable in html).

Depends on the framework you are working on.If you have ASP.NET context ~/with ResolveUrl refers to the root level directory, ignoring the sub directories as well.
In CSS we navigate to the previous directories using ../. If you use ../../ you navigate to two steps back and so on.If you use ./, you can reach to the root

Related

Root directory when linking css file to html file

While learning about paths I found out that "/" takes you to the root directory. I made .html and .css files in the same directory to test how it behaves for different paths. When linking the css file, href = "app.css" and href = "./app.css" both work fine but when I try href = "/app.css" it doesn't link. I know "/" is suposed to take you to the root directory and from what I understand the directory of the html file is the root directory. So why isn't the css file linking properly?
/ means the root of the current drive
./ means the current directory
../ means the parent of the current directory
No need to add the "/" or "./" because your app.css file is in your current directory.

./ and ../ directory differences

I know this question will get so many downvotes and will be marked as a duplicate.
The problem is I searched a lot about that question and never got a satisfying answer.
When working with sources in HTML and we want to get an image from the same folder of the HTML file we type the image name directly. If it's inside a folder which is in the same place as the HTML file is, we type the folder name then image, and so on....
If the image is in a folder which contains another folder in which the HTML file exists, so we want to get one step back. We type ../ which means go one step back then the image name.
When I started learning node and how to use modules, modules which were in the same folder as the node file is, must be imported using ./ which was explained as 'in the same folder', while when we import modules like 'fs' and 'events' they don't need a ./
Can someone explain why we don't use ./ in html files while they are used sometimes in node and sometimes no?!
I want to explain it because the node default import setting.
like 'fs' and 'events', these library was installed with node installed, and was included by default. And these will be stored in system directory. Just like <stdio.h> for c, fs from python. It's the default library for the corresponding language.
But sometimes you write you own libraries wanted to be import by other node file, you should import it by using relative path...Because if you don't write './', it will default search the system file directory where is stored 'fs', 'http' and so on, node will not find your libraries.
Before we start ./ and ../ notation is used to refer files relatively.
Why we sometimes don't use ./ in node?
All the modules we install in NodeJS are in the folder node modules. Whenever you require a module require('fs') or require('3rdparty'). Node exactly knows where to look for the module as it is installed as a folder in local node_modules or global node_modules. And then it loads the index.js and then so on..
When to use ./ in node?
./ is a way(Relative way) to refer files in the file system. If you have a script which is part of the file system and not as part of a node_module, then you use './' or '../' notation based on your file location
Why we don't use ./ in HTML files?
As said by #sami, you can use either ./ or not. It works in both ways. I am accustomed to ./ when I work. It's more of personal opinion.
Hope this helps.

How to use logic path in web site

I have a website:
www.mydomain.com/panel/abcde.html
I don't remember the difference between ./ and ../
./ is used to return in the first level?
Instead ../ is used to simulate all domain?
.../ exists?
I believe it is like this :
/ = root of the currently location
./ = current directory
../ = parent of current directory
Reference could be found here
/ is the root folder of the filesystem.
./ usually denotes the current folder that your program or script is in, usually the same one with the file you run.
../ denotes the folder above the current one.
.../ Does not exist. If you type that on terminal, it will throw error No such file or directory

Html relative paths using period

I'm confused as to when the following are used and what they mean, for example in the src attribute of an img tag.
I know / means 'current directory' and ../ means 'up one directory'
. Current Directory? &lta href="." /&gt
./ Current Directory &ltimg src="./image.png" /&gt
/ Root directory &ltimg src="/image.png" /&gt
../ Up one directory &ltimg src="../image.png" /&gt
What is the difference between ./image.png and /image.png
Updated: / means root directory of the site
/ means starting from the root directory. Whereas ./ is the current directory, though I'm not sure there's any need for it (unless you're planning on appending to a PATH in Linux systems... happy to be wrong about that one).
./image.png will grab image.png relative to your current location. Calling ./image.png on domain.tld/site/page.html will look for the image at domain.tld/site/image.png
/image.png will look for the image in the root of your site. domain.tld/image.png
You could also use things like ../images/image.png. If this was used on domain.tld/site/page.html, the browser would load the image from domain.tld/images/image.png
The / means the root directory. Use . For the current directory.

Subdomains and Folders

Just started a site and I have an /img directory on the main domain. I would like to set up a subdomain(where the file folder is just another one in the main directory) that is able to use the /img folder but it doesn't work.
The /img and /subdomain folders are on the same level, so to display images in the main domain I type: <img src="img/image.jpg">
and for the /subdomain I type: <img src="../img/image.jpg">
and I get a 404 error for the site: http://subdomain.example.com/img/image.jpg
As you can see, I want it to be linking to http://www.example.com/img/image.jpg
Can anyone tell me how to achieve this? I would prefer not to link images to their internet directory (i.e. http://www...) because I would like to modify the sites on my computer and upload them via ftp.
I'm sure it's just something that I am messing up or don't completely understand. Thanks in advance!
Relative paths are always relative to a URI. If you have a page at http://subdomain.example.com/ containing a link to ../img/image.jpg, the web server translates it into a link to http://subdomain.example.com/../img/image.jpg. Obviously the web server can't serve anything above it's root directory (that's the whole point of having a root).
Your webserver is configured to only serve content in the /subdomain directory, but obviously /img is not inside that directory, and can't thus be served. What you need to do is configure your webserver to look in /img (the directory on your filesystem) instead of /subdomain/img when it gets an request for any content at http://subdomain.example.com/img/
With Apache this can be done with mod_alias.
Summary: Use mod_alias to map requests to http://subdomain.example.com/img/ to the directory /img.