I am creating a school project website and is organizing my files to different folders. From root folder to css, script, etc... This is the structure I made.
But I couldn't access my index page from subpages. If I am to go from index to about us for example:
<a href="pages/about-us.html">
It would take me to the about page. But going back to index, I tried:
<a href="root/index.html">
and
<a href ="index.html">
But no luck. Surely, it would work if I would copy paste the exact location in my PC. But I will upload this for my professor to see. Also, not to mention the images too that I need to link from a folder up from the subpages. If that make sense.
Bottomline: How do I link files from different folders whether one folder up or one folder down?
Thank you in advance. :)
Using ../ allows you to jump back a directory (folder) and ../../ would jump back two directories. If your at the root directory you can access a file with /index.html. Have a look at the Dealing with files - MDN documentation for more detailed information.
Related
I just came up with an idea. Instead of using an .htaccess file to remove .html from the URL, why not just use a simple folder structure and in each folder add an index.html?
For instance:
example.com/index.html → Home
example.com/about/index.html → About
Now simply use a hyperlink on the homepage to the about folder, since typically index.html files are opened automatically.
The upside of this kind of navigation, is that it would be easily possible to create sub pages with no crazy database / .htaccess setup.
Now my question is: is there any reason not to create a webpage like that and is it legitimate to use multiple index.html files?
I appreciate all the help.
With the index.html route, there would be three URL's that can access the same page. For example for an about page:
www.yourwebsite.com/about
www.yourwebsite.com/about/
www.yourwebsite.com/about/index.html
Using the .htaccess file would likely give you more benefit from an SEO perspective. You can tell the search engine which one to use, by using 301 redirects. See more about how Google does this here:
https://webmasters.googleblog.com/2010/04/to-slash-or-not-to-slash.html
Of course you could set up your website using folders and index.html's, and still
use the .htaccess file to take care of the SEO. But, depending on your sites size and structure, this might be more work.
The only downsides would be having to create a folder in addition to a file whenever you want to create a new page, and having to take more time to navigate into a folder in order to edit a page.
As long as you are using Apache, or a similar server software, multiple index files will function normally and be served from each folder.
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">
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'm currently learning to use yootheme's uikit. I'm currently running it off of Apache 2.4.16 on my Mac, but the index.html page won't bring up the main uikit.css (or any css) buried two or more folder levels deep (as all the css files within uikit's directory are).
Here is my folder structure:
MainSiteFolder
index.html
uikit/
css/
uikit.css
fonts/
js/
And here is the line I included in the head of index.html (copied and pasted):
<link rel="stylesheet" href="uikit/css/uikit.css" />
If I pull out that css file and put it in any other folder I create (or the root directory), I can change the reference to "otherFolder/uikit.css" and it works perfectly... but I'd like to be able to keep things organized within multiple folders until I nail down which of the many uikit css files I plan to use.
Is there something I've missed that removes my ability to load css files that are more than one folder lever deep? Or do I need to just put everything into one css folder, despite the loss of convenience organization would bring?
EDIT: Must have been something strange with my browser (or Apache?) not realizing there were files in the folder. I don't know the reason, but removing the entire folder, and recreating it inside the directory, then uploading the files individually got it working. Though it still baffles me why it didn't work in the first place. Some sort of missing reference or something perhaps.
Use:
../
To go to a higher directory, like:
href="../uikit/css/uikit.css"
To go 'up' one level of directories. ../../ goes up 2 levels, and so on ...
Alternatively , start at the root directory, in Windows it is C: not sure what it would be on your system, but something followed by a :
I'm having a serious issue linking from a page in one folder to another page in a different folder.
Here is the relevant structure.
The link is on navbar.php:
Project Folder
-includes/navbar.php
-savings/food.php
Here is the code for the link:
Food
I thought that this syntax would point to the right place. '../' bringing it back one level to the main folder and then '/savings/food.php' pointing to the right folder and page.
I'd be very grateful to anyone that can help me figure this out.
Folder Structure:
Project Folder
-includes/overall/top.php
This is where the navbar is included and top.php is included into the other pages
When you click on your link, where does it take you now?