Can't access local file via local webpage hyperlink - html

I'm having some trouble linking to a file on the network via a local webpage. I've written a simple html page with a hyperlink:
View File
Now what happens is when I click the link, I get an error message that windows cannot find the file specified. The file does exist but the link to the file that is displayed by the error message is not right.
I have:
h:\myfiles\dir#1\file1.s
Error Message:
h:\myfiles\dir#1/file1.s - All slashes after '#' are flipped.
I tried it again, but this time I removed the '#' from the directory name and fixed the hyperlink accordingly as well (View File). When I did it this way it works. I guess what I'm asking is that is there a workaround for links to directory files that have a '#' in the URL?
I know '#' is a special character and is used for anchor bookmarks, but how do I get around this. I don't want to remove the '#' for all the directory names that I have. How do I link to a file in a directory that has a '#' in it's name?
Thank you!

The # sign can be encoded as "%23". You might remember "%20" appearing anytime you tried entering a URL with a space in it (before browsers started switching to search anytime it didn't fit URL patterns)

Related

Why does my anchor link redirect to the same page?

I faced a problem using a link inside my main html and giving another html file name to the link which is in the same root as the main html.
unfortunately after click on the link the address bar is changed but the page is not loaded and it redirects to the main html page.
this is the way I wrote the link:
click
this is my folder structure:
I also tried with giving the full path but I got this error:
Not allowed to load local resource: file:///C:/my_project/templates/PU.html
As you said in the comments, I assume you're working locally on your computer, so I'm going to answer accordingly.
The first and foremost thing to know is that your main, i.e the file you want users to see first should be named as index.html and it should be in the root directory of your project, i.e according to your question, it should be in my_project.
Now if it is as I said, then your my_project folder/directory will be considered as the root directory. With the help of this consideration, now you can set links with respect to the root directory. e.g:
click
The / at the beginning here tells the HTML to look from the root directory, i.e from my_project in your case.
I don't see any errors in the code you have. Though, I will tell you a few things here.
**./** at the beginning of the link tells HTML to look at the file in the same folder as of the present file. So, if the PU.html file is not in the same folder as of the file you're working on, it will give an error, because as I said, it's looking for the file in the same folder.
There is nothing wrong with your syntax.
click is correct,
but if you have your files in the same directory you don't need ./.

Navbar links with varying directory

my directory is shaped like this
image
in order to use my navbar between different html files, I made it into a seperate html file and use a placeholder to insert it where i need it. the problem is that now the links get thrown off.
for example: when im on the index file, the link works without a problem. however, when im in the about_us file, the link throws a cannot find in directory error because it would need ../ in front of the link.
any javascript I have also does not work for the nav.html.
any suggestions? is there a way to create links and start the directory from the root?
To navigate to the correct HTML file, you have to pass the full path of the HTML file.
For eg: If your application is running in https://localhost:8080 than you have to pass the full path as below:
Home
About Us
Or if you directly opening the HTML file in your browser without any server, than pass the full path of your project folder as below:
Home
About Us
Note: Always use the file or folder name with a hyphen - or underscore _.
For eg: instead of html files rename your folder name as html_files or html-files.

Can you download a file from homepage using localhost?

I have this a tag <a href="/assets/test.docx" download>Download</a>. According to W3schools it seems like I have setup right path to access file test.docx form CV.vue according to folder structure in the picture below. Please check and verify that I have right path.
I want to test download the file when running website in Chrome on localhost. When I click download I get error saying Failed, no file
What am I doing wrong?
Folder structure
Generally if you put slash(/) behind of your path in href, it will going to main domain of website and it doesn't matter it's localhost or real domain like example.com.
So if you find your path or file structure easily you can put that in href parameter.
For example your logo path is:
src/assets/logo.png
*Remember that you can test it by enter you path on your browser to find your correct path.
for example:
localhost/src/assets/logo.png
OR
127.0.0.1:8000/src/assets/logo.png
If it's working correctly, you can put that on your html code like this:
Download
The answer is simple just remove the forward slash in front of "assets". Your code should be:
<a href="assets/test.docx" download>Download</a>
The html download attribute will add this extra slash so your code as it exists now leads to the following path.
file:///assets/0513211459.jpg.html

Github pages downloading file fails with "No file" when file is in a directory within a directory, but succeeds when inside only one directory

I can't get the download links to work on my github pages # https://madisonsmash.github.io/Slippi/ (when you click on the "Browse all replays" link under one of the tournaments, the links to the right of the page should download the specified file - file structure can be found here: https://github.com/madisonsmash/Slippi).
Right now the replays sit inside of ./replays/${tournament name}/, and when I set the href equal to "replays/${tournament name}/${replay name}", the download fails. I've tried typing out the path by hand and removing spaces from the tournament name and the download still fails. However, if I put them inside of "replays" without the second directory, they download without fail (such as in this version of the site: https://andrew-bbq.github.io/SlippiHost/). However, I would like to have the replays organized inside of replays/ within directories for my sanity's sake. Is there anyone who knows why this might be happening?

My website project's images get uploaded with capitalized filename. Why is this happening?

so strange problem.
I finished my website and pushed the project to github.com.
The picture section of my page won't work because the pictures are added into the html with .jpg but github has it as .JPG (capitalized).
So if you go to my site: https://dhuber666.github.io/Frodo/fotos.html you won't see the pictures. However if you click on one of the missing file icon you will get the link to the full picture (but it say that the page does not exist because filename is written in lowercase letter (as it should be) but github has the images capitalized (.JPG)
If you edit the link like so: /Frodo/images/pic4.JPG (sry have to shorten that I can't post more then one link)
it infect works.
So what is this problem? On my local machine it's fine.
I uploaded it on windows with the github shell like normal.
So I go to my local images folder and I see the filename like so: pic4.JPG --> If I right click it properties it says pic4.jpg
So I renamed it to pic4.jpg and after hitting enter I got .JPG again.
I deleted the whole file ending enter. Rename it again and write .jpg and enter --> Now it's actually pic4.jpg.
But how can I push it to github, because it does not recognize it as changed file?
Also how can I solve this for feature pictures and uploads?
Bonus: Cute dog pics on my page :P
Thank you!
I do not know why this is happening, but I know how you can fix it.
Solution 1: Go into the html and make the file extension capitalized.
Solution 2: Change it via the command line.
Github only allows for image change through commmand line. Follow the link above to their guide on changing via command line.