Using Netscape Communicator to Publish a Web Page
Adapted from the User Services document for use in Ed Tech II (EDDV286)

All UD students may now choose to publish documents on the World Wide Web using their accounts on Copland (copland.udel.edu). Netscape Communicator provides a point and click way to create web pages. It is not the only way to publish a Web page on Copland, but it is one of the easiest ways to get started. For information about other methods of publishing your Web pages, consult "Creating Your HTML files" found in the WWW Style Guide located at the bottom of the UD home page.

Class Objectives:
By the end of the class, participants will be able to:  

There is an Appendix which provides information on using Netscape Communicator to modify a template file, to fill in a form to create a Web page, and how to check that your Copland directory and Web files have the correct permission settings so that others may access them.

Introduction
All UD students may now choose to publish documents on the World Wide Web using their accounts on Copland (copland.udel.edu). Netscape Communicator is not the only way to publish a Web page on Copland.

Communicator is available on Macintosh and Windows systems in many University computing sites. If you are a UD student, faculty member, or staff member, you may also download a copy for your microcomputer from the UD software distribution Web area. To access this, from the UD home page select "Technology", then "Software", and then the appropriate platform. Be sure to read the instructions before you begin.

In Ed Tech II, students should plan to work using the Windows 95 version of Communicator that is available in the WHL309 computing lab.

Netscape Communicator has several types of windows. There is a browsing window and an editing window. The browsing window is called Netscape Navigator. The editing window allows you to create or edit a page of your own and is called the Netscape Page Composer.

The process you use for creating a Web page with Communicator is nearly identical for Macintosh and Windows. Both versions of Communicator have a menu bar with pull-down menus and rows of toolbar buttons that appear just under the title of a Web document. All versions also allow WYSIWYG editing of a Web page. You can use Communicator to create your Web page

This class will focus on using a blank, new document.

If you are using a Windows or Macintosh system, you will need to save your work to a diskette or your computer's hard drive before you can then transfer your work to Copland for others to view.

Web Page Elements
Hypertext Markup Language (HTML) is the language used to create documents for the
World Wide Web.

Tags: are used to label the elements of Web page. Tags come in pairs consisting of beginning and ending tags.
 

Be sure to include your name and date last updated. For other suggestions about designing pages check the WWW Style Guide located at the bottom of the UD home page.

To see the underlying HTML text for any Web page while using the Netscape Navigator browser, select the "View" pull-down menu and then "Page Source."

 

Preliminary Steps¾ Exercise 1

In this exercise we will create a sub-directory of your UNIX home directory called public_html and set it up so that others can see the files you publish there:
 

  1. Log in to Copland.
  2. Make your home directory executable by others. At the UNIX prompt, type
  3. Create your public_html directory. At the UNIX prompt, type
  4. Make your public_html directory executable and readable by others. At the UNIX prompt, type
  5. Make your public_html directory your current working directory by typing
  6. Get the full path to your public_html directory by typing
    7. /home/base/usrc/46/18062/public_html
  7. Write this down in a place where you can find it again. You will need it later for publishing your web page.
Beginning a Basic Home page--Exercise 2
    Locate the Netscape Communicator icon on your desktop. Double-click it to open the program.

    To get a new page to begin working on, select "New" from the "File" pull-down menu and then select "Blank Page." Or, you can start "Page Composer" by selecting it from the "Communicator" pull-down menu. Notice that the toolbar has changed. Many of the buttons look similar to Window’s compatible word processing programs. The title bar across the top displays the words, "Netscape Composer."

    In the following exercise you will begin to create a home page by creating a Main Heading (Heading 1), a Section Heading (Heading 2), an Unordered List., and a Paragraph. Use your own text, but remember that millions of people can view this once published on the Web.

    1. Select "Heading 1" from the pull-down menu
    2. Click on the alignment button and then select the centered text option.
    3. Type an appropriate heading such as "Welcome to My Web Site" and press ENTER

      4. .
    Note: Add or change the text in the file with standard "mouse control." For example, if you start typing, that text will become part of your Web page. If you want to delete text, highlight the text and press the DELETE or BACKSPACE keys. Or if you want to replace text, highlight the text and type the new text.
    1. Create a section heading select "Heading 2" and then type the appropriate text such as "About Me."
    2. Begin creating an unordered list by clicking on the bulleted list box.

      3.  
    3. Type an item and press ENTER when finished typing the item.
    4. Type three more items. When finished, click on the bulleted list box to turn it off.
    5. Type a paragraph and press ENTER when finished. Note: no special boxes need to be selected to create a paragraph.
    6. Experiment with other text formatting features. Select the text you wish to format, and then click on the appropriate button. Try to make some text bold, italicized, or underlined. Try changing the color of some text.
     

    Creating a link--Exercise 3

    In this exercise you will create a link to the University of Delaware home page. The process is the same for linking to web pages around the world. First you must know the URL (Uniform Resource Locator, or address, for the page you wish to link to).

    1. From the pull-down menu, select "Insert," "Link"
    2. In the box labeled "Link source" type
    UD Home page
    1.  In the box labeled "Link to" type
    http://www.udel.edu
    1. Alternatively, if you have already added text to the page and you want to turn it into a link, highlight the text using the mouse, and the select "Insert", "Link." The selected text will appear in the "Link source" box.
    2. Your links may be any URL’s. These can be the name a web site, as above, or a reference to an HTML document located on a WWW site, or a reference to another kind of document like an image or audio file. Using copy and paste makes it easier to enter long URL’s.
    3. You can also create links that go to a location within your web page. This can be helpful if your web page is long, and it become cumbersome to move around within it. To create this kind of link, you need to add "targets" at locations within your web page document. Use the "Target" tool button, or select "Insert" and then "Target." You will be prompted to type a name for the target. After you have inserted one or more targets, you may inserts links. Now, the link creating dialog box will list the names of all the targets within your document. Select one of the names from the list.
     

    Including a graphic--Exercise 4

    Before you include a graphic, make sure that you are not violating any copyright laws.

    You can either use a reference to a graphic file that resides somewhere on the WWW, or you can include your own graphic file that you have obtained using a scanner or a painting program.

    Using a reference to an image on the WWW.
    1. To insert a reference to a graphic on the Web, first click with the mouse at the location where you want the image to appear. Then choose the "Insert" pull-down menu and select "Image."
    2. In the "Image Location" box, type the URL of the graphics file. Or, you can paste the URL from your clipboard if you have copied the location while browsing.
    3. Be sure to check the box that says "Leave image at original location", or Netscape will automatically copy the image from the original location on the Web.
    Using your own image file.

    It is easiest if you obtain any graphics you wish to use before starting to compose your page. You may use graphics that you have created yourself or downloaded from the WWW. These should in either the GIF or JPG formats. It is easiest if you copy these images to the same directory where you have saved your HTML documents. When you choose to insert an image, Netscape Composer will provide a list of the images to choose from.

    1. To insert a graphic, first click with the mouse at the location where you want the image to appear. Then choose "Insert" pull-down menu and select "Image."
    2. In the "Image Location" box, type the file name of your graphics file, or select it using "Choose File."
    You can also change the size of the image as it is shown on your home page by changing its width and height in the image properties dialog box. There are also options to select how text will wrap around your image.

     

     

    Browse your file locally--Exercise 5

    Before you "publish" your document, you can switch from the composer window to the browser window to browse your web document. This is especially useful for checking your links. You must save your document locally first before you are able to browse it. And if you want to change anything you must go back to the composer by selecting the edit document option.

    1. From the "File" pull-down menu, select "Browse Page." If you had not previously saved your document, you will be asked to save it locally. You will be able to see your document as a hypertext document. Check any links.

      2. Remember: You cannot edit in the browser.
    2. You now have several Netscape windows open. Go to the "Communicator" pull-down menu to see all three windows listed. You can use this menu to go back and forth between the editing and browsing windows for your document or out to the UD Web. Or, while browsing a page, you can select "File" and the "Edit Page" to edit the page you are browsing.
        Publishing Your Page--Exercise 6

    After you have created and saved your page, you are ready to publish your page. You now have to transfer the files to your public_html directory, which you created at the beginning of the class on Copland.

    1. From the "File" pull-down menu select "Publish."
    2. In the box labeled "http or ftp location to publish to" enter

      3. ftp://copland.udel.edu/"path-to-your public_html"

      where you substitute the full path to your public_html directory that you saved from the first exercise. Following the example in Exercise 1, you would enter

      ftp://copland.udel.edu/home/base/usrc/46/18062/public_html
    3. Fill in the boxes for your user name and password. Do not check the box to remember your password if you are working a lab. Then click on "OK." Netscape Composer will give the choice of publishing all the files in the same folder as the document or all related files. Or, you can select from a list the files to publish. It’s a good idea to be sure that you only have files you want to use on you Web page on the floppy you are using for your home page document.
    4. You can use WS_FTP to check which files are in your public_html directory on copland. You can also use WS_FTP to change the name of a file, or move a file from your home directory or from your floppy disk to your public_html directory.
    5. After the files are in your public_html directory, you might want to check the protection to make sure that the files are visible to the world. The Appendix contains details on checking protections.
     

    Browsing your published home page--Exercise 7

    Once you have published your page on copland, you will want to browse or view it to see how it will appear to the world. Use the "Window" pull-down menu to select the window that is currently set to the UD Home page

    1. From the "Communicator" pull-down menu select the "Web Page: The University of Delaware."
    2. In the location box, type the location of your new home page. Note: do not include www as part of the address.
        3. http://udel.edu/~your_username
    To make changes, you can edit the copy on your local computer, and then repeat the publishing steps.

    Adding Additional Features to your page--Exercise 8

    You can easily add a horizontal line to separate sections of your Web page by positioning your cursor at the location and clicking on the line box. You can select a background color by going to the "Format" menu and selecting "Page Color and Properties." It is important to think of the impact of the color on the viewer. Finally you should include the month and date you last updated your file at the button of your page.

    1. Experiment with changing the background color and using different color schemes.
    2. You can add links that enable users to send e-mail to you or anyone whose e-mail address you know. Use the same process for creating links that you used in Exercise 4, but in the "Link to" box type "mailto:" followed by your e-mail address. For example, a link that will start sending e-mail to the President would read
      3. mailto:president@whitehouse.gov

      Note: there is a colon after "mailto" and no space between the colon and the e-mail address.

      Although you can create a link that starts sending e-mail to anyone, good judgement and University policy dictates that you don’t include such a link without obtaining permission of the person to who the e-mail will be sent.

    3. Also, you can easily create links that take the user directly to a Usenet newsgroup. Again, following the usual procedure for creating links, but in the "Link to" box type "news:" followed by the name of the newsgroup. For example, the link
      4. news:udel.bull

      takes the user automatically to that University of Delaware newsgroup.

      Note: there is a colon after "news" and no space between the colon and the name of the newsgroup.

    4. To add an audio link to your page, be sure that the audio file that you want to link to is on the same floppy disk or directory on your hard drive as your index.html and other images and documents. Using the same procedure as before for creating links, enter the name of the audio file in the "Link to" box. For example, if your audio file is called "myvoice.wav" you enter
    myvoice.wav
    in the box.   Editing the document source for your home page—Exercise 9

    If you are having trouble with the appearance of your home page, some images do not appear, or some links do not work, you may be able to diagnose the problem by viewing and editing the document source HTML text.
     
     

    1. While using Netscape Composer to edit your document, select the "Edit" pull-down menu, and the "Document Source." This will start the Wordpad text editor. By looking at the references to your images, you may see the problem. There should be no references to drive letters, like "a:", or directories, link "c:\windows" in the text that specifies the names of images, audio, etc.
    2. If you are sure of the error, you can correct it using "Wordpad". Be sure to save your document in text format after making a correction. Be very careful not to introduce stray characters into the document source, or your Web page may not work correctly. This procedure should only be used as a last resort.
     

    .

     

    Appendix

     

    Checking the Protection of the Files in Your public_html Directory

    In order for the world to see the files in your public_html directory, they must be protected such that

    Log in to your Copland account and follow these directions.

    1. Use the UNIX cd command to change to your public_html directory and then use the UNIX ls command to check the files:

    2 type
     

      cd public_html
     
      ls -al
    You should see a display like this one:
     
    drwxr-xr-x  2 13355  1024 Sep 19 14:04 .
    drwx--x--x 20 13355  3072 Sep 19 12:51 ..
    -rw-r--r-- 1 13355  1151 Jul 18 13:00 bullet2.gif
    -rw-r--r-- 1 13355   910 Aug 29 11:39 gold10.gif 
    -rw-r--r-- 1 13355 23934  Sep 19 09:41 index.html 
    -rw-r--r-- 1 13355  3580 Jul 23 13:45 mugshot.gif 
    -rw-r--r-- 1 13355  5796 Sep 19 12:55 resume.html 
     
    The first column indicates the protection setting of each item. The second, third and fourth characters of the protection setting refer to your access privileges; the fifth, sixth, and seventh characters refer to the access privileges of people in a common group or project; and the last three characters of the protection setting refer to others' access privileges.
    1. The current directory (public_html) is represented by a single period. If its protection settings are different from "drwxr-xr-x" or "drwx---r-x", make it executable and readable by others. At the UNIX prompt, type

      2.  
        chmod o+rX .
       
        and press the RETURN key. Note that a space and a period (.) follow the "o+rX" characters.
       
    2. Your home directory is represented by two periods. Its protection setting ordinarily should be "drwx--x--x", "drwxr-x--x", "drwx-----x", or "drwx---r-x". To make your home directory executable by others, at the UNIX prompt, type

      3.  
        chmod o+X ..
       
        and press the RETURN key. Note that a space and two periods (..) follow the "o+X" characters.
       
    3. Any file that you want the world to see should have a protection setting of "-rw-r--r--", "-rw-rw-r--" or "-rw---r--". To make your "index.html" file readable by others, at the UNIX prompt, type

      4.  
        chmod o+r index.html
         
      and press the RETURN key. If other files need their protection reset, then replace "index.html" with those filenames or use wildcards:
       
        chmod o+r *.html

        chmod o+r *.gif