I am creating a website on localhost. I want to make all of link resources in my website to relative path ( I mean only internal resources).
website is located in
http://localhost/mywebsite
I read this useful question Absolute vs relative URLs.
I found differences between /images/example.png and images/example.png
Link To Image
Above relative path should return ROOT_DOCUMENT/images/example.png because of / at first of url. As ROOT_DOCUMENT is something like /wamp/www/mywebsite
But when I tested it, it only return /wamp/www/images/example.png
And I should add manually my website folder /mywebsite/images/example.png to relative path.
Link To Image
And it is not useful because of changing the name of mywebsite. So:
Why does this problem occur?
How can I resolve this problem?
You say your website is in http://localhost/mywebsite, and let's say that your image is inside a subfolder named pictures/:
Absolute path
If you use an absolute path, / would point to the root of the site, not the root of the document: localhost in your case. That's why you need to specify your document's folder in order to access the pictures folder:
"/mywebsite/pictures/picture.png"
And it would be the same as:
"http://localhost/mywebsite/pictures/picture.png"
Relative path
A relative path is always relative to the root of the document, so if your html is at the same level of the directory, you'd need to start the path directly with your picture's directory name:
"pictures/picture.png"
But there are other perks with relative paths:
dot-slash (./)
Dot (.) points to the same directory and the slash (/) gives access to it:
So this:
"pictures/picture.png"
Would be the same as this:
"./pictures/picture.png"
Double-dot-slash (../)
In this case, a double dot (..) points to the upper directory and likewise, the slash (/) gives you access to it. So if you wanted to access a picture that is on a directory one level above of the current directory your document is, your URL would look like this:
"../picture.png"
You can play around with them as much as you want, a little example would be this:
Let's say you're on directory A, and you want to access directory X.
- root
|- a
|- A
|- b
|- x
|- X
Your URL would look either:
Absolute path
"/x/X/picture.png"
Or:
Relative path
"./../x/X/picture.png"
The easiest way to solve this in pure HTML is to use the <base href="…"> element like so:
<base href="http://localhost/mywebsite/" />
Then all of the URLs in your HTML can just be this:
Link To Image
Just change the <base href="…"> to match your server. The rest of the HTML paths will just fall in line and will be appended to that.
The relative pathing is based on the document level of the client side i.e. the URL level of the document as seen in the browser.
If the URL of your website is: http://www.example.com/mywebsite/ then starting at the root level starts above the "mywebsite" folder path.
Related
I have a problem in my html pages
when I use "root-relative" paths it isn't make the path correctly
instead of direct to the folder of index.html it direct to the father folder.
Example:
My index.html is: Websites/MySite/index.html
when I make a link in index.html to "/" it direct me to Websites/
what is the problem?
Root is the first folder that your work begins. Your site root is actually Websites/. So it acts correct. Maybe some hosts consider the folder that your html file is on it as root. If you want to have no problem with this, you should make all relative links work with your main root.
There is a php function that gives your current html file path. You can use it before your links. like:
<?php php_function ?>/mylink
The root path is a setting in the server config. If you want to reach something relative to your index.html than you would use ./ and ../
You can go back with ../ and stay in the directory with ./ where the file you are using is in.
For example if you want to reach the file
Websites/someFile.txt
from your index.html in
Websites/MySite/index.html
you would have to use the relative path
../someFile.txt
and if you wanted to use the file
Websites/MySite/subDirectory/some.css
from the same index.html you would write
./subDirectory/some.css
I hope that helps, if not feel free to ask, or make you question more precise.
And if you want to read more about relative url's you can visit the mozilla develop network ("Going back in the directory tree")
I use PhpStorm 9 and I have project structure similar to this:
src/
elements/
element-alfa/
element-alfa.html
element-alfa.scss
templates/
application.html
index.html
I use Polymer so I have to import the elements when I use them. I also use AngularJS, which direct the app after load to application.html, but in fact paths are like from the index.html file.
<link rel="import" href="elements/element-alfa/element-alfa.html">
I have set the src/ directory as RESOURCES ROOT so it does not tinged the background color under href path but if I use auto hint (CTRL + 2x SPACE), it returns the path relative to the file application.html, not relative to the index.html (or my resources root) as I wanted to.
How to achieve it?
Currently, the only way to do it is to type/autocomplete each folder one by one sequentially: first elements, then element-alfa, and then autocomplete filename. I created a feature request about this: https://youtrack.jetbrains.com/issue/WEB-30888
I have a hierarchy like:
index.html
/share/index.html
/img/myImage.png
share/index.html is on a sub-domain (http://www.share.foo.com instead of http://www.foo.com).
I would like to access myImage.png from both domains.
So far, I've only been able to find one way to manage this. From index.html I reference the image as:
img/myImage.png
and from /share/index.html I reference the image as:
http://www.foo.com/img/myImage.png
This doesn't feel correct because I shouldn't have to be that explicit with my URL. It should probably be somewhat relative to my own path structure.
I'm wondering what the correct fix here is? Should share/index.html be on the same level as index.html? How would naming conventions work for something like that if they're both supposed to be index.html on the same level? Other suggestions?
To access the image from "index.html" you can use the relative path like you are currently using:
img/myImage.png
However, when you are in the /share/ folder you need to go back a folder:
../img/myImage.png
This is of course assuming your /share/ directory is locate within the root html folder (public_html or whatever yours may be called)
You can use
../img/myImage.png
for getting image in subdomain.
You can use multiple ../ to go back any level in the hierarchy
For eg: ../../ will take two levels back from the current level.
There are two ways to accomplish this
Filesystem way
If the server is on an Unix (Linux) based system, create a symbolic link in /share that points to /img.
From a shell:
~$ cd /docroot/share
~$ ln -s ../img img
This will make all contents of /img appear under /share/img as well.
If you do not have direct shell access to your web-host, you can try creating the symbolic link in your local copy of your /share directory and sync it to the server. To create a symbolic link you do not have to have a copy of the location where it points to on your local computer.
If you are on windows, NTFS supports symbolic links as well, but I can not tell you how that would sync to the web server.
Using relative paths lower than your doc_root (../img/myImage.png) to point to your image from your HTML document, is invalid in this case. It would resolve to: http://www.share.foo.org/../img/myImage.png
<base> tag way
The <base> tag sets the base address where to look for linked content. Downside is: It will form the base for al relative linked content. (Style sheets, images and links). So page linked as <a href=about.hmtl> will point to <base>/about.html.
<head>
<base href="http://www.foo.com/" target="_blank">
</head>
<body>
<img src="img/myImage.png">
</body>
Is there a way to direct a url such as an image location to your root folder and then into a directory from there.
Currently i am using "../" to go back folders but this gets annoying if you have a complex directory tree.
Thanks
It is just a single character:
/
For example:
/image.jpg
whatever page you put it in, it refers to the same file, root_folder/image.jpg
You can also use <base> to set the base url all urls should be relative to. In general using an absolute path with / is probably prefereable, but <base> may be useful if you have the "root" of your page not on the root of the domain. I.E. example.com/mysite/index.html vs. example.com
https://developer.mozilla.org/en-US/docs/HTML/Element/base
You can just use full Url, like:
http://domain.com/file_in_root_folder.jpg
or absolute paths
/file_in_root_folder.jpg
you can use static addressing that start with http:// and for relational addressing you can use your address with / for example: /foo/bar.jpg
I had created one HTML page for my experiance. In this i had use the background image like c:\documents ans settings.....\leftline.png.
But i don't know how to add images from a common directory. (like background-image= ('./images/leftline.png'). how i can do like this?
The second line you have is a relative address, relative to the "thing" that is calling it.
So, say you have a webpage called "index.html" and it lives in
C:\My Documents\WebPages\My Page. You might also have C:\My Documents\WebPages\My Page\images\leftline.png
Now, rather than type in "C:\My Documents\WebPages\My Page\images\leftline.png" we can simply use "images\leftline.png" in our index.html page. Why? Well, check the locations:
C:\My Documents\WebPages\My Page\images\leftline.png
C:\My Documents\WebPages\My Page\index.html
RELATIVE to index.html, leftline is only one directory away, so you can address relatively.
You have to save the images inside the directory of your website and then you can acess these images using relative path.
If your page for example Default.htm lies inside the virtual directory WebSite1 then you can create a folder for images say 'Images' and can point to an image inside the 'Images' directory by using 'Images/image1.jpg'
If from your html file you have to traverse a folder up then you can use '../Images/image1.jpg'
You can also give an absolute path for the image like http://.....
Put the files in a directory that is in the same folder the html file is in. name the folder images.
You need to have this image inside your website.
And then the trick is to work out what URL to use (that's apparently your problem).
When you use an HTML image tag () in you page, then the browser sees the URL you specify. If that URL is relative (does not start with "http://" or a "/"), then it is sees as relative to the URL of the page. So usually you will need some "../" to go back to the root of the site and then back up again to the image.
A URL that is specified inside a .css file is relative to that css file.
If you use asp.net and want to specify the image-url in a server tag ( for instance), then you can use a "~" as first character to specify the "root of the site". This will work only if that URL is processed by the server as a property of some server control.