- Understand how folders/directories work
- Create links between different pages
- Understand how to keep a tidy site
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.
../vehicles/diggers.htmlThe 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.
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.
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.
This car is very good for carrying <a href="../cats/index.html">cats</a> as it has a large amount of space.
This car is very good for carrying cats as it has a large amount of space.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.
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.
- 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
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.