EDIT: ../../ works for href links, but doesn't work for accessing stylesheets or js files.
I have a page in a projects folder, that has this in the heading: <li>Home</li>
When I press the link, it tries to redirect me to projects/index.html, instead of the index.html file in the root folder.
I believe your index html in your project will always be the default landing page. It is hard to troubleshoot this without your file structure but have you tried renaming tour your page something different to index.html to see if the behavior continues without the "index" in it.
The path you show in the comments says that webpage.html is down a level from projects folder.
Try href="../../index.html" to move down two levels.
think of it like this a single ../ gets you out of the page; an additional ../ moves you up out of the directory.
With the paths you provided in the comments:
/index.html
/projects/webpage.html
This is where the links will take you from webpage.html:
/index.html --> /index.html -- absolute path
../index.html --> /projects/index.html -- relative path (NOT WHERE YOU WANT TO BE)
../../index.html --> /index.html -- relative path
you can use either the absolute path or the relative path to link to the index page. I like to use the absolute path to index because my index page is always at the root of my websites. its up to you which you want to use.
Related
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.
I am having a simple but frustrating problem. I have a logo on my website that I want to link back to the website's homepage. If i do href="index.html" it works but I when I try to do href="/", which I believe should also work, it takes me to the literal root directory of my computer.
For example, if I have href="/" and then I click on my logo, it directs me here:
Will this be alleviated as soon as it's hosted on a server? Any insight into this behavior would be greatly appreciated.
You're correct, an href of "/" is the root of where the file is being served from, in this case your local file system.
However, I do believe that setting an href of "index.html" or "/index.html" would be slightly more optimized performance, as "/" just resolves to "index.html" anyways.
I would also suggest you set up your local environment to have a local server, where the files are served not just read by your browser. MAMP is an easy way to do this.
Yes, this is a problem that will only occur if you're viewing a site off your filesystem rather than a local or remote server.
If you'd like to prevent this anyway, you could use relative paths rather than absolute. For example:
If you're on /photos/index.html and would like your header logo to go to /, your link could be: ../ to go up one directory.
If you're on /index.html and would like your header logo to point to the current directory, your link could be: ./ to stay in the current folder level.
You can also add this option to disable directory listing and display contents of index.html
Create a .htaccess file with the following:
Options -Indexes
Or you can have this option in the <VirtualHost> directive.
What you wanted to do can be done by :
This will clear the differnce
Further Refrence
https://www.w3schools.com/tags/att_a_href.asp
https://html.com/attributes/a-href/#Different_URL_Forms
This problem was already answered
Base URL - How to call the home link
I have a problem in my html pages
when I use "root-relative" paths it isn't make the path correctly
instead of direct to the folder of index.html it direct to the father folder.
Example:
My index.html is: Websites/MySite/index.html
when I make a link in index.html to "/" it direct me to Websites/
what is the problem?
Root is the first folder that your work begins. Your site root is actually Websites/. So it acts correct. Maybe some hosts consider the folder that your html file is on it as root. If you want to have no problem with this, you should make all relative links work with your main root.
There is a php function that gives your current html file path. You can use it before your links. like:
<?php php_function ?>/mylink
The root path is a setting in the server config. If you want to reach something relative to your index.html than you would use ./ and ../
You can go back with ../ and stay in the directory with ./ where the file you are using is in.
For example if you want to reach the file
Websites/someFile.txt
from your index.html in
Websites/MySite/index.html
you would have to use the relative path
../someFile.txt
and if you wanted to use the file
Websites/MySite/subDirectory/some.css
from the same index.html you would write
./subDirectory/some.css
I hope that helps, if not feel free to ask, or make you question more precise.
And if you want to read more about relative url's you can visit the mozilla develop network ("Going back in the directory tree")
I have a project directory structure like this:
proj
|__index.html
|__about_us.html
|__header.html
|__inner_folder
|__another_page.html
Now the header has a link to about_us.html file and the header is included in all the files (using jquery).
If I give a relative link in header.html as:
<a href="./about_us.html>About us</a>
it will work in the index.html page as it is at the same level as the about_us.html page. But this link in the header will not work in the another_page.html as it is not at the same level.
Now, the url on local machine for index.html is like: localhost:63342/proj/index.html
If I give the link in the header as:
About us
then the link that gets formed is localhost:63342/about_us.html (without the /proj/..) which returns a 404.
Is there a way to get the links to work on all the pages using relative paths?
I cannot use absolute paths or the project name in the path as those do not work on the remote environments where the domain is different.
Is there a way to get around this?
Thanks in advance for your responses.
If you're trying to go from another_page.html and link to a page that is one directory up, use ../ like this:
go to index.html from another_page.html
If you are linking to a page in the same directory (from index.html), you use ./ like this:
go to about_us.html from index.html
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