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
Related
I am just beginning HTML and I wanted to know how to use root directory in HTML?
I have a css and js folder in the root directory and I linked it(using relative URL) for the index.html in that directory. But now I have a subdirectory called foo along with the css and js sub-directory's. Now in the foo folder I cannot use relative URL because the css folder is not in that directory.
Do I have to use absolute URL, or is there a way to use /code_for_main_dir/css
Path starting with / means root directory.
<link rel="stylesheet" type="text/css" href="/css/mytheme.css">
More info:
https://www.w3schools.com/html/html_filepaths.asp
As #thesilkworm said,
using ..goes one directory up.
But, using / goes to the root of that web.
so, /css instead of css
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 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.
I have many html files, all named index.html but being in different subdirectories.
These files are created by a software. After these files being created, I want to add a Stylesheet to all of them!
If i use SEARCH:"<head>" and REPLACE:"<head><link rel='stylesheet' href='/style.css'>" it wouldnt work because the files would need relative paths.
Any idea how I could achieve my goal? While Iframes are oldschool they do not use the CSS of the main page i assume.
Other ideas?
You could use an absolute path to your CSS-file. Then it doesn't matter that they're in different paths:
<link href="/styles/site.css" ...
Now every file will look up the styles-folder in the root, and the file site.css in that folder
Just use the absolute path as you mentioned.
And DO NOT open your html files directly in the
file://D:/path/to/your/file/index.html
because the root path '/' means D:/
You should setup a http server to host your pages and open them by visiting like
http://localhost/url/to/your/file/index.html
the root path '/' means
http://localhost/
Or upload them to a server.
In this way the absolute path of your css will work correctly.
Forget the relative paths.
The physical folder structure on my web server is:
inetpub
oo|
oo|_wwwroot
oooooo|
oooooo|_MyApp ----> this is the root folder of my web application
oooooooooo|
oooooooooo|_images
oooooooooo|
oooooooooo|_styles
oooooooooo|
oooooooooo|_pages
I have an html file (test.html) under the pages folder. I want to link to other files (eg. stylesheets and images) via absolute paths. So, I have a line of code similar to this:
<img src="/images/roundbutton.png" />
When the page is rendered, the image is not displayed, as the "/" tells it to look for the image in a folder wwwroot/images.
Is there another way to use absolute paths to refer to the application root, instead of the site root? Or is using relative paths the only other option?
Yes, use the <base> element.