I have a website where I am referencing the CSS/JS in the root directory. I want to create a sub-section of the website under it's own directory. The problem is that I am referencing the
CSS/JS in the main directory and I want to know what the best way to reference the CSS/JS would be for the subdirectory.
If I just use the http address for the files it works, but I think there could be a better way to go about this. Does anyone have any opinion on the matter?
You can use ../ to specify the parent directory when using relative paths. So for example, if your file structure is something like this:
root
index.html
style.css
javascript.js
subdirectory
subpage.html
Then in your subpage.html file, use:
<link rel="stylesheet" href="../style.css">
<script src="../javascript.js"></script>
Related
This question already has answers here:
What does "./" (dot slash) refer to in terms of an HTML file path location?
(12 answers)
Closed 3 years ago.
Given the following project structure:
/root
/static
script.js
page.html
This will 'import' script.js, into the HTML file:
<html>
<head>
<script src="/static/script.js"></script>
</head>
<body>
...
</body>
</html>
this will, as well:
<html>
<head>
<script src="./static/script.js"></script>
</head>
<body>
...
</body>
</html>
I am wondering:
Is one way preferred over the other?
Are there any cases, when / and ./, in she src attribute of <script> will behave differently?
Yes, They both are different.
You are not able to see as the index.html is already in your root directory.
If there is a .html file inside a directory. Then you can see the difference.
./ This gives a relative path from the file you are accessing it
/ This gives an absolute path from the root of your directory
If this is the directory structure
/root
/static
script.js
/page
index.html
Then, you won't be able to use ./ as it won't find script folder in the page folder
So, if you have a complex directory structure use ./ i.e. relative path, and if you have a plain structure / i.e. absolute path would be good. For better practice, the relative path is preferred over an absolute path.
Hope, this answered your question.
Now, I am not super experienced in JavaScript, but I'll let you know what I know.
[...]
<script src="./static/script.js"></script>
[...]
<!--This would reference files in the current folder (where the webpage itself is stored)-->
[...]
<script src="/static/script.js"></script>
[...]
<!--This would reference an absolute path within your webserver, and cannot change dynamically based on from where you load it.-->
Generally speaking, I'd go for ./ when you load it from a file in your current folder (and/or server), whilst doing / seems like an external reference to me, which is also not dynamic. If you happen to move the file (if it was in the same directory as your page), I think JavaScript would also reference the new file instead of complaining about the old one.
I cannot guarantee that any of the info above is correct as I am not a really good JS-Developer, but at least this should help you figure out the syntax a little more.
./ is a relative path or the current directory where your asset will be served.
/ is an absolute path or the root path from where your asset will be served.
./ is a relative path linking to the current directory.
/ is an absolute path linking to the root directory.
You can find more information here.
I have folder hierarchy like this
how to add css and js file in this index.jsp
browser developer tools
If you want to add css and js files inside one of the jsp files, add these inside head
For CSS
<link rel="stylesheet" href="../css/filename.css">
For JS
<script src="../js/filename.js"></script>
Here .. represents the directory above the jsp (one level up) then /js or /css will goto respective directory.
It all depends on the paths they will have from the browser's perspective. If the browser sees the hierarchy you've shown, then from any of the .jsp files in your jsp directory, you'd use
<link rel="stylesheet" href="../css/filename.css">
The .. goes up one level (from jsp to your root), and then /css goes into the css directory.
You could use root-relative URL like /css/filename.css, but that will break if you put this whole thing somewhere other than the root on the server.
See this answer for the correct way to organise your files in a Tomcat application.
The path to your CSS files should be:
<link rel="stylesheet" type="text/css" href="./css/styles.css" />
I placed my files as
main
index.html
files
service-worker.js
index.js
mycss.css
where I wants to cache the index.js and mycss.css file which is not working. And due to some constraint, I can't put the service-worker.js in parallel to index.html page
Another approach of solving the problem is to set the Service-Worker-Allowed HTTP response header if the scope of service-worker.js is different from the scope of files it wants to work with. This idea helps in applications where URL rewriting is done or the context path for files is not similar to the actual directory structure.
Absolutely yes. Moreover, it is considered to be a standard practice to place similar/related files in their respective folder.
So, in your index.html you could do something like this:
<body>
<script src="/files/mycss.css"></script>
<script src="/files/index.js"></script>
<script src="/files/service-worker.js"></script>
</body>
Yes you can put your files in different folders.
When you want to "connect" your css to the html the path is:
src="files/mycss.css"
Hope this will help you.
My Javascript wont activate on dreamweaver. I attached it and everything but when i try to call it with script tags it does not appear on my live preview. i have it attached by this code
<script src="file:///C:/Users/Matthew/Desktop/Untitled-2.js" type="text/script"></script>
If someone could please help that would be awesome! :D
Live mode runs Your code in some virtual webserver and it cannot get local js file. Since browser may block resource from sharing (CORS). Think about putting js file to relative to html file and defining relative url to js file. Create js folder near to html file and put js file there and in Your html file define src="js/Untitled-2.js" – num8er 12 mins ago
Thanks Num8er
In my opinion, it is best practice to keep all files relative to the project. This means setting up a project folder and keeping files organised in sub-folders.
Consider this project structure:
Project folder
CSS folder
style.css
Javascript folder
script.js
Images folder
image.jpg
index.html
The sub-folders are directly children of the project folder, and inside each folder is the corresponding files.
The html file is also a direct child of the project folder (it's not in any other folder).
This means all the related files are relative to the html file.
So in your html file, you can link up these files easier.
<link href="CSS/style.css" rel="stylesheet">
<script src="Javascript/script.js" type="text/javascript"></script>
<img src="Images/image.jpg">
As you can see all the files are linked without a full path, this is called relative linking. Absolute linking is the opposite in which you specify the full path, such like you are doing at the moment:
<script src="file:///C:/Users/Matthew/Desktop/Untitled-2.js" type="text/script"></script>
This is good in certain places, however you should always try to aim for relative linking. If you follow this, you shouldn't have any more problems.
I am testing my website code, and I have the following folders in my working directory:
css
js
img
html (contains index.html)
When I try to bring up my website locally (the "index.html" inside of the html folder), none of the css or js files were found (404 Error).
However, before I made an html folder everything was linked together fine, and my file setup looked like this:
css
js
img
index.html
Also, when I created an "html" folder and put "index.html" inside of it, I changed the html code so that it would refer to the other files appropriately (from what I've seen on various websites):
<link href="../css/my_styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../js/touch_functionality.js"></script>
<img src="../img/display_photo.jpg" alt="Display Photo">
Additional Information:
I am using a local Apache server to access the "index.html" file, and I have set the DocumentRoot for the VirtualHost I made to the "/html" folder.
Additionally, I thought this may have been a permissions error, but I downloaded Cygwin and I used "chmod 711" on all of the folders in my working directory and I have used "chmod 644" on the "index.html" file inside of the html folder, but the files still wouldn't be found.
I've done my research on this for quite a few hours, but unfortunately I haven't come across a solution for this yet. Any help would be much appreciated, thank you.
Update
If I change the DocumentRoot to where all of my working space directory (instead of html) and place a .php file that simply contains the following line of code:
<?php require("html/index.html"); ?>
where my folders reside so my working directory looking like this:
-css
-js
-img
-html (contains index.html)
-index.php
Everything will work correctly. However, I would have to believe there is a way so that I don't have to do this "work-around" method. Any insight would be incredibly helpful, thanks again.
The reason being is that the web server only allows one to view files in the html directory or below.
Otherwise it will somebody to access any part of your file system.
Would you like that?
To fix this go back to the configuration that works,