Subfolders in a web-design project

authorandrew · 06-10-2010, 11:52 AM

Hi everyone,
I've been coding for about eight months now in HTML, XHTML, etc, but the projects have always been small snippets which means that I've been able to keep everything in one folder with no subfolders. Now that I'm starting my first project...I find that I can't use subfolders.

The correct use of a subfolder would be like this:

Code:

<img src="/subfolder/image.jpg" />

Am I missing something or is this not the right way to do this...assuming that the subfolder is in the same folder as the HTML file. When I do this the image doesn't show up but if I put it in the main folder and adjust the code accordingly it shows up fine.

Thanks,
aa

effpeetee · 06-10-2010, 12:01 PM

<img src="/subfolder/image.jpg" />

I think the leading slash is not necessary.

Frank

VIPStephan · 06-10-2010, 01:08 PM

Look into relative and absolute paths. If you’re developing locally (i. e. without server) then you should use relative paths.

Absolute path with specific domain:

Code:

<img src="http://example.com/subfolder/image.jpg" />

Domain independent absolute path (will look for the file from the root directory – in your case this looks for a subfolder in the top directory of the hard disk):

Code:

<img src="/subfolder/image.jpg" />

Relative paths, relative to current HTML document:

Looks for the file in a folder on the same level as the document:

Code:

<img src="subfolder/image.jpg" />

Looks for the file in a folder one level above the current document:

Code:

<img src="../subfolder/image.jpg" />

In CSS and HTML files you write the paths relative to the current file. In external JavaScript files you would write the paths relative to the document where the script is executed (i. e. relative to the file where the path is used).

authorandrew · 06-10-2010, 02:32 PM

It worked after removing the leading slash. I'm not planning on putting this page on the web, but for the purposes of learning, let's assume that I were going to. Would I have to redo all of these paths as absolute url's, or the fact that they would be hosted in the same folder as index.html makes it all right as it is?

Thanks a lot,
aa

VIPStephan · 06-11-2010, 08:49 AM

Yeah, if the structure (i. e. the relation of the files to one another) stays the same then you don’t need to change anything.

abduraooft · 06-11-2010, 10:09 AM

Quote:

Would I have to redo all of these paths as absolute url's, or the fact that they would be hosted in the same folder as index.html makes it all right as it is?

You may practice the things by installing a local server in your machine like xampp or wamp and you could use the absolute paths after setting up a virtual server there. ( Personally, I prefer absolute paths as it's very easy when dealing with complex directory structures or when making friendly urls)