Teachers.Net - THE TEACHER WEBSITE! Teacher chatboards and teacher chat rooms, lesson plans and teaching tools, teacher job listings and career resources, reference desk and curriculum tools, everything for the on-line teacher!Click me
The Teachers.Net Website Handbook

Chapter Five - Uploading Your Webpage
Okay, you've stayed with me so far, and what a long way we've come! We now have a powerful arsenal of web tools and manuals, we've even learned how to make our own web pages. Now there's just one thing left to do - we've got to create a website, and get it out to the world!

CREATING YOUR DESKTOP WEBSITE

If you remember a few chapters back, I showed you a picture of my desktop, and it had an icon called "counsel." This, I told you, was an icon for my folder which contained an exact duplicate of my website on my remote server. When I want to make a change to my website, my first step is to edit the desktop version of my website, then when I like the change, I upload the changes to my remote website for all to see. This allows me to work on my site with no danger to my existing pages.

Having two copies also allows me a safety net. It allows me an exact mirror of my site in two locations in case something goes wrong. I also periodically archive my desktop version onto a safe place so that if the unthinakable happens, and I lose both copies by uploading a major goof-up, I won't lose more than a few days work. If you have Stuffit you can just drag-and-drop your entire site across the application to make a copy you can squirrel away for safe keeping.

If you want your website to function at all, you will need to arrange it in a certain fashion, placing all of the proper folders in the proper places, and using the proper name for each file. For example, you must name all web pages with a ".html" extension, and they cannot have any spaces or illegal characters in their names. Images also must end in a ".gif" (gif's) or ".jpg" or ".jpeg" (jpeg's). Files that are meant to be served as pure text should end in ".txt."

In addition to these rules, you should also follow a few other rules to make your work easier when you try to find the page or image you're referencing. For example, every file name should be in lower case, for consistency, and all of your images should be grouped in one spot. These rules allow you to quickly track down the files you need, when you need them.

figure 2            
a typical desktop website        A desktop Website

You will want to arrange your website in an organized fashion. All files and images will be "referenced" from your server by the specifying the "path" the server should follow to send that document or image. Most people elect to place all of their images in a folder called "images" and store this at the top level of their website. It is also a good idea to create a set of subdirectories in the images folder, because this folder will quickly become very crowded. Smart choices for subdirectories here might be "backgrounds," "icons," "people," whatever your website will feature.

Directories are just what the Mac environment calls "folders." These can be called anything at all, should have no extension (suffix), and can have no illegal characters. Illegal characters include spaces and other non-alphanumeric characters. When you create a directory and place a file or image inside the directory, you will "reference" the file by using the path name which includes both the directories and the filename. Watch:
You can immediately see that when you have to keep typing this information, it makes sense to keep your file and directory names short!!

RELATIVE vs. ABSOLUTE PATHS - An absolute path is a "fully qualified URL." Huh? That means that the path itself can be typed directly into the location window of a web browser and the browser can access that document. It therefore must include the name of the machine (e.g. www.teachers.net) and the path to the web page (/images/world.gif). The entire absolute path for this image, world.gif, would thus be "www.teachers.net/images/world.gif".

When authoring web pages, it is ok to link web pages on other people's servers with the absolute path, but when you want to link pages on your own website, it is recommended that you use the relative path. Exactly what the relative path is will depend, obviously, on where the file you want is relative to where you are at the time.

Let me try to elaborate. Whenever you call for an image, or put a link in a web page, you are already at some location on the web. Let's assume we are working on the homepage for Teachers.Net, located at www.teachers.net. Since this page already lives at the top of the server's heirarchy (this is called the "root directory," all pages and images below it will have a path something like this: The relative path for these files is easy to figure out, because they are the names of each directory all the way down to the file itself.

Stay with me here, because here is the only part that gets tricky! There are a few rules for referencing files by relative path:
  1. if the file is in your current directory, its path is the document's name. For example, I am working on the home page (a document I call "index.html") and I want to link to another document in that top directory, I can link it with a hypertext tag like so:
      <A HREF="mypage.html">Click here<:/A> to visit my web page!

  2. if the file is below your current directory, its path is the document's name appended after the series of diretories. For example, I am working on the home page and I want to link to another document two directories below, I can link it with a hypertext tag like so:
      <A HREF="directory1/directory2/mypage.html">Click here<:/A> to visit my web page!

  3. if the file is above your current directory, you need to add a "../" for each directory level you must climb. For example, I am working on a page nested deep in my website, and I want to link to another document two directories above. I can link it with a hypertext tag like so:
      <A HREF="../../mypage.html">Click here<:/A> to visit my web page!

  4. Note that if I use the following tag, <A HREF="/mypage.html">Click here<:/A>, the server will go to the server root and start the path there. This means that you may be able to reference your images folder, wherever you are, by simply using this as the path: /images/some.gif. I say "might" because some of you may not have a top level homepage to begin with, and others may have the server root set as something different. It is a configuration the system administrator has control over.


Phew, that was a lot to digest. Remember, if you ever have any questions about this stuff, you can always get help fast from the WebTalk Mailing List (write webtalk@teachers.net) or by checking any of the excellent resources I've linked elsewhere in this manual.

Now that you know how to link your documents, you need to know how to upload them to your server. To accomplish this task you will need an FTP client (I recommend Anarchie or Fetch for the Mac, WS_FTP for Windows) and the login information for your web server.

First, fire up your FTP client. Then, connect to your web server, entering your login information. Next, move around on the remote server until you have found the location where you want to place your file. Next, select "put" in your FTP client's menu (or something similar) and select the file you want to upload. Viola, the file is uploaded to your webserver, and you can now access it directly from your web browser!!!

You can also drag-and-drop files if your OS supports this. This is by far the easiest method to upload and download files. To use this method, you will want to set up your desktop so you can see both the folder you are uploading from, and the FTP window you are uploading to (or vice versa). Then, simply click on the file and drag it across into the appropriate location in the other window. Some FTP clients even allow you to drop files into a folder (directory) without opening the folder (Anarchie allows this, Fetch does not).

FTP uploading can be troublesome at first. You will want to make sure that the file names are not getting changed. For example, there should not be a ".bin" extension appended to the end. Also, you may need to select "Passive Transfer Mode" if your server employs firewall protection. Lastly, the files must be transferred as the proper format. Web pages MUST be transferred as ASCII (text) and images MUST be transferred as binary files. Most FTP clients have an "auto-detect" feature, but sometimes this fails on files with new extension types, and for other unexplained reasons. Try various settings in the preferences, you may find other options to correct such problems. If you cannotet a particular FTP client to work, try one of the others available for your operating system.

Again, if you have any problems with uploading files to your server, write out a detailed explanation of what you were trying to do and what went wrong, and send it off to the WebTalk Mailing List (webtalk@teachers.net)

WELL FOLKS, that should get you going with your Teacher Website. I've detailed quite a bit of information and outside reference links to get you started. Don't forget, if you ever have a problem you can't find the answer to, just write to WebTalk@Teachers.Net, and you'll get an answer straight-away. Remember, it's through questions like yours that all of the WebTalk subscribers are enriched. Your very question might be the same one troubling hundreds of other teachers on the Internet!!!

I hope to hear from you soon,

Bob Reap
Teachers.Net Consultant