Lesson Three

How to Build & Post a Web Page









This lesson is challenging. It is best when completed in pairs or small groups to increase the available pool of prior knowledge.

This tutorial assumes you are using Windows. The concepts are similar on Macs but the details may vary.

Right click with your mouse on this page. Then select View Source from the menu (or go to the View menu and choose Source). What should happen is that the HTML coding for this Web page appears as text in Notepad (Notepad is the default text editor for Windows). We will refer to that as the TEXT file.

You can make changes to the TEXT file and then save it as an HTML file. Web pages are edited by creating new versions of HTML files to replace the old version. Then when you transfer (upload) that file into the same folder where this Web site is stored, it will be visible through the Internet.

Practice editing Web pages

In the TEXT file an area has been provided for you to enter some new text. You will find it separated by a lot of blank space and a COMMENT tag.

  • Enter the text as indicated then save the file to your desktop with a name of your choosing.
  • You must include the ".htm" extension so    yourfirstname.htm    is a good choice.
  • Now you can go to your desktop and open this new HTML file. It will look exactly like this page except the information you entered appears above in large red letters.
  • Make other changes, save the file, and see the changes.
  • If you do not see changes, Refresh the HTML page using the Refresh button on your browser menu or press CONTROL R on your keyboard.

    You can create new Web pages. The basic required tags are:

    the name of your Web page goes here.
    your text, images and everything else goes here.

    As you can see, the code is just a series of matched opening < > and closing </ > tags.
    For more information about creating Web pages and a list of useful tags, go to Webmonkey at http://hotwired.lycos.com/webmonkey/authoring/html_basics/

    Transferring files

    WSFTP_LT = WSFTP Light, a free version of one of the more widely used File Transfer Protocol (FTP) programs. There are many others. One, called Cute FTP, is often recommended for beginners but let's not go down that path. For brevity, I'll just refer to it as WSFTP. A copy for this demonstration complete with the necessary access codes has been provided in a folder labeled WSFTP. Open the file named WS_FTP95.exe .
    If you are viewing this online, download this program at http://wave.prohosting.com/94122/ws_ftple.exe

    Open WSFTP. This screen will appear:

    Things to notice:
    • On the left, Local System shows your computer files and folders. Once we log in, Remote Site, will show the folders on the Web site.
    • The Arrows in the center that point left and right are the commands to move files between Local System and Remote Site. Files are always copied during transfer, so do worry that moving them will eliminate then from their current location.
    • Files are selected in exactly the same way as they are in Windows. Notice the window at the top tells you where you are in the file structure (C:\Downloads is where I keep my Web files)
    • The Green Arrow pointing up allows you to go to a higher level folder.
    • ChgDir, MkDir, Refresh, DirInfo buttons are not so useful for Local System but are helpful on the Remote Site. For instance, to create a folder on your Web site (Remote Site), you can simply click MkDir and then give the new folder a name. Another method of doing this is to create the folder on your Local System and then upload it. So you have options.
    • The buttons for ASCII, Binary, and Auto tell the program what kind of files you are transferring. Choose ASCII for text files, including HTML files, and Binary for images and programs. Auto should be checked if you are sending a folder full of mixed files.
    • The buttons at the bottom enable you to log on and off and to get more info. The one that says Connect is where we want to click now.

    Let's Connect

    This is the window you will see when you click Connect:
    • Choose New and fill in the boxes exactly the way they are here. Password = rtingl83 (as in lower-case R-T-I-N-G-L-eight-three) Passwords and user names are case-sensitive.
    • Enter the password and click Save Pwd. It will make life easier.
    • Click Apply. Your information is saved.
    • Be sure you are connected to the Internet. This program does not connect automatically.
    • Click Okay in the login window to connect to the Prohosting Web site.

    Now you are ready to upload:

    • Click once to Hi-lite the file you want to transfer as demonstrated in the image above.
      Choose ASCII because you are sending a text file (the fact that this document references images files is irrelevent. HTML files are text files).
    • Click the Arrow in the center that points right.
    • That's it!
    • You should see messages indicating files are transfering or that transfer is completed. If you cannot transfer files, one of the following is likely:
      1. the transfer has stalled (it will say "connecting to 65.113...etc."), click Cancel once and wait to see if anything happens, if not, wait 20 seconds or so and click it again. You should see some activity.
      2. you have been logged on for a long time and the server has logged you off. Simply choose Close and Connect again. For security reasons, you only remain logged on for a limited time. No notice is given that you are being logged off.

    Now Refresh this window and you should see the text changes you made in big, red letters above :-) Repeat this process and see how easy it is to change this page.

    The next lesson will work with image files and organizing your Web folders.

© Christopher Faust, 2003