Tutorial

How To Create and Manage Your WWW Pages

This article describes the steps required to transfer your home page from your local PC to the Technology WWW server. The creation of a course page will also be covered.

This tutorial assumes that your PC is running Microsoft Windows 95 and is connected to the College Internet backbone network or to the Internet via an Internet Service Provider (ISP). With other operating systems, the procedure will be similar.

Required Software:

TCP/IP networking: this is built into Windows 95
FTP (File Transfer Protocol): again, built into Windows 95 as C:\Windows\FTP.EXE
web browser: Netscape Navigator or Microsoft Internet Explorer
a text editor (for example, Windows Notepad) and/or HTML editor (for example, WebEdit or Netscape Navigator Gold/Netscape Communicator)

Optional Software:

an image editor (such as Paint Shop Pro or CorelDRAW)
a word processor capable of saving documents in HTML format (Corel Word Perfect 8 or Microsoft Word 97)
Telnet (remote terminal access): built into Windows 95 as C:\Windows\TELNET.EXE

Step 1 - Create Your Home Page

This is done on the hard disk of your PC. Create a directory for your page. In this example, we will use C:\MyHomePage.

Refer to the tutorials and samples on writing web pages on the web server at

http://www.technology.niagarac.on.ca/public/samples/

Let's assume that we have written the following HTML documents in the home page directory:

`main.html`	The main index page
`aboutMyHobbies.html`	A page (linked from main)
`MISC.HTM`	Another page (from main)

The hyperlinks in main.html to the other two documents should read

<A HREF="aboutMyHobbies.html">Description of page</A>

and

<A HREF="MISC.HTM">Description of other page</A>

respectively. Note the matching case for the filenames.

Suppose also that we have created an images subdirectory, containing the following image files:

MyFace.gif

catamaran.jpg

OLDFORD.GIF

The HTML tags to display these pictures would look similar to the following:

    <IMG SRC="images/MyFace.gif">
    <IMG SRC="images/catamaran.jpg">
    <IMG SRC="images/OLDFORD.GIF">

Again, note the proper case for filenames. Since each of these files are in the images subdirectory, it must also be specified, separated with a forward slash (/), as opposed to the backslash (\) common to DOS and Windows.

Step 2 - Transfer your home page to the web server

Make sure that you test your pages with a browser on your local machine before you transfer them to the server.

This step requires the FTP application. On the Windows 95 desktop, we can create a shortcut icon to FTP.EXE, using the following procedure:

Open the "My Computer" icon by double-clicking on it.
Double-click on drive C: icon and then on the Windows folder.
Find FTP.EXE and drag its icon to the Desktop by holding down the left mouse button.

When you open (double-click) the "Shortcut to Ftp" icon, it will start in a MS-DOS window with the prompt:

ftp>

At the prompt, enter the following command to connect to the server:

ftp> open www.technology.niagarac.on.ca

The server will respond with the following output. Enter your assigned username and password when prompted. (For security reasons, your password will not be
displayed on the screen; in this example, we use "jrperson" [J. Random Person] as the username).

Connected to www.technology.niagarac.on.ca.
220 www.technology.niagarac.on.ca FTP server (Version 6.00) ready.
User (www.technology.niagarac.on.ca:(none)): jrperson
331 Password required for jrperson.
Password:
230 User jrperson logged in.
ftp>

If you mistype your username and/or password, you will receive an error message from the FTP server. You can attempt to login again via the use ("user") command. For example,

Connected to www.technology.niagarac.on.ca.
220 www.technology.niagarac.on.ca FTP server (Version 6.00) ready.
User (www.technology.niagarac.on.ca:(none)): jrpersen
331 Password required for jrpersen.
Password:
530 Login incorrect.
Login failed.
ftp> use jrperson
331 Password required for jrperson.
Password:
230 User jrperson logged in.
ftp>

Once you have successully logged in, the pwd ("print working directory") command will display your current directory, which initially is your home directory. You can use this command at any time to find out which directory you are currently in.

ftp> pwd
257 "/usr/home/jrperson" is current directory.
ftp>

Two other useful commands are dir ("directory", similar to MS-DOS) and ls ("list files").

ftp> dir
200 PORT command successful.
150 Opening ASCII mode data connection for '/bin/ls'.
total 18
-rw-r--r-- 1 jrperson wwwusers   483 Aug 25 09:58 .cshrc
-rw------- 1 jrperson wwwusers 2183 Aug 27 13:34 .history
-rw-r--r-- 1 jrperson wwwusers   619 Apr 8 10:13 .login
-rw-r--r-- 1 jrperson wwwusers   290 Apr 8 10:13 .mailrc
-rw-r--r-- 1 jrperson wwwusers 1203 Apr 8 10:13 .profile
-rw------- 1 jrperson wwwusers   257 Apr 8 10:13 .rhosts
lrwxrwxrwx 1 root     wwwusers    27 Aug 15 19:45 public_html -> /usr/wwwhome/people/jrperson
226 Transfer complete.
465 bytes received in 0.16 seconds (2.91 Kbytes/sec)
ftp>

The first few files (beginning with a .) are refered to as hidden files (although hidden differently from MS-DOS files), and are not important. The last file, public_html, is a link to your personal WWW directory (in this case, to /usr/wwwhome/people/jrperson). Unix, like HTML, uses forward slashes to form pathnames.

Output from dir displays the following information, from left to right,

the filesystem attributes and permissions (typically, read [r] and write [w] only, possibly execute [x]) for the file's owner, users belonging to the owner's group, and other users.
the number of links to that file (not important)
the user name of the file owner
the group name of the file owner
the size of the file in bytes
the date and time at which the file was last modified
the filename.

The ls command lists only filenames.

ftp> ls
200 PORT command successful.
150 Opening ASCII mode data connection for 'file list'.
.cshrc
.login
.mailrc
.profile
.rhosts
.history
public_html
226 Transfer complete.
67 bytes received in 0.00 seconds (67000.00 Kbytes/sec)
ftp>

To begin to transfer our files, we change to our WWW directory by traversing the
public_html link. We can confirm this change with the pwd command.

ftp> cd public_html
250 CWD command successful.
ftp> pwd
257 "/usr/wwwhome/people/jrperson" is current directory.
ftp>

(To get back to our home directory on the server, just enter cd ~ [the tilde is an abbreviation for a user's home directory]).

Next we must change to the MyHomePage directory on our local machine. We can execute DOS commands by preceding them with an exclamation point.

ftp> lcd C:\MyHomePage
Local directory now C:\MyHomePage
ftp> !dir

Volume in drive C is WINDOZE95
Volume Serial Number is 3748-1DE8
Directory of C:\MyHomePage

.              <DIR>        09-02-97 11:48p .
..             <DIR>        09-02-97 11:48p ..
ABOUTM~1 HTM         9,114 08-04-97 9:13p aboutMyHobby.html
MISC     HTM         7,972 07-29-97 11:59p MISC.HTM
IMAGES         <DIR>        09-02-97 11:49p images
MAIN~1   HTM         6,777 07-26-97 10:03p main.html
         3 file(s)         23,863 bytes
         3 dir(s)     216,006,656 bytes free
ftp>

Now it is possible to transfer our files. Since the HTML files are just plain (ASCII) text, it is preferable to transfer them in ASCII mode. To select ASCII transfer mode, we use the asc command:

ftp> asc
200 Type set to A.
ftp>

To send a file from your local PC to the server, use the put command. The syntax is:

put local-filename [remote-filename]

where remote-filename is optional. If it is omitted, the remote filename will be the same as the local filename.

To receive a file from the server, use the get command. Its syntax is similar to that of put:

get remote-filename [local-filename]

where local-filename is optional. If it is omitted, the local filename will be the same as the remote filename.

It is important to realize that in sending and retrieving files, existing files will be overwritten without notice. This is in fact useful when you are updating your existing pages. Unix has robust security, and generally you are protected against overwriting files that you do not own.

Retrieving remote files, in particular can result in filenames being truncated. Furthermore, Unix has a case-sensitive file system, that is afile.txt and AFILE.TXT are treated as two distinct filenames. MS-DOS and Windows, on the other hand, are only case-retentive, that is, afile.txt and AFILE.TXT refer to the same file, even if it is named aFile.Txt.

The get and put commands have enhanced equivalents, mget and mput, respectively, that will retrieve or send multiple files by the user specifying a wildcard (for example, *.gif for all GIF images). The user is then prompted whether to send/receive each file.

We will send all three of the HTML documents with three individual put commands:

ftp> put main.html index.html
200 PORT command successful.
150 Opening ASCII mode data connection for 'index.html'.
226 Transfer complete.
6777 bytes sent in 0.00 seconds (6777000.00 Kbytes/sec)
ftp> put aboutMyHobbies.html
200 PORT command successful.
150 Opening ASCII mode data connection for 'aboutMyHobbies.html'.
226 Transfer complete.
9114 bytes sent in 1.87 seconds (4.87 Kbytes/sec)
ftp> put MISC.HTM
200 PORT command successful.
150 Opening ASCII mode data connection for 'MISC.HTM'.
226 Transfer complete.
7972 bytes sent in 0.00 seconds (7972000.00 Kbytes/sec)
ftp>

Now we will send the image files. First we have to create the images subdirectory, with the mkdir command. Then we will change to the images directories on both the local and server machines.

ftp> mkdir images
257 MKD command successful.
ftp> cd images
250 CWD command successful.
ftp> lcd images
Local directory now C:\MyHomePage\images
ftp>

Since images files are in binary format, we must send them in binary format. Otherwise, the data may be corrupted by the transfer. We use the bin command. Then we transfer all the images files with mput.

ftp> bin
200 Type set to I.
ftp> mput *
mput .? n
mput ..? n
mput MyFace.gif? y
200 PORT command successful.
150 Opening BINARY mode data connection for 'MyFace.gif'.
226 Transfer complete.
21023 bytes sent in 6.21 seconds (3.39 Kbytes/sec)
mput catamaran.jpg? y
200 PORT command successful.
150 Opening BINARY mode data connection for 'catamaran.jpg'.
226 Transfer complete.
5424 bytes sent in 0.05 seconds (108.48 Kbytes/sec)
mput OLDFORD.GIF? y
200 PORT command successful.
150 Opening BINARY mode data connection for 'OLDFORD.GIF'.
226 Transfer complete.
13026 bytes sent in 4.07 seconds (3.20 Kbytes/sec)
ftp>

The "." and ".." files (which refer to the current and parent directories, respectively) are not transferred, since we are only concerned with files.

To exit the FTP application, enter the quit command:

ftp> quit
221 Goodbye
[and quickly the window closes].

Now you can test your pages with the browser connecting to the server. The URL (Uniform Resource Locator) in this case would be:

http://www.technology.niagarac.on.ca/people/jrperson/

At this time, you would also send an email to the Webmaster (mboldin@niagarac.on.ca) so that your page would be linked from the index page.

Step 3 -- Creating a Course Page

This is similar to creating your home page, and is also done on the hard disk of your PC. Create a directory for your page. Let's use Applied Chaos Theory 316,
ACHT316, as the course for our example. We will create the directory as C:\ACHT316.

A sample course page is available on the web server at

http://www.technology.niagarac.on.ca/public/samples/course.html

A course page can be informational, contain assignment questions and solutions, and/or student marks (posted by student number only, of course).

Let's assume that we have written the following HTML documents in the course directory:

`index.html`	The main index page
`chaos.html`	A page (linked from main)
`moreChaos.html`	Another page (from main)

Suppose also that we have created an images subdirectory, containing the following image files:

bigbang.gif

fractal.gif

Step 4 -- Setting up the Course page on the server

This procedure is similar to installing your home page, but requires a few more steps.

First, we connect via FTP to the server with our assigned username and password:

ftp> open www.technology.niagarac.on.ca
Connected to www.technology.niagarac.on.ca.
220 www.technology.niagarac.on.ca FTP server (Version 6.00) ready.
User (www.technology.niagarac.on.ca:(none)): jrperson
331 Password required for jrperson.
Password:
230 User jrperson logged in.
ftp>

Next we move to the main course directory, which is /usr/wwwhome/courses. The "d" attribute denotes files which are directories. A course directory is normally
owned by the instructor of that particular course.

ftp> cd /usr/wwwhome/courses
250 CWD command successful.
ftp> dir
200 PORT command successful.
150 Opening ASCII mode data connection for '/bin/ls'.
total 36
drwxr-xr-x 4 mboldin   wwwusers   512 Aug 22 22:59 comp335
drwxr-xr-x 5 mboldin   wwwusers 1024 Aug 15 19:01 comp430
drwxr-xr-x 3 jclark    wwwusers   512 Aug 15 19:05 comp463
drwxr-xr-x 3 jclark    wwwusers   512 Aug 15 16:38 comp530
drwxr-xr-x 3 mcsele    wwwusers   512 Aug 15 19:07 comp630
drwxr-xr-x 9 mboldin   wwwusers 1536 Aug 15 19:15 comp641
drwxr-xr-x 3 jclark    wwwusers   512 Aug 15 16:38 comp642
drwxr-xr-x 5 mboldin   wwwusers   512 Aug 15 19:16 comp730
drwxr-xr-x 4 mboldin   wwwusers   512 Aug 22 22:59 comp731
drwxr-xr-x 3 mcsele    wwwusers   512 Aug 15 16:37 comp831
drwxr-xr-x 3 rblake    wwwusers   512 Sep 2 12:03 elnc323
drwxr-xr-x 2 lchartra wwwusers   512 May 30 11:54 elnc331
drwxr-xr-x 3 rblake    wwwusers   512 Aug 15 16:37 elnc645
drwxr-xr-x 2 webjack   wwwusers   512 Aug 15 16:37 images
-rw-r--r-- 1 webjack   wwwusers 1913 Sep 2 15:57 index.html
drwxr-xr-x 3 mcsele    wwwusers   512 Aug 15 16:37 tech238g
226 Transfer complete.
989 bytes received in 0.11 seconds (8.99 Kbytes/sec)
ftp>

We use the mkdir command to create a new course directory. From above, the convention is to use all lower-case letters. We can then change to the new directory and appropriate local directory to prepare for the transfer.

ftp> mkdir acht316
257 MKD command successful.
ftp> cd acht316
250 CWD command successful.
ftp> lcd c:\ACHT316
Local directory now C:\ACHT316
ftp>

Since all of the HTML files share the .html extension, we can use mput to transfer them. Remember to select ASCII (text) mode transfer. To make things faster, we can use the prompt command to toggle off prompting for every file (prompt can also be used to toggle prompting on again).

ftp> asc
200 Type set to A.
ftp> prompt
Interactive mode Off.
ftp> mput *.html
200 PORT command successful.
150 Opening ASCII mode data connection for 'index.html'.
226 Transfer complete.
28035 bytes sent in 0.05 seconds (560.70 Kbytes/sec)
200 PORT command successful.
150 Opening ASCII mode data connection for 'chaos.html'.
226 Transfer complete.
56071 bytes sent in 0.11 seconds (509.74 Kbytes/sec)
200 PORT command successful.
150 Opening ASCII mode data connection for 'moreChaos.html'.
226 Transfer complete.
12610 bytes sent in 0.06 seconds (210.17 Kbytes/sec)
ftp>

Now we create the images directory and transfer the image files (in binary mode). The prompt mode remains non-interactive. When we're done, exit the FTP application.

ftp> mkdir images
257 MKD command successful.
ftp> cd images
250 CWD command successful.
ftp> lcd images
Local directory now C:\ACHT316\images
ftp> bin
200 Type set to I.
ftp> mput *.gif
200 PORT command successful.
150 Opening BINARY mode data connection for 'bigbang.gif'.
226 Transfer complete.
5383 bytes sent in 0.00 seconds (538.00 Kbytes/sec)
200 PORT command successful.
150 Opening BINARY mode data connection for 'fractal.gif'.
226 Transfer complete.
4881 bytes sent in 0.00 seconds (488.00 Kbytes/sec)
ftp> quit
221 Goodbye

The course page can now be tested from the server. The URL is

http://www.technology.niagarac.on.ca/courses/acth316/

Once your course page is working properly, send an email to the Webmaster (mboldin@niagarac.on.ca) so that the course page will be linked from the course index page, which can be found at

http://www.technology.niagarac.on.ca/courses/

Back to the Unix Tutorial page