How to give a link to a directory in HTML? - html

My problem is giving a link to a directory, in an inner network. It is working for IE 6 but i need to do this for especially for IE7 and IE8.
My internal Link is like that: \CompName\Report\
I tried to do this with : file://.... but it didn't work. Any ideas?

There are several different ways to use the file URI schema and it does respect relative paths.
They are however, platform specific, so may only work on one of windows/mac/linux.
Make sure you get the relative path correctly.
file://CompName/Report
You may need to double up any / for each "\" you have - UNC paths start with \\, so this would translate to ////, so:
file://///CompName/Report
Should work, assuming it is a shared directory on a computer called CompName and that you have the correct permissions to access it.

This should work:
file://///CompName/Report/
Note that IE8 (and I believe IE7 as well) will open the link in an explorer window (not Internet Explorer).

Related

How can I correctly reference javascript files in html?

I am trying to create a website and came across an interesting problem. I have my filesystem setup like this
.
I am trying to reference some javascript files inside my <head>like so
As you can see the first two files are found and will load
according to the browser
I have multiple problems with this, the first being that paths for the first two javascript files are actually not valid, since if I ctrl+click them it brings up an error message
that the file doesn't exist. The second problem is that the third and fourth javascript files are not loading into the browser. I've tried the following paths for them.
/WebRoot/Assets/Js/filename.js,
../WebRoot/Assets/Js/filename.js,
../../WebRoot/Assets/Js/filename.js
and even a direct path but none of them worked.
Does anybody have any idea why is this problem occurring?
Your script tags are broken. You have:
<script src=""> [filename] </script>`
instead of:
<script src="[filename]"></script>`
You also appear to have inconsistent casing in your paths.
Your filesystem appears to have /Js/ (lowercase 's') but in your html you have it both ways: sometimes it's /Assets/JS and sometimes it's /Assets/Js/. This might account for your non-existent file issue.
Case-sensitivity can vary between environments so this might work sometimes, but it's still A Bad Idea™. Pick your preference (uppercase, lowercase, or a mix) but be consistent when referencing file paths.

Background image url() works on live server but when I open the index.html in the browser it doesn't?

The element is selected properly because other properties apply. There are no console errors.
I have tried:
img/hero.jpg - works when I click on link in VS Code
/img/hero.jpg - works when I click
../../hero.jpg - work when I click
../img/hero.jpg - doesn't work
the full path - works when I click
The problem is seen here. You can see that images called by the src attribute work.
Here is the file structure.
I honestly don't understand your setup / question, but I think if you understand how relative URLs work a little better you can figure it out yourself.
On your server you have your files in somewhere like,
/var/www/html/index.html
/var/www/html/css/styles.css
/var/www/html/img/background.png
On your computer you have your files somewhere like,
C:\Users\Nani\Desktop\Website\index.html
C:\Users\Nani\Desktop\Website\css\styles.css
C:\Users\Nani\Desktop\Website\img\background.png
And in your styles.css you have something like this,
body {
background-image: url('/img/background.png');
}
Starting the URL with / tells the browser to interpret it as the root directory. On a Windows PC it will be C:\ and on a Linux PC it'll be /.
However, when you access the page once it is online from a url like https://example.com, the root directory becomes https://example.com/.
Therefore, using /img/background.png will make it look for the image at https://example.com/img/background.png once it is online, but on your local machine it'll be looking for the image at C:\img\background.png
Starting the url without the slash like this, img/background.png looks for the image relative to the folder that the css file is in. So in that case online it'll look for the background here at https://example.com/css/img/background.png and on your local machine it'll look in C:\Users\Nani\Desktop\Website\css\img\background.png
In my example, the best solution would be to use ../img/background.png, that'll look up one directory relative to the css folder, and then in the img folder. That'll work consistently on both your own computer and once it is uploaded.
That should be enough to figure out what you need to do assuming that the problem is the way the url path is declared. Otherwise, the problem might be with something else. For example, it seems like you're using SCSS. Perhaps the SCSS isn't compiled on your local machine (or hasn't been in a while), but it is compiled on the live server?
It works on live server because its settings make location of index.html a root of your document (/). When you open index.html directly your root is different and images aren't loaded from correct location if you start the path with /.
Best Practice
It is best practice to use relative file paths (if possible).
When using relative file paths, your web pages will not be bound to your current base URL. All links will work on your own computer (localhost) as well as on your current public domain and your future public domains.
I had the same problem and it turns out that I wrote the path wrongly. You have to write the url based on where the css file is, not where the index file is. Because the one that reads the url is the css file. So it should look like this:
body {background-image: url('../img/background.png');}
Because your CSS and your IMG are in different folders.

Is it bad practise to start links with "/" in html?

My website code sample:
<a href=/post/64/page-name><img src=/img-folder/2015/09/image.jpg></a>
<div id=cont2><a href=/post/64/page2>page 2 link</a></div>
My first question is, can I start links just with /? Is it a bad practise? because all website sources that I looked it starts with www.website.com/... not just /
Second question is quotes. It is not needed since html 2.0, but is it important in the example above?
My website is having some problems on google to show correctly... may it be because this problems?
It isn't bad practice. A URL starting with / is merely a relative URL that's relative the the base path. You're using it just fine.
Another example usage is when you want to reference a CSS or JavaScript file and you're deep down into the path.
<script src="/scripts/main.js"></script>
Then, no matter where the user is on your site, they'd always request http://example.com/scripts/main.js. Where example.com is your site's domain.
Additionally: Always quote attribute values. (attribute="value" and not attribute=value).
/ means start of where you are currently. So if your resource is located under same directory, you are allowed to use / to start with. If you refer to external resources, you can't use / to start. (E.g. www.google.com means google website, while /www.google.com means folder under your current directory named www.google.com, like http://localhost/www.google.com)
Quotes are needed when you use white-space in your attributes values (e.g. class="my super classs-name that has white-space" | class=my super classs-name that has white-space).
My website is having some problems on google to show correctly SEO stuff. What problems? Your page is not under first page of Google search? It's separate topic about that.
It is not forbidden. When you start your link with slash / it just a path relative to base element.
You can read more about BASE element here: http://www.w3.org/TR/html4/struct/links.html#h-12.4
For example, if you are already at: http://example.com/folder/index.html
/posts/index.html would link to: http://www.example.com/posts/index.html
posts/idnex.html would link to http://www.example.com/folder/posts/index.html
if you reference external sources you have to add the full path/adress
if you reference local resources its up to you.(more or less) take a llok at How to properly reference local resources in HTML?
You should use either double " or single ' qoutations - thats a good practise at least.
But you dont have to if there is no whitespace.
When you start your link with "/" its mean that you start from the root directory.
Example: Your website is in the directory /web/html.
When you now start your link with "/" its goes to the root folder. In this case the web folder.
I know this is old and answered, but it came up on Google when I was searching for something similar, so I just wanted to add to the answers.
Sometimes, when I need to do something real quick with simple HTML site that doesn't require a server, I usually just open index.html in Terminal to quickly preview the page in browser. However when you open your site like that, using the leading slash to load resources (ie. /js/main.js) won't work. That's because when you load your website by opening a file in your browser, the browser takes the root of your drive as the base path for your website.
So if you have your files like this for instance:
drive/Users/username/Documents/www/index.html
drive/Users/username/Documents/www/js/main.js
And you reference your script like this:
<script src="/js/main.js"></script>
The browser will think you're actually pointing here (if you open the file directly in browser):
drive/js/main.js
Because / in this case means drive and not the website's root (www in this case) folder as it would on a server.
Nope, it is not a bad habit to put '/' when starting links. But not having a quote in every html attribute? I don't think so. But i would suggest to put quote(") in every html attribute for it to be more readable.

Is it possible to save an HTML file locally and then open it locally but still keep the original src and hrefs

If I find a webpage I want to tinker with and I save the source to the desktop, change a couple of bits, and then re-open - then often all the src and hrefattributes don't work as they are relative to the original hosting folder eg /Images/picture1.jpg or /Scripts/script1.js.
Is there a way to 'trick' the browser into persisting these relative references? Preferably without going through every one of them and appending a path to the front - which I have also tried but without success. What is the format of the fully qualified path name for these resources?
Let me know if I'm not being clear.
<base>

Cross-browser URL to windows share [duplicate]

I have a .asp application where image files (.PDF) are stored in a directory (fed by a copier/scanner). The created file names are stored in a database table. When a query is launched from the web page a link to the file is created. When clicked the image should be displayed.
This functionality works 100% in Internet Explorer. No such luck in Firefox (and I have some Firefox users). The created hyperlink looks like this file://Server/Scanner/XYZ.pdf
The Firefox helps suggest the reason is this:
Links to local or network pages do not work. As a security precaution, Firefox forbids sites on the Internet to link to files that are stored in your local computing environment. These files may include files on your computer, mapped network drives, and UNC network paths
None of the suggestions for a workaround seem to work (or I am not understanding the steps to create the image display)
Any Suggestions?
This is the default Firefox behavior designed for security .The assumption is probably that most web sites don't know what and where are you local files (including UNC paths).
This could be turned off in firefox:
type "about:config" in the address bar and accept "i'll be careful"
find "security.checkloaduri" in older versions or "security.fileuri.strict_origin_policy" in newer versions of firefox and change the value to "false"
restart firefox
That should do it for you. You have more information here:
http://kb.mozillazine.org/Security.fileuri.strict_origin_policy
http://kb.mozillazine.org/Security.fileuri.origin_policy
Firefox >= 68.0.1
I'm able to preview in Firefox both images and PDF files with local file links using the settings mentioned here: https://bugzilla.mozilla.org/show_bug.cgi?id=1303727
I have used links with local file: test
and added in user.js the mentioned settings (with adjusted sites list):
user_pref("capability.policy.policynames", "localfilelinks");
user_pref("capability.policy.localfilelinks.sites", "http://my.intranet");
user_pref("capability.policy.localfilelinks.checkloaduri.enabled", "allAccess");
Also, when setting Firefox to "Always ask" for PDF files, I was able to "Open with" the PDF in Adobe Acrobat Reader DC, which reported the expected local folder when accessing "File -> Properties".
Firefox >= 1.5.x < 20 (ish)
Search for the Firefox profile folder on your hard drive, e.g. (12345678 stands for eight random digits and letters):
Windows: "C:\Documents and Settings\Username\Application Data\Mozilla\Firefox\Profiles12345678.default\"
Linux: "/home/username/.mozilla/firefox/12345678.default/"
OS X: /Username/Library/Application Support/Firefox/Profiles/12345678.default/
In this folder create a text file with the name user.js. Write the following line into that text file:
user_pref("capability.policy.default.checkloaduri.enabled", "allAccess");
Works on my PC (Firefox 3.0.3 and 19.0 beta) with the following references:
<img src="file://///server/share/image.png" />
<img src="file://\\\server\share\image.png" />
<img src="file://d:\image.png" />
<img src="file:///d:\image.png" />
<img src="file://d:/image.png" />
<img src="file:///d:/image.png" />
<img src="file://localhost/d:/image.png" />
Also, if you are using the NoScript add-on, check the Advanced \ Trusted \ Allow local links option.
Reading at the solution given here, I followed the link Links to local pages do not work and for me, only this worked well (I am using wordpress for a personal FAQ on a local wamp installation):
Go to your "%Your Documents & Settings%\Application Data\Mozilla\Firefox\Profiles\%your profile%\"
edit the file "prefs.js"
add the following lines at the end of the document:
.
user_pref("capability.policy.localfilelinks.checkloaduri.enabled", "allAccess");
user_pref("capability.policy.localfilelinks.sites", "http://localhost");
user_pref("capability.policy.maonoscript.javascript.enabled", "allAccess");
You can leave the setting "security.checkloaduri" to its default value, and also the "security.fileuri.strict_origin_policy". Thanks to those 3 lines, you just make an exception for your local server.
Be careful, if you need to go back to that prefs.js file, note that Firefox will have ordered it alphabetically. So the 3 lines you will have added at the end will be somewhere at the beginning ;).
You can load the LocalLink FireFox Add-On, which allows you to right-click on a local link and select 'Open in Foreground Window'. The other 'Open...' menu items are supposed to work, but don't for me.
http://locallink.mozdev.org/
Also, you can use NoScript, like Alex suggests, which enables normal clicking of local links. Thanks Alex.
Marko's solution should work for links that are also on the local filesystem, but I don't think it should allow an http:// page to link to a file:// page.
The issue for people linking from http:// pages is discussed here:
http://kb.mozillazine.org/Links_to_local_pages_do_not_work
along with an explanation of how to circumvent it and expose yourself to risk.
You can instead read the file off the disk and then send it in the Response from your page.
See this link for an example.
Tonnes of thanks I wAs searching this solution since months,
::THis thing worked::
This could be turned off in firefox:
* type "about:config" in the address bar and accept "i'll be careful"
* find "security.checkloaduri" in older versions or "security.fileuri.strict_origin_policy" in newer versions of firefox and change the value to "false"
* restart firefox
::::
shouldn't you really store the pages in your application directory and reference them this way. http://SITENAME/Server/scanner/XYZ.pdf.
We do something similar with files stored all in one directory and just store the file name. we then create the link using the known folder name and append the file name. this works quite well.
Finally firefox is a lot more anal about the directions of the slashes in file names as well. Make sure they are all '/' rather than '\'.
Hope this helps.
beware of incompatibility with gmarks (google toolbar replacer)
both local link and policy manager worked for me; local link is a little smoother, policy manager gives you more control
file://localhost///servername/share/file.txt works for me on FF11
(from a local html file: file:///C:/index.html)