Jump to content

Web folders structure and relative links - help/advise


nomnex
 Share

Recommended Posts

Question 1 - Folder Structure:What is the proper, if not the best folder structure for a web site (knowing that the site will increase in size): B, C or Other, and why?

A - Current - all files at the same level:+ site	index.html	topic.html (all topics)	basic_08_formatting.hmtl	basic_09_styles.html	css_01_introduction.htmlB - index + topic indexes at the same level. Topics in sub-folders:+ site	index.html	html.html (topics)	css.html (topics)+ html	|-- basic_08_formattig.html	|-- basic_09_styles.hml+ css	|-- introduction.html		C - index at level 1. topic indexes + topics in sub-folders:	+ site	index.html+ html	|-- topics.html	|-- basic_08_formatting.html	|-- basic_09_styles.hml+ css	|-- topics.html	|-- introduction.html (topic index)

Question 2a - Relative Links:When I try my files locally, on my browser, with a different folder structure than "A", I experience some difficulty with the relative link syntax:

In folder structure A, relative links are made easy (example):To link "basic_08_formatting.html" to "html.html"rl: <a href="html.html></a>In folder structure B or C the result is different:To link "/html/basic_08_formatting.html" to "html.html":rl: <a href="/site/index.html"></a> - does not workrl: <a href="../index.html"></a> - worksIs there another syntaxes (on Linux) to create relative links from files in a sub-directory to files in a parent directory?I believe this only apply on my system but not on the web server. E.g. if I had a local web server, the relative link <a href="/site/index.html"> should work. So does it mean that -- without a local web server and with the limitation of one's file system -- it is better to have only one level web folder structure? (please ask if my question is not clear, and if I need to rephrase)Question 2b - Print-Screen:I have modified the folder structure from a single folder to sub-folders. Could you tell me how to reflect the change in the relative links (highlighted)?Thanks
Edited by nomnex
Link to comment
Share on other sites

Folder structure is upto you and what you find best to work with. I tend to put most of the pages in the root folder, and then CSS, Javascript and images (and any other non-html pages) into sub folders - keeps it organised.As for relative links.../ goes back 1 folder level./foldername/ goes forward one folder level to a folder called 'foldername' and looks for the index file in there. If your in another subfolder and want to get there, you use ../foldername/ in your link. Go back 1, then go forward 1 into the new folder. This tends to get confusing on larger sites where you have multiple folders and subfolders within other subfolders, so theres some trickery involved - usually displaying absolute links instead of relative links. For smaller sites this is probably not needed.Hope that helps.:)

Link to comment
Share on other sites

I also use real illusions method, (site pages in the root, including css), and sub-folders for other files/documents, (i.e. images, scripts, etc). This way, all paths to sub-folders will be relative to the page I'm in/on. i.e. images/picture.png. No matter where I move my root folder to, none of the links or folder structures have to change.

Link to comment
Share on other sites

thank you for the answers and advises.so, my current default "A" (all HTML pages in the root dir) seems the best solution for the purpose of using relative links (that makes good sens). Can you tell me what is--for you--an average web site in .html page count (10/50/100/more...)?regarding the links, can you explain me to purpose of using absolute links? I understand absolute links come in handy IF I host my site on my own server and if I have several level of directories. But at the moment, the .html files are on my system. I test them on my browser and then upload them on the server trough ftp. So, unless I have missed something, if I use absolute links, I will have to re-write them when I upload to the server, is that correct?Example:My location: "/home/user/websites/site/html/page01.html"I link "page01.html" to the "index.html", located in: "~/websites/sites/"I use an absolute link syntax: <a href="/home/user/website/site/index.html"></a> (vs. an relative link: href="../index.html")Now if when I upload the page to the server, the link returns (of course) a 404 msgI have to re-write the absolute link to server path: <a href/"/home/a2327458/public_html/index.html"></a> before to upload the page to the server.... so I don't understand well the point of using hard links in the example, can you tell me?EDIT: <a href/"/home/a2327458/public_html/index.html"></a> is incorrect. So not only I don't understand the point of using absolute link as in the example above, but in addition, I don't know what is the correct syntax of an absolute link on the web server? Can you also tell me the syntax or how do I find the their full path? - thanks.EDIT2: I guess, I am simply making a mistake between full/relative folder path (unix) and relative/absolute link (web). Isn't a absolute link simply <a href="http://www.mysite.com/index.html">?On last think about link, when is it I have to write a final slash at the end "/"e.g. <a href="/index.html></a> or <a href="/index.html/></a>? I guess it was related to sub-folders, but I don't remember.

Edited by nomnex
Link to comment
Share on other sites

I try and use relative linking for all files on my sites. I use something like "root" as my main folder, and just pretend that is the htdocs folder I will be uploading to on the server. The bigger pictures being that as long as my files stay relative to the html files in this root folder, it doesn't matter where I move this folder to; another directory on my computer, my friends computer, or a web server. So typically, my folder structure would look something like this:

+root/--index.html--about_me.html--contact.html--+images/----banner.jpg----picture1.jpg----picture2.jpg--+scripts/----script1.js----script2.js

basically I make my html pages in the most top level directory, and everything else below them. Image, scripts, whatever. This is the trick to making relative folder structures. I would only use absolute linking when accessing content, images, etc outside my domain.So all my images/script/etc paths in my HTML just look like this:<img src="images/banner.jpg"/> Very clean, very organized, and portable Just the way I like it.

Edited by thescientist
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...