File and Folder Mangement
for Your First Web Page

In three years of helping students in the Mac lab, I've noticed one common problem new Web-page creators have with making things work: They don't know where their files are!

I'm not the most organized person myself, but here's an idea that might keep things straight:

1. On the disk you use to create Web pages, create at least two folders, one named MyWebPages and the other named DraftsInProgress. Or call them "MyWeb" and "Drafts" if you use a machine that doesn't like long folder names or if you just like to be brief and can still keep the names straight. I'll use the short forms in this example. Use this technique whether you are working on a floppy disk, Zip disk or 10-gigabyte hard disk. (If you are working on more than one Web site, have "MyWeb" for your personal page, and separate folders for other sites, such as "WorkWeb" or "JoeWeb" if you're making a site for work or for Joe.)

2. In the Drafts folder, put everything you're working on that's related to your Web pages -- notes, first-drafts, next-to-last-drafts, borrowed images, scanned photos, sample pages you downloaded, etc. Add subfolders if you have so much stuff that it's hard to keep track in just one. Avoid letting files accumulate outside the two folders, especially files with names similar to those in the folders.

3. In the MyWeb folder put ONLY the latest version of files ready for uploading to your Web server. Its contents will be a full copy of what you have on the Web.

4. If you are using more than two or three images on your pages, or if you just like to be very organized, create a folder named "images" inside the MyWeb folder. That's where you will put the final .gif or .jpg files you use on your pages.
   IMPORTANT: If you do use an "images" folder, check before you upload each .html file to be sure all the <img src="xxxx.gif"> codes in your web pages say <img src="images/xxxx.gif">
   Keep the name of the "images" folder in lower case and write your HTML links in lower case too, since that's standard on most Web servers.

5. Code links between your own documents to link to the filename, such as <a href="resume.html">My Resume</a>

6. You will probably want an "index.html" file to be the "home page" for your Web site. Web browsers are programmed to look for a file named "index.html" at the end of a URL pathname. So when you go to www.unc.edu, you are really going to www.unc.edu/index.html. When you go to www.unc.edu/courses/jomc50/july98bob you are realy going to www.unc.edu/courses/jomc50/july98bob/index.html. By using an index.html file you give visitors a shorter pathname to type, and you keep them from seeing the ragged list of all the files you have in your directory.

   You can keep the early drafts of your index page in your "Drafts" folder under a name like "homepage.html" or "bobpage.html" - then save a copy of the final version into the "MyPage" folder and rename it "index.html" when it's there. That way you won't risk overwriting your "real" index.html file with another, especially if you're working on more than one Web site or in more than one directory, all of which have files named "index.html"

7. Test your Web pages while they are still on the disk. They should find (display) their in-line graphics and the links between pages should work, because the relationship between the image files and the .html files is the same as it will be on the Web server. If the links or graphics don't work, fix them on the disk before you upload to the server.

8. When everything works, it is time to upload your Web creations: use FTP or Fetch to copy everything in the MyWeb folder to your directory on the Web server. Do not upload the folder itself.

9. Warning: Some Web-editing programs you find in computer labs may make duplicate copies of your image files and link to them in the same folder as your .html files. If you use Netscape Composer or another Web editor, inspect the code it generates and make sure it makes the same assumptions about your image locations that you do!

   • Note1: You can use this technique with multiple Web server directories, either sharing a single "images" folder or having a separate "images" folder in each directory. Just remember which technique you're using! On most file servers, the code "../" means "go to the folder above this one in the file structure of the disk." Like this:
     <a href="../silly.html">Silly</a>

   • Note2: This technique of linking to simple file names and folder (directory) names is called "relative linking." With this technique, you won't have to recode all of the links if you move the whole Web site to a new Web server. (For instance, when you graduate and lose your email account.) On the other hand, if you are linking to parts of the server you do not control, make those links "explicit," such as
     <a href="http://www.unc.edu/courses/jomc050">A course I took</a>

   • Note3: If you are using a lot of graphics that appear on more than one of your pages, you may want to upload individual graphics to the "images" folder as soon as they are ready, even if you are still working on your pages. In that case, you can use explicit links to each image at its full Web address so that you will not need a copy of the image on your work disk, such as
     <img src="http://www.unc.edu/courses/jomc050/images/deb.jpg">

   • Note4: If you are doing a lot of linking between directories on a large, stable, complex site, it may be simpler to use "explicit linking" with a full URL than to keep track of relationships like
     <a href ="../../../bob/silly.html">Bob's Silly Page</a>