Week 1 Lab 1: Writing and Publishing a Web Page

Step 1: Set Up an Editor and a Browser

1.1 Launch the applications Netscape Navigator and BBEdit Lite (or on Windows, HomeSite).

1.2 Using the resize control at the lower righthand corner of the application window, configure the two windows so that they match the illustration above. Make the Navigator window wider than it is long and the BBEdit or Homesite window longer than it is wide. This arrangement allows you to switch instantly from one application to the other by clicking in the portion of one application's window that is visible behind the window for the other.

1.3 Switch between applications a few times by clicking on the window portion that shows behind the foreground window. Notice that (in MacOS) the icon in the upper righthand corner of the screen changes to reflect which application is in the foreground. If they lose track of your windows at any point, Mac users can click on this right-corner icon to see a list of the applications currently running, and thus switch to the one they want. Windows users can use the utility bar at the bottom of their screens.

Step 2: Create an HTML File

2.1 Make the editor window (BBEdit or Homesite, hereafter simply "editor") active by clicking in it once.

2.2 Select Save from the File menu. Make sure the document is being saved onto the Desktop of your machine. Click on the Desktop button or navigate to the desktop if you are currently pointed at some other directory. If you don't understand this last instruction, ask for an explanation.

2.3 Name the current document yourLastName.html (filling in an appropriate value for "youLastName"). Save the file. You have now created a blank ASCII or text file that whose name (actually, whose file-type extension) allows it to be interperted as a Web page.

Step 3: Enter Some Basic Markup

3.1 Every Web page needs basic structural code to identify its various pieces. You'll learn more about this code in later lessons. For the moment just type into your editor window exactly what you see here:

3.2 Save your work. Be sure you are saving your file to the Desktop.

3.3 Replace the word "Copy" with a few words of your own choosing. Save again. (Get in the habit of saving your file after every significant change.)

Step 4: View Your Page

4.1 Switch to the browser (Netscape) window by clicking on its background overlap.

4.2 If you are using a Mac, go to the File menu and select the option Open Page in Navigator from the sub-menu. If you are using Windows, select Open from File and click the Browse button. Or use the keyboard shortcut (which we'll use in all future labs), Apple-0 for Mac and Ctrl-O for Windows.

4.3 Navigate to the Desktop and fine your page file (yourLastName.html). Select this file and click the Open button. You should see a fairly plain page containing the words you typed in step 3.3. In the title bar at the top of your window you should see "Hello Web." Raise your hand if this is not what you see.

Step 5: File Transfer

5.1 Launch a File Transfer Protocol (FTP) client. If you are on a Macintosh this program is called Fetch. If you are on a Windows system it is called WS-FTP LE. (Both programs are available free on the Internet.) The figures below show login windows for both programs:

5.2 In the space labeled Host on the Mac or Name/IP Address in Windows, enter cow.ubalt.edu. In User ID enter Intro -- the capital I is required. In Password enter pbds660. Click the OK button.

5.3 You should see a folder called introShared. Double-click to open this folder. There should be nothing in it yet. You have just accessed a shared account held in common by all students taking Introduction to Hypermedia this term. We need to use this account because no regular account has been established for you yet. You will NOT use this account to submit future work.

5.4 Drag the icon for your Web page into the window that shows the contents of introShared. You may need to try this step several times, since the server probably won't be able to handle everyone's upload at once. When you see your page in the file list, you are ready for the final step.

Step 6: View Your Page on the Web

6.1 Select Quit from the File menu in Fetch or WS-FTP. If your Web browser is not still running, re-launch it. Make the browser the active or foreground application.

6.2 Near the top of your browser window you should see an address bar showing information about the page currently on display. If this feature is not visible in your browser window, type Apple-L on the Mac or Ctrl-O in Windows. In the dialog box that appears, type the following, filling in the appropriate value for "yourLastName:"

6.3 You should see the same thing you saw in 4.3. Ask for help if you do not. There is an important difference between what you see now and what you saw then: the current page can be seen by anyone with an Internet connection, provided they know the Web address or Uniform Resource Locator (URL). Because the page has been stored in a directory accessible to a World Wide Web server program, it is published on the Web.