Folder Level organization & moving up or down

Get Started
1

Lets say I have a website project folder called “Widget Business Suppliers”. Currently I have my basic template made up and I am now copying it for the different tabs on my header. So I have a Home, FAQ, Services, Contact, Gallery, & About.html file associated button. So I have no problem navigating around these.

On the services page I would like to very briefly cover each type of service and then have a page dedicated to each of those. So would I have a “Services” Folder in my directory then have Service 1, Service 2 , Service 3, etc…? Is this how it is typically done? Now I have been able to move down the tree but have not been able to go back up. For example from my Services page I can go to Service 1 with (services/service 1.html) But how do I go back up from Service 1 to the FAQ?

I did find a site that said something about using the “…/” but I could not get that to work.

Let me know if you need more info. Thanks.

2

It’s technically correct what I wrote but possibly a little confusing a bit like the following:

A ‘relative link’ is where you supply the information needed to get to the destination as it relates to your ‘current position’. Much as you’d ask someone to drop off a note to Mrs. Robert’s ‘next door’ - first you wouldn’t have to put the ‘full address’ on it, and secondly if you made the same request when you were in a ‘different town’, ‘next door’ would not mean the ‘same house’ (as when you were at home).

It’s just an alternative way of expression. :slight_smile:

3

you need better examples (or at least more detailed examples) because your example would only match if your current position is in a direct subfolder of your document root/base URI (document root is your base URI per default, but you can change this, e.g. by adding the base tag in your <head>). If you’re in www.example.com/galleries/gallery1/photo1.html then it refers to www.example.com/galleries/icons/logo.png - that’s why I recommended to always start with the slash and work upwards, rather than downwards, i.e. /icons/logo.png rather than …/icons/logo.png

4

honestly, I think you’re explaining it incorrectly or at least highly confusing.

5

What you are referring to is called Relative URIs – or usually referred to as “relative links” - which may contain relative path components (e.g., “…” means one level up in the hierarchy defined by the path).

As was mentioned you need a base URI, if have something like; http://www.example.com/ and then have the following <img src=“…/icons/logo.png” alt=“logo”> that would match http://www.example.com/icons/logo.png obviously you could also use “…/…/…/somefile.htm” to go deeper.

6

Thanks for the in depth reply. I will have to wait until I get home to try it out but everything you said makes sense.

7

I lost everything I’ve just written… so lets try it again:

lets assume you’ve got this folder structure:

/index.html
/faq.html
/contact.html
/services/index.html
/services/service1.html
/services/service2.html

first, a couple of things regarding this:

  1. index.html should be your home, i.e. your main page. index.html is generally called automatically when you type in your domain, e.g. www.example.com will display the contents of index.html. You can change this but lets not go there.
  2. while not absolutely necessary, use lowercase for your filenames and don’t include any spaces, either write everything in one word or use - to separate words, e.g. experts-exchange
  3. every folder should have an index, as in 1. the index file will be normally called automatically when browsing to the folder, e.g. www.example.com/services/. So it would make sense to replace services.html with the index file of that folder. Links to that file then should be of the form:
<a href="/services/</a>Services</a>

the link won’t work if you’re trying this out on your local machine without having set up a local server (Xampp or Wamp - get either one of them and set them up, it’s not too difficult - in the case of Xampp, you then put all your files in the htdocs subfolder).

Back to your question, …/ should actually work to move one folder above, and the server will look for the index file. But again if you’re trying this out on your local machine this might not work. To call specific files, …/about.html should work.

However, I’d personally prefer to use the slash:


<a href="/">Home</a>
<a href="/about.php">About</a>
<a href="/services/">Services</a>

the slash tells the browser to start from root, so again this might not work on your local machine or if you’ve put the site in a subfolder on your local server, i.e. in htdocs/myproject. The advantage is that you don’t have to change the links in any of your files, regardless of how deep down the structure they are. Another advantage is that you now can put the menu code into a separate file and use php to include this one file in all your other files - you’d have to change the file extension to php and your local machine, without setting up a local server, won’t be able to display you those php files. The amount of php needed to achieve this is tiny:

<?php include '/includes/menu.php'; ?>

This line of code would go exactly where you’d have the html of the menu in your code.

For structural purposes I’d put such files in a separate folder, and just to keep it consistent would use the php file extension even if no php is in the actual file - it’s then just a simple html file but with the php extension. In this file, you only need the code for the menu, so no <html>, <head>, <body> etc., e.g.


<ul>
  <li><a href="/">Home</a></li>
  <li><a href="/about.php">About</a></li>
  <li><a href="/services/">Services</a></li>
</ul>