Your Computer - Organizing files and directories

To fully utilize the content of this course, and to keep you as organized as possible, you must learn to move around your computer (Windows 95, 98) effortlessly.

As you probably already know, you have a floppy disk drive (a:) and a "main drive" on your computer which is usually called the "c" drive. It is on this "c" drive that you will be saving all of your HTML files until you "upload" them to your ISP (Internet Service Provider) server computer so that they can be viewed on the Internet.

It may be a good idea to make "backup files" of your web pages in another directory or onto disks (you can get a ZIP Drive installed on your home computer for as little as $125 that uses ZIP Disks that hold 100 megabytes of information, enough for ALL of your web pages). Remember, once you "upload" your data to your ISP server, you should be able to "retain" permissions to access these files should your customers want you to "update their websites" on a regular basis.

As you will learn to appreciate, organization of your web pages into a distinct and easy to understand folder structure is very important.

Over the years, we have come up with a routine that works very effectively and humbly suggest you follow this procedure unless you find another improved way.

On your main drive (usually drive C:) start off by creating a "master folder" called "webpages".

Inside this folder, created another folder called "basicweb".

Inside this "basicweb" folder create 4 sub-folders as outlined below:

builders
frames
html
images

We suggest that you adhere to the naming convention of 8 dot 3. This means that all files and folders should never exceed 8 characters for the name followed by a period and then a 3 letter extension. The most common "extensions" you will be using starting out will be:

".htm" (hypertext markup language file = HTML file)
".jpg" (Johnson Photographic Experimental Group image format file)
".gif" (graphic interchangeable format image file)

Some other common extensions to look out for are:

".mid" (MIDI - compressed music file)
".wav" (WAV - compressed music or "sound byte" file)

And there will be many more to come...

The reason we use the 8.3 file naming convention is because you may want to move your files or submit them to someone who cannot support the "long filenames" available on Windows 95 systems and later. (These systems are becoming hard to comeby but if you also want to share your data with Macintosh users over a network, then this 8 dot 3 standard is usually required.) Also, get in the habit of using ALL LOWERCASE characters to simplify and aid in consistency.

You should have 4 folders "nested" inside the folder "basicweb". Your very first page, and those that follow in the future will require that you create the "homepage" for your site. This file is ALWAYS named "index.htm" (When you upload your websites to your server, the server is programmed to look for this "index" page as the first page of any website called for by anyone on the Internet)

NOTE: For the ENTIRE Basic course, you should now use this "basicweb" folder and all of it's sub-folders to save your work in. We will be getting into the creation of your first "index.htm" page shortly. This structure for web pages is created for the following reasons and will include the following items.

"webpages" folder
This folder is the "enclosing" folder for your "individual" websites. With this format, you will keep all of your work in one central location on your hard drive which will aid in easier backups and uploads/downloads to and from the Internet.

"basicweb" folder
This folder is the "enclosing" folder for your "individual" websites. For this basic course, it is named "basicweb" and when you are ready to take your talents into the real world, you would create a similar folder structure for individual clients (i.e. "abcauto, bobsbar, myplace, etc.)

"builders" folder
This is the folder where you will store all of your artwork files in progress, any temporary files like cgi scripts, etc. and images that you have downloaded from the Internet to use with your web pages. It is advised that you create sub-folders within this folder as required to further organize your data. (Do NOT create any "master" download folders here where ALL downloads from the Internet are placed as this will cause confusion in the future. Simply hold down your "option" key while dragging files from your master downloads folder to this builders folder to copy the required files into same.)

"frames" folder
This is where you will place all of your "sub-frames" or "child-frames" when you reach the Advanced Course. It is recommended that you create this folder structure now even though you will NOT be writing for frames in this Basic Course.

"html" folder
This folder is where you will place all of your "linked" HTML pages within one website. By doing this, you will stay much more organized when the number of these linked files becomes rather cumbersome.

"images" folder
This folder is where you will place ONLY your "web-ready" images (jpg or gif files). It is important that you ONLY put finalized files into this folder or you can quickly become confused as to which files represent the most updated content.

There are a couple of "critical" things you need to know about navigating between folders when writing HTML pages and including "hyperlinks" or "embedding graphics".

You will see that your "index.htm" page is in the "root" folder of your "basicweb" folder structure or that it is in the "same level" as the sub-folders. Your other HTML pages will be going into the HTML folder and your images into the IMAGES folder and so on. When the "index.htm" page links to to another HTML page or IMAGE file, the coding will include the sub-folder name followed by an "/" (forward slash) and then either the file required or the next sub-folder and so on.

Example: link to a file called "test.jpg" from the images folder on the index.htm page would require ... "images/test.jpg" to be entered in the HTML code. Similarly, a call for another html page called "test.htm" from the HTML folder on the index.htm page would require... "html/test.htm" to be coded.

What if you want to link images or html files from html pages within the HTML folder? Simple. You use the convention in Windows of: "../" (period, period, foreward slash) to "go up one level" or "go back a folder".

Example: link to a file called "test.jpg" from the images folder on the test.htm page WITHIN the HTML folder would require ... "../images/test.jpg" to be coded. (This tells the browser to go outside of the HTML folder one level and look for a folder called images, and then for a file inside that folder called test.jpg. If you wanted to link to another html document called "test_2.htm" residing inside the HTML folder from the file "test.htm" ALSO inside the HTML folder, you DO NOT NEED the "../" because these two files are in the same folder! You would require ... "test_2.htm" only to be coded. But, if you want to link BACK to the homepage (index.htm) you would have to code ... "../index.htm" so the browser knows to go up one folder (or outside the HTML folder) and look in the main folder called "basicweb" for a file called "index.htm".

This procedure can be somewhat intimidating at first and you will definitely appreciate it in the long run. Practice this coding regularly and you will soon become very proficient at it.