HTML 06: Getting organized
Before you start creating more HTML pages, it's time to get things organized. So far, we've been putting all our files and images on the desktop.
First off, let's get them all into a folder called "lounge".
- Left-click on this link: lounge-revised.zip
- Save the zip file onto the desktop.
- Locate the zip file on the desktop. Right-click on it and choose Extract Files...
- Change the path at the top so that "lounge-revised" just says "lounge". Click OK.
- The "lounge" folder should appear on your desktop. Double-click it to check if all the files are in there.
I've added "Back to the Lounge" links to the bottoms of "elixir.html" and "directions.html" which click back to "lounge.html".
Here's what we've got now:
We've got a top-level folder called lounge that holds all our files in the site. This is often referred to as the "root" folder of the fite, which means it is the top-level folder which contains the entire site.
There are three HTML files: one for the lounge, the elixirs page, and the directions. There are five images. All of these are kind of thrown in together. It starts to get cluttered and difficult to find various files after a while.
You'll find that even for modestly-sized Web sites, things are much more manageable if you organize your Web pages, graphics, and other resources into a set of folders.
Organizing the Lounge
Let's give the lounge site some meaningful organization now. Keep in mind there are lots of ways to organize any site. We're going to start simple and create a couple of folders for pages. We'll also group all those images into one place.
Our root folder is still the lounge folder. We're going to leave the main "lounge.html" page in the lounge folder.
Let's create a folder called about to hold pages about the lounge, like the directions. We could also add new pages here about the management, events, and so on.
We'll also create a folder called beverages to hold pages about the lounge's beverages. Right now that's just the elixirs, but we'll be adding more.
And let's group all images into one folder called images.
Exercise
Now you need to create the file and folder structure shown above. Here's exactly what you need to do:
- Locate your lounge folder on the desktop. Double-click on it to open Windows Explorer.
- Create three new subfolders ("Make a new folder") named:
- about
- beverages
- images
- Move the file "directions.html" into the about folder.
- Move the file "elixir.html" into the beverages folder.
- Move all the images into the images folder.
- Finally, load your "lounge.html" file into a browser and try out the links.
Technical Difficulties
It looks like we've got a few problems with the lounge page after moving things around!
We've got an image that isn't displaying. we usually call this a "broken image."
And, when you click on elixirs (or detailed directions) things get much worse: we get an error saying the page cannot be found.
The "Back to the Lounge" links on "elixir.html" and "directions.html" are broken too.
Why is This Happening?
Right. We need to tell the browser the new location of the pages and images.
So far you've used href values that point to pages in the same folder. Sites are usually a little more complicated that that, though, and you need to be able to point to pages that are in other folders.
To do that, you trace the path from your page to the destination file. That might mean going down a folder or two, or up a folder or two.
But either way we end up with a relative path that we can put in the href. That will be the topic of our next lesson.
Source: "Head First HTML: with CSS & XHTML" by Elisabeth Freeman and Eric Freeman
