Publish Your Work:
     How to Upload HTML Files 
            to the Web Server        
    Workshop Homepage     Day 1 Tutorial     Day 2 Tutorial     Support Page

The UW-P Web Server Directory Structure

If you look at the URL or web address in the Netscape Location box you see the following directory structure displayed:   .
Thus, when we initially set up our directory structure we established the following convention: All html files would be stored in the ~username folder and all graphic

  Office machine.		 files were kept in the images folder.  We will now create a mirror folder structure on the computer that stores our files for the UW-P web server with one exception. On the UW-P web server storage machine,  your "~username" folder is called  "public_html".  
(Note: the "~username" directory
     Web server's  folders. 
equates to the ".../usr/staff/username/public_html" directory on the Remote machine.)

 

Uploading Using FTP
FTP or File Transfer Protocol is simply a specialized software that transfers files from one computer to another via a connection.  The connection and transfer is called a session (maybe it sounds like music to the computer).  Boot the FTP software by ether clicking on the desktop icon OR go to , Programs, Internet
Applications, and  click on WS_FTP. 

The Session Properties or HOST dialog box will appear depending upon the version
of the FTP software on your machine.  You are going to connect to a machine that also stores Pine e-mail files so your Pine userid should already be entered.  Type in your Pine e-mail password and click OK. The FTP dialog box will appear. 
It is broken into two halves; the one on the left represents your desk machine called "Local" and on the right is the web related machine called "Remote". You will use FTP to move files from Local to Remote.
This is called  uploading and is achieved by clicking the "up" arrow button    But WAIT.
Before one uploads they must be sure that the files are going to end up in the correct place; the correct directory or folder.  

Details of the  WS-FTP email Dialog Box 

This dialog box is laid out with the following logic:

Starting form the top of the window and working our way down we have the listing
 of the default  
 directories that 
 one logs into.


Below that listing are the two groups of "white windows" for the Local and Remote machines.  On the Local machine their hierarchy designates the drive or folder in the top one and the  files in the specified folder or directory in the lower one.  Note how this compares to the way C:\net is displayed when opened by  My Computer as shown at right. 

Before you FTP you will need to get all the files on each machine to coincide with each other.  First we 
change from  "C:\NET"  to  "C:\~username"  to enable you to access your html documents.  To do this, first move up one level in the directory folder structure by double clicking on the double dot .  
Now the top line will show the directory listing of C:\ and the top white window will list all folders on C.  ~username will be one of those. 

(Note: My Computer comparison shown at right)

A double click on ~username (~ROBIN~1) results in its contents being displayed in each window; folders in the top and files in the bottom. You should now see your images folder in the top and all your html files in the bottom window.  To upload, you will click once an html file to highlight it then click the upload arrow button  .      But WAIT.    First,  we have to get the Remote FTP window ready to receive the file in the proper folder.     
(Note: to download a file from Remote to Local, click once to highlight it and then click .)
The right half of the FTP dialog box is laid out in a similar manner.  The two Remote white windows display the parent  directory in the top and the files contained in that directory in the window below it.  The key point here is that the default login does not put you in the correct directory for uploading html files.  The public_html directory is where you put your html web pages.  Thus, be sure to change to that directory by double clicking on the word public_html before you upload an html file. Thus, html files from you C:\~username directory are uploaded into the public_html directory.
To upload your graphics you will need to create an image folder within the public_html folder or directory the first time you use FTP.  Graphics from your C:\~username\images directory will be uploaded to the public_html/images directory. To do this click on MkDir button on the right edge if the window.  The following dialog box appears:


Type in "images" for the name and click OK. 

For an example of this, I have shown my public_html window at right. (Please note that I have additional sub-directories along with my images folder, music, LTW1, etc. but for now you should only have one images folder in the top white window when in your public_html directory.

 

Hands on session - Uploading A Web Page:            - 20 min.     

Remember a web page is composed of an html file and the associated graphics (if any).  You will publish your homepage by uploading it using FTP.

1- Start the WS_FTP program and log in; use your Pine e-mail password.

2- Starting with the Local pc windows, change the directory 
to C:\~username and highlight (with one mouse click) your  
html file that you want to upload.		 ftphlite.gif (6437 bytes)

3- In the Remote host window change to the public_html directory (by double clicking on it)

3A- First Use Only: make an images directory in public_html

4- Click on the upload button   .

If you have associated graphics, continue, otherwise click Exit.

5- In the top Local pc window double click on Images to open that directory.

6- In the top Remote host window double click on Images to open that directory.

7- Highlight all graphic files includes in your html file (by keeping the shift key depressed while single clicking on the individual filenames) and click the upload button  once to upload them. Alternatively, one can upload one file at time 
by clicking an individual file to highlight it then the upload button.  When 
all graphic files have been uploaded, click Exit.

Open Netscape and type in your address http://www.uwp.edu/~username/homepage.htm
How does it look?  Any graphics missing?  Is all the formatting the same?

 
    Workshop Homepage     Day 1 Tutorial     Day 2 Tutorial     Support Page