I have a static html website in a folder on Windows XP. If I open the file directly from its location, the page loads in a browser, but none of the relative links work. They all want to be relative to localhost, not the directory they're in.
I can drop the project in IIS and it works fine, but I'd like to be able to skip that step and just browse the project without needing a server.
But my question is simply this: is there something I can do so I can view the website locally, through a browser, without a server?
Thanks.
<base> Defines the base URL or target for all relative links.
It goes in the <head> tag.
It can also be useful for developers who build websites in one location (dev) that will ultimately be placed in another location (prod).
<base href="http://myfolder/test/">
There is some discussion -- and some more examples for you -- in this SO question.
Related
I was making a new path for pages on my site and was trying to figure out how to path to my stylesheet and images cleanly. Here's an element that shows my problem:
<link rel="stylesheet" href="/src/styles.css">
My local copy of my site is hosted here at "E:/Documents/WEBSITE", the local page I'm trying to link the stylesheet from is "file:///E:/Documents/WEBSITE/things/weapons.html", and the stylesheet is at "E:/Documents/WEBSITE/src/styles.css". I have the local site open on Firefox and I am using VSC to code. When I follow the href path in VSC, it brings me to the correct stylesheet. When I upload a version of the site that has the same path, it works correctly.
I have the local site open on Firefox and I am using VSC to code. When I follow the href path in VSC, it brings me to the correct stylesheet.
I've looked over the code and made sure it would(and does) work otherwise. Like I said, it works when on the live site.
I've placed dummy "src" folders with "styles.css" in them on my base E drive, my Documents folder, and even in the "things" folder itself. If the href were pulling from any one of these, there would be an obvious change to the local site, but none of them are pulled from with that path.
When I upload a version of the site that has the same path, it works correctly. The same happens with some elements that I tried this with the src on. It simply will not work locally. The only other thing I can possibly think of is that it has a problem with the "file://" at the beginning, but I can't imagine how I would troubleshoot or avoid that. I get no errors logged.
I really can't include a reproducible example of code, but what I've done that works locally and on a live site:
<link rel="stylesheet" href="../src/styles.css">
and to reiterate, this doesn't work locally, but it works on a live site:
<link rel="stylesheet" href="/src/styles.css">
And just to clarify at the end here, the path is working when the site is live, but not locally. Not the other way around.
href="/src/styles.css" is an absolute path, not a relative one.
From file:///E:/Documents/WEBSITE/things/weapons.html it maps to something like file:///E:/src/styles.css (I think Windows file paths preserve the drive, but I'm not certain).
The browser has no way of knowing that you want file:///E:/Documents/WEBSITE/ to be the root directory of the site. The root is determined by stripping all the path information off the URL, not just parts of the path.
Absolute paths are, generally, not suitable for links used on a local file system.
Use an HTTP server. There are many free ones you can use for testing. VS Code has an extension called Live Server that makes it easy to run one.
All,
I did a bit of research but haven't found an exact thread or resolution to this issue.
I am using express in this webapp, Chrome Version 60.0.3112.113, and Win 10 Version 1703.
I am currently developing a site where I want to use a hamburger svg for mobile navigation. This is how the html sits for the "topbar"
<div id="topbar">
<img src="../images/hamburger.svg" alt="ham">
</div>
And here is the file structure:
https://puu.sh/xxDih/c842297b54.png
According to the structure, I should only need to do ../images/hamburger.svg, but when I do that, it comes up with a 404 error in the waterfall. I have run into this issue multiple times doing any sort of HTML sourcing into parent directories, but in JS files it works fine.
I'm not exactly sure what the issue is.
For the express server，every uri are processed by the express contains resource url and request url.
Request url(api) is refered to your express api config
resource(image, js, css, html...) is relative to your static server's root directory which was defined by using express.static(root_path).
That's what I want to say.
I noticed that images folder, node_modules folder, and pages folder are all in the same directory, and css is under the pages folder.
"../images/hamburger.svg" is the correct relative path from the pages folder, but being (big red flag) the node_modules is at "../node_modules/" I'm thinking that the server is serving from /pages/ folder, the servers root directory. meaning anything above the /pages/ folder will not be shared.
Clearly you do not want to share out ../../../windows/system32/ or the user documents etc. To prevent sharing those the highest directory you can access from the html page through a browser is the server folder being used. I'm thinking /pages/home.html is localhost/home.html and localhost/css/ is your css directory.
Programs running on the server can access files above the served directory, but the browser can not. "/node_modules/" should be outside of the servers root directory.
I realized this is an issue with express itself.
If (in this case) you have your index.html as express.static('./pages'), then it can't see anything above pages and considers pages as the working directory.
Me, coming from React (which stupidly was the first thing I learned even before basic JS), wants to put all the pages in one folder, which I think would make sense.
The workaround I did, which may not be optimal, was by putting index.html as a sibling to pages, css, and images in the src folder. Then in index.html, it has a meta tag as follows: <meta http-equiv="refresh" content="0; url=./pages/home.html" /> to redirect to the home.html page.
Again, this may not be optimal, but for a kinda OCD guy like myself this makes sense.
Update:
What we ended up doing is to have index.html be a static page, and then load the individual pages in an iframe. This website is mainly for information and has no database (yet), so there won't be much to process. Here's the new file structure that works.
http://puu.sh/xy5Dw/4dbc72ec06.png
src is now our working directory (express.static('./src')) and everything is detailed within there.
Once we do include a database, it will at most be 10 values in the server and will be using very basic requests, nothing crasy.
Just wondering how/why this works, when I'm making a simple html file and linking in some css, then dragging my html file into the browser, no static web server is needed for me to view the file.
Why is that so..
I'm looking at my browser's network tab, and no request is made for the css file, and my browser still displays it perfectly..
Is there a way to do without a static file server on the web for html, css, js files, like when dragging and dropping a file into a browser?
Just going back and requestionning basics here..
Thanks in advance!
Because the link to your CSS file is relative, and your CSS file is accessible locally. Browsers can be used to access local files, not just files on the Internet.
When working with links, you may see just the name of the file referenced, as such:
Link
This is known as a relative link. file.html is relative to wherever the document is that is linking to it. In this case, the two files would be in the same folder.
There's a second type of link, known as an absolute URL, where the full path is specified.
Consider a typical absolute website link:
Link
With a local file, this would essentially be:
Link
The file protocol can be used to access local files.
Considering both the homepage (presumably index.html) and file.html would live in the same folder on both a web server and your local machine, Link would work for either scenario. In fact, with a relative link, the location of the second file is automatically determined based on the location of the first file. In my example, index.html would live at file://[YOUR WEBSITE]/index.html, so your browser is smart enough to known to look in file://[YOUR WEBSITE]/ when searching for any relative URLs.
Note that the same scenario applies to any other file! <link> and <script> tags will look for files in the exact same way -- that includes your stylesheet :)
Hope this helps!
Sounds like you are new to HTML and web development.
It all has to do with relative versus absolute file paths.
Check out these articles and have fun coding! Always remember that Google is your friend, improve your search-foo and you will not have to ask questions like this.
God speed.
http://www.geeksengine.com/article/absolute-relative-path.html
http://www.coffeecup.com/help/articles/absolute-vs-relative-pathslinks/
How to properly reference local resources in HTML?
I am trying to learn how to set up a html page on a server, which i have done but an index page appears, I do not want this page to appear i would rather my home page to appear.
I am only learning how to do this so i have used a free web host.
web address: http://testingmyfreewebsite.comxa.com/
My file manager looks like this
The subPages and Css folders were created by me and they contain the css and other pages to my website.
i would really like to know how to remove the index page i am open to many methods.
There are three commonly used default page names that you can use on most web servers:
index.html
index.htm
default.htm (on some Windows servers)
It's a good idea to stick with index.html or index.htm on most servers, as default.htm is most often used on Windows servers, and isn't as common as it used to be.
If you're going to put other pages inside of folders (or directories) each folder should have an index.html inside of it as well if you're relying on the url to direct the user instead of hard coding it in.
I have a huge problem: Everytime I want to include a file in any kind of web project it does not work because for some reason all paths I put into the (for example) html file as a link or script tag don't load because it seams like the relative paths are not working. If I open the html as a file in chrome, it's actually looking for the file in the root directory of the drive and not in the folder of the html. The same error appears if I try to use any kind of local webserver (real hosted server works). I also downloaded any kind of demo projects and installed a few yeoman generators and the all got the same problem: Chrome says that it cannot find the file or it's just an empty file.
That's the reason why I think the problem has to do with my own pc. Any ideas what could cause this issue?
If your URLs for includes start with /, they will go to the absolute path. When testing locally from your filesystem, this is the root drive (such as C:\). If you want relative path, drop the /.
Also, check for the following tag in your HTML: <base href...> See http://w3schools.com/tags/tag_base.asp. Make sure it's not set to / if you're testing locally.
This <base> tag helps shorten potentially lengthy relative paths. For example:
<script src="resources/production/script.js"></script>
If you add <base href="resources/production/"> to the <head> element, you can shorten your script tag to src="script.js"
Beware ALL relative paths will have their root at resources/production/ if you define it in your <base> tag