Your First Web Page

CS 14A

Apr. 23, 1997

Work through these exercises. There is nothing that needs to be handed in. You will, however, need to have some pages by Friday when we practice transferring files from your N: drive to the Web server. (We will take some time Friday for you to finish this.)

These instructions are a little sketchy. (I hope they're not too sketchy.) I've done this on purpose. Some of you need just a little bit of direction to get started and will be able to help those around you. Others will have a question or two and a few might need more help. Just call me over if you get stuck, or if you don't think your system is doing what it's supposed to.

Step-by-Step Guide

1. Make sure you're logged into the network.

2. Make a folder (directory) for your set of Web pages:
   1. Open an MS-DOS window: Open the DOS folder and open the DOS Window application.

   2. Type the command N: .

   3. Your command prompt should have N:\ in it at this point.

   4. Type the command md web to make the folder.

   5. Type the command exit to quit the MS-DOS window.

   This is very important: be careful to store your web pages, images, etc., into this folder on your N: drive. When you create a new page, use Save as to save it and make sure it's being saved in the correct drive and folder (N:\WEB).

3. Start Netscape Navigator Gold (Windows folder).

4. Open the editor: From Navigator open the File menu. Choose New Document, then choose Blank. You should have two windows now: your original browser window and the editor window.

5. There will be times when you'll be using a browser window and possibly several editor windows. (Make sure you can distinguish between the browser and the editor.) It's possible to move and resize windows. If you don't know how to do this, I, or perhaps your neighbor, can show you.

6. Start using the editor. Notes:
   1. The editor's formatting features are similar to those of any other GUI word processor.

   2. You can cut-and-paste text from one window into the editor.

   3. You can drag an image from the browser into the editor.

7. Save your first page as INDEX.HTM. You must use this name. Make sure you're saving the file into the correct drive and folder (N:\WEB).

8. I want you to put two things on your first page:
   1. The words ``My First Web Page,'' centered at the top of the page, using the Heading 1 style.

   2. A link to a second page. The link text should be ``Here's a link.'' The text should be left aligned and be in the Normal style. Type the text, then highlight the text and use the link button on the toolbar to make the link point to the file SECOND.HTM. (Remember that all links to local files and images MUST BE IN UPPERCASE.)

   3. Save the file.

9. Create a new, second web page using the filename SECOND.HTM. (A second copy of the editor will begin running.) Put an image on this page:
   1. Perform a Save As on the file.

   2. Using your browser, go to Westminster's home page.

   3. Drag the large image into the page you're editing.

   4. Center the image, using the formatting buttons. (Click on the image first.)

   5. Save the file.

10. Let's see if it all worked. Go back to the browser and open the File menu. Choose Open File... and open the file INDEX.HTM you just created. Test your link to make sure it works and make sure the second page image is loaded by the browser.

11. Let's try an experiment:
    1. Use the editor to add some additional text to INDEX.HTM.

    2. Go back to the browser and view INDEX.HTM. You're still looking at the old version, right?

    3. Go back to the editor and save INDEX.HTM

    4. Go back to the browser. Still the old version, right?

    5. Hit the Reload button on the browser. Now you finally see the new version.

    Moral of the story: To browse changes in a Web page, you must save the page from the editor, then reload it from the browser.

12. If you want to begin experimenting further, go right ahead.

The Web Server

The Web server we'll be using is a Unix system. In Unix, file names are case sensitive ( index.htm and INDEX.HTM are two different files), whereas DOS, Windows, and OS/2 are case insensitive. This can cause headaches when you go to publish your pages (transfer them to the Web server). If you follow these guidelines, you'll have few problems:

1. A link to a local file or image should always be made with an uppercase file name. Examples: INDEX.HTM, SECOND.HTM, WCBANNER.GIF .

2. A link to a page on the Internet should be made using the correct URL for the page. Example: http://www.cs.yale.edu/HTML/YALE/CS/HyPlans/tap/ada-lovelace.html .

3. The editor will sometimes add the prefix file:///N|/WEB/ (or similar) to your local files and images. This prefix must be removed or the links won't work when published.