I'm having problems setting URLs in a particular situation. I have a Dreamweaver template, that uses the usual relative to domain URLs (e.g. "/images/foo.png"). This works fine on the server, but in the local environment, it has issues, as it thinks the name of the network drive it is on is the domain, rather than the folder it is in on the drive.
So where as it should be "file://networkdrive/localsite/images/foo.png" it's "file://networkdrive/images/foo.png", this is obviously causing broken links, and if I use other relative URLs, such as "../images/foo.png" then I will have to amend the links every time I make a page that drills further down in the site structure.
I did have one solution, creating a mapped drive pointing at that folder, then "Z:/" was the first layer, and it all worked. That was until our communications team needed to see it on their Macs, Macs can't do drive letters as I've found from Googling, so I'm back to the same problem as before.
Any ideas on how I could force the URL to be correct when using "/images/foo.png"? This will save me a lot of headaches when creating pages if it could be done.
Run a local web server, like Nginx, lighttpd, Apache, or Python’s out of your project directory:
python -m http.server # Python 3
python -m SimpleHTTPServer # Python 2
This comes closest to a real environment for development, and it’ll allow you to test things like server-side code and Ajax.
Alternatively, you can use relative URLs everywhere, and one <base> tag per page.
<base href="../">
Don’t.
Related
So I'm trying to access my root directory in HTML but when I use / it is not working. So for example I'm trying to get my navigation css by doing:
<link rel="stylesheet" href="/nav.css">
The weird thing is, it works perfectly fine when I am using VS Code with the live server extension, but I just recently noticed when I run the index.html file alone none of the links starting with the / work. I know this is the issue too, because when I take away the / in the above line, it works perfectly fine again (only for the homepage page in the root directory already).
As Quentin points out, if you're loading the index.html file locally without a server, the root directory will be the root of your file system. If your requirement is for the index.html file to work locally on your professor's machine without a web server, you should use relative paths.
In order to traverse back up your file system from the current file, you can use paths that start with ../
when I run the index.html file alone none of the links starting with the / work
If you are running index.html alone then the links starting with / will be relative to the root of your file system.
The browser doesn't (and can't) know which directory represents the root of your web site project.
Use a web server. Load the data over HTTP.
Try this:
./nav.css
It (I mean, ./) loads files in the same directory of index.html, same as nav.css. With VS Code, I bet ./nav.css should work for the live preview too: using an external HTTP server (such as http-server on Node.js) helps, because it takes the current directory (where index.html is) as the root and you can easily reach /nav.css. Without a live server, the relative path could be reached as I said with ./nav.css (a typical *NIX path) or simply nav.css without slashes on Windows.
As others have indicated then the reason it's not working is because by loading the file directly you are now loading it as a local file rather than a file on website, and thus your URL base (Your /) is now referring to the root of your local file system. Which would likely be C:\ on a windows system or your actual root / on a *nix system.
To actually solve your issue I would suggest one of the following solutions:
Just always run the project over HTTP through a server.
Go through your project and change all of your paths to be relative paths. You might be able to use a find replace in your editor to do this.
Use a <base> tag to specify what the base href of your web page should be.
If you can't use a server and just have a single HTML file then it might be quickest to use fix 3. You can probably get away with using <base href="."> to make the base the current directory of your index.html file which, I suspect, will be a drop in solution to make things work as they did before.
In future best consider this and how you are going to run the file, and what your URLs are going to be relative to. It's a wrinkle that can be easily missed nowadays that the tools we use in development are so good at hiding the details of how websites are actually deployed.
I don't think <base> is a good idea.
It will change the base href in the whole page, which might cause problems when using other links or section navigation.
Lets say I have a directory of .html files, accessible by the app server, and I want to display to users so they can access them with their browser:
/import/tps-reports/index.html
/import/tps-reports/report1.html
/import/tps-reports/report2.html
Is there a way I can expose the tps-reports directory to do this so that a user can access them via:
http://www.example.com/tps-reports/index.html
http://www.example.com/tps-reports/report1.html
Also, keep in mind that index.html may reference the other pages:
Report 1
So those links need to work as well.
Here is a possible answer:
http://docs.oracle.com/cd/E19776-01/820-4496/geqpl/index.html
You can set up an alternate doc root so that certain URI patterns point to different paths.
The examples are only really showing relative paths though...I wonder if its "ok" to use this to reference local file systems.
You'll have to bear with my slightly on this, but please ask if I have left out any pertinent information. I have just taken over a project to create a dashboard for my team. This dashboard has been made using a niche third-party tool that nobody here will have used before. The third party tool auto-generates some code to display "markers" on a webpage. "Markers" being some proprietary code to query a database/apply custom styling etc.
I am trying to display a webpage within the page that has been generated, and I’d like to point this to a local webpage (ie on my C drive). If I pass it an absolute path, then this results in a warning in IE9 as I am mixing data sources - a https website pointing to a http web page. It will display after ignoring the warning, but my userbase is not comfortable enough with computers to ask them to do this.
I believe if I pass it a relative path then it should work, but I can’t find out what directory to base this path off and it doesn’t appear to be anywhere obvious. So, in my current page I have an image with the web address of : https://website:8443/websitereport/images/buttons/locked.gif. What I need to know is where the “websitereport/images” folder is stored so that I can put my webpage in there to give the webpage a relative path. The HTML for this image is :
<img id="dvp_locationbar_lock" class="dvp_imagebutton" style="" dvp_title="ui.tip.lock-page" dvp_image="locationBarPageUnlockedImage" src="/websitereport/images/buttons/unlocked.gif" title="Lock this page">
What are my options for discovering where this folder is stored locally? I am running Apache Tomcat 7.0. It is not displaying if I use the path based off
C:\Program Files (x86)\Apache Software Foundation\Tomcat 7.0\work\Catalina\websitereport
of
\websitereport\page.html
And I cannot find it anywhere obvious in the Apache folder. I have tried :
Searching - no results.
Using PHP to print the current working directory - cannot find out
where to edit the webpage.
Looking at images/information on the existing webpage. They all point
to folders I cannot find.
Inspecting with firebug.
In short, you can't rely on the files being on disk at all - they might be just contained in a *.war file, containing the whole application. Or they might be generated on-the-fly, despite the name sounding like an actual file.
Also, you should not arbitrarily write within a directory even if you find it (my closest guess would be tomcat's webapps/websitereport/ directory if it exists) because nobody will know that something changed during the time since last deployment. So, on the next update of the application, you'll end up overwriting all of your changes again. You typically change the underlying application and redeploy.
You might also find a few references in tomcat's conf/localhost/ directory or even in conf/server.xml, but it all depends on how your server was administered
On my webpages, I typically have something like this:
<link rel='stylesheet' href='/global.css'/>
However, the problem with that is if I am testing my website on my computer, I will store it in a folder like C:/Websites/My Websites/ (for example). The problem is that when I test it locally, /global.css points to C:/global.css, because the root is the C drive.
Is there a way to manually override this root so I can test my webpages locally? If so, how? If not, is there any other way to enable me to test these pages locally?
Not sensibly.
Just install a web server on your development machine (and test via http://localhost). This will also be useful when you need to develop server side code.
try 'global.css' without the slash at the beginning. It will point to the directory you are in at the time.
EDIT: There seems to be some confusion:
you can traverse directories using something like 'cssFile/global.css.'
Also, you can use *../global.css' to traverse upwards.
That should help you find the file you need.
Still, i agree that using a local server is the right way to go.
You need to use relative paths. So if both the HTML and the referenced CSS file live in C:/Websites/My Websites/, you'd use global.css or ./global.css.
Alternatively, you can run a local web server and set its document root to C:/Websites/My Websites/. You can then reference any linked resources (inter-site links and paths to images, CSS and JS) with the absolute path notation, e.g. /global.css, /images/something.png, /scripts/foo/bar.js. The advantage of using absolute paths is that you don't have to change the paths to resources in an HTML file if you move the HTML file up or down in the folder hierarchy.
For quick and easy local testing of static sites (plain HTML/CSS/JavaScript), I'd recommend mongoose. It's a tiny exe that doesn't need installation, just drop it anywhere, tell it what your document root directory should be, and you can get going.
For more fully-featured development environments (Apache server, PHP, databases), look at WAMP, XAMPP or Uniform Server.
what's the best way of porting a static HTML website to a CDROM, to allow users to insert the disk, copy the files off, and then run the site "offline", as it were.
what sort of path structure should i use? at the moment all of the assets are like:
file:///C:/Users/User/Desktop/MySite/index.html
which obviously isn't very portable
thanks for any info
You should use relative paths, like
index.html
and
images/img.gif.
If you have many absolute links, search for "file:///C:/Users/User/Desktop/MySite/" and replace all with "" (or "./", to make things clearer). Notepad++ can search across all files of one directory.
To make things even clearer, create a subdirectory with all files and more subdirs and optionally an index.html in the root directory, so the user only has to copy one folder (plus one index.html).
You can try to use portable web-server application.
This application allow to run any websites on any drives (USB-Flash or CDROM). The main advantage that you shouldn't to change links from absolute paths to relative. Also, the application will open your sites if that uses a database or PHP.
For example: XAMPP (Portable Web Server) and many others.