Naming Files and Organizing Folders

  1. Naming Web Page Files
  2. Organizing with Folders

Up until now we've only dealt with one XHTML file, but that's about to change. We're going to learn how to hyperlink to other Web pages, reference images, and include external CSS files. Before we do so, however, we should take a quick look at file naming conventions and folder structures.

Naming Web Page Files

There are a few rules you should adhere to when naming your Web page files, whether those be XHTML pages, CSS documents, or images:

Additionally, here are a couple of rules specific to XHTML and CSS files:

Organizing with Folders

Root Directory

When you begin building your Web site out, you'll start with a root folder. I typically name this the same as the site's URL or title, e.g. "yourmomscards.com". The Web site's home page, "index.html", should be in the root. The Web site's main CSS document should also be in the root.

Images Subfolder

I always create a folder in my root folder for images. I name this folder "images", but really I can call it whatever I want.

Media Subfolder

If the site is going to have media files--like movies or audio files--I always create a folder in my root folder called "media" (again, you can call it whatever you want).

Section Subfolders

For small web sites you will generally not need additional subfolders:

This folder structure has all of the .html files right in the yourmomscards folder--right in the root. The only two subfolders are the "images" and the "media" folder.

But for large sites, e.g. if each of the sections of my Web site will contain three or more pages, I typically create a folder for each section. In my client's Web site, Your Mom's Cards, I've already identified a couple of sections--Products and Events--and so I would have a "products" folder and an "events" folder.

Each of these section subfolders might have its own "images" folder if I deem that necessary.

And so I might create an overall Web site folder structure that looks like this:

This outlines just some of the folders and files that I may put into my site as it grows!