CODEWITHSUNDEEP
javascriptjqueryhtmlcss
david83
david83

Reputation: 109

how to set a folder as a root path when running html without a server

I am going to share a lesson on HTML format for students who will run it on their local computers. Lets say, the student copied the study folder on desktop. and executed it. The address bar looks like this.

file:///C:/Users/Student1/Desktop/study/reading/step3/001.html

I have style.css file

<link rel="Stylesheet" href="study/css/style.css" />

when I run the file I get this error

001.html:9 GET file:///C:/Users/David/Desktop/study/reading/step3/css/style.css net::ERR_FILE_NOT_FOUND

when I try to load the css from root path like this 

<link rel="Stylesheet" href="/study/css/style.css" />

I get this error

001.html:9 GET file:///C:/study/css/style.css net::ERR_FILE_NOT_FOUND

There are more than 400 html files and 80 folders. It would take more than 3 hours to specify the .css and .js files for each file in each folder. I want to set a root path for each file no matter in what folder they are. So, basically after setting the folder study as a root path, if the file is loaded from

d:\downloads\learn\english\ielts\study\academic\reading\practice_test\003.html

using <link rel="Stylesheet" href="/study/css/style.css" /> css should be loaded from

d:\downloads\learn\english\ielts\study\css\

and if the file is loaded from

c:\Users\Student1\Desktop\study\academic\reading\practice_test\003.html

using <link rel="Stylesheet" href="/study/css/style.css" /> css should be loaded from

c:\Users\Student1\Desktop\study\css\

if I would appreciate any feedback on how to set the study folder as a root path.

Upvotes: 3

Views: 2057

Answers (3)

traktor
traktor

Reputation: 19301

The problem seems to have arisen because the files were written/tested using a server where links like <link rel="stylesheet" href="/css/style.css" /> worked because they came from a server. Technically that kind of link is a relative URL with an absolute path (it is not an absolute URL). The problem arises on the students' machines because they are not using a server.

Potential solutions include

  1. Rewrite the reading material so it does not use absolute paths. A common technique for doing this is to place resource files for images, scripts, css etc. in subfolders of the HTML files. But this would involve major changes to the existing structure of the HTML package download.

  2. An alternative would be to have students run a server on their machine, such as a static express server running on node.js. Students would have to download the HTML files to a specific folder on their machine and access the material using a localhost address. Whilst somewhat more complicated than downloading a zipped ebook, I am assuming these are IT students who can be taught how to install a local server, but perhaps not!

Upvotes: 0

Ayo K
Ayo K

Reputation: 1774

I'm assuming 001.html is in study folder and you have a folder called css in that study folder so then your path should be:

<link rel="stylesheet" href="css/style.css" />

So HTML is in study/reading/step3/ and the CSS is below that in study/css/

so your link will be 

<link rel="stylesheet" href="../../css/style.css" />

If you want to use a single path no matter what you'll have to run your files from a local server on your machine such as wamp or Xampp that way if your root folder is study you can access your css folder anywhere within that folder by:

<link rel="stylesheet" href="/css/style.css" />

Upvotes: 3

Rory McCrossan
Rory McCrossan

Reputation: 337550

You need to use ../ to go up a directory from the current when providing the path. Try this:

<link rel="stylesheet" href="../../study/css/style.css" />

Upvotes: 3

Related Questions