Internet File Management

UPLOADING AND DOWNLOADING: LOCAL VERSUS REMOTE

In most cases, there are two versions of your site: the local version, living on the computer at your desk, and the remote version, which lives on the web server. You use the local version when you are making all of your changes, and when you are ready to make those changes public, you copy the changed files from the local version to the remote version.

Working on the Local Version

When you are working on your site on your computer, only you can see it. A common practice is to create a folder on your desktop for your site. Let’s say you’re working on a portfolio web site for yourself. You might have a folder on your desktop called portfolio. Inside that folder, it is common to have three folders:

  • builder, a folder containing notes on your site and other materials you used to generate your site. This might include all the Word documents in your portfolio that appear on your site in HTML format, etc. It might also contain the source graphics for your photoshop documents, like the actual photos from a scanner or digital camera.
  • photoshop, a folder containing the Photoshop files for the images on your site. The name is not so great, but it is a convention. It is common to create the photoshop folder even if you don’t actually use Photoshop.
  • local_html, a folder containing the local version of your Web site. This is where you would put your HTML files, ImageReady images, and all the files you want to later publish to the public version of your web site.

You can download a “starter site” zip file by clicking here. This starter site contains the above folders along with a few starter files that are often needed to get a site off the ground (like an HTML boiler plate, etc.).

This structure is useful because it allows you to make “snapshot” backups of your site without taking up a lot of space. You can right-click on the local_html folder and select “Create Archive” on the Mac or “Send To > Compressed Folder” on the PC. This will create a file calledlocal_html.zip which you can then rename to something likelocal_html_backup_12-01-09.zip with the current date. You might also want to back up your builder and photoshop folders occasionally as well.

Uploading to the Remote Version

When you are ready to upload the site from your personal desktop to the public Internet, all you have to do is connect to the server and put all the files from your local_html to the server’s public_html folder. If you’ve only changed a few files, then it might be easier to upload each file individually as opposed to re-uploading every file.

The important thing to notice here is that you must upload your local site to the remote site after round of changes you make for the changes to take effect: the two sites must be manually synchronized. There are tools that allow you to synchronize the two sites (there is one built into Dreamweaver), but they are beyond the scope of these workshops.

FILE NAMING CONVENTIONS

Web Servers typically run on the UNIX or Linux operating systems. These operating systems are case-sensitive with respect to file names while Windows is not. To the web server, index.html andIndex.html are different files, but to Windows they are the same. In a similar vein, special characters like spaces, question marks, etc. do not translate to URLs very easily. For these and more reasons, we have the following naming conventions used for web files.

To ensure maximum compatibility, your file names should always:

  • Consist only of lower-case letters, numbers, and the underscore (_),
  • Start with a lower-case letter,
  • Have exactly one dot (.) which is only used to separate out the file’s name and its extension, and
  • Always be less than 255 characters including the extension and the dot.

The following file names are valid:

  • index.html
  • image.jpg
  • db_connect.php
  • main.js
  • contact_us.html

The following file names are not valid:

  • home page.html (spaces not allowed)
  • 12.jpg (must start with lower-case letter)
  • page.html.txt (there must be exactly one dot)

Again, these are just conventions: they are not technically requirements. It is a good idea to follow them, however, to make sure that your web site will work the same way regardless of which server it is running on and regardless of which operating system your user is running.

FILE REFERENCING

File referencing is very important when we want to connect files together in some way. Usually this “connection” is a link on one page to another. Often the connection is a page including an image or a style sheet. Sometimes, though, the connection can be as technical as a remote database socket connection.

(More information about where to actually type this stuff can be found starting on the Inline Tags page of the HTML Online Curriculum.)

Absolute Addresses

If you want a particular connection, it’s safest to use the connection’s full or absolute address. The absolute address of a connection is very much like a GPS coordinate on the earth or your full mailing address. In general, the absolute address of a connection is:

protocol://host/city/town/street/house/room/.../resource

(Where host is usually something like a domain name or an IP address and city/town/... is the path to the connection and resource is the resource or file itself.)

You are probably familiar with one sort of absolute address: a URL! A URL is an address to some file (e.g. a picture of your cat) on some host (another word for a server; e.g. students.washington.edu) using the HTTP (Hypertext Transfer Protocol) protocol.

For HTTP, the slashes after host indicate folders. The first slash is to indicate the “root” folder. This “root” folder is kind of like thepublic_html for the entire server. So that means that when you type in

http://google.com/index.html

you are accessing a file called “index.html” in the “root” folder on the “google.com” host (server) using the “http” protocol.

This also means that when you type in

http://students.washington.edu/YOURUWNETID/index.html

you are accessing the index.html resource in the YOURUWNETIDfolder (which is itself inside the “root” folder) of thestudents.washington.edu host.

Absolute addresses are useful when the file or resource we are connecting to is not on the same server as is our file or resource.

Relative Addresses

An address is an absolute address if and only if it contains ://. Without the colon-slash-slash, the address is called a “relative” address. Relative addresses indicate how to access a file or resource relative to the resource that is giving the address.

Relative addresses don’t include a protocol or a host. A relative address only works if both the requester and the request-ee are on the same host (server) and protocol.

A relative address is similar to telling someone “go left of your house three blocks and look for my car in front”: it is assumed that you and the someone live on the same host (“planet” if you must).

Using relative addresses, we have access to the following ‘shortcuts’:

  • ./ means “the current folder”
  • ../ means “the folder that contains the current folder”
  • / means “the root folder on the host”

Say you have the following site structure:

filesystem_small
 
And you would like to create a link from about.html toindex.html. Using absolute paths, you would have to link tohttp://students.washington.edu/YOURID/index.html, but using relative paths, we can just say “the address of index.html in the same folder as this document” by typing ./index.html. Similarly, if we wanted to include eqn.jpg on proof.html, we want to say “the eqn.jpg in the current folder.” Simple! That would just be./eqn.jpg.

Let’s try the ../ now. Let’s say we want to include me.jpg onproof.html. We need some way of indicating to the browser and the server where to find this so-called me.jpg file if we are “starting at” the proof.html file. We want “the me.jpg file in the folder containing the current file”. Well, ../ gives us a ‘shortcut’ to the folder that contains the current folder. We’re linking from proof.html, so the current folder is math402. So the proper relative address is simply../me.jpg.

“What about the / up there?” you ask? If you are on thestudents.washington.edu host, then / is a relative path meaning “http://students.washington.edu/”, that is, the root folder of the students web server. It is perhaps useful if you would like to link to another student’s web page or files on another student’s web page.

Relative paths are useful because the relative paths of our documents don’t change depending on which host we’re on. That is, it doesn’t matter if you’re working in public_html or local_html. If your files are linked together using relative addresses, then when you move your files to another host, then you won’t have to change a thing!

What Next? >>

Last modified: December 31, 2013