I have two local pages, one called Index.html
https://pastebin.com/wA1Y1WC0
And another called biographies.html
https://pastebin.com/PBeW2hz8
The folder structure is Project1 for the root, which contains Index.html and a folder there called members that contains biographies.html.
When I follow the link:
a href="members/biographies.html/#John_Lewis"
and then try
a href="../Index.html"
The link back to Index does not work.
However, if I open biographies.html directly the link back to Index does work. I am restricted to using relative paths, and I have tried changing the path on the biographies page multiple times, including ../Index.html AND /Project1/Index.html to no avail. Can anyone give me a pointer as to why this doesn't work? I've asked my teacher and we are both stumped. Thanks!
When you serving from the file system, a link to /file.html means to look in the root of the drive for a file.html.
When dealing with a webpage served by the file system, you should only use relative links.
You also had a stray slash after the file name, remove that
/root/Index.html => <a href="members/biographies.html#John_Lewis">
/root/members/biographies.html => <a href="../Index.html">
Related
How can I change the path of my site using HTML, CSS, or JS. I may be using the wrong grammar here using the word "path", but what I'm referring to is a subdomain, an example would be stackoverflow.com --> stackoverflow.com/questions
I attempted to use the element
<a href="about.html">
<img src="x">
</a>
but it did not work,
You could think of a server's public folder (the one that host your site's static files as HTML, CSS, Js) as a directory in your computer. For you to redirect the user to another path in your site you can use as you said Your link but keep in mind that if you want to go to another folder like yoursite.com/anotherfolder you must to have two things (for this example):
This folder structure in your site:
[ROOTFOLDER]/anotherfolder/index.html
In this case you need to add another file called index.html because is the default path that you get when no file is specified (file being specified: yoursite.com/anotherfolder/file.html).
The HTML anchor tag must to start with a slash like Your link.
Hope it answer your question.
Note
You are talking about a path http://yoursite.com/[PATH], a subdomain is like this http://subdomain.yoursite.com.
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.
My files are set up like this:
Root
|
tours----------------about----------------gallery
| | |
tour1.html about.html gallery.html
I want to link the about.html page to the tour1.html page. Is this possible?
I've tried multiple things and I just can't figure it out. I know that if it were in the same folder I could use <a href="about.html"> and if it was in the root folder I could use <a href="..//about.html"> but neither of those are working.
When working with directories in a lot of places, such as some command line prompts (shells) and other applications, it's very useful to know that using / at the beginning of the the path will traverse to the home directory from any level, while ../ will traverse to the parent directory of the directory you're in.
For example, if I were creating a link from http://www.example.com/path/to/file.html to http://www.example.com I could simply use Home.
If I wanted to create a link from http://www.example.com/path/to/file.html to http://www.example.com/path/file.html I could use File or File.
Finally, if I wanted to create a link from http://www.example.com/path/to/file.html to http://www.example.com/file.html I could use either File or File.
So for your example you could use either <a href="/tours/tour1.html"> (starting from the root) or <a href="../tours/tour1.html"> (going up one folder and then down into the tours folder).
There are different methods
You could use ../ each time to go back one step in your directory and then target your file.
Or(if you are familiar with node/express or ejs templates) you could directly target /filename as you specified in your app.get("/filename",.....
Thank you everyone for the suggestions. I tried out an absolute path instead of a relative path and it worked, so I'm just going to work with that instead.
I have a hierarchy like:
index.html
/share/index.html
/img/myImage.png
share/index.html is on a sub-domain (http://www.share.foo.com instead of http://www.foo.com).
I would like to access myImage.png from both domains.
So far, I've only been able to find one way to manage this. From index.html I reference the image as:
img/myImage.png
and from /share/index.html I reference the image as:
http://www.foo.com/img/myImage.png
This doesn't feel correct because I shouldn't have to be that explicit with my URL. It should probably be somewhat relative to my own path structure.
I'm wondering what the correct fix here is? Should share/index.html be on the same level as index.html? How would naming conventions work for something like that if they're both supposed to be index.html on the same level? Other suggestions?
To access the image from "index.html" you can use the relative path like you are currently using:
img/myImage.png
However, when you are in the /share/ folder you need to go back a folder:
../img/myImage.png
This is of course assuming your /share/ directory is locate within the root html folder (public_html or whatever yours may be called)
You can use
../img/myImage.png
for getting image in subdomain.
You can use multiple ../ to go back any level in the hierarchy
For eg: ../../ will take two levels back from the current level.
There are two ways to accomplish this
Filesystem way
If the server is on an Unix (Linux) based system, create a symbolic link in /share that points to /img.
From a shell:
~$ cd /docroot/share
~$ ln -s ../img img
This will make all contents of /img appear under /share/img as well.
If you do not have direct shell access to your web-host, you can try creating the symbolic link in your local copy of your /share directory and sync it to the server. To create a symbolic link you do not have to have a copy of the location where it points to on your local computer.
If you are on windows, NTFS supports symbolic links as well, but I can not tell you how that would sync to the web server.
Using relative paths lower than your doc_root (../img/myImage.png) to point to your image from your HTML document, is invalid in this case. It would resolve to: http://www.share.foo.org/../img/myImage.png
<base> tag way
The <base> tag sets the base address where to look for linked content. Downside is: It will form the base for al relative linked content. (Style sheets, images and links). So page linked as <a href=about.hmtl> will point to <base>/about.html.
<head>
<base href="http://www.foo.com/" target="_blank">
</head>
<body>
<img src="img/myImage.png">
</body>
I have a website, let's call it example.com. Within this site, I have some FAQs but the person that built the site saved the FAQ pages under a directory on the site named "FAQs".
As an example an FAQ page would be located at:
example.com/pages/en/faqs/faq-page1.html.
Note the pages/en/ directory. Ideally I would like all the pages to be saved under example.com/index.html etc but I can't change this.
Anyway, when I am on any of these FAQ pages, and I try to link back to say the home page index.html the navigation won't go to the page. So for example, when I am on:
example.com/pages/en/faqs/faq-page1.html
and I try to link back to the home page
example.com/pages/en/index.html (which is where the index page is saved) the nav won't work. Instead it will try to go to example.com/pages/en/faqs/index.html.
Now I am assuming this happens because I am in the "faq" directory, but how do I go back to the root directory when linking? The code for the link is simply Home. I could of course just put in the full link example.com/pages/en/index.html, which would solve this but is there another way around this?
You need to give a relative file path of Home
Alternately you can specify a link from the root of your site with
Home
.. and . have special meanings in file paths, .. means up one directory and . means current directory.
so Home is the same as Home
There are two type of paths: absolute and relative. This is basically the same for files in your hard disc and directories in a URL.
Absolute paths start with a leading slash. They always point to the same location, no matter where you use them:
/pages/en/faqs/faq-page1.html
Relative paths are the rest (all that do not start with slash). The location they point to depends on where you are using them
index.html is:
/pages/en/faqs/index.html if called from /pages/en/faqs/faq-page1.html
/pages/index.html if called from /pages/example.html
etc.
There are also two special directory names: . and ..:
. means "current directory"
.. means "parent directory"
You can use them to build relative paths:
../index.html is /pages/en/index.html if called from /pages/en/faqs/faq-page1.html
../../index.html is /pages/index.html if called from /pages/en/faqs/faq-page1.html
Once you're familiar with the terms, it's easy to understand what it's failing and how to fix it. You have two options:
Use absolute paths
Fix your relative paths
To go up a directory in a link, use ... This means "go up one directory", so your link will look something like this:
Home