Organize Files on a Website
Are you setting up a website, but are confused about how to arrange data on the server? This tutorial will show you the proper method for arranging files on your website to minimize load time and maximize the probability of finding it, both for you and for the people who visit your site.
Steps
- Be consistent. Whether you end your files with .htm or .html doesn’t matter; what matters is keeping it the same across the entire site. Of course, this is only an issue if you hand-code the site. If you are using an HTML editor such as Dreamweaver, it will automatically save the file with one extension or the other every time. You can very feasibly have many different HTML files on a server with a hodgepodge of extensions and it will work just fine. You could even use different names for the files, such as home.htm, but the point is to clean up your server and make things nice and tidy. So, rule number one is: “Pick a method and stick with it." For this article, all HTML files will be referred to as index.htm.
- Have only one HTML file in a given folder. Label the file index.htm and label the folder what you want the link to be called. For instance, if you are creating a page about puppies, create a new folder called puppies in your root folder (the one where you have the main index) and create a file in that new folder called index.htm. You’re probably asking by now, “Isn’t that a lot of redundancy? I only have five pages on my site; why do I need such a detailed organizational plan?" Glad you asked! Organization is the key to easily finding files, and arranging files this way also shaves off valuable seconds in load time. How? First, findability is maximized because we have been trained to look for files inside of folders. This is how your operating system is laid out, and for good reason, too. If you open a folder and find hundreds of non-related files, finding the right one you’re looking for will be difficult, at best. Place secondary folders inside the main folder to arrange the data into logical groups. Load time is affected, too, because browsers look for a folder first, then an index of that folder. Searching for a file named puppies.htm is non-standard, so load time is going to be fractionally longer while it deduces whether puppies is a folder or a file, and then deduces what kind of file it is. Name the folder puppies and name the file index.htm; that way your visitors will have a more pleasant experience on your site, as their load times will be lower. Plus, if you ever want to add another file that also deals with puppies, all you have to do is add another folder inside the puppies folder, name the new folder brown puppies, and, again, name the HTML file index.htm.
Tips
- Folders aren’t just for your pages. Put all your files in folders so that they are neatly arranged and easy to find. The only files that should be in your root folder without their own folder is the main index (which, technically, has its own folder; it’s whatever the name of your site is), the .HTACCESS file, the favicon.ico file, and the robots.txt file. If you don’t have an .HTACCESS file, a favicon.ico file, or a robots.txt file, don’t worry; they’re not necessary. However, you might consider creating them—if for no other reason—to keep 404’s down, because browsers look for these three files every time they hit your site. Every other file besides these, including style sheets and images, should be in their own folders. The difference between these storage folders and the standard page folders is that there will be no index file. You can name your CSS files whatever you want and put them all in the same folder, and you can do likewise with your images.
- Linking to your newly-organized file structure will now be much simpler. You don’t have to include the file name at all. In browser-speak, a “/" means “root" or “index". So to link to your new puppies file, all you have to do is type the URL as www.mysite.com/puppies/ (notice the trailing "/") and the browser will automatically know to search for a file called index.htm. This is where you really start shaving seconds off your load times. And an added bonus is that you’re covered if you ever decide to change the software you are using to make your site. For instance, say you decide to switch to using PHP or Cold Fusion; your link structure is set up to link to the folder, and your files are all called index.htm. So when you change the files from index.htm to index.php there are no problems. Your links still point to www.mysite.com/puppies/ and people who have bookmarked that page won’t get a 404 error; they’ll simply get your new, shiny index.php site. Rule number three is: “Link to folders, not files."
Things You'll Need
- Web space where you have access to the control panel. Most free hosts won’t let you access this port, but there are many hosts out there that offer very cheap web-hosting, which can be affordable by almost everyone. Make sure when you are choosing a host that you will have access to the control panel in order to make changes in the file structure.
- A WYSIWYG editor (What You See Is What You Get). This is not completely necessary, but it can get rid of a lot of your frustration. Plus, if you don’t have access to your control panel but do have FTP (File Transfer Protocol) access, you can still modify your file structure with a WYSIWYG editor such as Dreamweaver. Although, any FTP program will have this same functionality.
- Backup copies on your local machine. If you’ve ever had a hard drive fail, then you know the importance of backing up all your data. Don’t let your hours of work go to waste; if your host’s computers die, or if the host disappears off the map, you’ll be stuck having to start from scratch. Always keep a backup of your entire site on your machine, and a backup on cd-rom or floppy disk. Also, keeping your files on your local machine will give you a chance to perfect your file structure in the familiar environment of your operating system, and then upload them with a FTP program.
