Putting Your Page on the Web

Before You Begin

This document explains how to make a Web page created on a desktop computer available to others by putting it on a World Wide Web server. To follow these steps you should be comfortable working in either a Windows or a Macintosh environment. You should have some sense of Unix file management and understand the concepts of directories, subdirectories, and files. NOTE: This document does not show you how to create Web pages. The creation of Web pages is covered in the documents Web Authoring with HTML Part 1 and Part 2 . If you need to review basic Unix commands, refer to UNIX: Getting Started or see "Basic Unix commands for maintaining Web pages".

CCSF World Wide Web Servers

The fog World Wide Web server, known as fog.ccsf.cc.ca.us will be referred to throughout this document to demonstrate the techniques used to make your Web pages available. In order to upload your Web pages onto fog.ccsf.cc.ca.us, you must have an account on fog.ccsf.cc.ca.us (fog). However, fog.ccsf.cc.ca.us is not the only World Wide Web server on campus. Your school, office, or department may maintain its own server from which you can make your pages available.

Getting Started

Before you begin transferring your files from your local computer to fog.ccsf.cc.ca.us, you need to create the directory for your files. This directory will be called public_html. You can create this directory from fog.ccsf.cc.ca.us enter the appropriate command at the command-line (See below for Unix commands.)

NOTE: Individuals working in deptweb accounts do not need to create public_html directory because it has already been created for them.

Transferring Your Files

Several FTP programs are available for you to transfer files from one computer to another. This document will discuss Fetch (for the Macintosh) and Rapid Filer (for a Windows-based PC). See the following documents for more information about various FTP programs: Mac Telnet & FTP, Windows Telnet & FTP , Using MS-Kermit, and Using MacKermit.

Preparing to Transfer your Files

Before transferring your Web pages from your local computer to a World Wide Web server you will need to save your HTML files as text-only files. When you select a file to upload in Fetch, the program will give you a number of file-type options from which to choose. Upload your HTML files as Text or Wrapped Text files.
File Names in UNIX
In Windows 3.1 and DOS, you are limited to an 8 character file name with a 3 character extension. In Windows 95, you can use long filenames, including spaces. In Unix, you can use long filenames with more than a 3 char extension, but you cannot put spaces in file names. Furthermore, Unix is case-sensitive, so you might want to avoid confusion by using all lower-case letters consistently.
Graphic Files
Graphic files are handled differently from text files. In Web design, you will most often be using .gif and .jpg files for images. These should always be transferred to the Web server as Raw Data. If you upload a directory to the Web, it should also be transferred as Raw Data.

Using Fetch

Fetch is a simple, graphic-interface FTP program for the Macintosh that you can use to transfer your files from one computer to another. You can download it from the CCSF FTP site at ftp://ftp.ccsf.org/pub/TCP/. Fetch will lead you through the file transfer process step by step. Start the program by double-clicking on the Fetch icon. It will automatically open a dialog box prompting you for information about the server you want to connect to.

To connect to fog, type fog.ccsf.cc.ca.us in the host field. Enter your userid and password in the next two fields. Type public_html if you are working on an individual page or /html/pathname/groupid/ if you are working on a group page in the directory field to specify the directory to which you want to transfer files. Click on the OK button once you've entered the necessary information and the Fetch program window will open, displaying the name and contents of the directory you've selected.

Upload files to the host computer by selecting the Put File... button in the program window. When you click this button, you will be prompted to locate (on your local computer) the file that you want to transfer. Select the file, files, or directory that you want to upload and click on the Open button. In the next dialog box, you will be prompted to name the file and specify what type of file it is. If you're transferring a text file, leave the option set to Text. If it is a graphic file or a directory, make sure Raw Data is selected from the drop-down menu. Your filenames should follow this model:

or graphicfile.jpg
If Fetch adds an extension like .txt to your filename, erase the extension before uploading the file. Fetch will finish the transfer process when you click on the OK button.

Using WS_FTP

WS_FTP is a simple, graphic-interface FTP program for Windows that you can use to transfer your files from one computer to another. You can download it from the CCSF FTP site at ftp://ftp.ccsf.org/pub/TCP/. WS_FTP will lead you through the file transfer process step by step. Start the program by double-clicking on the WS_FTP icon. When you start WS_FTP, the Session Profile window appears. Before filling in this window, make sure the Anonymous Login field is not checked; otherwise your password displays when you type it. Type fog.ccsf.cc.ca.us in the Host Name field and your user id and password in the appropriate fields. Click OK, and cross your fingers while WS_FTP establishes a connection to the server.

Once you connect, the Session Profile window disappears and the program window displays. The left half of the window shows the files and folders on your local computer. The right side shows the files and folders on your fog account. Beside each list are buttons for the file system. To open a folder, double-click on it; to move back up a folder level, scroll to the top of the file list and double-click on the green arrow. To change to a different drive on your local computer system, click on the ChgDir button next to that file list, and type the drive letter followed by a colon; for example, to switch to a floppy disk, click ChgDir and type A:.

Transferring Files
To upload files, find the files on your local computer that you want to move to the server; on the remote server, open the folder you want to put files in. (You should use public_html for Web pages.) To download files, find the files on the server and the directory you want to put them in on your hard drive. To move a file from one system to the other, click on it, and then click on the arrow that points in the direction you want to move it. The following are other options you may find helpful:

UNIX Commands for File Management

Once you've uploaded your pages from your local system to the server, you need to make sure that the files are in the correct location and that they have the proper permission settings to allow others to view them. This requires a basic knowledge of a few Unix commands. These commands include:
* cd to change directories
* ls to provide a directory listing
* ls -al to see a list of files with all file information, including access permissions
* |more to see the results of another command one screen at a time; e.g., ls -al |more
* mv to move or rename a file or directory
* mkdir to make a directory or subdirectory
* chmod to change the permissions for a particular file or directory
* rm to delete a file
* pico to edit a file using a common Unix text editor
* pwd to see the name of the present working directory
* man to access help pages for a given command (for example: man rm)

Controlling Access to Your Files

Once you've transferred your files from a local computer onto a Web server, you have to adjust the permissions set for each file so that it will be accessible by a web browser but protected from being damaged or deleted.

Deciphering the Permissions

First, move to your public_html directory by typing cd public_html. List all of the files in this directory by typing ls -al, which displays the directory contents in long format. This format will show you the current permission settings for your files. Your file and subdirectory listing should look similar to this:
drwxr-xr-x 2 jdoe graduate 512 Apr 2 12:13 .
drwxr-xr-x3160 jdoe culinary 54784 Apr 2 12:11 ..index.html
-rw-r--r-- 1 jdoe graduate 8157 Apr 2 12:13 sample.txt
The permission settings are listed in the left column and look like a confusing assortment of a total of ten d's, l's, r's, w's, x's, and dashes. These letters indicate the list-item type and the permissions set for that item. Let's look at the permissions from one of the above listings as an example:
The ten spaces are divided up into four sets, as marked by the parentheses. The first group contains only a single character that indicates the item is a file (-). A d would indicate a directory, and an l would indicated a link to a directory or a file.

The next three sets of characters provide you with information detailing the permissions granted to: 1) yourself, 2) your group, and 3) the rest of the world. The first set of three letters describes your own privileges. An r indicates that you can read the file. A w means that you can write to, edit, and delete the file. An x indicates that you can run or execute the file (this is only appropriate with programs, scripts, directories, or other executable files). If any of the three spaces in this first group displays a - rather than a letter, you DO NOT have that particular permission for that file. In our example, jdoe (the user) has read and write but not execute permissions for the file sample.txt.

The second and third groups of permissions follow the same organization as the first, but these permissions apply to your group and to the rest of the world, respectively. In our example, jdoe's group, "$graduate," has read but not write and execute permissions. The outside world has read but not write and execute permissions.

Changing the Permissions

You will want to restrict others from having write permissions on your Web files since this allows them to change or delete your files, but you will want to be sure people can read your files. When you upload your pages you will have to change the permissions so that others can read them. Use the chmod command to change permissions on a file or directory. The format for a chmod command is as follows: chmod ### filename Each of the digits in the command is a code for the set of permissions granted to one of the three groups (you, your group, and all others). The first number assigns permissions to you, the next assigns them for your group, and the last assigns them for all others. A key to the codes is listed below:
7 = read, write, and execute permissions
6 = read and write permissions only
5 = read and execute permissions only
4 = read permissions only
3 = write and execute permissions only
2 = write permissions only
1 = execute permissions only
0 = no permissions at all
You will use the values 7-4 and 0 most frequently. Only under unusual conditions would you grant someone write or execute permissions without including read permissions.

Note: Be sure to assign universal read and execute permissions on all directories containing files you want others to have Web access to. For instance, if you maintain a separate directory for your Web graphics, the permissions for that directory should be set so that others can read it but not write to it. Otherwise, your images will not display on your Web pages.

Permissions for an Individual's Pages

If you are setting up your own personal Web pages, you want to be sure that you can read and write to the file but that others can only read it. The Unix command to set permissions for a personal page is:
chmod 644 filename
For a directory, set the proper permissions by using the command:
chmod 755 directoryname

Working with File Group Associations

If the page belongs to a group of people who all need to have access to it, you must change the name of the group associated with the file. When you upload the file, the file is associated with the default group you belong to, such as graduate. To check to see what groups you belong to, type groups at the Unix prompt. If you belong to more than one group, you might want to check to see what group is associated with your files. Use the command ls -lg to see which group is associated with your files.
Changing the Group Associated with a File
Use the chgrp command to change the group associated with the file:
chgrp newgroupname filename
Keep in mind that you can only assign ownership to a group of which you are a member. NOTE: When a user leaves the college, his or her personal files are deleted, but any group files that are stored in his or her directory are saved.

Permissions for Group Pages

For group pages, permissions should be set so that both the individual and the group have write privileges. Other people should only be able to read the file. Use the following command to set permissions for a file:
chmod 664 filename
For a directory, use the command:
chmod 775 directoryname

Editing Your Page

To edit your page you can either make the changes on your desktop computer and upload the file or use a text editor on the server.

From Your Desktop

If you keep an up-to-date copy of your Web page on your computer, you will not need to download the copy from the server. (If you have deleted or lost your file and need to edit the copy from the server, see the documents Mac Telnet & FTP , Windows Telnet & FTP, Using MS-Kermit, and Using MacKermit for information about downloading files.) Simply edit the file, upload it using the instructions above, and replace the old file with the new one.

On the Server

You can edit your files on the server by using a Unix text editor, such as Pico. Pico is not the only text editing program in Unix, but it is one of the easiest. (If you prefer to use another, more flexible Unix editor, see documentation for the vi Editor .)

To edit an existing file using the Pico editor, type the following command at the command-line prompt:
pico filename
where filename is the name of the file you want to open. Pico is a simple editor to use because it offers a list of available commands at the bottom of the display screen. The commands look like this:

^G Get Help ^O WriteOut ^R Read File ^Y Prev Pg ^K Cut Text ^C Cur Pos
^X Exit ^J Justify ^W Where is ^V Next Pg ^U UnCut Text ^T To Spell

The "^" symbol preceding each of the characters means that you need to use the "control" key in combination with the given character to perform the indicated function. Once you've made your changes to a file, press control-X to exit the program. The program will ask you if you want to save the changes that you have made and it will prompt you for a file name to write the changes to, with the current filename as a default. When you have entered the appropriate information, your changes will be saved.

Accessing Your Page

Once you have set up your environment for creating Web pages on the fog.ccsf.cc.ca.us server, uploaded your files, and set the proper permissions for those files, your Web pages will be accessible via a Web browser such as Netscape at the following URL:
Individual pages: http://fog.ccsf.cc.ca.us/~userid/filename.html
Departmental web pages: http://hills.ccsf.cc.ca.us/~deptwebid/filename.html
For individual pages, replace the "userid" portion of this URL with your userid on /fog.ccsf.cc.ca.us. For instance, if your userid is jdoe, then the URL of your pages would be:
For departmental web pages, replace "deptwebid" with the name of the departmental web page you have; you should also use hills server to access departmental web pages to create and/or test your web site. For example:
As a general rule the "official" departmental web page URL ahould be used. Examples:

Checking Your Work

You should view your page after you make changes to make sure the page looks right. Also, because different browsers present pages differently, you should view your page from several different browsers, such as Netscape for Macintosh and Windows, Mosaic for Macintosh and Windows, and Lynx. Checking your work on Lynx is especially important because it is a text-based browser, and if your page includes graphics it may look funny in Lynx. You can access Lynx by choosing number 4 from the email menu.

Creating an Index Page

ITS recommends that you name your main home page file index.html. When someone tries to access your directory using a Web browser, the file named index.html is automatically displayed; by default, this file is a listing of the files in your directory. If, instead, you name your home page index.html, your home page is displayed and people cannot get a listing of your files. Assigning this name to your home page will also allow you to refer to your home page without specifying a file name, like this:
Individual pages: http://fog.ccsf.cc.ca.us/~userid/
Departmental web pages: http://hills.ccsf.cc.ca.us/~deptwebid/filename.html
You can rename your file by typing the following command at the command-line prompt:
mv filename index.html
where filename is replaced with the original name of your file.

It is not necessary for you to name your file index.html, but it will make your directory more secure. If you choose to name your file something other than index.html, it is a good idea to make index.html an alias to your home page. Simply issue the following command at the command-line prompt:
ln -s filename index.html
and replace filename with the name you've chosen for your file.

Getting the Word Out About Your Page

Once you have your page on a server, you're ready to let the world know about it. You can use the low-tech word-of-mouth method, and you can also use Web resources to get the word out. Take a look at the How to Announce Your New Web Site page at http://ep.com/faq/webannounce.html.

Potential Errors

Several things can go wrong when you upload your pages, though most of them are not very serious. Below are several of the most common errors associated with uploading Web pages.

403 Forbidden

The 403 Forbidden message looks something like this:
403 Forbidden
Your client does not have permission to get URL
/~userid/filename.html from this server.
If you see this message when you try to access your pages, you probably have not given the appropriate read permission for this file. You will need to use the chmod command discussed earlier in this document to change the file's permissions accordingly.

404 Not Found

If you get this message, it means your browser cannot locate the file. You may have typed the URL incorrectly, or you may have a problem with the file name. Windows and DOS users have the problem that they are restricted to only three characters in the file extension, so the extension .html is shortened to .htm. To avoid this problem, create a link to the file:
ln -s page.htm page.html
This way whenever someone uses the page.html name Netscape will load the file page.htm.

Strange Characters on the Page

Sometimes a page loads with a bunch of funny characters in it, like ^H, ^M, and boxes. These characters indicate that the file is not plain text. To solve the problem, re-save the file as Text Only and upload it again.

Icons Where Graphics Should Be

If small icons appear where your graphics should be, the graphics files referred to in the page are either not available, not saved in the correct format, or damaged. If you see an icon with a question mark , make sure the graphics files are in the proper directory and have the correct permissions. If you see an icon with an image of a broken file , then Netscape has found the file but does not recognize it as the kind of file it reads. Check to be sure the files are saved in .gif or .jpg format and that they were uploaded as Raw Data.

Summary of Steps

For Individual Pages

  1. Log onto fog.ccsf.cc.ca.us.
  2. Create a public_html directory on fog.ccsf.cc.ca.us
  3. Save Web page as Text Only with a .html extension and graphics files as .gif or .jpg.
  4. Transfer your files using:
    1. Fetch. Make sure you transfer the files as Text or Raw Data, or
    2. WS_FTP.
  5. Check the file's permissions by logging onto fog.ccsf.cc.ca.us.
    1. Move to public_html: cd public_html
    2. List files in the directory: ls -al
    3. Change the permissions: chmod 644 filename
    4. Change the permissions for a directory: chmod 755 directoryname
  6. Open the URL http://fog.ccsf.cc.ca.us/~jdoe/ to check the page.

For Departmental Web Pages

  1. Get a departmental web account (see http://www.ccsf.org/Info/Cmp/steps.html for more information).
  2. Log onto hills.ccsf.cc.ca.us as your deptweb account.
  3. Create a public_html directory on hills.ccsf.cc.ca.us (This step is already taken for you.)
  4. Save Web page as Text Only with a .html extension and graphics files as .gif or .jpg.
  5. Transfer your files using:
    1. Fetch. Make sure you transfer the files as Text or Raw Data, or
    2. WS_FTP.
  6. Check the file's permissions by logging onto fog.ccsf.cc.ca.us.
    1. Move to public_html: cd public_html
    2. List files in the directory: ls -al
    3. Change the permissions: chmod 644 filename
    4. Change the permissions for a directory: chmod 755 directoryname
  7. Open the URL http://fog.ccsf.cc.ca.us/~pathname/filename to check the page.

[Web Weaver] [CCSFweb] [CCSF Info] [Events] [Site Index] [Help]