The magazine of the Melbourne PC User Group

Create and Publish Your Own Home Page — Part 2
Richard John

Using Ws_Ftp Le

Until now you have viewed your budding home page in your browsers offline. If you are serious about getting online, you must perform two important steps. First, you must have access to a Web server to host your Web page(s). Melb PC provides this service if you are a subscriber to the group's Internet Service. An alternative is to use either the Web hosting facility provided by your second ISP or use a free one like Angelfire (see Additional Online References).

Second, you must download, install, setup and configure an FTP client to enable you to easily transfer files back and forth between your computer and the Web host. The recommended FTP software is Ws_Ftp Le which is available free for personal and home use. (Ws_Ftp Le is not to be confused with Ws_Ftp Pro from the same publisher and which is the commercial version that costs money). Ws_Ftp Le is available from either Tucows (search for it) or from the from the publisher's Web site at: http://www.ipswitch.com/Support/index.html

Creating a Profile

Before you can use Ws_Ftp Le you must create a profile for your specific requirements. The profile is an identifier that enables you save your own custom settings for your ftp session and recall them later using this profile name.

  • To create a new profile, click the New button. The screen shown in Figure 4 will be displayed.
  • Under Profile Name enter Melbpc-Home (or something else if you like)
  • For the Host Name/Address enter member.melbpc.org.au
  • Host Type can remain as unix (standard)
  • For User id, enter your Melb PC Internet username
  • You can either enter your password here and save it, or enter it each time you login. I suggest the latter. That way you always remember it
  • If the Anonymous box is checked, then uncheck it
  • Leave the Account and Comment fields blank
  • When finished, click on the Startup tab (Figure 5).

In the Startup box:

  • In the Initial Remote Site Folder leave it blank
  • Initial Local Folder enter the directory you have created for your HTML content eg. c:\html
  • Click the Apply button and the ISP setup is complete.

Under the Advanced tab (Figure 6), change Network Timeout to 120, click Apply and then Cancel. This will return you to the Ws_Ftp Le main window (Figure 7).


Figure 4. FTP Setup: Create a new Profile


Figure 5. FTP Setup: Startup Options


Figure 6. FTP Setup: Advanced options


Figure 7. FTP Setup: Main window

To further customise Ws_Ftp Le, select the Options button which you will find located on the Ws_Ftp Le toolbar at the bottom of the ftp window. This button will present you with a new, more detailed, tabbed dialog box. From that point on, just click on each tab in turn and make changes to the settings on each as suggested in the illustrations (Figures 8-15). For convenience, only those settings thought relevant and useful have been illustrated. These settings are suggestions only and are designed to get you started.


Figure 8. FTP Setup: Options — Session


Figure 9. FTP Setup: Options — Session (continued)


Figure 10. FTP Setup: Options — Extensions


Figure 11. FTP Setup: Options — Associations


Figure 12. FTP Setup: Options — General


Figure 13. FTP Setup: Options — Advanced


Figure 14. FTP Setup: Options — Display


Figure 15. FTP Setup: Options — Sort

Ws_Ftp Le Basic Operation

On startup, you will see the screen in Figure 16 appear.


Figure 16. FTP startup screen

To transfer files between your computer and the server

a.

b.
c.
Make sure you select the correct folder on the server. In the server window, double-click on the server folder to which you wish to upload files. This opens the relevant folder.
b. Select the file(s) on your computer that you wish to transfer.
c. Click the right arrow button in the middle, between the two windows

To transfer from the server, start at the server end.

d.

e.
f.
Make sure you select the correct folder on your computer. In your computer window, double click on the folder to where you wish to download files. This opens the relevant folder.
Select the file(s) on the server that you wish to transfer
Click the left arrow button in the middle, between the two windows

After some activity and if the transfer is successful, you will see the words 226 Transfer complete at the bottom left corner of the FTP Window.

You can select one file or several to upload at the same time. Use the Shift key with mouse clicks to select blocks of files or the Ctrl key with mouse to randomly select files. To download files from the server just reverse the two steps above. Select the files on the server (remote computer) and click the left pointing arrow.
 
These are just the basics that get you going. You will have to explore Ws_Ftp Le in more detail for yourself.
 
Watch Out For This

All FTP software has inactivity timeouts. Ws_Ftp Le is no exception. The maximum is 120 seconds. If you are timed out at any time, just close the existing connection and connect again. That's it.

If you have successfully installed Ws_Ftp Le, you should now upload your Web page to the Web server and continue development from there.

Embedding Java Applets

In this exercise, you will embed a Java applet in our Web page. This Java applet consists of a Java class file named "ticker_andyhosk.class" which is available for you to download from http://www.vicnet.net.au/~mpceast/ticker_andyhosk.class. Note, all file and class names in Java are case-sensitive.

To embed a Java applet in a Web page, do this:

a.
b.

c.
Go to the Web page http://www.vicnet.net.au/~mpceast
Right-click the mouse inside the main page window (the RHS window) and select View Source from the shortcut menu
Select and copy the following block of text onto your Windows clipboard
<applet code="ticker andyhosk.class" name= "TickerDemo"
width="450" height="24">
      <param name="string" value="March Topic(s): Watch this space">
      <param name= "fonttype" value="TimesRoman">
      <param name= "fontstyle" value="bold">
     <param name= "fontsize"value="20">
     <param name= "backgroundcolor" value= "16772045">
     <param name= "foregroundcolor" value= "16711935">
     <param name= "timeinterval" value="150">
     <b>Your browser does not support Java!</b>
</applet>
d.

Open your Web page in your HTML editor and paste the text into it, just after the <body> tag as shown in Listing 7, on the opposite page. Don't forget it needs a paragraph tag. Save your page and view it in your browsers. You will see a scrolling message.
<html>
<head>
<title>Home Page for Joe Bloggs</title>
</head>
<body bgcolor="#008000" text="#000000" background="marble.jpg">
<h1 align=center>Joe Blogg’s Home Page</h1>


<p align=center">
<applet code="ticker_andyhosk.class" name="TickerDemo" width="450" height="24">
<param name="string" value="December 2001 Meeting: Please stay tuned...">
<param name="fonttype" value="TimesRoman">
<param name="fontstyle" value="bold">
<param name="fontsize" value="20">
<param name="backgroundcolor" value="16772045">
<param name="foregroundcolor" value="16711935">
<param name="timeinterval" value="150">
<b>Your browser does not support Java!</b>
</applet>
<p>

<p> <!-- this is the "start paragraph" tag -->
Welcome to my Home Page. I am a member of the 
<!-- Start anchor element: this creates a hyperlink -->
<a href="http://www.melbpc.org.au/">
Melbourne PC User Group</a><!-- End anchor element -->, the world’s second largest 

Your final product complete with map of Australia, hyperlinks and embedded Java applet will look something like that in Figure 17. A little careful study of the parameters of the applet will reveal a lot to you about what it does. The best way to find out what a parameter does, especially if you don't understand what it is, is to change it and see the effect.


Figure 17. Joe Blogg’s finished Web page (viewed in Netscape)

At this stage you will not be familiar with the colour and foregroundcolour numbers. This is because they are in Decimal instead of Hexadecimal. The colour chart at http://www.jeack.com.au/~rij/colours.html has an additional column with decimal numbers. Use these for your backgroundcolour and foregroundcolour.

See how your Web page stacks up against the sample at this Web address: http://www.vicnet.net.au/~mpceast/presentation.

There is no correct version - this sample is not the last word on Web page design. It is neither right nor wrong but it does conform to the official HTML specification and provided your document is technically correct, everything else very much comes down to the style you adopt for your work.

For More Information

This article is only an introduction to HTML, not a comprehensive reference. Below are additional online resources.

Design Issues

  • Your Web pages must work with the two major browsers as a minimum - Netscape 3+ as well as Internet Explorer 3 and above.

  • Avoid proprietary tags eg. marquee, blink and others. Use the Java applet provided to do the marquee's job. It works in both browsers.

  • Design your Web pages to fit on a standard vga, 640 x 480 screen.

Style Guides

Composing Good HTML - http://www.ology.org/tilt/cgh/

W3C's style guide for online hypertext - http://www.w3.org/Provider/Style/Introduction.html

Other Introductory Documents

How to Write HTML Files - http://www.ucc.ie/info/net/htmldoc.html

Introduction to HTML - http://members.aol.com/htmlguru/about_html.html

Yale Center for Advanced Instructional Media - http://info.med.yale.edu/caim/manual/

The HTML Quick Reference Guide, which provides a comprehensive listing of HTML codes -
http://www.ku.edu/cgiwrap/acs/subject.pl

Additional Online References

Official HTML Specification - http://www.w3.org/MarkUp/

Background images - http://Home.netscape.com/assist/net_sites/bg/index.html
http://www.jeack.com.au/~rij/tutorials. A good starting point to some essential online Web authoring resources.

http://www.angelfire.com Free 50 MB of Web hosting space. Currently the best offering in the marketplace. Good reference point. Check it out and you may have a lot of fun.

Caveat

The links referenced in this article were all working at time of printing and can be found at: 
http://www.vicnet.net.au/~mpceast/presentation

Acknowledgments

Some material in this article has been sourced from NCSA's (National Center for Supercomputing Applications) "A Beginner's Guide to HTML". The document in question can be found at: http://archive.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html

About the Author
Richard John who is a long time Melb PC member, tutors part-time at university and at the CAE. He is also the principal author and developer of the iHelp (Internet Help) System and can be contacted at rij@melbpc.org.au


Reprinted from the December 2001 issue of PC Update, the magazine of Melbourne PC User Group, Australia