html - How do I link to a file in a different directory without using the whole address?

Question

I'm building a website on my computer's local server, with the plan to upload to my webhost with all the links and relative pathways intact. However, I've run into a problem with how to link to pages and images in directories higher up the hierarchy chain.

For example, let say my website is about food and all my logos and stylesheets are in the main .com directory. Then I add the subdirectory "fruit". Sure, I could keep all my Fruit images in the fruit directory, but how would I link back to my logo and stylesheet, and still have links that work when I upload everything to my webhost? When I would edit websites online, just plugging in the whole address was no problem (caused issues if I ever wanted to change the domain, but it would work), but building a website offline on my computer is causing some organizational issues.

Help?

Answer 1

You have to use ../ to go up on level in a directory

 <a href="../your/path.html">Go Link</a>

If you want to go straight to the root directory. you have to start your URL with /

  <a href="/your/path.html">Go Link</a>

PS: Be aware that relative path inside CSS file will consider the .css file as starting point.

  body {
     /* Look for image.jpg in the same directory as css file */
     background-image: url('image.jpg');
  }

  div {
     /* Look for image.jpg one directory up in the hierarchy */
     background-image: url('../image.jpg');
  }