[SOLVED] How to indicate root directory in html while linking external css, js and images?

Question

I have my pages in the following order:

-index.html
-index.js
-logo.jpg
|__discussion
|_discuss.html
|_comment.html

Like this similar structure.
But all the external css files required by the pages are in the root directory.

So, my question is how can I define root directory while linking theese files in my html pages.

The one way I know is to use this syntax:
../../script.js

But this causes problem when I need to move the the pages to different sub-folders.

So, I need the master way to define the resources directly in the root directory (where the index.html page is located ).

Answer 1

Typically, you would do any of the following:

1. For pages served from a web server, start from the root path:

/css/styles.css

... regardless of where the referring file is located.

This will make it super easy to do:

npm install - g http-server

2. For SPA, a single index.html file will refer to a bundled.css file. The pages will be loaded using a client side router. But, you might not be there yet.

3. For server side MVC apps, most will refer to a root path using some convention like

~/css/styles.css.

4. Otherwise, you might need to go old school with maintaining the path references relative to each respective file. yuck

Answer 2

Automate the boring stuff
But seriously, the first alternative shared by David Carroll sounds saner

Answer 3

Ipang Yes, but it would be difficult to manage.
If I need to update the them, I need to update all of them, which is a bit booring.

Answer 4

Kevin ★ how?