Navigating through parent folder HTML files from child folder HTML files

Seeking guidance as I embark on a new project!

Check out this link to see my skills in action: collegewebsite.zip

Now for the query at hand.

I am working on a project named Coffee Cafe for my tuition assignment. It involves utilizing CSS and HTML with JavaScript (exclusively).

The project folders are organized like so: webfolders

If I open cafe.html, and insert a link that leads to a page like "homepage.html" in the "links" folder mentioned above,

Is there a way for me to navigate back from homepage.html to cafe.html by clicking on a link (e.g. Back) without using the complete file path?

An option would be to use the full path of cafe.html in homepage.html

For instance: 

<a href="c:\cafe website\cafe.html">
<==this represents the full path in c: drive

<a href="cafe.html"> <== this method only functions if the files are in the same root directory,,,

Unfortunately, in this case, they are not!

Can someone provide a solution for this dilemma, or should I resort to relocating all files into the root directory as a final option?

Thank you in advance!!

javascripthtmlcss

Answer №1

It's important not to set the href value of your anchor tag to a specific physical file location. Instead, it should be a relative or absolute URL.

For example, instead of

<a href="c:\my website\index.html">

You should use 

<a href="../index.html">Homepage</a>
or 
<a href="pages/contact.html">Contact</a>

By using ../, you are going back one level, so if you use href="../index.html" in a page located in a folder called pages, clicking on that link will take you back one level (to the root) and find the index.html file.

Answer №2

If the structure of your files looks like this:

/
/links/homepage.html
/cafe.html

In order to create a link from homepage.html to cafe.html, you would use:

<a href="../cafe.html">

The .. signifies: "go back one directory".

You can also incorporate this in a more intricate directory structure (e.g. href="../../cafe.html").

Alternatively, another way to create a link is as follows:

<a href="/cafe.html">

Starting your URL reference with / instructs it to begin from the root.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

HTML5 video player with secondary playlist

Looking for a videoplayer setup where there are two playlists, but only one can play at a time. When choosing a video from the first list initially, nothing happens. However, after selecting a video from the second list, the first list starts working. HTM ...

javascripthtmljqueryvideo

Space constraints within an li element

Is there a solution to resolve the unusual impact of margins/paddings? Check out this example on jsfiddle: jsfiddle. Here is the screenshot of the issue: i.imgur.com/64S8C.jpg. I want to eliminate any margins/paddings in the li element. ...

htmlcss

Setting the Height of a Fixed Element to Extend to the Bottom of the Browser Window

I currently have a webpage layout featuring a header at the top, a fixed sidebar on the left side, and main content displayed on the right. A demo version of this layout can be viewed at http://jsbin.com/iqibew/3. The challenge I'm facing is ensuring ...

javascriptjqueryhtmlcsscss-position

Heading made of ribbon without increasing the scrolling space

Incorporating a unique ribbon-style heading that stretches out from the content area on both sides to create a 3D effect using an image background without relying on CSS3 techniques. I experimented with floating elements, negative margins, and relative po ...

cssheaderscrollbarribbonviewport

Can someone guide me on incorporating values from an external server into the app.post function?

After successfully completing the registration process for my app, where users can register and log in to a shop, I encountered a hurdle with the login functionality. Let me walk you through the issue. The function below checks my mongoDB collection to se ...

javascriptnode.jsmongodbexpress

What are the steps for implementing custom edit components in material-react-table?

I am currently using the official material-react-table documentation to implement a CRUD table. You can find more information at this link: . However, I encountered an issue while trying to utilize my own custom modal components for the "create new" featur ...

javascriptreactjsmaterial-uimaterial-react-table

Issue with VueJS instance: Unable to prevent default behavior of an event

Is there a way to disable form submission when the enter key is pressed? Take a look at the different methods I've attempted along with the code and demo example provided below. SEE PROBLEM DEMO HERE Intended outcome: When you focus on the input, pr ...

javascriptvue.jspreventdefault

JavaScript: Locate web addresses within a block of text and convert them into clickable hyper

How can we convert the following PHP code to JavaScript in order to replace URL links inside text blobs with HTML links? A jsfiddle has been initiated. <?php // The Regular Expression filter $reg_exUrl = "/(http|https|ftp|ftps)\:\/\/[a- ...

javascriptangularjs

The never-ending scrolling problem: Autoscroll refusing to halt - a perplexing conundrum in the world

I'm having an issue with my chat box continuously autoscrolling and not allowing me to scroll up. I know where the problem is, but I'm unsure of how to resolve it. Ideally, I want the chat box to autoscroll while still maintaining the ability to ...

javascriptjqueryajaxlivechat

Having trouble executing a fetch request in Next.js

I am struggling to perform a fetch request using getStaticProps in Next.js. Despite following the documentation provided on their website, I am unable to console log the props successfully. My background is mainly in React, so I tried to adapt my approac ...

javascriptreactjsasync-awaitnext.js

What is the best way to retrieve the JSON data from a POST request made through AJAX to a PHP file and save it in an array variable?

My ajax request sends JSON data to a PHP file named 'receive.php'. user_name , user_id, etc. are defined at the beginning of my script but can be changed to anything else. Below is the JavaScript code I am using: const data = { name: user_na ...

javascriptphpjqueryjsonfrontend

Experience the power of VueJS 3 with Pinia, all without the need

I've hit a wall. Despite scouring documentation and countless google searches, I can't seem to find the answer to this straightforward query: how do I install/import PINIA in a VUE application? Let's consider a basic VUE app: <div id=&qu ...

javascriptvue.jspinia

Next.js - NextAuth consistently delivers a successful status code every time

In my Next.js project, I am utilizing NextAuth. The issue I'm encountering is that NextAuth consistently returns a 200 status code and updates the session to authenticated, even when the username or password doesn't match. I've attempted thr ...

javascriptnext.jsnext-auth

What factors cause variations in script behavior related to the DOM across different browsers?

When looking at the code below, it's evident that its behavior can vary depending on the browser being used. It appears that there are instances where the DOM is not fully loaded despite using $(document).ready or similar checks. In Firefox, the "els ...

javascriptlaravelvue.jsdomcross-browser

Safari displays an inexplicable gray border surrounding the <img/> element, despite the actual presence of the image

https://i.stack.imgur.com/4QR52.png There is an unexpected gray border visible around the dropdown image, as seen above. This occurrence has perplexed me because, according to several other queries, this problem arises when the image's src cannot be ...

csssafari

"Improve text visibility on your website with Google PageSpeed's 'Ensure text remains visible' feature, potentially saving you

Click here for the image reference showing the 0ms potential saving message I'm having trouble with a warning in Google PageSpeed and I've tried everything. This is the code I'm using to define the font-family: @font-face { font-family: ...

htmlangularseofont-facepagespeed

Discover the method to activate the back button feature on ajax pages

I am currently working on a website that is navigated in the following way: $(document).ready(function () { if (!$('#ajax').length) { // Checking if index.html has been loaded. If not, navigate to index.html and load the hash part with ajax. ...

javascriptjqueryajaxbrowser-historyhtml5-history

What is the best way to dynamically retrieve a URL and utilize it as a hyperlink using jQuery?

Is there a way to retrieve the current URL and use it as a link in jQuery? For example, if my browser is currently on page mysite.com/index.php?page=post&see=11, I would like to use this URL in my link and append /new/ after the domain name, like so: ...

javascriptphpjquery

leveraging hooks in NextJS app router for static page generation

How can I make an action take effect on page-load for the app router equivalent of statically generated pages from static paths in NextJS? Everything is working fine with my page generation: // app/layout.js import Providers from '@/app/Providers&apo ...

javascriptnext.jsnext.js13react-server-componentsapp-router

Discovering the art of interpreting the triumphant outcome of an Ajax request with jquery/javascript

I recently encountered a challenge with my function that deals with a short JSON string: <script id="local" type="text/javascript"> $( document ).ready(function() { $('tr').on('blur', 'td[contenteditable]', functi ...

javascriptjqueryajax