A critical element of doing good web design is building solid file structures that are easy to understand and use. Today we'll work with this concept as we learn a bit about the program.
Pathways
Essentially, everything on a web page is a series of instructions to the web browser on how to construct the page. That is what the pathway does — it gives the browser a precise location where it can find the element that needs to be shown (a photograph, a Flash file, a bit of audio, a link to another page, etc.) The full pathway includes everything needed to find an element; this is also called an absolute URL: parts of the full pathway
It is also possible to use relative pathways. These relative pathways can be relative to the document (or the page that you’re currently viewing), or relative to the site root (which is the main folder holding the whole website).
How to name your files & folders
Technically, pathways can be long and complicated, but for humans, this can prove challenging. So I recommend a few simple rules to make designing your file structures easier:
1. All lower case letters.
All links in HTML are case-sensitive. Some servers do not recognize upper case characters. Some recognize both, but if you start adding upper case characters randomly, it makes it more difficult to remember. The main thing is that it's much less work for you to type in lower case only; also, if you have memory issues, then you won't have to remember if you used upper case letters.
2. No blank spaces or punctuation in the name.
Similarly, servers have to interpret what that blank space actually means. Most put [%20] where there is a blank space, but some put in other characters, and these will mess up your links. If you must have a space in the name, use the underscore [_] character, so names will look like: adobe_1.html. And punctuation is also a problem, so avoid it.
3. Create short, descriptive names.
Pick a name so that you will be able to recognize what the page is, just from reading the name. This will save you hours of time by not opening the wrong files. Also, make the names related. The exception to this is that the front page of each section (or the front page that belongs to that folder) should be called "index.htm".
4. Best practice: create a file structure that someone else can look at and understand
Why this is so important in web design
Essentially, html is a set of instructions. Think of it as a recipe for how a web page should be put together, written for the browser software (Netscape, IE, Firefox, Safari, etc.). A lot of what you see on a web is actually in the recipe itself -- in the HTML file.
But a lot of the ingredients are in other files. One of the trickier bits of those recipes is showing how pages are linked together and how to show images and other media files. This is why good file structure is so important, because that is how you instruct the browser to put the page together.
Learn about Relative Links here.
Answers to the relative link self-test:
- blues/mixed/index.html
- ../blues/mixed/aqua.html
- http://colors.com/blues/dark/index.html
- ../../reds/index.html
- aqua.html