Please bear with me since I am a noob at html.
Let's say I have a local directory called website saved inside my local Downloads folder, and inside this website directory I have an html file called page.html
Inside the website directory, I also have another directory called folder
Inside the folder directory, I have an html file called page2.html
In the html code for page.html, there is this line of code:
page 2
When I open page.html locally in a web browser, the file path name is file:///Users/myuser/Downloads/website/page.html.
When I then click that page 2 link on the webpage, it brings me to file:///website/folder/page2.html instead of the correct path file:///Users/myuser/Downloads/website/folder/page2.html so it doesn't work.
I know I could change the href link in page.html to file:///Users/myuser/Downloads/website/folder/page2.html but I want this link to work even if I move the website directory into a different local directory. For example, the href link would work whether I have the website directory inside my Downloads, Desktop, or Documents folder, or even if I saved this website directory onto a different PC.
Is there a way to word the href link so that this can happen?
You’ll need to use href="../page.html" in your page2.html file.
I recommend you read up on what a URL is, especially the part Absolute URLs vs relative URLs
So a URL has different parts, beginning with the scheme like file or https.
Image from Mozilla at the before-mentioned URLs
You can skip certain parts at the beginning of a URL, which will give you a relative URL. These parts will be replaced by the user agent (the browser) from the current location.
For example, you can use scheme-relative URLs:
<a href="//myhost.example.com/page.html">
If the page containing that code is served via https, the link will also be completed to https: https://myhost.example.com/page.html. If it’s served via ftp, it will complete to ftp://myhost.example.com/page.html.
The same goes for other parts, and when referencing other pages from the same site, you would use path-relative URLs.
Absolute and relative paths
Now, concerning the path part of a URL, there is also a distinction between absolute paths and relative paths, just like in your operating system.
<a href="/page.html"> is using an absolute path. This means go to the root directory of the same drive or host, to find page.html.
In your case, the page2.html is delivered from file:///Users/myuser/Downloads/website/folder/page2.html.
So when you use a path beginning with / (absolute), it will refer to the root of the drive, so basically C:\ and complete to file:///page.html.
<a href="../page.html"> now is a relative path, relative to the current location. It’s saying go up one directory to find page.html.
So with the same location as before, this will complete to
file:///Users/myuser/Downloads/website/page.html.
Related
I am working on embedded website that will be served by a device running Linux. We are trying to maintain a system where editable items are in root/var/data/.. and static files are in root/opt/..
Right now my server.js is located at root/opt/webapp/server.js, i have an html file at root/opt/webapp/html/file.html
in the file.html i need to render images that are in the root/var/data folder, but my understanding of now this works is node considers localhost at root/opt/webapp(the location of server.js) how do I tag to a file that is outside of said local host but still within the file directory of the device?
I attempted an absolute path but the html just assumed that it should start the chain from localhost so
looks at http://localhost:8080/file:/C:/projects/root/var/data/fms/share/icons/avocado.png
The var folder is two folders up from your .html file, so it sounds like you're looking for either:
../../var/data/fms/share/icons/avocado.png (relative)
/root/var/data/fms/share/icons/avocado.png (root-relative)
It depends on how you're linking to the file, but you may also be able to use the absolute path relative to C::
file:///C:/projects/root/var/data/fms/share/icons/avocado.png
What is the correct way to do this and have what is generated / used by the browser be relative paths?
I need to do this in order to generate PDF's with links that will open files in a folder directory on a user's hard drive. The links must use relative paths, since the files will be downloaded in a directory structure that will be moved around on the hard drive. To further clarify the use case, the PDF(s) and the files will be downloaded in zip archives together, so the initial relative location will always be known.
I understand there are things in place in browsers to prevent this working from within a browser window, but in this case it will only be used in anchors in PDF files generated from HTML.
One of the problems with using something like this is that the protocol and domain is appended to the front of the path in the anchor. The relative path that's needed is to navigate within a folder directory in Windows Expolorer.
file.txt
The PDF's are converted from HTML using SelectPdf, and this is an Asp.Net MVC web app.
I have tried variations of this, which windows explorer is not able to use:
file.txt
When creating the html files for my website, I had no problem understanding how to create links so that users could navigate between pages. For example, this worked fine to send someone to the about page:
ABOUT
I'm having issues upon uploading the html files to my web server.
How, do I get About link to send the user to: www.blahblahblah.com/about ?
My landing page has been renamed index.html.
You need to add http:// in the href to go to a page on an external site:
About page on blahblahblah.com
This is because when you simply link to it without the http:// in front (hyper text transfer protocol) it is trying to go to the page "www.blahblahblah.com" which obviously does not eixst on your server. When you add the http://, the browser knows that it is another website and therefore will bring you to the external site.
Your web server will be configured with a "document root" directory. Usually this is the directory where index.html is located. Place your about.html in the same directory, and the link you provided will link to it if it is served from the same URL-path (that is to say, it's not in a sub-folder). If your files are indeed in the document root, you may prefix your link href attributes with a forward-slash, which indicates that the path is relative to the document root.
As noted in the previous comment, this technique only works for pages hosted in the same directory as each other, on the same host. If the files are in different directories, you must start with the slash, and if they are on different hosts, you must include the full domain and path.
This is what he meant:
<input type="button" value="SampleText" onClick="window.location='http://www.blahblahblah.com/about';">
and this will open it in a new window:
<input type="button" value="SampleText" onclick="window.location='http://www.blahblahblah.com/about';" target="_blank">
The physical folder structure on my web server is:
inetpub
oo|
oo|_wwwroot
oooooo|
oooooo|_MyApp ----> this is the root folder of my web application
oooooooooo|
oooooooooo|_images
oooooooooo|
oooooooooo|_styles
oooooooooo|
oooooooooo|_pages
I have an html file (test.html) under the pages folder. I want to link to other files (eg. stylesheets and images) via absolute paths. So, I have a line of code similar to this:
<img src="/images/roundbutton.png" />
When the page is rendered, the image is not displayed, as the "/" tells it to look for the image in a folder wwwroot/images.
Is there another way to use absolute paths to refer to the application root, instead of the site root? Or is using relative paths the only other option?
Yes, use the <base> element.
I had created one HTML page for my experiance. In this i had use the background image like c:\documents ans settings.....\leftline.png.
But i don't know how to add images from a common directory. (like background-image= ('./images/leftline.png'). how i can do like this?
The second line you have is a relative address, relative to the "thing" that is calling it.
So, say you have a webpage called "index.html" and it lives in
C:\My Documents\WebPages\My Page. You might also have C:\My Documents\WebPages\My Page\images\leftline.png
Now, rather than type in "C:\My Documents\WebPages\My Page\images\leftline.png" we can simply use "images\leftline.png" in our index.html page. Why? Well, check the locations:
C:\My Documents\WebPages\My Page\images\leftline.png
C:\My Documents\WebPages\My Page\index.html
RELATIVE to index.html, leftline is only one directory away, so you can address relatively.
You have to save the images inside the directory of your website and then you can acess these images using relative path.
If your page for example Default.htm lies inside the virtual directory WebSite1 then you can create a folder for images say 'Images' and can point to an image inside the 'Images' directory by using 'Images/image1.jpg'
If from your html file you have to traverse a folder up then you can use '../Images/image1.jpg'
You can also give an absolute path for the image like http://.....
Put the files in a directory that is in the same folder the html file is in. name the folder images.
You need to have this image inside your website.
And then the trick is to work out what URL to use (that's apparently your problem).
When you use an HTML image tag () in you page, then the browser sees the URL you specify. If that URL is relative (does not start with "http://" or a "/"), then it is sees as relative to the URL of the page. So usually you will need some "../" to go back to the root of the site and then back up again to the image.
A URL that is specified inside a .css file is relative to that css file.
If you use asp.net and want to specify the image-url in a server tag ( for instance), then you can use a "~" as first character to specify the "root of the site". This will work only if that URL is processed by the server as a property of some server control.