Login | Register   
RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


HTML Basics: Style and Structure : Page 3

Learn some basic rules for making your HTML files easy to reuse and edit.


File Directory Guidelines
Your Web site is made of many individual files. In addition to organizing the content inside each file consistently, it is a good idea to save the files in some logical locations with logical and consistent names. A good directory structure makes it easier to transfer files to and from your site and simplifies site maintenance.

Here's a few guidelines to help you get started:

Structure Tip #1: Keep Related Files Together

Put related files into the same directory. For example, if you are making a home page about how you are an athletic star, you might have a baseball directory, a hockey directory, and a basketball directory. All the files about you and baseball go into the baseball directory, the one about hockey into the hockey directory, and the ones about basketball into the basketball directory.

Within each directory, put the same types of files together in subdirectories. For example, you might make an images subdirectory in your baseball directory and put all your jpegs and gifs of you rounding the bases there. In the hockey directory there will also be an images folder containing all your hockey images.

Structure Tip #2: Put Common Files in a Top-level Directory

Put elements that are used across the entire site in a top level directory, so you only need one copy of each file. For example, you might have a top-level directory called siteimages, which contains your logo and your smiling face.

Structure Tip #3: Create Index Files

Create a file called index.html and save it in the top level index. This file should contain the opening page of your site. This is the page that will load into a browser by default. When readers type http://www.bigego.com, this opening page will load.

Create a file called index.html within each of your subdirectories. Each of these index files will be the opening page for its respective section. When readers type http://www.bigego.com/baseball, your baseball index will load.

For example, If your main Web directory is called "public_html" you might have a directory structure like this:

public_html (main html directory)

     images (contains the site-wide gifs and jpegs)
     index.html (the opening page)

     baseball (a subdirectory)
          index.html (main page of the baseball section)
          images (contains baseball-related gifs and jpgs)
          sounds (this contains baseball-related sound files)

     hockey (a subdirectory)
          index.html (main page of the hockey section)
          images (contains hockey-related gifs and jpgs)
          sounds (contains hockey-related sound files)

     basketball (a subdirectory)
          index.html (main page of the basketball section)
          images (contains basketball-related gifs and jpgs)
          sounds (contains basketball-related sound files)

Each of the subdirectories holds files of the appropriate file type and category of files. This type of structure makes it easier to keep track of your site as it grows. If you put a structure in place like this at the beginning, then you won't be faced with a cataloging mess later.

Comment and Contribute






(Maximum characters: 1200). You have 1200 characters left.



Thanks for your registration, follow us on our social networks to keep up-to-date