History 615:

Creating a Web Page

Clio Wired

Roy Rosenzweig

Fall 1998

CREATING A WEB PAGE WITH NETSCAPE COMPOSER

Beta Version (not completely tested)

  1. Get Netscape Communicator

    Netscape Communicator is the latest version (4.x) of Netscape. It is free. You can download it at http:///www.netscape.com

  2. Set up folder on desktop for your Work: Go to file menu at top of screen; choose "new folder"; it will create "untitled folder" on your desktop; rename the folder with your first name. (Clicking on filename will allow you to retype the name.)
  3. Launch Netscape Composer

    First launch Netscape; then go to 5th menu over from left on top of screen [File, Edit, View, Go, Bookmark, and Composer, which is just symbol]; click and hold and release on fourth item down—"Page Composer"

    After it is launched study the menu and button bar to see what options you have. Note that if you roll your mouse over the buttons, it tells you the function of the buttons.

  4. Create a Page: Composer should create a blank page for you as with a word processor; if it doesn’t, create a new page, yourself. As with many other things on computer, there are multiple ways to do this; you can click the upper left button ("new page) or go to the file menu and pull-down menu and choose "new" and then "blank page." Here’s a computer convention: if I write Choose "File>New>Blank Page" the > is meant to suggest that you going through a hierarchy of menus. Here’s another computer convention: when I put things in "quotes," I don’t mean for you to type the quotes. It’s just a way of setting things off.
  5. Formatting text: Type some text like "Welcome to my Home Page" or something more creative. Then, highlight the text and consider some formatting options. These are very similar to working with a word processor. In fact, there isn’t all that much difference between the two. Look particularly at the formatting options on the button bar on the second row of buttons and try out the difference between "normal" and "heading 1." Then, try putting your text in different font sizes, different colors, bold, italics, etc. Get your text centered on the page. Add some more text and play with formatting.
  6. Saving and naming what you have written: Don’t go too long in anything without saving to disk. Saving your web page is pretty similar to a word processor with a couple of small differences. Go to file>save. Then you will get a dialogue box asking you where you want to save and what you want to call your file. Click desktop so that you see the folder you named with your name. Open that folder. Then title your file "index.html" [Again, don’t type the quotes] Generally, speaking a file called "index.html" is default file for the start of your web pages. Almost all web pages need the suffix "html" or "htm." If the file is index.html, you don’t have to type it as part of the address. Hence, the address

    http://chnm.gmu.edu/courses/cliowired

    is identical to http://chnm.gmu.edu/courses/cliowired/index.html

    but http://chnm.gmu.edu/courses/cliowired/syll.html takes you to the syllabus rather than the opening page.

    Generally, "htm" is used on windows machines, while "html" is used on mac and Unix machines. The most common web server machines are Unix. We will use a Macintosh server, which uses "html" as the suffix.

  7. Establishing the Title and "Properties" of your page: As you surf, the web, you will notice that pages usually have a title at the top. You can title your page, by going to the format pull down menu and choosing "page properties." One of the tabs is called "general." Click that tab. You will then have a chance to put in a title. Note that title and filename are two different things. The file name is what the computer is using to keep track of the page; the other is what you want to display to the world when they first see your page.

    The other fields are optional; description affects search engines, for example, as does "key words."

    Now click the "Colors and Background" tab. If you do nothing here, you will probably wind up with the ugly, default web gray background. (The Lab machine may already be set to white background.) Instead, choose "use custom colors" and work with the color palette. There are different reasons for different background colors. But white or another light color generally makes the most sense for pages with text.

    You also have a chance here to set the link colors. Many people argue for the default of blue active links and red visited links. Web design guru David Siegel says you should reverse them. Can you think of reasons for and against his position? After you are satisfied with your color choices, click "ok." You might also want to save again. You should always save your work periodically.

     

  8. What’s Behind the Curtain? What Netscape Composer is doing for you is writing the HTML codes that allow you page to be read around the Net. You no longer need to learn HTML, but it is useful to see how it works. You can see the codes for your page by going to the View>Page Source Menu. Can you see how the codes relate to what you have displayed on your page? What are the basic patterns? You can go to any page on the Web and look at the source code. There are no secrets on the Web. Close this page by clicking the close box in the upper left corner and you are back in your page.
  9. Insert your first link: One key concept (if not the key concept) of the web is "hypertext," which relies on the ability to create non-hierarchical links that move you from one place to another quickly. Inserting a link is very simple; it requires some text (or an image) and the address where you want someone to go. Type, for example, "Center for History and New Media" Highlight that text with your mouse. Click the chain link icon on the button bar or the Insert>link menu. You will get a dialogue box and put in the center’s URL: http://chnm.gmu.edu Click ok. What’s happened to your text? What does this tell you?
  10. Put in your address: People visiting your page might want to email you. To make that essay, put in a link to your mailing address. Just type your name on the page. Highlight your name. Go to the link button. Insert of URL, insert mailto:rrosenzw@gmu.edu (Put in your address, not mine.)

    Save!

    Interlude 1: At this point in testing these instructions in the lab, the machine froze and I had to reboot. These things happen, but it’s a key reason why you want to save your work regularly.

  11. Put in an image: One of the nice things about the web is how easy it is to put in illustrations and pictures. As we have already seen, you can "borrow" any image off the web. Perhaps you would like an animated image like the famous dancing baby. There are thousands of those animated gifs out there on the web. One place to find some is http://www.adeveloper.com. How else would you find animated gifs?
  12. I have placed a few for you to use at http://chnm.gmu.edu/courses/cliowired/gif.html

    After you have saved the image on your computer (in the desktop folder), you need to insert in into your page. There are many other places to find free images such as:

    ClipArtConnection.com: http://www.clipartconnection.com

    A couple of things to keep in mind about images on the web:

    • Unlike a word processed file, where the image becomes part of the page, on the web, the image remains a separate file. Hence if you have a web page and a picture, that’s two different files that need to be uploaded to the web server.

    • Images come in many formats, but web browsers only recognize two of them: .jpg and .gif Images need to have those suffixes as well as those formats. Generally, speaking jpg (or jpeg) is better for photos and gif for line drawings.

    (GIF=Graphics Interchange Format and JPEG=Jt Photographic Experts Group; gif files are usually faster and optimized for electronic downloading.)

    • Image size is a crucial issue for how long it takes your web page to come up. When you encounter a web page that takes too long to load, the issue is too many images or images that are too large.

    How to place image on page:

    • Put the cursor where you want to insert your image. Click the "image" button (the one with triangle, square, and circle) on the button bar OR go to the "insert" pull-down menu and click "image."

    • You will get a dialogue box. At the top, type in the filename for your image. Or use the "choose file" button to look around in your hard disk to find the image file you want to insert.

    • The dialogue box also gives you various options that allow to set the spacing of the image and even its size. You can also set "alt" text to display if browsers have images turned off.

    • Troubleshooting: Later on if your image is not displaying, check the source code. The problem often has to do the path or filename of the image. The code should look something like: <IMG SRC="yourfile.gif">

    You can also click on the image and hold down to get "image information." Then look at the listing of the file. It should mostly likely just say something like "roy.gif" That would be for a file in current directly. If the image is in a subdirectory called "pictures," it should say something like "pictures/roy.gif". If it is up one directory level, it should be "..roy.gif" or two levels "../..roy.gif"

    You can also insert background images. Most of them don’t look very good, but you may want to play around with this.

    Save!

  13. Your picture here: Remember those pictures I took two weeks ago. Now’s your chance to insert it in your home page. Here’s how to find your picture.

    Go to the following address, which will vary with your name: http://chnm.gmu.edu/courses/cliowired/pix/erinam.jpg [substitute your first name and first initial of last name] Click and hold and save image in your folder and then insert in your page. Is it too big? If so, you can click and hold and get image editing, which will allow you to change the size--constrain proportions if you do that.

  14. What Have I Wrought? It’s time to check out how this will look on the web. Click the preview button (5 from left on top button bar) and it will show you the page in netscape.

    To exit the browser/preview window, choose your web page under the Netscape menu.

  15. Create a link to the page for your first journal entry. Link to a page, you will call something like "webj.html"

    Then create a second page with that filename. Remember to set the defaults and title the page.

  16. Create a Table: Tables are great for organizing material, including columns of text. Here we are going to use it to organize our text.

    • Click the "table" button on the button bar (upper right; looks like a table) or use the pull-down "insert" menu and click "table." This gives you a dialogue box that asks you how many rows and columns you want etc. Select 3 columns, 1 row; no border.

    • When the table is on your screen, you can manipulate it by holding your mouse arrow over the table, clicking and holding the mouse until you get a dialogue box for adjusting the properties of the table. Sometimes it takes a few seconds for the popup menu to come up. Choose "table info" and then "cell." (In Windows, you would do this with right mouse button.) For example, you can adjust each of the three cells with "table info." Make the right and left cells 20% of the window and the middle cell 60%. That way you have create a page with margins. (Note that holding down your mouse on other objects on your page—or right clicking in windows—gives you other useful pop-up menus.)

    Interlude 2: At this point in testing this in the lab, the system crashed. Don’t be unnerved by such things. You just start over. But you do need to save your work so you won’t lose it when this happens.

  17. Inserting Text: Now, you want to enter your first web journal entry. Launch Microsoft word. Open the file that you have brought. Highlight all of the text with select-all (command-A); then copy (command-C)

    Go back to Composer. Put you cursor in the middle cell and paste in (command-V)You can then work further on fomatting the text and page.

    An alternative: If your text already has a lot of formatting in it, word (and some other word processors) will allow to save as HTML format. Then you can insert from that already formatted text.

  18. Take Another Look: Check out How Everything looks in Netscape. If you time you might want to do more editing, e.g., putting link from second page back to first.
  19. Publish it: You have successfully created two web pages but no one can see them except you. To become web pages, they need to be on a web server that will "serve" them up to the world.

We have set aside space for you to publish on the CHNM server: http://chnm.gmu.edu

Your address will be: http://chnm.gmu.edu/courses/cliowired/students/firstname

You need to put your pages and images into a folder with your first name on the CHNM machine.

The program that uploads your files to a server uses a "protocol" called "FTP" or File Transfer Protocol. You need a program that does this for you. The most common Macintosh version of this program is called "fetch" and that is what you will use today. But if you have a windows machine at home, you need to get a windows program. One such free program is WS_FTP Limited Edition, which is available at http://www.ipswitch.com/downloads/ws_ftp_LE.html

You can get fetch at ftp://wuarchive.wustl.edu/systems/mac/umich.edu/util/comm/fetch3.03.sit.hqx

Uploading your files. Close MS-Word; Launch Fetch. Choose "new connection." (It will probably default to that in the lab.)

In Host, insert: chnm.gmu.edu

Username: put your firstname

Password: TO BE PROVIDED TO YOU

This put you directly into your own folder [directory] which should be empty in most cases

19. Try it on the Web: Go to Netscape and Enter Your New Web Address