Base URL that works for html in files and on website?

Question

Like many developers I put my images in /images, css in /css, and js in /js. This way, no matter what the URL/directory structure, the site can simply reference /css/style.css or /js/jquery.

Problem is when I try opening the html from a directory, the paths are screwed up. It assumes / is C:/

I'd like to be able to preview html files in a directory before putting them into a CMS on the web, but don't know how. Can somehow be used to handle this with minimal hassle?

Answer 1

By putting a slash in front of your path, you're making it an absolute path. You should use absolute paths as rarely as possible - instead, use relative paths.

Say you have a directory structure like this:

/website
    /html
        /css
             style.css
        test.html
        script.js
    /newcss
        newstyle.css

If you're in test.html and you need to refer to style.css, the relative path would be css/style.css. If you need to refer to script.js, the relative path would be just script.js. If you need to refer to newstyle.css, the relative path would be ../newcss/newstyle.css (the .. means "go up one directory level").

This has the benefit of making your code portable - you could copy the website folder anywhere you wanted, on any system, even to your websever, and it would work. Both *nix and Windows systems obey these rules.

Answer 2

You could consider setting up a local server like XAMPP. That way, your files will be previewable on http://127.0.0.1 and your absolute paths can be made to work just like on the web. XAMPP comes with a default htdocs directory into which you would put your file structure.

It may take some time of setting it up and getting into it, though.

Answer 3

Using root-relative links is great but, as you see, can cause issues when working locally.

Ideally, you'd set up a local web server on your machine and preview that way rather than just using the file system.