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, WordPad or if your machine has it, 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 WordPad 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 window that is visible behind 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 Mac users lose track of their windows at any point, they 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 WordPad, 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. (This instruction will not work if you are in the U.B. Graphics lab; but you're not supposed to be there!) Click on the Desktop button or navigate to the desktop if you are currently pointed at some other directory.

2.3 Name the current document yourLastName.html (filling in an appropriate value for "yourLastName"). 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 submenu. 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."

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: search in any major engine or visit www.download.com. The illustrations below show login windows for both programs:

5.2 In the space labeled Host on the Mac or Name/IP Address in Windows, enter crow.ubalt.edu. In User ID enter your account name. In Password enter the password explained in class. Click the OK button.

5.3 You should see an empty file space. This is your personal folder or directory on crow.ubalt.edu. Drag the icon for your Web page into the window that shows the contents of your folder. 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. 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 this person knows 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.

This is the end of Lab 1.