Tips on Creating Web Pages

This page contains general information and tips for completing your three web pages. Some students need to spend a significant amount of time out of class to complete their pages, while others complete them in class. Individual technical skills and learning curves are signficantly different, so you need to judge how much time you need to spend in the student lab (room 103 SSB). A good idea is to make sure that you can replicate everything I covered in class on your own before the next class.

Note: Quotation marks are not actually typed, I am using them to demark what you need to enter. For example, if I wrote type "http://www.umsl.edu", you do not actually type the quotations.

In MIS 480 and BA103, we are using three software packages to create Web Pages:

1. HTML Writer
2. Netscape
3. FTP

All three software packages are accessed from the Instructional Computing Menu:

From the Main Menu, select Internet WWW
From the Internet WWW menu, select Windows
All three packages are in the networking window at the top right hand corner.
You may have to use a scroll bar to find the icon. The easiest way to work is to open and minimize each application so that all 3 packages are loaded in RAM at once.

We use each software package for the following purposes:

1. HTML Writer

We use HTML writer to create new web pages or to edit web pages we copied off the www

I.E., We use HTML writer to insert html codes contained between brackets <> and (see bottom of this page for more on HTML writer)

Web pages are saved on the A: disk as A:*.htm

2. Netscape

We use netscape to browse our web pages on the WWW after creating them in HTML Writer

For the location, we type: A:*.htm
For example, if we are testing our home page, we type A:index.htm

If something is wrong when you try to browse using Netscape, you need to go back and fix it in HTML writer, save the web page to the A: disk again, then browse it again in Netscape.

3. FTP

Once you are happy with a web page, you need to transfer it from your A: disk to the ADMIRAL(also called JINX) server on the WWW.

FTP (File Transfer Protocol) require a UNIX account

To fill out the first FTP screen:

Set the Profile to "JINX/WWW" ("ADMIRAL" should also work)

The host name will automatically read "jinx.umsl.edu" or "admiral.umsl.edu"

UNIX logon ID accounts are sstudentnumber Do not drop a lead "1" in your student number

Your password is your SS# with no dashes

Make sure you have a successful logon by looking at the message at the bottom.

If you did not have a successful logon, it is for one of the following reasons:

The network is busy and you timed out, try again
You do not have a UNIX account, go to the 4th floor of CCB to get one
You did not set the right profile
You did not type in the right account ID
You did not type in the right password

To transfer a web page for the first time:

Make sure your local drive is A: (Use ChgDir button on left hand side if it is not pointing to A)

Make sure your remote drive is Public_html
(Highlight Public_html and double click so it dissappears from the white window and appears in the gray window)

Highlight the file you want to transfer on the local side (i.e. left side)

Press the arrow button pointing to the remote side

Once the file is transfered, hit "refresh" on the remote side to see it

Only If this is your index file, highlight the "index.htm" file on the remote side

Only If this is your index file, Hit the "rename" button on the remote side

Only If this is your index fileChange file name to index.html

Only If this is your index fileHit refresh to verify name change

To replace an existing web page:

Make sure your local drive is A: (Use ChgDir button if it is not pointing to A)

Make sure your remote drive is Public_html

Highlight the file you want to update on the local side

Press the arrow button pointing to the remote side

Once the file is transfered, hit "refresh" on the remote side to see it

Only If this is your index file, highlight the "index.htm" file on the remote side

Only If this is your index file, Hit the "rename" button on the remote side

Only If this is your index fileChange file name to index.html

Only If this is your index fileHit refresh to verify name change

To transfer a .gif (i.e., a scanned picture or image) file:

Make sure your local drive is A: (Use ChgDir button if it is not pointing to A)

Make sure your remote drive is Public_html

Highlight the .gif file you want to transfer on the local side

Press the arrow button pointing to the remote side

Once the file is transfered, hit "refresh" on the remote side to see it...
DO NOT RENAME A .GIF, just leave it there.

Note: the same instructions apply for other graghic files, such as .jpg

4. Netscape

We use netscape to also browse our web pages

To test from the WWW:

This time the address is "http://www.umsl.edu/~sstudentnumber" to see your home page.

If browsing another page, the address is
"http://www.umsl.edu/~sstudentnumber/*.htm"

where * is the file name and .htm or .html is the file extension.

For example, suppose you are student number 899999. To see you home page:
The address is "http://www.umsl.edu/~s899999"

To see a page called email.html, the address is:
"http://www.umsl.edu/~s899999/email.html"

To see a page called page2.htm, the address is:
"http://www.umsl.edu/~s899999/page2.htm"

Other Tasks We Do In-Class

Tips on HTML writer

To create a web page from scratch:

Select "new" from the file pull down menu

From the HTML menu select "document/HTML"

From the HTML menu select "document/BODY"

Now put some spaces in here and begin your page.

Make sure to save as A:*.htm.

To add a picture to your web page.

(Assume you are student 899999 and you have a picture stored in a file called john1.gif. you want to put on your home page)

Upload your .gif file to WWW using FTP (explained above)

In HTML-Writer, load the index.htm file (or the page you want to add a picture to if this is not your homepage.)

From the HTML menu, select "hyperlink/inline image"

A window appears and asks for a URL.

Type in full address for the picture, in this case: "http://www.umsl.edu/~s899999/john1.gif"
Of course you may access any picture on the web as long as you know the .gif name and location.

To add a hypertext link to your web page:

From the HTML menu, select "hyperlink/REMOTE"

A window appears and ask for a URL.

Type in the full address of the web page you want to access.

For example, suppose your student id is 899999 and you want to add a hypertext link from your home page (index.html) to your second page (page2.htm):

Load your index.htm file in HTML-writer.
Add a hypertext link using the address "http://www.umsl.edu/~s899999/page2.htm"
Then you have to follow the procedure for replacing your index.html file on the web.

To copy someone elses web page, like we did with my standard web page:

Using Netscape, bring up the page you want to copy

On Netscape menu, click on "file"

Select "Save As"

Save file as on your A:*.htm

Open HTML Writer or the HTML editor of your choice

On HTML Writer menu, click on "file"

Select "open"

Point to the A: drive and select *.htm

Edit the file to personalize your webpage

Be sure to save your file as A:*.htm

FTP to web when finished

View in Netscape

To copy an image off the www:

Using Netscape, bring up the page that has the image you want to copy

Put your cursor on the desired image

Hit your RIGHT mouse button

Select "Save this Image As"

Save image as a file on your A: disk (typically a *.gif file)

FTP the file to web using instructions above

Go to HTML writer and open a file you want to display the image

You may now imbed this image in a web page by using the html code img scr="filename.gif"

Save your file on A: drive

Upload to WWW using above instrcutions

Trouble-shooting

What if I updated a web page but it still displays my old version?

Most likely, you need to hit the Re-Load button in Netscape

Logon to FTP and on the remote side, view the document to make sure you actually put the new version on the WWW. If this is the still the old version, follow the FTP steps again.