HTML Authoring Programs

Table of Contents



Introduction

Web Authoring Programs speed up the process of Web page creation. They allow the user to create Web pages just as you would create a word processing document. Type your text, format fonts and paragraphs, insert pictures and tables and save. When the program saves your file, it translates the document into HTML commands and saves those commands in a .html text file. Because the file is saved in plain text formatting, it can be read by any Web browser or other authoring software.

We have two Web authoring programs on our system, Word 97 on NT machines, and Netscape Composer on NT and Linux machines. This tutorial uses Netscape Composer in order to be compliant with both operating systems; however, I think that you'll find Word 97 to be a more powerful program.

I suggest this approach: Work through this tutorial using Netscape Composer. Upon completion of this tutorial, you should have a pretty good feel for how Authoring software works. Word 97 is very similar in approach to Netscape Composer. After you finish this tutorial, open Word 97 and experiment with the authoring tools in that program. Experiment on your own and come to your own conclusions as to which program you prefer.
 
 

To start Netscape Composer from Windows NT: 
  • Open the Window's Start menu.
  • Choose Programs
  • Choose Netscape Communicator
  • Choose Netscape Composer 

To start Netscape Composer from Linux: 
  • From the local Unix prompt type netscape4
  • From the Communicator menu choose Page Composer
To create a Web page with Word 97 from Windows NT 
  • Open the Window's Start menu
  • Choose the Programs menu
  • Choose Microsoft Word
  • From the File menu choose New
  • In the New dialog box select the Web Pages tab
  • Choose Blank Web Page
To create a Web page with Word 97 from Linux: 
  • Can't

 



Creating Web Pages With Netscape's Composer


Font Formatting

Lets begin by testing font sizes using the Font Size Drop-down List on the tool bar.

This is 12 point size and the default.
This is 14 point size.
This is 18 point size.
This is 24 point size.
This is 36 point size.

Lets investigate the items in the Font Style Drop-down list on the tool bar.

This is a variable width font. Each character takes up only the width it needs.
This is a fixed width font. All characters use the same width.

Try out a few font styles along with the color drop down palette, bold, itals, and underline buttons on the toolbar. Allow the mouse pointer to rest on a button in order to see the label for the button.

Here's orange, bold Comic Sans MS (18 point).
Here's blue, underlined Lucida Handwriting (18 point).
Here's red italicized Arial (18 point).



Viewing Source

Now lets check out the HTML code that Composer creates to represent what we've created.

You should inspect the source code every step or two to appreciate the benefit of using a Web page authoring program. It's also a great way to learn more HTML commands and techniques.



Paragraph Formatting

Let's try out the remaining buttons on the formatting tool bar.

To create a bullet list, highlight the list and click the bullet list button.To increase the indentation of list items and create sub-bullets, highlight the items and click the Increase Indent button.

Let's try the same technique with the Numbered List button.
 

  1. Item One
    1. Item a with an increased indent.
    2. Item b with an increased indent.
      1. Item ii with a even greater indent.
  2. Item Two
  3. Item Three

Interesting. Composer shows the list item numbers with pound signs, but when you view the page with a Web browser, the pound signs are replaced by numbers. Go figure!

Experiment with Alignment. This is left justified. This is centered.

This is right justified.

 



Viewing the Page With a Browser.

As noted in the last section, what you see in Composer's editing window is not necessarily what you will see from the Web browser. Always check your work with a browser. Browsers offer you two methods to view your creation in progress.

1. View the page via URL by saving the file in your public_html directory, making it readable by the world, and typing the URL in the location box. For example if comp1.html is in your public_html directory, you can access it with http://www.cs.fsu.edu/~loginname/comp1.html.

2. View the page with the View File option. All browsers allow you to view HTML files that reside on your local hard drive. In Netscape, simply open the File menu, choose Open page..., click the Choose file button and browse for your file on disk.

Composer offers a shortcut to viewing your page by clicking the Preview button on the tool bar. Your page will be viewable in Netscape's Navigator window.
It's always wise to check your page with Netscape and Internet Explorer.

Leave your browser open so that you can return to it after you've made additions to your page, click Reload, and view the changes.



Adding Links

Links are easy to add to a page.
 

CIS3066 Home Page Any object that can be selected on your Web page can act as a link.



Linking to Targets

You can create links to text within the same Web page with this two step method:

  1. Create a target.
  2. Create a link to the target.

This technique is demonstrated in the table of contents at the top of this page.



Adding Images
 
Follow these steps to add an image:

  1. Position the insertion point at the place that you wish to locate the image.
  2. Click the Image button on the tool bar.
  3. Specify the image file name and path by typing it in or clicking Choose file.
  4. Choose from the variety of style choices and click OK.

Note that some formatting will not be shown in the editor window. View the page with your browser to check the formatting.
Add horizontal lines to your page by clicking the H. Line button on the tool bar. 



Adding Tables

Follow these steps to add a table:

  1. Click the Table button on the tool bar
  2. Fill in the table specification and click OK

     

    cell1 cell2 cell3 cell4
    cell5 cell6 cell7 cell8
    cell9 cell10 cell11 cell12
    cell13 cell14 cell15 cell16

     

Editing table properties can be accomplished by clicking on the table and choosing Table Properties from the Format menu. Here's a table with a variety of different properties.
 

     

    Gray Cell 1 2 Hello.
    3 4    
    Use background colors or images.   Place an image here.  
          !

     

Word 97 handles tables in a much more intuitive manner.


Other Menu Options

All of the features that we've implemented through tool bar buttons can also be accomplished through menu items. Explore the menus and see what else can be found there. Items of interest:

File/Publish: Lets you FTP your Web page and supporting pages and image files to your Web server.
Edit/HTML Source: Opens a text editor of your choosing for direct HTML source editing.
View/Page Info: Opens a separate window displaying info links and files called by your page.
Insert/HTML Tag: Lets you manually enter an html command that might not be supported by Composer.
Format/Page Colors and Properties: Allows you to specify background color or image and text colors for links etc.
Tools: Has some funky more advanced tricks you can try out.