Unless otherwise noted all pictures, captures and illustrations are by Mike Strong. Copyright 2004-2014 Mike Strong, all rights reserved.

Web Page File Locations

Before you even start creating web pages you have to know something about where they are located and why. There are two reasons to know where the files belong:

1) the location to edit
2) the location for web access

In addition this page shows you how to make an ftp connection using either an FTP client (FileZilla from PortableApps) or Internet Explorer (the browser) or Windows Explorer (the file manager.


1 - Paths: Knowing where the files are

Hint: This is primary knowledge you need to avoid confusion about what your files are doing.

Remember, there is no magic. Files don't "somehow" find their way to the web. You have to specifically place your files for the web on a computer connected to the web as a web server. All files on the web are on regular computers, they just have their own special connection to the world wide web, unlike your home computer.

For most intents and purposes, no one on the web has access to your home computer to view your files (I am leaving out malicious hacks, auto-updates and peer-to-peer connections). Others on the web have to go to a computer connected to the web, which means you have to place a copy of your local files on the web.

Everything you do to create web pages depends on understanding the items below. It is essential that you understand where your files are located physically.

  1. You are only able to edit files which are local (on the computer you are working at) - for the most part
  2. The world is only able to view files which are remote (on the web server, anywhere in the world)
  3. To view the files you've edited you have to transfer a copy of them from the local to the remote computer

These are not totally absolute rules but you should keep these points in mind as your rule of thumb.

Exceptions and Stipulations to the above Rules:

  1. At UMKC, from the UMKC campus, by using the campus network "N:\" drive, the web server is viewed as one more local drive. That means you can edit directly on the web server. Therefore you don't need to transfer files after editing because the files are there already. From campus (only when using the N:\web\... drive/folder)
  2. O campus it is easy to make a mistake and put your files on a drive on the computer you are working on, rather than on the N:\ drive (actually located in the admin building. This is the most common mistake at UMKC labs. The only way to work directly on the web is by using your user folder on the N:\ drive. No where else.
  3. Some web hosting systems (such as goDaddy.com) allow you to create and maintain pages using a web interface so that you never really make HTML files directly.
  4. Do not confuse what is termed your "Personal web space" with what is termed your "Personal home storage" - It is easy to think that you have put your files on the web space when you've only put them in personal storage at UMKC. And do not confuse the "N" and the "Q" drive. Use the "N" drive.

To transfer files between your local computer and a remote web server (such as from your home to the web servers on campus) you need to set up an FTP (File Transfer Protocol) session. There are special transfer programs called FTP programs for just that purpose. They are very handy. But most of you do not have FTP programs (such as WS_FTP or Cute FTP). For this purpose the steps below will use your file manager (called Windows Explorer) to setup FTP sessions.


2 - Local and Remote

Local (left side)   Remote (right side)

The local computer is the computer at which you are physically seated.There are two computers in this 1983 picture, The Commodore 64 at which I am typing and the Radio Shack pocket computer (front, placed on top of the printed labels). The Commodore had 64-kilobytes of memory and the pocket computer (made by Sharp) had 1,436 bytes of memory [1.4kb])
Left Side       Right Side

Servers in racks at a hosting company, anywhere in the world.

This is the local panel
on the FTP program

Use the local computer to create a site which works on your local machine. Remember, you need to create and edit the files locally. When you are sure it works locally you should then upload a copy of the files to the web.

A program designed for FTP (file transfers)

The two-panel look of a typical FTP program, everything is handled within a single program window.
The left-side panel displays files on your local computer.
The right-side panel displays files on the remote computer.

Notice the mnemonic, left for local and right for remote.
Our Windows Explorer setup will follow this theme.

This is the remote panel
on the FTP program

This panel show the computer on the web containing your website. This is where you drag a copy of your local files to so that the world has access to your website. (the World Wide Web - www)

 

Without an FTP program, we need to setup a pair of windows to emulate the functions of such a program.

We will use your file manager, Windows Explorer, to create two separate file-listing windows,
one for local files (on the left) and
one for remote files (your website, on the right).
See The next row (below)

Information note: What we call Windows Explorer used to be called "File Manager" years ago, on Windows 3.1 and earlier. With Windows 95 this changed. Unfortunately the web browser was named "Internet Explorer." Using "explorer" in both names has caused confusion and even more so as the use of the World Wide Web became dominant.
1 - INTERNET Explorer shows the web/internet
2 - WINDOWS Explorer shows your own files (but we can also use it on the web with FTP
     
     
Local (home or office)   Remote (on the web)
Below: Windows Explorer, showing local files and positioned and sized to fit the left side of the screen.   Below: Windows Explorer, showing remote files (on the web server) and positioned and sized to fit the right side of the screen.
 

Above. Notice that this file manager (Windows Explorer) is showing the local folders, such as "My Documents" and in the Address entry area shows a local file address: "C:\Docum......"

These (local files) are the files you edit. Remember, all editing must be done on the local machine. Every time you make changes, send a copy of the file to the remote machine (your website) by clicking and dragging.

NOTE: The most common error for most of you is to stop here, on the local machine. You create a web site on a local machine, and fail to understand that these files cannot be seen on the web. They need to be copied up to the web before they are available to the world.

 

Above: Notice this this window show a list of files much like the ones on the left - because you are looking at files on the website which have been copied from the (left) local computer to the (right) remote computer. Notice also that the Address entry area shows an FTP:// address.

NOTE: when you put your files here, I can see them, and so can everyone else on the web - but only as web pages.

     
     

 

Setting UP FTP Three Ways

 

#1 - Using FileZilla (from PortableApps) for FTP

FileZilla is a real FTP client for free. It can be downloaded from the PortableApps Site here:
http://portableapps.com - There are a number of very useful file you can download for your own use, install on a USB drive and then use anywher you take your USB drive.

To download FileZilla go here: http://portableapps.com/apps/internet/filezilla_portable

The first step is to download and install FileZilla. This is a particularly good FTP because you can take it with you on a USB drive if you decide to install the file to your USB drive. This can eliminate the need to use Windows Explorer when you are in the lab and don't have an FTP client on the machine you are sitting at.

1 - Bring up the FileZilla program and enter your FTP connection information.

The Host information is in the form: ftp://UMKCusername@FirstInitialofUMKCUsername.web.umkc.edu

My connection setup, as an example only, looks like ftp://strongm@s.web.umkc.edu

Now Enter your UMKC Username in the Username textbox

Then enter your UMKC password in the Password text box

Click the Quickconnect button

2 - Take a look at your connection (see below). Use the left side much as you would use Windows Explorer or a file dialog. In this case the folder structure is listed above the files rather than to the left.

On the left is the Local Site. Use the Local Site window to locate the local file folder which holds the copy of files which you edit and test before uploading them to your site. You will have to do this each time you connect to a site.

On the Right side is the Remote Site and it should now be showing you the files on a computer (server) somewhere else in the world. They can be anywhere but in the case of UMKC they happen to be in the admin building, which doesn't really seem all that remote.

The Left/Right = Local/Remote arrangement to display files is, of course, not the actual location for any of these files and does not show how the files are actually moved (transferred) from one location to another. However, this is a graphical method to make the entire process as easy as dragging and dropping files from one side of the screen to the other.

While we are at it, a handy way to look at your files is with the most recent files at the top. That way it is easier to know which ones you need to upload. Clicking on the column headings for the file listings will change the current order (just as it would in My Computer or other file managers). Clicking once gives one order and clicking again reverses that order. So just click on the "Last modified" column heading until you see the latest dates at the top.

3 - Once you've connected for the first time you should save your connection

Go to the File menu and select the option to "Copy current connection to Site Manager ..." which brings up this dialog.

Enter the name for your site in the highlighted textbox which says "New site" (if you miss this you can alway change the name later using the "Rename" button. See below for an example.

While you are at it you might want to type in your password in the comments section. Or not. Depends on who gets access to your machine. This is NOT recommended in terms of security but it does get done.

Once this connection is saved you can return to it at any time by bringing up the Site Manger (file menu, site manager option) and then clicking the "Connect" button. You might note that the site manager for this application changed our Host name to first-initial.web.umkc.edu, dropping the items to the left. Let FileZilla do this for you.

4 - Time to transfer files

To transfer files you can drag and drop or you can merely highlight the files you want to transfer then right-click to get the pop-up menu shown here. Choose the "Upload" option.

If the file exists on the remote you will get this dialog for each file. Click OK to overwrite the file (upload regardless). You might want to change one of the Action options. Usually "Overwrite if source newer" will suffice but not always. Server dates and times may differ from yours and other system changes may affect the way a file looks in terms of file date and size. You can also just click the "Always use this action" to let FileZilla just upload away.

5 - It is not polite to leave the door open when you go away

When you are done, close the connect - disconnect. There are three easy ways.

Either click on the icon with a red "X" - or

Pull down the Server menu and select the Disconnect option.

Notice that this menu shows that you old keyboard-shortcut power users can merely hit Control-D to disconnect.

6 - Added note

I haven't covered downloading from the site. Do on the right side (remote) what you did on the left to upload. Highlight the files (or folders) you want to transfer from the internet to your computer then right-click to get a pop-up menu and choose the download option.


 

#2 - Starting in The Internet Explorer (browser)

Starting with the Internet Explore Microsoft browser.

1 - bring up Internet Explorer (this is the browser, NOT the file manager - for that see below)

2 - Enter the FTP address for the general directory in which your specific folder is located. In the example below you can see the example for my folder. My username starts with "s" so the FTP address I type in is FTP://s.web.umkc.edu

Note-1: Do NOT type the actual folder name (same as your username)

Note-2: This example is for my username which starts with an "s" - Whatever letter your username begins with is the letter you should type in place of an "s" at the start of the url. For instance if your username starts with "h" the address would be FTP://h.web.umkc.edu.

3 - You should get a browse list of the folders like the illustration above. You can view but you can't download or upload any file in the browser. So, the browse listing, at the top, has a note on how to open this FTP location in Windows Explorer so that you can move the files. It tells you to pull down the menu on the "Page" button and choose the option of "Open FTP Site in Windows Explorer.

4 - This gives you a login dialog. Use just your folder name (same as username) and the password you use to login to the UMKC site or any UMKC computers on campus. Big clue: use your username, not mine (I kinow that should be obvious but experience leads me ...).

5 - Once past this area the Windows Explorer (the file manager) should open. At this point you can upload and download files. To do so you need another Windows Explorer open, this time showing the local files. Place the local Windows Explorer with the local files on the left ("Left for Local") and place this Windows Explorer with the remote files on the right ("right for remote"). For a more detailed explanation of left and right side windows see the section below.

6 - While you are here you may as well save this to your favorites to make it easier to get back here.

 

NOW: See the section below for examples of how to position your Windows Explorer windows on the left and right sides of the screen.


 

#3 - Using Windows Explorer for FTP

Setting Up The Local (left) window and the Remote (right) window

 

1 - Open Windows Explorer twice - Menu Path: Start >> Programs >> Accessories >> Windows Explorer

When you have two Windows Explorers open, position and size them so that they are side by side on your screen.

Windows Explorer in Vista or Windows 7 - opening the remote FTP folder

2 - Open the local folder you are using for your website files. If you don't have one yet, create a new folder such as here. The name is not important to the computer but giving the folder a name which means something to you will help you return to this local folder to hold your local copy of the web-files. In this example I've called it "WebSiteLocal" but there is nothing sacred about this name.

3 - In the address line of Windows Explorer (the file manager)
enter "ftp://" then the first letter of your username and end with ".web.umkc.edu"

MAKE SURE that you put the first initial of YOUR OWN username in place of the "s" in the example.

Windows Explorer in Vista or Windows 7 - opening the remote FTP folder

Use this form to get the FTP address and login username for you

 Enter Your UMKC username   
 FTP address  Enter this in in the "Address" textbox in Windows Explorer (copy & paste) 
 Extended Username  Enter this as your username in the login dialog (copy & paste) 

4 - In the login dialog's user name area enter: "umkc-users/" followed by your umkc username

Windows Explorer in Vista or Windows 7 - opening the remote FTP folder

5 - In the login dialog's password area enter your UMKC username. In the illustration above you will see my own login (but not the password, of course). My username is strongm (enter YOUR username, NOT mine)


 

6 - Once logged in and connected you should see your remote files (the files on the web server) in the right-hand side of Windows Explorer. You can easily see that Windows Explorer is showing you a view of your web-space at UMKC by glancing at the Address textbox which will show the FTP address.

Windows Explorer in Vista or Windows 7 - opening the remote FTP folder

6 - It would be nice to have more work space. This is a bit cramped. At this point we could get rid of the left column in each Windows Explorer. So, un-click the "Folders" button in each window of Windows Explorer.

7 - Now we have breathing room.

8 - Add these to your favorites (bookmarks) so they are easier to get back to.

9 - Transfering files between your local (home) computer and the remote (website) computer is now as easy as clicking on a file (or files) in one window and dragging it (or them) to the other window (drag between the "instances" of Windows Explorer).

10 - Remember: Edit on the left (local) and drag to the right (remote)

 


 

Adding an Edit Window and a Display Window

 

For a full preparation we want to setup four working windows on our computer: We just set up two windows to transfer (FTP = File Transfer Protocol) files between computers. We also need a text editor to create and modify our HTML pages locally and we need a browser window so we can check to make sure of our changes.

  1. Local : Windows Explorer with a list of our locally saved web files
  2. Remote: Internet Explorer with and FTP list of our web files on the UMKC server
  3. Local: Notepad to edit our locally saved web files
  4. WWW remote: Internet Explorer open to our WWW URL at UMKC so we can keep monitoring all changes we edit and save via FTP to the UMKC server.

This is not the only arrangement you can make so try various screen locations to be comfortable. This is the one I generally prefer but I have also seen someone putting both Windows Explorers at the top with notepad in the lower left (edit locally) and the browser in the lower right (check remotely). That makes just as much sense.

 


WYSIWYG Resources:

Cool Page: Web Page Creation Software - "Most web page creation or html programs claim WYSIWYG. However they do not have ... Cool Page's unique, drag-and-drop freely, pixel-accurate, on-the-page editing ..."
www.coolpage.com/cpg.html

Arachnophilia - this is a full-featured HTML editor and can be downloaded from the Arachnophilia Home Page
http://www.arachnoid.com/arachnophilia/index.html