NHS Designs


Web Design

HTML 06: Getting organized

photo of Lounge lizards

Here's what we've got now:

web site organization
Click for a larger image.

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 in an images folder. Without that images folder, itstarts 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. We're going to put two of our HTML files into folders as well.


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.

new site organization
Click for a larger image.

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.



Now you need to create the file and folder structure shown above. Here's exactly what you need to do:

  • Locate your lounge folder.
  • Create two new subfolders (File > New > Folder) and name them:
    • about
    • beverages
  • Move the file "directions.html" into the about folder.
  • Move the file "elixir.html" into the beverages folder.
  • While we're at it, add "Back to the Lounge" links to the bottoms of "elixir.html" and "directions.html" which click back to "lounge.html".
  • 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!

When you click on elixirs (or detailed directions) things are bad: 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?

Why is This Happening

Right. We need to tell the browser the new location of the pages.

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.



1. Draw a map on a sheet of paper showing the new structure of the Head First Lounge Web site.

  • Draw folders as wide rectangles with tabs.
  • Draw pages and images as tall rectangles.
  • Draw the top-level (or root) folder at the top of the map.
  • Label each folder, page and image with its name. You can put the name inside the rectangle or below it.
  • Draw lines connecting folders to their contents.

2. Answer these two questions on the same paper:

  1. Why are links to other pages and to images broken when we change the structure of the site?
  2. In the next lesson, we will learn how to write a _____________ path in the href attribute.

3. Turn in your lounge folder.


Source: "Head First HTML with CSS & XHTML" by Elisabeth Freeman and Eric Freeman

resources · copyright information · Natomas High School Design Department