Contents

• Overview
• Text Technology
• Fun with Fonts
• List Lightning
• Great Graphics
• Picky with Pictures
• Coloring between the Lines

• Tricks with Tables
• Using Tables for Layout Management
• Spanning Rows and Columns
• Perfect Picture Placement
• Behind the Scenes
• Meta Tags to the Max
• So you really want to edit the HTML?
• Summary

Advantages 

• It's free!
• It's convenient for anyone who uses Netscape as their Web browser
• It offers a wide range of capabilities without requiring the user to drop into HTML
• It produces standard HTML

Disadvantages 

• It doesn't handle frames
• To insert applets, you have to write the <APPLET> tag yourself
• Though it handles tables, it is limited in what it can do with them, and has a few bugs

Fun with Fonts 

Basics: 

Heading 1 - for your most outstanding title needs!

Heading 2 - for important titles that don't take up so much space.

Heading 3 - for subtitles that still need to be fairly large. Note that none of the titles is centered by default.

Heading 4 - for smaller subtitles. Most browsers give titles extra space above and below, so you don't have to double space around titles.

Heading 5 - This is smaller than the "normal" type, and so is of limited value, unless you are doing your body text in a reduced size.

Heading 6 -  A really tiny title. I never use Headings 5 or 6...but I am somewhat nearsighted! Even these tiny headings have extra white space around them, though.

Formatted - this is for text whose lines 
        should not be changed in width. 
                It is the exception to 
                     the rule that all 
HTML text can be freely reformatted!
(Note: to get normal line separation,
      use <Shift><Enter> at line ends.)

List Item: by itself, not indented. Using the list button  on the toolbar gives the "normal" list appearance. 

Desc(ription) title: this is intended to allow you to set up pairs of entries where a title is followed by text.

Desc(ription) text: this is the text describing what the title is telling about. It is automatically indented.

---

Sizes

Headings vs. Sizes
Headings create extra space before and after the lines they are on, and you're returned to Normal style when you press <Enter>. But you can also change size of type, and they will only take up as much room as the font needs. The sizes defined in HTML are +4+3+2+1 0 -1-2. In Netscape Composer, these are easily accessed on the formatting toolbar, and you can also use the Format...Size menu option.

Relative Size in HTML
HTML size tags are "relative": that is, they refer to the default size of Normal type. This is different from word processors and page layout programs, which use points (each point is approximately 1/72 of an inch). This means that using HTML relative sizes (including Headings), the physical size of the letter depends on what the browser user sets as the "Normal" size. In Netscape version 4, you can set the default size by pulling down the Edit menu and selecting Preferences. There is a Font tab that lets you choose default encodings (for international use), variable width font and size (the default is Times New Roman 12 point), and fixed width font (default: Courier New 10 point). 

Colors

With Netscape Composer, you can change colors on several categories of text. In each case, there is a color picker that offers a choice of 49 "reliable" colors. You can select:

Default text color: The color of everything except links and text that you change specifically. It defaults to black. Use the menu Format ... Page Colors and Properties ... Colors and Background ... Normal text.

Link colors: On the same menu, you can choose the three link colors:

• Link text: defaults to blue
• Active Link Text: the color while you actually hold the mouse button down over the link - defaults to red and creates a sort of "flash" that confirms to users that they really did something when they clicked!
• Followed Link Text: after you have been to a site, the links to it turn this color- purple by default.

Special colors: If you get tired of the default text color, you can highlight any word or character and change the color. With Netscape Composer, the easiest way is with the color button  next to the size button in the formatting toolbar.

---

Special Effects

In addition, there are some special effects you can create with Netscape Composer. Most of them can be set using the Format ... Character menu option.

• HTML allows you to designate text as blinking. Be very sparing with it, since it usually gets on people's nerves! 
• You can create ^superscript and _subscript styles, helpful for creating math displays, but not as reliable as a word processor. Example: one point is ¹/₇₂ of an inch.
• There is a strikethrough feature for text revision.

On the Tools menu of some versions of Composer (4.5 and above), there is a separate Character Tools option that offers a number of even more special effects, including:

• Colorize - it doesn't give you a choice of colors, though.
• Rainbow Colorize
• SMALL CAPS
• Tableize makes highlighed text into a table - single row, single column bright gree background (!). A better tool for this is the Tableize option directly under  the Tools menu. This one creates multi-column and multi-row tables based on either spaces or commas between words. It's useful if you're importing text from files or databases with comma-separated lists. 
• Tag Stripper removes HTML tag formatting from selected text.

List Lightning 

• To get indented lists...
• Use the right-indent button on the format toolbar (has an arrow pointing right)
• To force a list item to start a new line without a bullet or number,

use the keyboard combination 
<Shift><Enter>

1. You can change the numbering to: 
2. letters (upper or lower case) 
3. or roman numerals (upper or lower case).
4. Get the "context menu" by using the right mouse button to click on any line in the list. Choose "Paragraph / List Properties", and use the Paragraph tab's Number Style list box to select the style you want.

Picky with Pictures 

Basics: Putting a Picture In 

Size Adjustments

Usually, it's a good idea just to let the image stay its original size, because the quality often suffers when browsers "fiddle" with the size of an image. If you decide to change it, you'll most often want to make sure the "Constrain" checkbox is checked: this keeps the ratio of height to width locked, so the picture doesn't appear squashed or stretched. And if you forget, there's the "Original Size" button to put it back the way it should be.

Placement Options

The first five buttons are mainly for small images that are shown in a line of text. They let you adjust vertical alignment with some precision. The last two let you have text wrapping around images, either on the left or the right. 

Alternate Text

1. When a picture is in the process of being downloaded;
2. If the picture can't be found or for some other reason can't be displayed by the browser;
3. If the user has turned off image display, or is using a browser that doesn't have graphic capability (such as Lynx);
4. In newer browsers: when the user lets the mouse pointer pause over the image for a short time, the alternate text appears in a yellow "sticky-note" format.

Coloring between the Lines 

Horizontal Rules

Height 15 pixels (5 is my default): 

Width: 50% of window:

No 3D shading:

Mini-Tables

Graphics

Tables are one of the most versatile tools for making HTML pages look neat. Netscape Composer is fairly good with them. The main problems are the slowness with which Netscape puts text in tables when they get complicated, and a bug in how Netscape gets cells to span more than one column. In spite of that, they're handy and useful to use! 
 

1. The table button on the toolbar
2. On the Insert menu, choose Table...Table
3. If you have a list of items already that you want to make into a table, you can use the Tools...Tableize menu. First highlight the items you want to be in the table. Items to go in different cells need to be separated either by spaces or commas, and each new line becomes a row in the table.

Here's the initial dialog, which you'll also get when you edit an existing table's features:

Meanwhile, you can also get this dialog for editing features by right-clicking the table, and selecting Table Properties on the pop-up menu. You have to click very carefully, though! Your mouse must be over text or graphics - not over empty areas of the table. Otherwise, Netscape may select something entirely different! (Yes - it's very annoying!) A good way to insure that you've got the right table or cell in an empty area is to type some text in, then point and click. You can delete the text later if you didn't really need it.

Popular Table-based Layouts

A popular variant of this is to leave the borders off and contrast the areas with colors. Here is a three-column page (also frequently found) using a contrasting colors in the cells:
 

If you'd like your page to have a "header" area that spans the entire page, don't start the table until below the header...or, create a separate table or separate row the spans the entire width of the page:

Setting the Options

• Table tab:
• Borderline: the frame about each cell. For layout, it's often best to turn this off.
• Equal column widths: Usually this isn't what you want with layout control tables, but there are cases when it is.
• Row tab:
• Vertical alignment: usually works best set to Top, which unfortunately is not the default.
• Cell tab:
• It's usually easier to leave cell alignment set to Default, and control alignment by rows. You can easily override default alignment for text and images by using ^L (Left) ^E (cEnter) or ^R (Right).
• Cell spans: This is where you make cells wider than one column or higher than one row. See details of bug-fixes below. 
• Cell width and height: these often don't have the desired effect - browsers have a bad habit of ignoring these specifications! 

Spanning Columns

I'd like to take the center row and make it one large cell. The first step is to right-click (carefully!) in the cell numbered 4 and select Table Properties to edit the table. I then click the Cell tab and go to the Cell spans section. I want the current cell to span 1 row and 3 columns. This is the result:
 

Not what I wanted! Cells 5 and 6 should no longer be there. The solution is relatively simple: right-click (carefully) in each of the unwanted cells, and select Delete...Cells from the pop-up menu. The result should be what I wanted to begin with:
 

Spanning Rows

Again, the result is displaced cells adding a phantom column to the end of the table. We'll get rid of it in the same way: by deleting the individual unwanted cells:
 

Having it both Ways

As before, the extra cells have been popped into phantom columns, and we'll have to delete them to make the table look right:
 

Perfect Picture Placement 

Meta Tags to the Max 

Page Description Tags

Other Meta Tags

So you Really Want to Edit the HTML? 

Separate Text Editor

Once you choose your editor, you can open any Web page and select the menu choice "File...Edit Page" to edit the HTML directly. When you're done, exit the editor. Composer (usually) asks if you want to update what you're seeing, and you should click Yes. If it doesn't ask, quit Composer and re-open the file - otherwise, your HTML edits will be lost!

Built In Editors

• On the Insert menu, select HTML Tag. You can then type in a new tag - for example, an <Applet> tag. However, you can only do one tag in each box - you can't put both <Applet> and </Applet> in the same field. You have to select Insert...HTML Tag again for the second one.
• On the Tools menu, there is a subsection called HTML Tools. Three editors are available in this section. I have tried them all, and can't decide which one is the worst. They're all pretty poor! Your best bet is to select a separate text editor and use that.

Audience:

Objectives:

1. Discuss the general advantages and disadvantages of Netscape Composer;
2. Explain how to set the page properties;
3. Describe ways of editing the HTML source;
4. Find buttons and menu items for performing common HTML tasks;
5. Discuss how to manage tables in Composer;
6. List ways of creating special effects with tables;
7. Identify details of the use of horizontal rules and table borders;
8. Describe options for various types of lists, indentations, definitions, and their use;
9. Explain the options available for images: their placement, use of alternate text and sizing;
10. List ways of changing typography, including headings, sizes, colors, style, super- and subscript in Netscape Composer.

Module W32c:

Author:

Institution: