What this session is about

At the end of this page you will almost certainly be able to...

• Understand how folders/directories work
• Create links between different pages
• Understand how to keep a tidy site

To view this page as a video, download this file (15.7mb), you'll need quicktime.

Folders and/or Directories

Before you can link to other pages, you need to know how HTML sees other folders and files. Just in case the diagram above is not perfectly clear I will explain it. The blue things are folders and the white and purple things are HTML files.

The lines indicate what is inside what. Firstly in the top left we have a folder called "Pages" which has inside it two different folders. One of these is called "vehicles" and the other is called "cats". To point from one file to another we use a reference, a reference looks a little like this. The reference has several parts, these parts are neatly divided up with the use of the "/" (forward slash) character. The first part appears to be two dots, this means to go "up" a folder, so if we were in the "Cats" folder, we would then be in the "Pages" directory.

Next up we have "vehicles", this means to go into the folder called "vehicles", simple huh? Well, there's a catch, it's case sensitive so if you use Upper and Lower case letters, you have to remember where they are or it'll tell you your reference is broken and then your site won't work properly and people might call you names.

Lastly we have "diggers.html". This points at the diggers.html file, we know it's a file not a folder because it has the ".html" extension on it, if we'd used just "diggers" then we'd be looking for a folder called "diggers" and again, we'd have a broken reference. Have you seen that all my files and folders are all written in lowercase? This is because links are case sensitive. Doing this I then know that there are no uppercase characters in the names and thus make fewer mistakes when creating links.

What's with the index page?

Consider the URL http://woarl.com/html. Using what you've just learnt, you can say that it is pointing to a directory (there's no extension). When you point a URL at a directory you cannot be pointing at a file. There is nothing wrong with doing this, the computer that is keeping the web page will look for an index file, in this case, index.html. If it cannot find an index file, it will list all the files in that directory.

An example of this is the Season 1 Buttons folder. That's not a problem, now imagine that folder contained pictures of something you didn't want everybody to see, to prevent that you should put an index.html file in the folder, I've done it for my main images folder.

Linking

Lets assume we're writing in the cars.html file, and we want to link to the index.html page inside the cats folder, how would we do it? We use an <a> tag. However, we can't just stick it inside an <a> tag as we would a <strong> tag. No, we need to say where it's pointing, the computer doesn't magically know where we want it to go.

Welcome to "attributes". We can give some tags extra information, in the case of an <a> tag, we can tell it where its reference is pointing. Which would output as... (link will be broken, it'll be pointing at "http://woarl.com/html/pages/cats/index.html") The part coloured in Orange is the name of the attribute, after the name of the attribute we have an equals sign and then the value of the attribute is contained within a pair of quotes. You can use double or single quotes, it's not important, just make sure you don't try to use different quotes at the same time, it will not work. I use double quotes because I can then put in apostrophes without it thinking I've ended the attribute.

There's more

<a> tags actually have more attributes than just the href. They also have a title attribute. The title attribute explains about the page you are linking to, put keywords relevant to the page in this attribute.

An ordered site is like an ordered mind

Why would you want to keep your site tidy? You know where all 5 of your files are don't you?

• As you add more pages to your site, it will quickly become untidy if it's all in one folder
• Having an ordered site means that you will have fewer Broken Links
• Having an ordered site means that it is easier to maintain and make changes to, it's also easier to add new content to it

The problem

I manage a site with over 130 pages, it also has a forum. Now, I could put all the pages, forum files, images and suchlike into one folder called "site". Then of course I would be in trouble if one of the pages was called "fire" and then I needed to have another one also called "fire", I could name it "fire2" but then how would I tell one of them apart? One could be about starting fires while the other could be about putting them out! Now, I could easily give them longer names such as "startingfires." and "puttingoutfires" but that's not easy to type quickly and lets face it, giving out long links to friends takes a long time.

The solution

This site has a main folder called "html", inside that folder it has folders "pages", "images", "forum", "css" and "includes". CSS is something you get to learn about later and makes your site look pretty (or if you're my sister, bright pink). The "includes" folder holds things such as my Javascript and other cool stuff that make maintaining the site much easier (that's something you learn after CSS). At the time of writing this site is under 20 pages in size, however, as it grows I will do what I have done with my main World of Arl site.

When you have 130 or more pages (you can do it with fewer if you like, you don't have to have 130 pages to do this), you need to split them up somehow. Thus my "pages" folder contains approximately 13 other folders, each with approximately 10 pages per folder. This means that each file can have a short name and also has a little bit of information given simply from the name of the folder it's in. On both this site and my World of Arl site I've subdivided the "images" folder into different sections for much the same reason.

Nothing terrible will happen if you don't keep a site nice and tidy, but it will make your life a lot easier if it is nice and tidy.



        Note: Yes, I know that the vans.html file is inside the cats folder, it's there as a little joke, please don't send me thousands of emails telling me I'm an idiot, my friends tell me that all the time.