Building Your Own Webpage:

An Introductory Tutorial Using Netscape Composer

by Chuck Ziehr


This tutorial is designed to help a novice build a simple webpage using Netscape Composer (a limited, but functional, WWW authoring program). Netscape® Navigator must be loaded on your computer in order to build webpages using Netscape Composer.   This tutorial will include the use of  headings, normal text, links, and images (graphics).  Although Netscape Composer is capable of much more than these four functions, these will suffice to get a new web author up-and-running.  By mastering these four fundamental capabilities, it will give the user confidence to explore more advanced capabilities of Netscape Composer and maybe even to explore writing directly in HTML (Hyper Text Markup Language).


Starting a new webpage (html file)

  1. Start Netscape Communicator.
  2. Click on the File -- New -- Blank Page.  This provides a blank white page like beginning a document using wordprocessing software.  Note on the title bar at the top of the screen that you are now in Netscape Composer and that you have started a file that is currently "Untitled."  Anything that you type onto this page will be saved in HTML format (Hyper Text Markup Language) by Composer, but it will be displayed on the screen in "normal" format (with only a few exceptions).  Composer is primarily a WYSIWYG ("what you see is what you get) authoring program.
  3. When finished (or periodically when constructing a long page) Save the file clicking the Save button or by clicking the File -- Save commands.  This will display a dialog box that will allow you to give the file a filename and to select a destination for your file (a floppy disk or your hard drive).  This is the same process as saving a document using wordprocessing software.
  4. Once you've saved your file you can see what it will look like when viewed on the WWW via the Netscape browser by clicking on the "Preview" button or by clicking the commands:  File -- Browse Page.

Using headings

  1. Key in the words that you want in your heading (for the title of your page or a subtitle or a heading or subheading).
  2. Highlight (select) the words of your heading by holding down the left mouse button and dragging it across the words.
  3. With the heading highlighted (selected) click on the "Paragraph style" drop down box (usually on the left of the lowest bar at the top of the page) or click on the Format -- Heading commands and select the level that you desire for the heading (1 is the highest or largest heading).
  4. HTML automatically adds a blank line following a heading.
  5. For example the heading at the top of this section "Using headings" was created as a "Heading 4."

Entering normal text

  1. Make sure the "Paragraph style" is set on "Normal" and simply key in your text as you would in a wordprocessing.
  2. You can use tabs, capital letters, bold face, italics, and underlines just like you would in a wordprocessor.
  3. You can insert line spacing by hitting the Enter key to go to the next line.

Creating a link to another page on the WWW

  1. Key in the words that you want to link (hyperlink) from.  For example, suppose you wanted to link to my homepage by clicking on the words Ziehr's Homepage.
  2. Highlight (select) those words (by holding down the left mouse button and dragging across the words).
  3. Click the Link button or click the Insert -- Link commands.
  4. A "Character Properties" dialog box pops up in which you will need to type in the "Link to" box the URL or filename of the page to which you want to link.  For example my homepage's URL is http://arapaho.nsuok.edu/~ziehr/.
  5. The finished link would look like this:
  6.     Ziehr's Homepage
  7. If the link is to a file (rather than to a URL) then in the "Link to" box type in the path and filename for the file.  If it's a file that is stored in the same folder (subdirectory) where your webpage is stored, then all you need is the filename.

Inserting an image (graphic)

  1. If you want to include a picture or map (any image graphic) in your page, put the cursor at the place you want the image.
  2. Press the "Image" button or click the Insert -- Image commands.
  3. An "Image Properties" dialog box will pop up.  Enter the URL or local filename in the "Image location" box.
  4. For example if you wanted to insert the picture of the NET building off the Netnotes website you would enter this URL in the "Image location" box:  http://netnotes.nsuok.edu/Documents/campusfall02/images/net.jpg.  It would insert the image that follows.

  5. NSU's NET building with fall foliage
  6. If you want to continue to access the image from a remote location (as in the NET building example above), be sure to check the "Leave image at the original location" box in the "Image location" box.  Otherwise Composer will make a copy of the image file and store it at the same location as your webpage.
  7. You can experiment with the other options in the "Image Properties" dialog box to set such features as text alignment relative to the image, image dimensions, and spacing around the image.  You can even make the image to be the button to reach another link.
  8. The "image location" can be a complete URL or simply a filename (if the image is stored in the same location as your webpage file), just like with a "Link" (see above).

Accessing your webpage

    You have now mastered the essential commands for creating a fully functional, although simple, webpage.  It can be viewed with a WWW browser directly off a floppy disk or your hard drive or it can be placed on a WWW fileserver and accessed from anywhere in the world via the WWW.
  1. To view the webpage directly from a floppy disk or hard drive start Netscape Communicator (or Microsoft Internet Explorer) and press the Open button or click on File -- Open Page or simple type in the path and filename in the "Netsite" or "Location" box.
  2. To publish the webpage on the WWW you will need access to a WWW fileserver provided by a commercial ISP (Internet Service Provider) or by NSU (here at NSU students may get a free account on the Arapaho fileserver).
  3. At NSU go to Personal Web Page Guidelines at the following URL http://arapaho.nsuok.edu/NSU_Policies/perspol.html to find out how to apply for your own space on the Arapaho fileserver.


Adding more features

If you're ready to try to get a bit more sophisticated with your webpage, a great site to help build more complex pages is reallybig.com ("the complete resource for all web builders").  It can be found at http://reallybig.com/reallybig.php3.  This site says this about itself:
" Welcome to the largest independent directory of Web building resources on the Internet!   If you're looking for Web building resources, you've come to the right place! Just follow the subject guides below to find thousands of the best Web building resources for Webmasters available on the Internet, including clipart, scripts, backgrounds and more! "

Created by Chuck Ziehr, Northeastern State University, September 28, 1999.  Last revised February 26, 2004.