Web Weaver Help File

Copyright 1995-97, McWeb Software

All Rights Reserved.

http://www.mcwebsoftware.com

HTML Help and ordering info

  What is Web Weaver and what does it do?

  How do you use Web Weaver?

  HTML Tutorial - This will teach you the basics about HTML and creating Web pages!

  How to upload your Web pages to the Web

  How to Order Web Weaver

Web Weaver Commands and Menu items

  Alphabetical Listing of HTML Tags - Complete list of HTML 2 and 3.2 tags

  Pull-Down Menu Items - All of Web Weaver's menu items are described here.

  How to make Forms

  How to make Frames

  How to make HyperLinks

  How to Insert Images

  How to make Lists

  How to make Tables

  Shortcut Keys - These key combinations make editing HTML much easier!

Fixed bugs and New Stuff

  What's New in this version?

  Bug Fixes/Improvements

More Help...

  HTML Tutorial

  Helpful Web Sites

  Troubleshooting


Web Weaver Order Form

If ordering with Credit Card, please use the online order form at:

http://www.mcwebsoftware.com/order.html

or fill this form out and mail it in.

If ordering with cash, check or money order:

Please fill out the following registration form, enclose payment in US dollars (plus $5 shipping & handling if you wish the software to be shipped via U.S. Mail) in form of check or money order, and send to the address at the bottom of this page.  Subsequent versions and updates will be sent to you free of charge (only if you receive the program by email).  If you order both Web Weaver and Java Perk then you will receive a $10 discount off the cost of Java Perk (plus shipping and handling if shipped via snail mail).

PLEASE PRINT CLEARLY!

Name:________________________________________   Date:__________________

Company:_____________________________________________________________

Address:______________________________________________________________

City, State, Zip:_________________________________________________________

Country:___________________________   Phone:__________________________

Email address:____________________________________(Your email address will

NOT be given to any mailing lists, etc.)

------------------------------------------------------------------------------------------------------------------

                  Quantity 	Product	Total

____@ $29.95 each	Web Weaver for Windows 3.1/3.11	______

____@ $29.95 each	Web Weaver for Windows 95/NT	______

____@ $34.95 each	Web Weaver Gold for Windows 95/NT	______

with Site Management/Analysis tool

____@ $25 each	Java Perk for Windows 95/NT

(only $15 if ordered w/ Web Weaver)	______

Add $5 Shipping & Handling if shipped via postal "snail" mail)	______

TOTAL_________________

Pick shipping method:  3.5" floppy disk ___        Download ___

-------------------------------------------------------------------------------------------------------------------

Paying with credit card?

        Card Name (American Express, VISA, Master Card)_____________

        Card Number________________________

        Expiration date_______________________

Make checks payable to McWeb Software.

Mail payment and order form to:

McWeb Software

232 Kent Street

Brookline MA 02146

USA

Email McWeb Software at:  info@mcwebsoftware.com if you have any questions.

IN NO EVENT SHALL LICENSOR OR ITS SUPPLIERS BE LIABLE FOR ANY

CONSEQUENTIAL OR INCIDENTAL DAMAGES ARISING OUT OF THE USE OF THE

LICENSED PROGRAM OR RELATED TO THIS LICENSE.

McWeb Software

Copyright 1995-1997


What's New in Web Weaver!

What's New! in version 97g (version 97.5)

  The Page Properties dialog box was enhanced to include a button for importing page colors from another Web page.  This makes it easy to use the same colors in many documents without having to re-pick the color schemes.

  The Page Properties dialog box has also been updated so that it remembers the properties of the page you are working on.  When you open the Page Properties dialog box, the current page settings are displayed so that you can edit them.

  Word wrap was added (the ability to turn it off and on).  Web Weaver always had word wrap.

  When inserting images or embedded objects the relative directory is automatically inserted with the filename so users don't have to manually insert it.

  There is no longer a 32K limit for file size.

  A color picker was added.  The eyedropper button located on the toolbar opens the color picker.

  Link verification was added to Web Weaver.  Only local links (on the user's hard drive) can be verified.  An add-on called Site Mongrel can be purchased for site management and analysis as well.

  Users can now edit HTML tags that have already been inserted into their

documents.  Just place your cursor in between the tag brackets < > and right-click.  Then select Edit Tag and the appropriate dialog box will appear allowing you to edit the tag.

  Colorizing the HTML tags in documents is now twice as fast as before.

  CTRL-F is now the keyboard shortcut for Find.

  A right-click pop-up menu was added to the side file menu.  Selecting a file from the side menu and right-clicking the mouse on it results in a menu offering the choices to view file properties, verify links, or perform other file management functions.

  The FTP Client and Graphics application buttons were added to the toolbar.

  The code for an HTML non-breaking space (&nbsp;) was added to the menu and given the keyboard shortcut CTRL-N.

  JavaScript HTML tags were added to the Java menu item.

  Several dialog boxes had the HTML attribute TARGET added to them.  This allows the user the option of targeting specific frames.

  The Delete command was removed from the Edit menu.

  The "Open Web Page" button on the side file menu was removed.  Double-clicking on any of the HTML files will open them.

  Sample templates were added.  They can be accessed by selecting the "FILE/NEW" menu item.

  Directory and Interactive Lists were removed.  They are not popular forms of HTML lists.

  The Table Wizard has been enhanced to be more of a step-by-step process.  Also, Table tags are inserted using TABS to make the HTML code more organized on your page.

  The Form wizard has been enhanced and now comes with its own CGI script  for processing forms.

  Comments are now colored grey on the Web Weaver text box.

  The box that asked if you wished to create a new document or open an existing one has been removed.  We figured you could make that decision without the help of an extra box.

What's New in version 5.4/Web Weaver 97.1

  The Table wizard has been updated so cell properties are automatically stored and the wizard remembers them when you move from cell to cell.  Also, FONT tags have been added to the Table wizard for assigning Font properties to individual cells.

  The Special character dialog box has changed it's buttons to one single image map.  This requires less resources than the button group in previous versions.

  The Anchor/Bookmark dialog box has been updated to be easier to use.  Now it is used to set destination/target anchors(bookmarks) and the hypertext dialog box is now updated to set source anchors (bookmarks).

  A new tabbed toolbar is in the Web Weaver main window to make it easier to access all of the most common HTML tags without wasting space.

  Rarely used HTML tags can now be shut off by going to the preferences dialog box and setting this option.

  Doubleclicking on an HTML filename in the right side menu bar results in that HTML document being opened in Web Weaver.  Dragging and dropping these files still results in inserting the HTML codes for inline images and links.

  The Embedded object dialog box has been added for inserting multimedia files into your HTML documents.

What's New in version 5.3a/Web Weaver 97

  An additional Frames wizard which has pre-made templates to make Frames easier than ever!!

  FTP and Imagemapper buttons have been removed from the toolbar to make room for more frequently used commands.  Buttons for inserting horizontal rules and a button for adding a second browser for previewing are added to the toolbar!!

  UNDO and Select All have been added to the menus.

  Linking to browsers is now an automatic feature.  This means that you no longer have to save your document and Alt-Tab between Web Weaver and your browser to view it.  You can simply click a button and your browser (IE or Netscape) will appear with the updated page (even without saving it first).

What's New in version 5.3

  A new main menu screen asking whether the user wishes to use Web Weaver, Web Wizard, the Web Weaver HTML tutorial, or view the List of HTML tags in the Web Weaver help file.

  Advanced features were added to the Inline Image dialog box.  These include imagemap declarations and AVI video properties for inserting video clips.

  Print menu item is now functional.  Choosing Print will open the specified application (e.g., Notepad, Write, etc.) in order to print the HTML document from that opened application.

  A "fixed directory" item has been added to the Inline Image box and the Page Properties box to provide a quick way to insert the full path and filename of the image being chosen.  This waythe links to the images will always work regardless of the location of the HTML file which has links to them.

  A DTD DOCTYPE tag has been added to the default startup "new" document to alert browsers that the document is an HTML 3.2 document and that it should be interpreted as such.

  META tags have been added to the "Advanced" section of the Page Properties dialog box.  These allow the HTML document to specify it's description and keywords, and to make the HTML document have the ability to refresh itself or jump to another page after a specified time has expired.

  A Frames wizard called Frame Maker has been added.  Since recent versions of Web Weaver 5.2 the NOFRAMES tag has been added to the output of the Frame Maker.

  When the Preferences dialog box is opened, all existing preferences are displayed in the appropriate text boxes.

  The "working directory" (set in the Preferences box) now works properly when set.  When opening or saving HTML documents the "working directory" is shown by default to provide quick and easy access to the directory which you specified as your "working directory".  If

you access another directory (save to another or open from another) this causes the working directory to change to the current directory for the next time you are saving or opening.

  The Math menu items and the Attributes menu items have been removed.  McWeb software feels that these were too specific as well as unnecessary menu items.  Also, all of the attribute menu items for forms and tables were removed as well.

  New keyboard shortcuts have been added to Web Weaver.  These include

CTRL-T	<TABLE></TABLE>

CTRL-R	<TR></TR>

CTRL-D	<TD></TD>

  The Backgroud/BGcolor menu item has been renamed to Page Properties because it controls more

than just the colors of the Web page.

  The HTML Stripper has been improved to handle carriage returns, Headers <H1>, <CENTER> tags and more to provide you with a more accurate strip.

  The Font format dialog box has been enhanced to graphically display the effects of the different font formats (e.g., the bold item is actually bolded to demonstrate the effect that selection would have on selected text).

  The PNG image format has been added to the image selection dialog boxes.  This format is supported in the HTML 3.2 specification.

  List dialog boxes (bulleted, numbered, etc.) have been revised to provide a more intuitive way to create lists.  One button was removed and the others were programmed to give the list dialog boxes a more step by step approach.

What's New in version 5.2

  A Frame Wizard has been added to Web Weaver making it simple to create Netscape Frames in your Web Pages!!

  The Table Maker Wizard has been improved and expanded so it's easier to make Tables.  The Table Properties and Cell Properties have been separated into two different dialog boxes to make it more intuitive.  Internet Explorer table colors and cell colors have also been added.

  The Background Colors and wallpaper dialog box has been improved, expanded and renamed.  It is now called Page Properties and is better than ever!!

  The Inline Image dialog box has ben improved by separating more advanced HTML codes from the necessary image HTML tags and attributes.

  All Font properties, physical and logical styles are grouped into one Format Character dialog box so it is easier to change the properties of selected text.  You no longer need to pick multiple menu items to create a font style for text.  Just use this one dialog box!!

What's New in version 5.1

  New start-up screens that ask the user whether they wish to start a new document or open an existing one.  If 'New document' is chosen then the dialog box for setting background colors and properties opens for user input.  If 'Existing document' is selected, an 'Open File' dialog box appears for the user to select the file they wish to open.  The user can also set Web Weaver so these start-up dialog boxes do not appear.

  New comprehensive toolbox which includes all the common HTML tags so they are at your fingertips.  Also, there should be no more problems with the toolbox disappearing behind the Web Weaver window or covering menu items.

  When you open the Options/Preferences dialog box the existing settings are shown.  Also, when you change a preference and click "OK" to accept the settings they are automatically updated without having to restart Web Weaver.  Also, if Web Weaver encounters a problem it will ask you if you wish to investigate your settings.

  Internet Explorer tags and Java tags are included in dialog boxes for Marquee, Fonts, Background sound, Applets and applet parameters.  More IE and Netscape tags are supported in the Inline Image dialog box including Runtime video insertion, client side image maps, and an input box for the directory where the inline image will reside is now included.

  When entering Background colors/properties the cursor can now be located anywhere in the

current document, and the codes will be correctly placed inside the <BODY> tag.

  The inline graphics dialog box now has a much improved Align tag preview along with an explanation of what each Align attribute does.  Also, the inline image

dialog box has a more organized look.

  Tooltips for each button on the button bars explain what each button does.

  The Find/Replace function has been improved.

  Larger buttons are used on the button bar for ease of use.

  Tooltips are now available in Web Weaver 5.1.

  A dialog box for the creation of HTML code for client side image maps is now available.

  Your favorite and most commonly used URLs can be placed in the INI file and Web Weaver will allow you to access them easily with pull-down boxes in the Hypertext and Inline Image dialog boxes.

  The location and size of the Web Weaver main window is memorized on exit so when you start Web Weaver up the next time it will be as you left it.

  A Close All menu item has been added to the Window menu.  This allows the user to easily close all the open documents at the click of a button.  If the user has made changes to any of the documents, Web Weaver notifies the user for each modified document and asks if the user wishes to save the changes.

  Clicking on the current time display at the bottom of the Web Weaver main window will result in the time and date being inserted into your document.

What's New in version 5.0a!

  Improved menu layout - Most code is in alphabetical order for easier finding.

  The HTML 3.0 menu item has been removed because it would have made it more confusing to find the HTML tag that you wanted.  All HTML 3.0 tags are included in the Insert menu item.

  HTML tags have been separated into their correct categorical menu headings such as: Physical Style Tags; Logical Style Tags, Paragraph/Text Elements, etc.

  MUCH MUCH MUCH! more HTML code, both HTML 2.0 and 3.0, including Math tags, Attributes, more special characters, etc. have been added to Web Weaver.  Over 100 menu items in all.

  Now when you open a document, Web Weaver maximizes it to cover the whole Web Weaver screen.

  Most dialog boxes now have Help! buttons on them for context sensitive help on that particular item.

  Dialog boxes also have a sleek new look.  No more bold text headings, smaller buttons, leaner, etc.

  Special characters now have input dialog boxes for easier insertion, and include math variables, vowels, and various characters.

  Includes image mapping software Map THIS! and provides a menu item to link to that software.

  Link to FTP Client option on the menu bar.

  Improved HTML Form entry dialog box(FORM MAKER) providing a preview of each type of form input.

  HTML 3.0 Tables are now supported.  TABLE MAKER makes it very easy to insert tables into your HTML document.

  Background and BGColor settings dialog box are now combined and now include tags for

visited link and active link colors.  Also, the text labels(Linked text, Visited text, etc.) for each type of Web text change to the color that you have chosen.  Color boxes adjacent to the labels also display the color you have selected for the respective Web page text color.

  Options and preferences settings dialog box that will update the INI file automatically.

Settings include: Working directory, Image directory, Working Font, Fontsize, Browser path/name, FTP client path/name, and ImageMapper path/name.

  Toolbox settings dialog box that automatically updates the INI file.

  Web Weaver opens with a default template which includes the necessary tags to create a

"grammatically correct" HTML document

  Allows the user to open a user-defined template to start a document.  When choosing Open from the pull-down menu, the template file type (.wwt) has been added to the list to choose from.

  Date & Time menu item, inserts the current date and time into the document.  Also, each new document is time/date stamped with a comment at the top of the document.

  ISMAP tag, FIGure tag, and Alignment preview box are added to the Inline Image dialog box

  An insert button is added to the Inline Image box so the user can insert inline image attributes into the document without having to create an entire Inline Image

tag (e.g., Align=Top)

  Align options in Inline Image box are in a list box format to minimize the size of the dialogbox.

  Attribute menu item added to the Insert menu allowing the user to insert common HTML attributes.

  Built in Tutorial for beginners.

  Web Wizard provides an easy way to create a simple HTML document

  User can now specify the name of the stripped file when stripping HTML tags from a document

  The Web Weaver icon has a transparent background.

  More buttons on the screen for easier access to FTP client, browser, etc.

  The HTML Stripper has had a few bugs fixed in it.  It used to skip some characters, but now it parses all characters.

  More sample images and backgrounds are included for your use.

What's new in version 5.0!

  Multiple Document editing is supported in this version.

  A recent file list of 4 files is listed at the bottom of the File menu item similar to most commercial word processor's recent files list.

  User defined toolbox is included, allowing 5 user defined buttons to be assigned.

  Right click pull-down menu is available which is similar to most word processors including Cut, Copy, Paste, limited Undo, etc.

  Find/Replace capabilities.

  More HTML and Netscape TAG including MailTo, Background Colors, and Background Wallpaper.

  Fonts dialog box is supported for using any system fonts in your text window.

  TAGs for Forms are included in the Form dialog box under the Insert/Form menu item.

  Interactive Menu Lists and Directory Lists are added to the Insert Lists menu item.

  Eventually HTML 3.0 Tables will be supported and also an Options box which will allow the user to change browsers to link to, working fonts, working directories, etc. by automatically changing the INI file.


Alphabetical Listing of HTML Tags

Below is the list of HTML tags which are found in this version of Web Weaver.  HTML 2.0, HTML 3.2 and Netscape extensions are included in this list.

^ ^  -  Superscript  [HTML 3.0 Math]

_ _ -  Subscript  [HTML 3.0 Math}

{ }  -  Box  [HTML 3.0 Math]

<!-- -->  -  Comment

A

<ABBREV></ABBREV>  -  Abbreviation  [HTML 3.0]

<ABOVE>  -  Above  [HTML 3.0 Math]

<ACRONYM></ACRONYM>  -  Acronym  [HTML 3.0]

<ADDRESS></ADDRESS>  -  Address

ALIGN=  -  Alignment

ALINK=  -  Active Link Color  [Netscape Extension]

ALT=  -  Alternate Image Text

<ARG></ARG>  -  Argument  [HTML 3.0]

<ARRAY></ARRAY>  -  Array  [HTML 3.0 Math]

<ATOP> - Atop {HTML 3.0 Math]

<AU></AU>  -  Author [HTML 3.0]

B

<B></B>  -  Bold

BACKGROUND=  -  Background Wallpaper  [Netscape Extension]

<BANNER></BANNER>  -  Banner  [HTML 3.0]

<BASE>  -  Base

<BASEFONT SIZE=>  -  Basefont Size  [Netscape Extension]

<BELOW>  -  Below  [HTML 3.0 Math]

BGCOLOR=  -  Background Color  [Netscape Extension]

<BLINK></BLINK>  -  Blink  [Netscape Extension]

<BLOCKQUOTE></BLOCKQUOTE>  -  Blockquote

<BODY></BODY>  -  Body

BORDER=  -  Image Border  [Netscape Extension]

BORDER=  -  Table Border  [HTML 3.0 Table]

BORDER=  -  Frame Border size

<BOX></BOX>  -  Box  [HTML 3.0 Math]

<BQ></BQ> - Blockquote [HTML 3.0]

<BR>  -  Line Break  [Netscape Extension]

<BT></BT>  -  Bold Upright Font  [HTML 3.0 Math]

<BYLINE></BYLINE>  -  Byline [HTML 3.0]

C

CAPTION - Table Caption [HTML 3.0 Table]

CELLPADDING=  -  Table Cell Padding [HTML 3.0 Table]

CELLSPACING=  -  Table Cell Spacing [HTML 3.0 Table]

<CENTER></CENTER>  -  Center  [Netscape Extension]

CHECKBOX  -  Form Input Type

CHECKED  -  Form attribute

<CHOOSE></CHOOSE> - Choose [HTML 3.0 Math]

<CITE></CITE>  -  Citation

CLEAR=  -  Clear  [Netscape Extension]

CLASS=  -  Class

<CODE></CODE>  -  Code

COLS=  -  Number of Columns in a Form Textarea

COLSPAN=  -  Table Column Span [HTML 3.0 Table]

COMMENT

<CREDIT></CREDIT>  -  Credit  [HTML 3.0]

D

<DD>  -  Descriptive List Text

<DEL></DEL>  -  Deleted Text [HTML 3.0]

<DFN></DFN>  -  Defining Instance(Definition)

DINGBAT=  -  Dingbats [HTML 3.0]

<DIR></DIR>  -  Directory List

<DL></DL>  -  Descriptive List

<DT>  -  Descriptive List Topic

E

<EM></EM>  -  Emphasis

EMBED  -  Embedded Item

F

FIG=  -  Figure  [HTML 3.0]

<FN></FN>  -  Footnote  [HTML 3.0]

<FONTSIZE=></FONT>  -  Font Size  [Netscape Extension]

<FRAME>  -  Frames

FRAMEBORDER=  -  Frames

<FRAMESET>  -  Frames

FRAMESPACING=  -  Frames

H

<H1></H1>  -  Heading 1

<H2></H2>  -  Heading 2

<H3></H3>  -  Heading 3

<H4></H4>  -  Heading 4

<H5></H5>  -  Heading 5

<H6></H6>  -  Heading 6

<HEAD></HEAD>  -  Head

HEIGHT=  -  Image/Object/Table cell Height  [Netscape Extension]

HIDDEN=  -  Form Input Type

<HR>  -  Horizontal Rule

HSPACE=  -  Horizontal Space  [Netscape Extension]

<HTML></HTML>  -  HTML

I

<I></I>  -  Italic

ID  -  ID

IFRAME  -  Inline Floating Frame

IMAGE  -  Form Input Type

IMG=  -  Image

<IMG='  '>  -  Inline Image

<INPUT>  -  Form Input tag

<INS></INS>  -  Inserted Text [HTML 3.0]

<ISINDEX>  -  Isindex

ISMAP  -  Image map

<ITEM> - Array Item [HTML 3.0 Math]

K

<KBD></KBD>  -  Keyboard

L

LANG=  -  Language

<LI>  -  List Item

LINE BREAK<LINK>  -  Link

LINK=  -  Unvisited Link Color  [Netscape Extension]

<LISTING></LISTING>  -  Listing

<LIT></LIT>  -  Literal [HTML 3.0]

M

<MAILTO>  -  Mailto  [Netscape Extension]

<MATH></MATH>  -  Math Equation  [HTML 3.0 Math]

<MAXLENGTH=>  -  Maximum length of text in Form

<MENU></MENU>  -  Interactive Menu

<MULTIPLE>  -  Multiple entries in a Form

N

<NAME=>  -  Name attribute in Forms

<NEXTID>  -  Next ID

<NOBR></NOBR>  -  No Break  [Netscape Extension]

NOSHADE  -  Unshaded Horizontal Rule  [Netscape Extension]

<NOTE></NOTE>  -  Note  [HTML 3.0]

NOWRAP  -  Prevents Word wrap

O

<OL></OL>  -  Numbered/Ordered List

OPTION  -  Form option element within a listbox

<OVER>  -  Over  [HTML 3.0 Math]

P

<P ALIGN=></P>  -  Aligned Paragraph  [HTML 3.0]

<P>  -  Paragraph

<P></P>  -  Paragraph  [HTML 3.0]

PASSWORD  -  Form Input Type

<PERSON></PERSON>  -  Person

<PLAINTEXT>  -  Plaintext

<PRE></PRE>  -  Preformatted Text

Q

<Q></Q>  -  Inline Quote

R

RESET  -  Form Input Type

<ROOT>#<OF></ROOT>  -  Root  [HTML 3.0 Math]

<ROW>  -  Array Row [HTML 3.0 Math]

ROWS=  -  Number of Rows in a Form Textarea

ROWSPAN=  -  Table cell row span [HTML 3.0 Table]

S

<S></S>  -  Strikethrough  [HTML 3.0]

<SAMP></SAMP>  -  Sample

<SELECT></SELECT>  -  Form input type (selection listbox)

SELECTED  -  Initial selection in a Form selection listbox

SIZE=  -  Sizeof Horizontal Rule [Netscape Extension]

SIZE=  -  Size of Form Input

<SQRT></SQRT>  -  Square Root  [HTML 3.0 Math]

SRC=  -  Image source path/filename

<STRONG></STRONG>  -  Strong Emphasis

<SUB></SUB>  -  Subscript  [HTML 3.0]

SUBMIT  -  Form Input Type

<SUP></SUP>  -  Superscript  [HTML 3.0]

T

<T></T>  -  Upright Font  [HTML 3.0 Math]

<TAB>  -  Tab  [HTML 3.0]

<TABLE></TABLE> - Table [HTML 3.0 Table]

TARGET= - Frame Target

<TD> - Table Data [HTML 3.0 Table]

<TEXT></TEXT>  -  Text  [HTML 3.0 Math]

TEXT=  -  Text Color  [Netscape Extension]

TEXT=  -  Form Input Type

TEXTAREA=  -  Form Input Type

<TH> - Table Header [HTML 3.0 Table]

<TITLE></TITLE>  -  Title

<TR> - Table Row [HTML 3.0 Table]

<TT></TT>  -  Typewriter Text

TYPE=  -  Bullet Type (in Bulleted List) Number Type  [Netscape Extension]

TYPE=  -  Number Type (in Numbered/Ordered List)[Netscape Extension]

TYPE=  -  Input Type (in Forms)

U

<U></U>  -  Underline  [HTML 3.0]

<UL></UL>  -  Unordered List

V

VALUE=  -  Initial value of form input

<VAR></VAR>  -  Variable

VLINK=  -  Visited Link Color  [Netscape Extension]

VSPACE=  -  Vertical Space  [Netscape Extension]

W

<WBR>  -  Word Break  [Netscape Extension]

WIDTH=  -  Image/Object/Table cell Width  [Netscape Extension]


Bug Fixes/Improvements in Web Weaver

Bug Fixes/Improvements since Web Weaver 5.0a:

- The toolbox has been fixed!!!  It no longer hides behind the main Web Weaver window.

- Find/Replace has been fixed.  It behaves more like it should.  It now counts the number of replacements that you make if you 'replace all'.

Bug Fixes/Improvements since Web Weaver 5.0:

- OK, OK.  Here's the FINAL story on <P>, <HR>, and <BR>.  I used to put carriage returns in front of or behind these tags because I thought it would be easier to input them until

I started getting frustrated.  From now on, when you enter a <P>, <HR>, or <BR> tag it

will be inserted EXACTLY at the position of your cursor, and your cursor will end up

on the right side of that code.  The exception is <P> which has changed to <P></P> in HTML 3.0.  The cursor will end up between the tags if no text was selected before inserting

the <P> tag OR the cursor will end up to the right of the end tag </P>.  The main thing

is that you won't have to guess where to put your cursor to get these tags into the

correct positions.

- I fixed the Align attribute in the Inline Image dialog box.  It wasn't inserting the Align

attribute into the document.  That's all better now.

-The toolbox no longer disappears behind the Web Weaver screen, and when you close the toolbox and re-open it the toolbox items will still be there.  Also, minimizing Web Weaver now minimizes the toolbox, and maximizing it will restore the toolbox.

- The Form Maker now has the Select and TextArea input types included.  Also, Form Maker now includes a Input Type preview so you can see what each type of Input Type will look like.

- The browsing for image filenames was changed so that only the filename (not the path) is inserted into the text box.  Also, there is a choice of having the lowercase letters changed to all uppercase with the click of a button.

- Visited link and Active link text colors were added to the Background/BGColor dialog box.  Also, in version 5.0 when a user clicked CANCEL in the color selection dialog box the HEX code would be placed in the BGColor text box anyway.  This is now fixed.  Also, only a maximum of six characters can be typed into these BGColor boxes.  This reduces the error if you happen to type more than 6 by accident.

- The Cut and Copy buttons were switched so that they matched industry standard conventions (like Microsoft Word).

- In the hypertext input box, you can now press <ENTER> when typing in the Link box and the HTML code will be placed in the document.  Before you had to type in the Link box and then click OK.

- The Align radio buttons have been switched to a List Box to minimize space.

-  The Save As dialog box used to read 'Insert File' after you inserted a file.  This has been fixed.

- When maximizing a document in version 5.0, the Web Weaver title bar would read: 'Web Weaver 5.0 - [Untitled:1] - Filename.htm'.  This has been fixed so the 'Untitled:1' is no longer there.

- The shortcut key for Enlarge Font has been switched to CTRL-N.  Now the Center tag has the CTRL-E shortcut key.

- In version 5.0, when exiting Web Weaver, the Windows task list reported Web Weaver as still running.  This has been fixed.

Bug Fixes/Improvements since Web Weaver 4.0b:

These fixes improve the functionality of Web Weaver and make it more similar to conventional editors/word processors.

- Along with the multiple document editing comes a File menu more similar to conventional software.  Save As, Save, Close, and Exit all work in the conventional way.  When you have edited a file and choose Exit, Web Weaver asks if you wish to save the file instead of asking "Are you sure you wish to quit?"

- Print is still being worked on even though it works.

- Removed the horizontal scrollbar from the text windows so a hard return will not have to be hit in order for you to get to the next line.  Otherwise you could keep typing and the line of text would keep running off the page.

- Switched the positions of the Cut and Copy buttons to mimic the configuration of Microsoft Word.

- When pressing the <P> button or menu item the insertion of the "<P>" is preceded by a carriage return.  Before, a carriage return came after the "<P>" was inserted.  It is common HTML practice to type "<P>" at the beginning of a new line and then directly following it with the text of the new paragraph.  The change of this button/menu item makes this more intuitive.

- The <HR> insert tag was also changed so that a carriage return precedes AND comes after the "<HR>".  This makes it easy to press the <HR> button when at the end of a sentence, and the cursor will feed to the next line, insert "<HR>" and then feed to the following line.

- Selected text in the editor window is automatically placed in the Anchor box when the Anchor menu item is chosen.

- Graphics menu item is now called Inline Image.

- The Align feature in the Inline Images box is fixed so that double-clicking in the background of the box clears ALL values.  Also, previously both Netscape and normal HTML Align values could simultaneously be chosen when there should actually only be one choice for insertion.  This is fixed so that the Align values can only have one selected choice.

- Netscape Item types in the Numbered List box is fixed so that double-clicking won't cause errors during insertion.  The clearing of the values used to accidentally clear the Start value which would cause an error if you tried to insert.

- The Address tag was placed in the Paragraph/Text Elements and MailTo Tag was added to the Netscape Extensions menu item.

- Browse buttons added to the Inline Images box and Hypertext box.

- The ability to type in the desired input in dialog boxes like Hypertext, Inline Image, Anchors, Lists and hit the <ENTER> key to say "OK" instead of having to type then click on OK to submit the input.


What does Web Weaver Do?
What is Web Weaver?

Web Weaver is a comprehensive, feature-rich HTML text editor for Windows which makes it easy to create Web pages.  Web Weaver is a powerful editor which is ideal for beginners as well as advanced users of HTML.

Here are some features of Web Weaver:

  Frames, Tables and Forms are all supported by Web Weaver.  It includes easy to use wizards for creating these advanced HTML elements.

  HTML 2 and 3.2 tags are supported.

  Easy-to-use toolbars which automate repetitive keyboard input (such as <P>, <BR>)

  Intuitive dialog boxes for the insertion of hypertext, inline images, anchors, lists, etc.

  Context-sensitive help with a great HTML reference covering HTML 2 and 3 specifications.

  Netscape and Internet Explorer HTML Extensions are included.

  Links to a specified browser at the push of a button.  This allows the user to view their document.

  Strip HTML tags from a document by pushing the strip button.  This results in the creation of a text document with HTML tags removed.

  Easily convert existing lists and delimited text(from Excel spreadsheets, etc.) to HTML files.


Web Weaver Tutorial

HTML (HyperText Markup Language) is the programming language used to create Web pages.  It is more of a publishing/formatting language than a programming language, nonetheless it is a fairly simple language to learn.  The basic elements of an HTML document are text and graphic images.  The text can be normal text(static), or it can be hypertext(dynamic) which allows a user to click on that particular text and be whisked away to another Web page.

Graphic images called 'Inline Images' are pictures that are seen on a Web page.  These, too, can be 'linked' to another Web page or picture.  Combining text, hypertext, inline images, and linked images, you can create your own Web page in minutes!  See?  It's as simple as that!!!

The millions of existing Web pages are all linked together by one thing, the World Wide Web.  The Web allows users to access Web pages from all over the world to access any information that is possibly available.  Enough about the Web, though.  You must already know everything about it, otherwise you wouldn't be reading this.  The basis behind HTML is the use of tags (code) which surround text and describe to the Web browser how the text and images should appear to the user.  First we will discuss the format of an HTML tag and see how it is used.

The Format of an  HTML Tag

HTML tags consist of less than and greater than signs ( < and >) surrounding the main HTML code.  For example, <HTML CODE>.  The code can be uppercase, lowercase or both.  It is not case sensitive, however I like to put all code in capital letters to make it easier to see when editing HTML documents.

Many tags have opening tags and closing tags so that the Web browser understands where to begin and where to end a certain property, such as font, text type, font size, or color.  For example, the HTML tag which makes text appear bold to the user is simply the letter B enclosed in the HTML brackets, <B>.  If the author of the HTML document put the opening bold tag and didn't put an closing bold tag, how would the browser know when to stop making the text bold??  For example, if you wanted to make the word 'bird' appear bold on the browser's screen you would type the code:

<B> bird </B>

Note that the closing tag has a slash inside the brackets, and before the HTML code, B.  This slash denotes a closing tag, and tells the browser that any text after the bold closing tag </B> will NOT be bolded.  So if we were to include the word 'bird' in a sentence and only wanted 'bird' to be bolded, we would type this:

One of my favorite animals is the <B>bird</B> because it can fly.

This is how it will appear:

One of my favorite animals is the bird because it can fly.

If you wanted the entire sentence to be bolded, then the HTML bold tags would surround the entire sentence as shown below:

<B>One of my favorite animals is the bird because it can fly.</B>

Your Web browser would display the sentence like this:

One of my favorite animals is the bird because it can fly.

Note that not all HTML tags have closing tags.

Where do I start?

Beginning an HTML document is not a difficult thing.  Once you get the hang of it, you'll be writing ten Web pages a day.  It is important to have good form when you are writing Web pages for several reasons.  One is so you can understand what you wrote in your document when you try to edit it a while after you first wrote it.  Another reason to have good form is to ensure that the Web browser will understand what you wrote and display the Web page as you intended.

1.	Let's begin at the beginning.  Some HTML tags are not required for your Web page to work properly, but it is good practice to include them in your document.  Web Weaver starts new documents with these tags so you don't have to worry about putting them in.

The first and foremost tag is the <HTML></HTML> tag.  This opening and closing tag surround the entire HTML document, and they tell the Web browser that 'this document is an HTML document'.  This tells the browser that it is to be read as a Web page.  All other text and tags are surrounded by the <HTML></HTML> tags.  Anything outside of the <HTML></HTML> tags are usually ignored by the browser.

2.	Next is the <HEAD></HEAD> tag.  This encloses the head of the HTML document.  The head of the document contains information about the HTML document, but that information is never seen by the user on the other end reading the Web page.  This information is used by the browser to index or keep track of the document.  One of the main HTML tags that goes inside the <HEAD></HEAD> tag is the <TITLE></TITLE> tag.  This tells the browser the title of the Web page so it can refer to the page as 'something'.  The title is usually seen on the browser's titlebar when it has accessed the page.  It is also the title that is used as the bookmark when you save a bookmark to your favorite Web pages in your browser.

3.	The next important tag which follows the <HEAD></HEAD> tag is the <BODY></BODY> tag.  This tag encloses the body of the document (all the text and HTML tags).  The bulk of your HTML code and text is located between the <BODY></BODY> tags.  Whatever is contained within the <BODY></BODY> tags is interpreted by the browser and is shown on-screen as part of the Web page.  Any text or tags outside of the body tags are meant to be interpreted by a browser in order to gain information about your Web document.

Here is the order in which these main HTML tags should be placed:

<HTML>

<HEAD>

<TITLE> This is the Title of the Web Page </TITLE>

</HEAD>

<BODY>

All the text of the document

</BODY>

</HTML>

See Web Weaver's Beginner Wizard for additional explanation of these tags.

Web Page Text

Usually, the main element of a Web page is the text.  The text allows users to gain information about whatever the Web page discusses.  We all know that typing text is easy, but formatting it and laying it out is the difficult task.  Well, you could just have all of your text be the same size, same font, same look, same feel, same boring words typed over and over OR you could use some of the HTML physical style and paragraph tags to really spruce things up.  A Web page with a boring layout will attract no one, but a nicely formatted page will keep them coming back for more.

First, we will talk about text size.  The HTML 2.0 specification calls out different heading sizes which are used to change on-screen text size.  These headings have basic opening and closing tags in the form  <H1></H1> to <H6></H6> (H1 being the largest font size).  For example, if you wanted the on-screen title of your page to be 'Dogs and Cats: Can They Be Friends?', you may want to have this text be larger than the normal text so it stands out as the title of the page.  To do this type:

<H1>Dogs and Cats: Can They Be Friends?</H1>

This will appear like:

Dogs and Cats: Can They Be Friends?

These headings are useful, but unfortunately they can really only be used on one line at a time.  In other words, if I wanted 'Dogs' to be one size and 'Cats' to be another, I couldn't use HTML 2.0 heading tags.  As soon as I specified a heading for a word/phrase, the next word following the heading closing tag </H1> would be placed on the next line.  Any text size change would result in one text size per line.  Another option would be to use Netscape extensions to HTML.  These additional HTML tags are understood by mostly Netscape browsers and only a selected few other browsers.  This is one drawback to using them.  If you format your Web page to look good on Netscape by using Netscape extensions, it may look terrible on another browser.  Regardless, the extension <FONT SIZE=#></FONT>, where # is a number from 1 to 7 (1 being small size, 7 being large), can be used to change the text size of each letter in a word, if desired.  For example, if you wanted the word 'bird' to have a large 'b' and a somewhat smaller 'd', you could type:

<FONT SIZE=7>b</FONT>ir<FONT SIZE=5>d</FONT>

would appear like:

bird

You may wish the appearance of the text to be different, also.  There are bold (as discussed in the beginning of this tutorial) and italic tags so you can highlight or appropriately format your text as you need to.  These tags are simple tags and follow the same format as the tags discussed above.  They have opening and closing tags and surround the text that they enhance.  For example, to make a word bold, simply follow this syntax:

<B>word</B>

and it will appear like:  word

To include it in a sentence, follow this example:

This <B>word</B> will appear bold in this sentence.

and you will see:

This word will appear bold in this sentence.

Other physical style tags are available in the Insert_Physical Style Tags menu in Web Weaver.

Logical style tags are used to describe text and tell the browser how the text is to be used, not how it is displayed.  The browser will determine how it will display each of the logical styles.  Things such as abbreviations, acronyms, computer code, author names, variables, deleted text, and footnotes are examples of logical styles.  It is a consistent way to define what your text really is.  If you surround a sample of computer code with the <CODE></CODE> tags, depending on the browser, it may display the text as an equal spaced font (such as Courier), but it will always be considered to be computer code by the browser, and the user will recognize it as code by looking at it on-screen.  Another example is deleted text.  If a legal document is on the Web and the author wants a certain selection of it to be known as deleted text, then he/she could surround that text with the <DEL></DEL> tags and the browser may choose to show it like this:

Deleted text

The important thing is that the text is not only struck through, but it has been defined as deleted text so the user knows the reason why it has been struck through.

Paragraph and Text Elements

There are several paragraph elements that can add to your Web page for a cleaner format.  One of the main elements is the horizontal rule.  This is simply a line which spans from the left side of the screen to the right.  It serves the purpose of separating one thing from another on the page.  It looks great under the title of your Web page by separating the main text from the big lettered heading, as shown below:

Dogs and Cats

----------------------------------------------------------------------------------------------------------

Dogs and cats don't always get along, but there are examples of them being very friendly to each other, and often being best friends.

The tag for a horizontal rule is simply <HR> (with no closing tag).  It isn't associated with any text.  In other words, it stands alone.  Horizontal rules prevent the user's eyes from getting lost in all the text.

Another important paragraph tag is in fact the Paragraph tag <P></P>.  The current HTML 2.0 specification requires only the opening tag <P>, but HTML 3.0 will include both opening and closing tags because alignment attributes will be included with this tag.  These will allow you to align/justify specified paragraphs to the right, center or left.  The paragraph tags <P></P> define the beginning and end of a paragraph.  When the browser sees the <P> tag it starts the following text on a new line.  The following code shows this:

This is the last sentence in paragraph 1.<P>This is the first sentence in paragraph 2.</P>

will look like this:

This is the last sentence in paragraph 1.

This is the first sentence in paragraph 2.

Another important paragraph element is the Line Break <BR>.  The line break has only the opening tag and it isn't associated with any text much like the horizontal rule tag <HR>.  The line break will break a line of text wherever the <BR> tag was positioned.  The text following the <BR> tag will be forced onto the next line.  For example:

I want this sentence to be broken in the<BR>middle so it won't go all the way to the right margin.

Displayed as:

I want this sentence to be broken in the

middle so it won't go all the way to the right margin.

Hypertext: Linking Web pages together

A web page with a bunch of text on it isn't that exciting to look at.  Suppose you had ten chapters of a book on one Web page.  Who would scroll down that one Web page to find chapter 10??  It could take a long time to find it, and people on the Internet don't have time to look for things (especially when they're frustrated).  This is where hypertext comes into play.  Hypertext is regular text that is highlighted in a different color to tell the user that it can be clicked on with the mouse cursor.  Where it takes you nobody knows!  A 'hyperlink' can take you to another Web page, Web site, a picture, sound, or movie clip.  This is the dynamic part of the Web.  No one would be as excited if there weren't hyperlinks linking us to different things.

So how does hypertext help us with the 10 chapters of the book?  Well, you can set up a table of contents and have every chapter title be hypertext.  If the user wants to go directly to chapter 10 without looking for it, he/she can just click on 'Chapter 10' in the table of contents and chapter 10 will pop up on their screen.

Hypertext also helps when you're putting together a personal page for yourself and you have links to all of your favorite Web sites.  You don't have to remember what the names of the Web sites are, you just have to click on them.  By the way, Web page addresses like http://www.website.com/ are called Uniform Resource Locators (URLs).  Below is the format of a hypertext link:

<A HREF="http://www.website.com/index.html"> your hypertext here </A>

Let's start at the beginning of this tag.

- The 'A' stands for anchor since this tag is really an anchor tag.

- HREF='' contains the URL, anchor name or file name that the hypertext is linked to.

- The phrase 'your hypertext here' is the location where you type the text which you wish to be highlighted so users can click on it to be linked to the new location.

The only thing that the user will see on the screen is the hypertext.  The other code within the < > brackets is not seen.  The line of code is then closed with the </A> tag.

Let's look at an example.  If you wanted the words 'Web Weaver' to be hypertext in your document, and you wanted the user to be linked to the Web Weaver home page when they clicked on the words 'Web Weaver' then you would input this code:

My favorite HTML editor is <A HREF="http://www.mcwebsoftware.com">Web Weaver</A> because it's really easy to use!

This would appear like this to the user:

My favorite HTML editor is Web Weaver because it's really easy to use!

and they could click on 'Web Weaver' and be sent to the Web Weaver home page.

It's that easy!

Inline Images

Without pictures and graphics, Web pages would be pretty boring.  That's why it's important to have just the right amount of graphics in your Web page.  Having too many graphics will make your Web page large in size, and it will take much longer to download.  People who are browsing your page may become frustrated waiting for it to download and leave your page before it has even finished downloading.  It's important to include just the right amount of images in your HTML document.

The main graphic formats that are acceptable to Web pages and browsers are Joint Photographic Experts Group(JPEG), and GIF formats.

GIF images are widely used and are the best format to use when your images contain few colors (non-photographic images).

JPEG images are advantageous to use because they can compress to a fraction of the size of a GIF image without losing too much quality.  They are best used for images that require many colors to look good (scanned photographs, etc.).  This is important because if you can have your images be a tenth of the size they currently are, then users can download your page about ten times as fast.

Inserting inline images into your HTML document is quite easy.  There are many attributes ('extras') that can be included in the HTML code which alter the layout of the image, but they are not necessary for simply plopping a picture onto your page.  The code is as follows:

<IMG SRC="picture.gif">

Let's dissect this code as we have done before.  Of course, we begin with the less than bracket to tell the browser that the following text is HTML code to  interpret.

- The IMG tag tells the browser that an IMAGE is being inserted into the document at this point.

- The browser needs to know the name of the image in order to show it, so the SRC tag specifies the SOURCE of the image (the image filename).  The image filename happens to be 'picture.gif' located in between the quotation marks.

- The inline image tag is then closed with the greater than bracket.

If you wish to see how the image attributes work, just consult the help file and they are defined there.

Linked Inline Images

Linked inline images are much like hypertext.  They are shown on the screen as the specified image with a blue border around it (unless of course, you want to hide the border).  The mouse cursor also changes into a hand when it is dragged across it.  The HTML code for a linked inline image is just a combination of the image tag and the anchor tag discussed above.  Below is the example code for a linked inline image.

<A HREF="http://www.website.com/index.html"><IMG SRC="picture.gif"></A>

- The linked inline image tag begins with the anchor tag <A,

- the site that the image links to is specified by the HREF tag.  The linked site is in quotes 'http://www.website.com/index.html'.

- The greater than bracket then closes that tag, and this tells the browser that the next item or text is the highlighted linked item or hypertext.  In this case, the linked item is the image 'picture.gif'.

- Lastly, the closing anchor tag </A> finishes up the code, and informs the browser that anything coming after the closing anchor tag is not to be linked.

Well, you've graduated!!  Hopefully this gave you a good idea of what HTML is and how to use it.  HTML is not a hard language to learn, and it can be a lot of fun.  All it takes is a little practice.


How to use Web Weaver

Welcome to the world of Web Weaver!

The World Wide Web and Web Pages

The World Wide Web (WWW or "the Web") has taken off at a frantic pace.  People are using it to convey information about anything to anyone who may be interested in it.  Products, services, interests, and every type of information can be found on the Web.  The great thing about the Web is people can access this information from all over the world.

The Web is made up of millions of "Web sites" and billions of "Web pages".  Web sites are the collections of Web pages, and the pages are what we see and read when we "surf" the Web.  For example, the Microsoft Web site contains thousands of Web pages which give information regarding Microsoft's products and services.  Web pages are fun to make, and Web Weaver makes it a lot easier to create them!

Web Software

The software application that we use to view/read/interact with Web pages is called a browser.  Two examples of browsers are Netscape Navigator and Microsoft's Internet Explorer.

The software application that we use to create/write Web pages is called an HTML editor or a Web authoring tool.  Web Weaver is an example of an HTML editor.  It has many built-in functions which automate the creation of Web pages.

HTML: The Web Programming Language

Web browsers read Web pages and convert the code inside the page so that we humans only see a nicely formatted page in the browser's window.  What we don't see is the HTML code and document text that makes up the Web page.  What is HTML, you ask?  Well, it's a text formatting language which defines different text styles and page layouts for Web pages.  Because it is text-based it doesn't take long to download these files (Web pages) over a slow Internet.

What is an HTML tag?

An HTML tag is the "code" which controls the formatting of the Web page (text styles and page layout).  It is invisible when viewed in a Web browser.  It only modifies the text and tells the browser what the text and page should look like.

HTML tags consist of less-than and greater-than signs ( < and >) surrounding the main HTML tag text.  For example, <HTML TAG>.  The tag can be uppercase, lowercase or both.  It is not case sensitive, however I like to put all code in capital letters to make it easier to see when editing HTML documents.

Many tags have opening tags and closing tags so that the Web browser understands where to begin and where to end a certain property, such as font, text type, font size, color.  For example, the HTML tag which makes text appear bold to the user is simply the letter B enclosed in the HTML brackets, <>.  If the author of the HTML document puts the opening bold tag and doesn't put a closing bold tag, how would the browser know when to stop making the text bold??  For example, if you wanted to make the word 'bird' appear bold on the browser's screen you would type the code:

<B> bird </B>

Note that the closing tag has a slash inside the brackets, and before the HTML code, B.  This slash denotes an closing tag, and tells the browser that any text after the bold closing tag </B> will NOT be bolded.  So if we were to include the word 'bird' in a sentence and only wanted 'bird' to be bolded, then we would type this:

One of my favorite animals is the <B>bird</B> because it can fly.

The Web Weaver Interface

Web Weaver has an easy-to-use interface which consists of toolbars, pull-down menus, and a text window.  Also, there is a side menu with a file/directory list in the Windows 95 version.  The toolbars provide a quick way of entering commonly used HTML tags, accessing common editor functions (like Open, Save, and Print), and for starting Web Weaver wizards.  The pull-down menus are for accessing commands and for inserting HTML tags.  The text window is where you type your document.  These elements are shown in the picture below.

The Pull-down menus

The pull-down menus contain many helpful commands.  These commands are broken down into suitable categories.  These categories and the nature of the menu items are explained below:

File - Menu items control file maintenance such as New File, Open, Save, Print and Exit.

Edit - Menu items for simple file editing procedures like Cut, Copy, Paste, Find, and Replace.

Insert HTML - Menu items for inputting HTML tags into your document.

Format - This menu item controls the format of text in your document.  Change text properties (Bold, Italic, Color, etc.) using this menu item.

View - These menu items control the "look and feel" of Web Weaver itself.  Preference settings are found here.

HTML Extensions - Menu items for inputting Netscape and Internet Explorer HTML tags.

Functions - Menu items for accessing special Web Weaver functions such as the HTML Stripper and Linking to a browser.

Window - Menu items for switching between document windows.

Help - Menu items for accessing the help file, tutorials, and other info about Web Weaver.

The Layout of a New Web Weaver HTML Document

Beginning an HTML document is not a difficult thing.  Once you get the hang of it, you'll be writing ten Web pages a day.  It is important to have good form when you are writing Web pages for several reasons.  One is so you can understand what you wrote in your document when you try to edit it a while after you first wrote it.  Another reason to have good form is to ensure that the Web browser will understand what you wrote and display the Web page as you intended.

1.	Let's begin at the beginning.  Some HTML tags are not required for your Web page to work properly, but it is good practice to include them in your document.  Web Weaver starts new documents with these tags so you don't have to worry about putting them in.

The first and foremost tag are the <HTML></HTML> tags.  This opening and closing tag surround the entire HTML document, and they tell the Web browser that 'this document is an HTML document'.  This tells the browser that it is to be read as a Web page.  All other text and tags are surrounded by the <HTML></HTML> tags.  Anything outside of the <HTML></HTML> tags is usually ignored by the browser.

2.	Next is the <HEAD></HEAD> pair of tags.  These enclose the head of the HTML document.  The head of the document contains information about the HTML document, but that information is never seen by the user on the receiving end reading the Web page.  This information is used by the browser to index or keep track of the document.  One of the main HTML tags that goes inside the <HEAD></HEAD> tag is the <TITLE></TITLE> tag pair.  This tells the browser the title of the Web page so it can refer to the page as 'something'.  The title is usually seen on the browser's titlebar when it has accessed the page.  It is also the title that is used as the bookmark when you save a bookmark to your favorite Web pages in your browser.

3.	The next important tag which follows the <HEAD></HEAD> tags is the <BODY></BODY> tag pair.  These tags enclose the body of the document (all the text and other HTML tags).  The bulk of your HTML code and text is located between the <BODY></BODY> tags.  Whatever is contained within the <BODY></BODY> tags will be interpreted by the browser and is shown on-screen as part of the Web page.  Any text or tags outside of the body tags is meant to be interpreted by a browser in order to gain information about your Web document.

Here is the order in which these main HTML tags should be placed:

<HTML>

<HEAD>

<TITLE> This is the Title of the Web Page </TITLE>

</HEAD>

<BODY>

All the text of the document

</BODY>

</HTML>

Typing Text Into Web Weaver

Typing text in Web Weaver is easy!  In Web Weaver's text window, place the text cursor in the location where you want to begin typing.  You can either click in the text window using your mouse or move the text cursor using the arrow keys on your keyboard.  Now start typing!  Remember, most text should be typed between the opening and closing <BODY> tags in an HTML document.

While you type your text into the HTML document you can add some HTML formatting tags to define your text styles and sizes.  The most common styles are bold, italic, and underline.  These styles enhance the physical appearance of the text.  To make a word appear in boldface you can perform this procedure in two manners:

1.	Type the word into the text window first, then apply the style to it, or

2.	Insert the style and then type the word.

Let's try the first one.  Type the word "bird" into the text window.  Now select the word with the cursor by holding the SHIFT key down and using the arrow keys to highlight the word.  Now apply the bold tag to the highlighted text by either

clicking the bold (B) button in the toolbar,

selecting the bold menu item (under the Insert HTML/Physical Styles menu), or

using the shortcut keys Ctrl-B (hold down the Ctrl key and push the letter B).

Be sure to learn all the shortcut keys (found in the Help file) because they will save you a lot of time!

Now let's try the second method.  Insert the bold tag into the text window by either

clicking the bold (B) button in the toolbar,

selecting the bold menu item (under the Insert HTML/Physical Styles menu), or

using the shortcut keys Ctrl-B (hold down the Ctrl key and push the letter B).

You will notice that the HTML tags are inserted and the text cursor is automatically positioned between the tags so you can conveniently start typing text that you want to be formatted with the bold tag.  Now type the word "bird".

Use the heading tags to change the size of the text in your Web page (HTML document).  These HTML tags range from sizes 1 through 6 (1 being the largest).  The tag appears like this:

<H1> text </H1>

Using the instructions above, format different text to have different heading sizes.

How to Insert Hypertext

What is hypertext?  Hypertext is normal text that is underlined and highlighted in a Web page.  This hypertext is linked to another Web page, file, or image so that when a user clicks on that particular text with the mouse pointer, the browser loads the Web page that the hypertext is linked to.

Inserting hypertext in Web Weaver is VERY simple.  This process can be started one of two ways:

  Select existing text that you wish to make into hypertext, or

  Place the cursor in the location where you want to insert new hypertext.

Let's try starting from scratch!  Our example is going to have the word "dog" be hypertext which is linked to another Web page named "canine.html."  When a user viewing your Web page clicks on the highlighted hypertext "dog", the new Web page canine.html will load into the browser and be displayed.  Now here's how to do it!

1. Place your cursor in the location where you want to insert the hypertext.

2. Now select the 'Insert HTML' pull-down menu and choose the 'Hypertext' menu item (or click on the hypertext toolbar button [image]).  This will open the 'Insert Hypertext' dialog box shown below.

3. In the input textbox labeled "Enter text to be hyperlinked below:", type the text you wish to be hyperlink text in your HTML document.  For our example, this would be the word "dog."

4. In the next input textbox labeled "Enter URL, Anchor, Sound File, or external image to link to:" type the name (URL) of the Web page to link to (canine.html, in our example).

5. Finally, click the OK button and the HTML code for a hyperlink is inserted into your Web document.

You could also start this process by selecting existing text in you HTML document and then follow steps 2 through 5 to insert the hypertext.

The HTML code should look something like this:

<A HREF="canine.html">dog</A>

How to Insert an Image(Graphic) into an HTML document

Inserting an image in Web Weaver is also VERY simple.

Our example is going to involve inserting an image file named pumpkin.gif into your Web document.  Let's try it!

1. Place your cursor in the location where you want to insert the image.

2. Now select the 'Insert HTML' pull-down menu and choose the 'Inline Image' menu item (or click on the inline image toolbar button [image]).  This will open the 'Insert Inline Image' dialog box shown below.

3. You will see the first input text box labeled "Enter filename of inline image:"  This is the only required input textbox on this dialog box.  The others are all optional attributes, so we won't discuss these at this moment.  In the input box labeled "Enter filename of inline image:", type the filename of the image you wish to be in your HTML document.  For our example, this would be the filename "pumpkin.gif."

Instead of typing the name of your image into this box you can also 'browse' for it by clicking on the button next to the input textbox.  This will open another dialog box which allows you to search for your image.  When you find the image, click OK and the image filename will be inserted into the input textbox.

Caution:  Make sure that your image resides in the same directory/folder as the HTML document that you are creating.  Otherwise the browser will not be able to find the image when it opens the HTML document.  If your image does not reside in the same directory/folder as your HTML document, then you can specify the image directory by typing it into the second input textbox on the 'Insert Inline Image' dialog box or by clicking the 'Fixed directory' checkbox next to the filename input textbox.

4. If you wish to link the image to another Web page (i.e., make a hyperlink), click the "Link Inline Image to URL…" checkbox.  In the input box type the name (URL) of the Web page to link to (october.html, in this example).  If a user clicks on a linked image, their browser will go to another Web page (or image file).

5. Finally, click the OK button and the HTML code for an inline image is inserted into your Web document.

In the Windows 95 version of Web Weaver you can easily insert an image by finding it in the side menu file list of the Web Weaver main screen, then either drag and drop the image name into the document or double-click the image name.

The HTML code should look something like this in your document:

<IMG SRC="pumpkin.gif">

or if it's hyperlinked:

<A HREF="october.html"> <IMG SRC="pumpkin.gif"></A>

How to Set Page Properties of an HTML document

Let's jazz up your Web page a little.  Right now it's pretty boring because it has a gray background.  We have a few options, though. What we want to do is put a background color or image on your Web page to make it more presentable and appealing.  Here's how:

1. In the 'Insert HTML' pull-down menu choose the 'Page Properties' menu item (or click the Page Properties button on the toolbar [image]).  You will see the following dialog box:

2. First, we should set the title of your page.  This is an important part of your Web page because it acts as the Web page's name.  In the input textbox labeled 'Enter the Title of your Web page:', type the title you wish your Web page to have.

3. Now we want to set the background color of your Web page to make it a little less boring.  Under the text label "Background Color:" there are two boxes.  Click the gray box on the right and a 'Select Color' dialog box will appear.  With your mouse select one of the preset colors or create your own custom user-defined colors.

4. After you have selected a color in the 'Select Color' dialog box click the OK button and the hexadecimal code for that color will be input into the Background color text box.  Also, the background of the Page Properties dialog box will change to the color that you have chosen to give you an idea of what the color will look like.

When selecting other colors for your page (such as text color, link color, etc.) in the Page Properties dialog box, their corresponding text labels will change to your selected colors so you can see if the different colors you have chosen work well together.  Some colors like dark red text and a dark blue background don't work well together because a user can't easily read the page.  There isn't enough contrast between these two colors.

The HTML code which is inserted will look like this:

<BODY BGCOLOR="FFFFFF">

Background Images

If you would rather have a background image instead of a background color then follow these instructions.

Here's a tip:  Background images are usually small images that repeat (or tile) all over the background of your Web page, so it might not look right if you use any old image for your background.  Background images are usually seamless, meaning that you can't see where the image repeats itself.  This creates a background that looks like one large image or pattern.  Choose your background images wisely!

1. Open the Page Properties dialog box if it isn't opened already.

2. In the input box labeled "Enter graphic filename for background:", type the filename of the image you wish to be your Web page background image.  For our example, this is the filename "pattern.gif."

 Instead of typing the name of your image into this box you can also 'browse' for it by clicking on the button next to the input textbox.  This will open another dialog box which allows you to search for your image.  When you find the image, click OK and the image filename will be inserted into the input textbox.

 Make sure that your image resides in the same directory/folder as the HTML document that you are creating.  Otherwise the browser will not be able to find the image when it opens the HTML document.  If your image does not reside in the same directory/folder as your HTML document, then you can specify the image directory by typing it into the second input textbox on the 'Insert Inline Image' dialog box or by clicking the 'Fixed directory' checkbox next to the filename input textbox.

The HTML code that is inserted in your document is:

<BODY BACKGROUND="pattern.gif">

and the browser will display this Web page as shown:


Helpful Web Sites

Below is a list of helpful Web sites which provide manuals on HTML authoring, advanced authoring, and sites which provide extras such as backgrounds, horizontal rules, etc.

Introduction to HTML Documentation:

http://www.utirc.utoronto.ca/HTMLdocs/NewHTML/intro.html

Information on creating Web Sites:

http://home.mcom.com/assist/net_sites/index.html

Information on creating High Impact Documents:

http://home.mcom.com/assist/net_sites/impact_docs/index.html

HTML Quick Reference Guide:

http://www.ucc.ie/~pflynn/books/htmlcard.html

The WWW Consortium (straight from the horse's mouth):

http://www.w3.org/

Netscape Tables:

http://home.mcom.com/assist/net_sites/tables.html

Fill-Out Forms in HTML:

http://utirc.utoronto.ca/HTMLdocs/NewHTML/forms.html

Common Gateway Interface: Forms:

http://hoohoo.ncsa.uiuc.edu/docs/cgi/forms.html

Guide to Fill-Out Forms:

http://www.ncsa.uiuc.edu/SDG/Software/Mosaic/Docs/fill-out-forms/overview.html

THE Netscape Frames Tutorial:

http://www.newbie.net/frames/index.html


Shortcut Keys

Below is a list of shortcut keystrokes you can use to make programming HTML much easier in Web Weaver:

F1	Context Sensitive Help

Shift-F1	Heading 1

Shift-F2	Heading 2

Shift-F3	Heading 3

Shift-F4	Heading 4

Shift-F5	Heading 5

Shift-F6	Heading 6

F2	Colorize HTML tags (Web Weaver 97 only)

F3	Find Again

F4	Opens Browser #1 to view document

F5	Opens Browser #2 to view document

F6	HTML Stripper

F7	Image Mapping Software

F8	FTP Client

Cntrl-B	Bold

Cntrl-I	Italic

Cntrl-U	Underline

Cntrl-F1	Subscript

Shift-Cntrl-F1	Superscript

Cntrl-E	Center tag

Cntrl-K	Line Break tag

Cntrl-L	List item tag

Cntrl-H	Horizontal Rule

Cntrl-O	File Open

Cntrl-P	Paragraph

Cntrl-N	Inserts a non-breaking space character (&nbsp;)

Cntrl-T	Inserts <TABLE></TABLE> tags

Cntrl-R	Inserts <TR></TR> tags

Cntrl-D	Inserts <TD></TD> tags

Cntrl-C	Copy

Cntrl-X	Cut

Cntrl-V	Paste


Troubleshooting

Below are some problems that you might run into...

Why doesn't Web Weaver print documents?

There have been problems with the code when trying to program Web Weaver to print.  As a quick fix, we've allowed the user to assign another editor such as Windows Notepad, Write or WordPad to print the HTML documents.  At some point in the future printing is expected to be fixed, but it is not a priority.  We invest time in programming other features into Web Weaver to make it a more powerful HTML editor.  Printing can be performed from any other generic editor.

Why doesn't Link to Browser work?

Make sure the Browser path and filename is specified correctly in the Preferences section (under View/Preferences in the pull-down menus).  You can select the appropriate Web browser by clicking on the Browse button next to the Browser #1 or Browser #2 input text box.  A file/directory dialog box will appear and you will need to search for your Web browser's executable file (iexplore.exe for Internet Explorer and netscape.exe for Netscape Navigator).  When you find the correct executable file in the Netscape or Internet Explorer directory then you can select it and click 'OK'.  The path and filename should be entered into the text input box automatically.  In Windows 95, Web Weaver may not recognize the path/filename of your browser if the path consists of a large number of characters.  Try to keep the paths short in length.

Why does Web Weaver open a new browser window each time I press Link to Browser?

This only occurs if you are using a browser other than Microsoft's Internet Explorer or Netscape's Navigator.

Why can't Web Weaver find my WEBWEV.INI file?? (Web Weaver for Windows 3.1x only)

The WEBWEV.INI file could be in a different directory than the Web Weaver program file.  In order for the program to find the INI file, they must be in the same directory AND they cannot be in the root directory together.

Why aren't the toolbox button settings I specified in the INI file being loaded into the toolbox??

Well, you must be doing something wrong.  That's the only explanation we can think of.  How's that for technical support??

Just kidding!  If you mimicked the example INI file that is included with the program and the INI file is in the same directory as the Web Weaver program, then everything should work.

Although, there might also be a problem if you ,for example, specify settings for button 4 and button 6, but not for button 5.  Web Weaver will most likely only show button 4 on the toolbox.  Try not to skip button numbers if you are specifying less than 5 buttons.

You can set the buttons automatically by choosing Options/Toolbox settings from the main pull-down menu.

If you have any questions feel free to email McWeb Software at info@mcwebsoftware.com


Pull-Down Menu Commands

   File Menu

   Edit Menu

   Insert HTML Menu

   Format Menu

   View Menu

   HTML Extensions Menu

   Functions Menu

   Window Menu

   Help Menu


File Menu

New

This opens a new document window for editing your HTML document.  The new document window can be a blank sheet with no text on it OR you can start it with the Web Weaver Starter template.  This starter template inserts the HTML tags which begin every HTML document so you don't have to type them in every time you create a new Web page.  The new document button gives you the starter template.

Open

This calls the Open File dialog box and allows you to open an already existing text, HTML document, or a user-defined template.

Insert File

This inserts a specified text/HTML file into the current document starting at the location of the cursor.

Save

This saves the current document with its current name.

Save As

This allows you to save the current document as a file with the same or a different name.

Import/Export - Open and Save As UNIX format

This allows you to open a document which has been saved in the UNIX format and save the current document as an HTML file in UNIX format (without carriage returns and line feeds).

Close

This closes the current document, and it will prompt you to save the document if any changes have been made to it.

Print

This prints the current document.

Recent File List

The recent file list shows the 4 files that were most recently opened in Web Weaver.  This makes it easy to open a document that you frequently work on.

Exit

This exits the program, and it will prompt you to save any document if any changes have been made.


Template
A user defined template is a text file containing text and HTML tags that commonly appears in a user's HTML documents.  The file extension of a template file is (.wwt), which stands for Web Weaver Template.


Edit Menu

Undo

This un-does the last action you performed on the active document.

Cut  -  Shortcut Key:  CTRL-X

This cuts the selected text from the document and puts it in the Windows clipboard.

Copy  -  Shortcut Key:  CTRL-C

This copies the selected text from the document and puts it in the Windows clipboard.

Paste  -  Shortcut Key:  CTRL-V

This inserts the contents of the Windows clipboard into the Web Weaver text area at the position of the cursor.

Select All  -  Shortcut Key:  CTRL-A

This selects all text in the current active document.

Find

This opens the Find dialog box which aids in locating specified text.

Find Next  -  Shortcut Key:  F3

Selecting this from the menu or pressing F3 will result in locating the next instance of the text string that was previously specified in the Find dialog box.

Replace

This opens the Replace dialog box which allows the user to find a specified text string in the document and replace it with another specified text string.

Global Replace

This opens the Global Replace dialog box which allows the user to find a specified text string in multiple documents and replace it with another specified text string.


Uploading Web pages to the Web
How to Upload your Web page to the Web

OK, so you've created your Web page and it looks great, but now you want to put it on the Web for everyone to see!  Well, there are a few things you need in order to do this:

1) You need an Internet Service provider (ISP) or online service (like AOL) that provides you with some Web disk space on their Web server.

2) You may need an FTP client program (WS_FTP is a program that we recommend) for uploading (transferring files from your computer to the Web disk space on your ISP's Web server) the Web page and images to your Web disk space.  You probably don't need this if you are using AOL.  AOL has a built in program for transferring files.

3) If you have an ISP other than AOL, then you will have to know the name of the ISP's FTP server(e.g., ftp.yourisp.com), possibly the name of the directory that contains your Web disk space (e.g.,/yourusername), your username and your password.

AOL USERS

Go to keyword MYPLACE and there are instructions there for uploading your Web page and images to your AOL Web disk space.

OTHER ISP USERS

Find out all the information from your ISP listed in step 3 above.  You will need to input it into the FTP client program in order for it to be able to log into your ISP's FTP server.

When you are ready to upload your files, you must establish your connection to your ISP by dialing in as you would normally do when checking email or surfing the Web.

Once you are logged in, run the FTP client program and connect to your ISP's FTP server (you should already have input all the information that the FTP client needed to login, see item #3 above).  If you successfully connect, you should see two window panes in the FTP client program.  One pane lists all the files on your computer's local hard disk, the other shows all the files in your Web disk space on your ISP's FTP server.

Now transfer files from your computer to the FTP server by selecting files in the local window pane (showing your files) that you wish to upload.  Then click on the transfer button (sometimes has an arrow on it to show you which direction the files are being transferred).

NOTE:  For Web pages (text documents) you should make sure you have selected the ASCII format for transferring(not BINARY format).

For Images you must choose the BINARY format for transferring them.

Select the correct formats for each file BEFORE transferring them to and from your FTP server.

If everything goes smoothly, then you should be able to view your Web page on the Web.  If not, consult with your ISP and ask them if you are doing anything incorrectly.

Your ISP should also know what the Web address (URL) is for your Web page.  The URL is the address you type into your browser to load a Web page, like http://www.mcwebsoftware.com


Insert HTML Menu

   Page Properties

   Structure Tags

   Paragraph/Text Elements

   Logical Style Tags

   Physical Style Tags

   Special Characters

   Anchor/Bookmark

   Embedded Item

   Form Maker

   Frame Maker

   HyperLink

   Inline Image

   Lists

   Table

   Date and Time


Date and Time
Inserts the current date and time into the active HTML document.


Lists

   Bulleted Lists

   Numbered Lists

   Descriptive Lists

   Convert to List


Options Menu
View Menu

Preferences

The Preferences dialog box controls certain environment variables such as:

-  Working Directory settings - Web Weaver will automatically open to this directory when you are trying to open a file or save a file.

-  Image Directory settings - Web Weaver will know where to look when you try to find an image to insert.

-  Working font name and size- Web Weaver will use this set font for your screen font.

-  Browser settings in the INI file(Windows 3.1x) or the Windows 95 Registry - The path and filename of your browser should be declared so Web Weaver will know where to look when opening it to view your HTML document.

-  FTP Client settings - Insert the path/filename of your FTP Client so Web Weaver can open it.

-  Image Mapper settings - Insert the path/filename of your Image Mapping program so Web Weaver can open it.

-  Printer Program settings - Insert the path/filename of another editor (such as Windows Notepad, Write, Wordpad or Microsoft Word) to be used to print your HTML document.  When choosing Print from Web Weaver's menu, the specified application will start and you can print your HTML document from that application.  Web Weaver does not have the capability to print currently.

-  Web Weaver Start-up settings - When Web Weaver starts, it asks you if you want to create a new document or if you wish to work on an existing one.  If you prefer Web Weaver not to show this dialog box, just specify this in the Preferences box.

-  Web Weaver Main menu box - When Web Weaver starts, a main menu is available which allows the user to pick from a few different options.  The user can choose to begin using the Web Weaver editor, use Web Wizard, refer to the HTML tutorial or refer to the HTML tag reference.  This feature is mainly for new users to help them find their way around.

-  Hide rarely used HTML tags - This removes all rarely used HTML tags from the pull down menu to provide an easier (uncluttered) interface.  Many of these rarely used HTML tags are not yet supported by W3C but are in debate.

The Favorite URLs settings box allows the user to input his/her frequently used Web addresses (URLs) to allow easier insertion of these addresses instead of typing them in each time.  The hypertext and inline image dialog boxes use the Favorite URLs pull-down boxes for easy input.

The Menu System settings box allows the user to choose an approriate Web Weaver menu system for their degree of HTML knowledge.  There are many HTML tags that you will never use.  This gives the user an opportunity to select Beginner, Intermediate, Advanced or Custom menus depending on their HTML knowledge.  The Custom menu system allows the user to pick and choose which menu items he/she would like to be available.

The Toolbox settings dialog box controls:

-  User-defined toolbar settings

Fonts

This allows the user to change the font appearance in the main text box.  The Fonts dialog box allows the user to choose from available screen and printer fonts.  Once you exit Web Weaver the font that you have set using the Fonts menu item will be lost, and the Web Weaver default font will be used the next time you run Web Weaver.  If you want to change the default font, the working font can be set in the Options/Preferences dialog box so Web Weaver will open each time to the set font..

Toolbox

This opens or closes the toolbox window which has buttons available for user defined HTML macros to make HTML tag insertion a little more user friendly.

View INI File


View INI FIle
This menu item opens the Web Weaver INI file (webwev.ini) for viewing and/or editing.


Toolbox
Toolbox (Windows 3.1x version only)

This opens or closes the toolbox window which has buttons available for user defined HTML macros to make HTML tag insertion a little more user friendly.

The user can specify the tags for 5 of the buttons on the toolbox.  This is done by changing them using the Options/Toolbox settings dialog box or by editing the webwev.ini file.  Using the Toolbox settings dialog box is much easier.  Just choose Options, then Toolbox settings from the menu bar.

To change the button designations manually:

The user-defined line in the webwev.ini file reads as follows:

Button4=Paragraph,<P>

where Button4 is the name of the specific button from 4 to 8, "Paragraph" is the text that is shown on the button, and "<P>" is the tag that is inserted into the document.


Frame Maker

For a GREAT tutorial on Frames, check out the Helpful Web Sites web page!!!

This wizard helps you create Netscape Frames in your HTML documents.  You can create a maximum of a 3 x 3 grid of frames.  The following dialog box appears when you start the Frame Maker:

The user adjusts the scrollbars to create the frame layout he/she desires.  When the desired frame layout has been created, the user can set additional general frame properties such as Frame borders and the space between frames.

Checking the frame border (FRAMEBORDER) checkbox will cause frame borders to be turned on (this is normally the default).

Spacing between frames is specified in pixels (FRAMESPACING or BORDER).

After setting the frame layout and general properties, the user then clicks the OK button.  The following Frame Properties dialog box appears:

This dialog box is used to set the properties of each frame of the HTML document.  Each frame contains information such as:

  the URL of the Web page that will be displayed in that frame when the frame page is loaded,

  the name of a frame so that each frame can be targeted when another URL points to it.  For example, if you wish to be able to click on hypertext in your Web page and have the new Web page load into a certain frame, then you must specify which frame the new Web page will load into.  This is done by specifying names for each frame as you lay them out.

  whether the frame will have scrollbars or not,

  whether the frame is allowed to resize itself depending on what dimensions the user resizes their browser window to,

  the margin height and width (in pixels) of each frame.

The Frame's URL is the only value that is required.  The other attributes are optional, but it is advised to enter them in if people browsing your page use different browsers.  You should also be sure to include HTML code for users that have browsers that don't support Netscape Frames.  If you don't specify this 'NOFRAMES' code, then the browsers will display nothing when viewing your page.  The HTML code for this is:

<NOFRAMES>

Enter HTML code here for browsers that don't support Frames

</NOFRAMES>

This code between and including the NOFRAMES tags should be placed on the same Web page that you are specifying your Frames on.

In the Frame Properties dialog box you will see the manner in which Web Weaver numbers its frames.  Beginning at the top left with frame number one (1), the Frame Maker numbers from left to right and then from top to bottom.  You can use this as a guide to filling out the correct frame properties for each frame.  This way you will know which frame you are writing properties for.

So, beginning with the upper left frame (Frame 1) you should at least enter the URL of the Web page that is to appear in this frame.  The other optional attributes can also be entered at this time.  When you have finished entering the properties in for this frame you can hit the 'Enter Frame Properties' button to move on to the next Frame.  Be aware that if you make a mistake when entering properties and then click the 'Enter Frame Properties' button you cannot go back.  Future releases of Web Weaver will have the ability to go back and fix mistakes.

After entering in each frames properties, Frame Maker will automatically insert the HTML code for the Frames you have just created!

Now create the HTML documents that are referenced in each frame and test it out with your HTML browser which supports Frames!!!

CUSTOM-MADE FRAMES

Another wizard that Web Weaver offers is the custom-made frame wizard.  If you want a quick way to make frames, this is it!  When you choose the custom-made frames wizard, the following dialog box will appear:

Simply choose from the list of frame layouts provided by Web Weaver and see it previewed in the wizard dialog box.  Click the 'Next' button and the following dialog box appears:

Fill in the appropriate Web page URLs that you wish to appear in the designated frames.  Then click the 'Next' button again and Web Weaver provides you with some suggestions if you wish to edit the frame layout.

Names are automatically given to each frame window so that you can target particular frames when creating hyperlinks.  Each frame is given an appropriate name.  For example, the top frame window is given the name 'top' and the main content frame window is given the name 'main'.  Note that these names are case-sensitive, so when you are referring to them you must spell them exactly as they are spelled in the frame source document.

 Also note that when targeting frames, the names "_top" and "top" are very different.  "top" is to be used when targeting the frames created with Web Weaver's frame maker.  "_top" is used when you want to clear the entire browser screen of frames and just display the URL in the entire browser screen.

More about targets and names:  The main reason for naming frame windows is so you can easily refer to a specific window.  For example, suppose you have two frame windows, one named 'SideMenu' and the other named 'Main'.  The SideMenu frame window contains hyperlinks and the Main frame window is where you want the Web pages to be displayed when the user clicks on the hyperlinks in the SideMenu frame.

If you don't specify names and targets, then the Web pages will display in the same window that the hyperlinks reside in when the user clicks on them.

<A HREF="content.html">Click here for content</A>

 By specifying a target name in the hyperlink tag, we can force the Web page to be opened in the Main frame window while the SideMenu frame window doesn't change.

<A HREF="content.html" TARGET="Main">Click here for content</A>

Now that you understand targets and frame names you can continue by clicking 'Done' and the new document with the frame layout will be created for you!


Netscape Extensions Menu
HTML Extensions Menu

Listed below are the HTML tags found in the Netscape Extensions pull-down menu.

Basefont

The standard font size for the entire Web page can be set by using this tag at the beginning of your HTML document.  The range of sizes is from 1 to 7, where 2 is the default size.

Blink

This tag causes text or images to blink when viewing the document through the Netscape Navigator.

Tag: <BLINK> text or image </BLINK>

Center  -  Shortcut Key:  CTRL-E

The text (or image) surrounded by this tag appears centered when browsing the HTML document.

Tag: <CENTER> text </CENTER>

Font Size:

This Netscape tag allows you to change the font size of a particular selection of text.  The text enclosed within the opening and closing tags will have a change in font size.  Valid values range from 1 to 7.

Tag: <FONT SIZE=value> text </FONT>

Horizontal Rule

This Netscape tag is the same as the HTML 2.0 horizontal rule except for the addition of attributes to alter its appearance such as: width, shading, size, and alignment.

Line Break  -  Shortcut Key:  CTRL-K

Netscape extends the BR tag to account for the addition of floating images.  The CLEAR tag has been added and is used in the following manner:

Tag: <BR CLEAR=right|left|all>

For example, CLEAR=left will break the line and move vertically down until you have a clear left margin.  CLEAR=right is similar, and CLEAR=all moves down until both margins are clear of images.

MailTo

This tag allows the author to display a linked email address in the HTML document that will open an email mailer when clicked on.  The person browsing the page can then write a message and send it to the email address specified in the code.

No Break

All text between the start and end of the NOBR elements cannot have line breaks inserted between them.

Tag: <NOBR> unbroken text </NOBR>

UseMap

This dialog box is used to create client side image maps.  What is a client side image map, you ask?  First of all, an image map is an image that has different areas assigned to different URLs.  When a person clicks on a certain area of that image he/she is whisked off to another Web page depending on what URL that area was set to.  Client side image maps are different from server side image maps in that they do not need special programs on the server to make them work.

In a server side image map, the user clicks on the image map in their browser and the coordinates are sent to the server on which the image map resides.  A program on the server gathers the information, processes it and then sends the URL associated with that image map area to the person who is browsing.

Client side image maps are much better because you can save a step.  The browser on your hard drive processes the clicked area and its coordinates and automatically sends you (the user) to the associated URL.  The server and its programs needed to process the image map are not needed anymore.  This makes your life easier.  Although one drawback is that only Netscape and Internet Explorer allow client side image maps.  More browsers should begin to support it in the future, but until then you'll have to plan accordingly.

Word Break

This is used when you know exactly where you want a NO BREAK section to break.  It also lets the Netscape Navigator know where a line break is allowed to be inserted if necessary.  There is only an opening Word Break tag (no closing tag needed).

Tag: <WBR>

Internet Explorer Tags

Java Tags


Background  -  [Netscape Extension]
Page Properties

Uses:

The color or texture/wallpaper of a Web page background can be changed by specifying a color or a graphic image file to tile on the background.  Also, colors of text, linked text, visited text, and active text can be set by using this dialog box.

Tag:

<BODY BACKGROUND="filename" BGCOLOR=###### TEXT=###### LINK=###### ALINK=###### VLINK=###### BGPROPERTIES=FIXED LEFTMARGIN=0 TOPMARGIN=0>

When this button or menu item is selected, the following dialog box appears:

To Set Document Title:

The document title is used by the browser to identify the main title of the HTML document.  Usually, the HTML page title is displayed at the top of the browser's screen.

To Set Background Wallpaper:

The user can browse for a background bitmap file or type the filename into the text input box.  The user can make the background wallpaper image into a static watermark by clicking on the watermark check box.  The background image will then remain stationary while text and images will scroll over the image.

Left Margin:

The user can set the left margin to any width (even zero).  This attribute is specified in pixels.

Top Margin:

The user can set the top margin to any height (even zero).  This attribute is specified in pixels.

To Set Colors:

If the user knows the RGB color codes, then they can be entered into the text boxes using the keyboard.  Otherwise, the user can click the Select color boxes and the color palette will appear.  The user can then choose from a wide range of colors.

BGCOLOR=###### is the screen background color.

TEXT=###### is the color of the normal on-screen text.

LINK=###### is the color of the hypertext (linked text) which hasn't been visited(clicked on) yet.

ALINK=###### is the color of the hypertext when it is being clicked on(Active LINK).

VLINK=###### is the color of the hypertext after it has been visited(clicked on).

BGPROPERTIES=FIXED will fix the background image as a watermark.  This means that when you scroll down your Web page your text and images will scroll up, but the background image will remain stationary.  This is an Internet Explorer extension only.

LEFTMARGIN specifies the size of the page left margin in pixels (Internet Explorer only).

TOPMARGIN specifies the size of the page top margin in pixels (Internet Explorer only).

Clicking on OK will insert the appropriate HTML tag for background color/wallpaper and text colors.  The location of your cursor in the document is not important.  Web Weaver will find the <BODY> tag and insert the BGColor tags in the appropriate locations.

To set Advanced Page Properties


Advanced Page Properties - META tags

Uses:

Used to embed keywords and descriptions in Web documents for search engine indexing.  Also, there is a setting for automatic refresh of a Web page or a splash screen Web page which expires after a number of seconds and automatically displays another Web page.

When this button or menu item is selected, the following dialog box appears:

To Set Advanced Properties:

Advanced page property settings are HTML META tags which are defined within the <HEAD></HEAD> tags in your HTML document.  They are as follows:

Description allows you to provide a one paragraph description of the content of your Web page.  Many search engines use the first 250 words of your Web page as a description when they display a link to your page.  Well, the full description of your Web page may not be in the first 250 words of your document.  By specifying the META tag description in your document, search engines will use this description instead of the first 250 words.

Keywords allow you to specify which words are important in your document or relevant words/phrases which search engines will use to index your page.  By entering keywords using this META tag search engines will read the META tag and use those specified keywords.  For example, if you have a Web page about birds and you put META tag keywords such as "animals, birds, flying, eagle, hawk" then when you are searching (using a search engine) for Web documents containing any of these words, your Web page will be displayed (given that you have registered with the search engines).

Splash Screen allows you to specify that a Web page will refresh itself at a specified number of seconds OR it will automatically open a different Web page after a specified number of seconds has expired.  If you want your Web page to upate itself every 30 seconds because you have changing information (dynamic Web page) then you can specify it using this advanced setting.  If you want a Web page on your site to be displayed for 10 seconds and then automatically display another Web page without the user clicking anything, then you can specify it using this advanced setting.


MailTo  -  [Netscape Extension]

Uses:

To provide a link which allows the user to submit email to the specified address.

Tag:

<A HREF="mailto:email address">text</A>

When this button or menu item is selected, the following dialog box appears:

Enter your email address in the input box and enter the text you wish to appear as hypertext in the Web page in the following box.  For example, typing "mmm@tiac.net" in the first input box and then typing "Mail Me" in the next input box will result in the following text in your Web page:

Mail Me

and clicking on it would result in the user emailing the address mmm@tiac.net.


Format Menu

Uses:

To format characters and paragraphs in the body of an HTML document.

Tag:

<FONT FACE="Times New Roman" SIZE=2 COLOR=Red>text</FONT>

Characters

Allows the user to specify the main font that will appear on the screen when viewed in a browser.  The color, physical styles, logical styles, position and font size can also be specified.

Using the Font button, the author can insert multiple font names into the input box.  The Font tag will accept multiple font names in case the browser being used does not support the first font name found, it will use the second, and so on.  The author can also insert a Font name manually by typing in the Font name input box.

The Font color can be specified by typing in the color name (red, blue, etc.) or by using the color selection box to specify a color other than a primary color.  This latter option will insert the RGB code for the color, just as the BGColor dialog box does.

Paragraph

Allows the user to specify indentation and alignment of text in a paragraph.


UseMap  -  [Netscape Extension]

Uses:

To provide a client side image map which allows the user to assign different URLs to different areas on an image.

Tag:

<MAP NAME="Map1">

<AREA SHAPE=Circle COORDS="25,124 60" HREF="http://www.tiac.net">

<AREA SHAPE=Rect COORDS="57,89 168,226" HREF="http://www.yahoo.com">

<AREA SHAPE=Poly COORDS="57,89 168,226 485,654" HREF="http://www.lycos.com">

</MAP>

When this button or menu item is selected, the following dialog box appears:

Enter the name which you wish to call your image map in the Map Name text box.  You only need to do this once for the initial insertion of the first image map area.  Next choose one of the shapes (rectangle, circle or polygon/triangle) in the shape box.  The appropriate text input  boxes will appear depending on the shape you have selected.  You can use any graphics program to determine the coordinates of the areas you wish to assign URLs to.  With these coordinates in hand, you can enter them into the appropriate boxes.

- A circle requires the coordinates of its center and the size of its radius (all in pixels).

- A rectangle requires the coordinates of its top left corner and lower right corner.

- A polygon/triangle requires the coordinates of all of its vertices.  Web Weaver only has 	enough text input boxes for a triangle, but you can add to the coordinates manually if 	you have a hexagon or rhombus, for example.

Once you have set the coordinates for the area/shape, you should insert the URL or filename of the location you wish the user to be sent when clicking that area.  For example, if you have a rectangle with the coordinates already input into the text boxes, you can specify the URL "http://www.yahoo.com".  When the user clicks on this particular area on your imagemap, he/she will be linked to the Yahoo web site.  The URL is required for inputting the code.

If you need to specify a target frame (when using Netscape frames) you can do so by specifying it in the 'Target Frame' text box.  When the imagemap area is clicked on this will cause the browser to open the specified URL in the frame specified in the 'Target Frame ' text box.

Once you have entered all the required information you can hit the Insert button to insert the code.  Repeat this process until you are finished inserting all your imagemap areas.  Then click 'Done'.


Internet Explorer Tags

The following are HTML extensions supported by Microsoft's Internet Explorer.

BGSound

Used to embed a sound file in an HTML document to provide a sounds or music when 	the document is loaded by a browser.

Floating Frames

Used to embed an 'inline frame' in an HTML document.  This can be thought of as a 'picture within a picture' on your Web page.  The frame can be situated anywhere on your Web page (much like an image is) and any other HTML document(Web page) can be loaded into this frame.

Marquee

This allows the HTML author to insert a scrolling marquee which scrolls text 	across the browser's screen.


Video
Advanced Image

The following is the Advanced Image dialog box:

It includes settings for Inline runtime videos and Imagemaps.

You can insert a Runtime video into your HTML documents using the video tag, provided you are using Microsoft's Internet Explorer.  The video can be inserted from within the Inline Image dialog box.

The attributes of an inline video clip are as follows:

  The first input box  requires the filename of the video clip.  The author can either type the name or look for the file using the browse button.

  The next input box requires the author to specify the directory where the video clip will reside.  If your video clip will be in a different directory than your HTML document that specifies it, then the author must specify a directory here.

  The Loop attribute specifies how many times a video clip will loop when activated.  If the number specified is 1 or 'Infinite' then the video will loop indefinitely.

  The Start attribute specifies when the video clip should start playing.  FILEOPEN means start playing as soon as the file is done opening.  MOUSEOVER means start playing when the user moves the mouse cursor over the animation/video.  Both FILEOPEN and MOUSEOVER can be specified as well.

  VCR Controls will be displayed under the video clip if this checkbox is checked.

  If your image is going to be an imagemap, then you can specify whether it is a server side or client side imagemap.  If it is a client side image map you must enter the name of the map.  If it is a server side imagemap see the server side information.


Java Tags

The Java tags which are included in Web Weaver provided a way for the author to incorporate Java applets in his/her HTML document.  The Applet dialog box shown below

shows the required input for the Java applet tag.

  The first item to input is the applet name.  This is the name of your java applet including the (.class) extension.  For example, if the name of the Java applet you wish to insert into your HTML document is Animate (or Animate.class) just type 'Animate.class' into the input box.

The next input item is used to specify text to appear in your HTML document (Web page) in place of the Java applet if the browser being used does not support Java.  You could type something like 'A Java applet goes here' into this input box, and when a non-Java browser displays the Web page the user will see 'A Java applet goes here' instead of the actual applet.

  The Codebase input box is used to specify the directory in which the Java applet resides.  If the applet is not in the same directory as your Web page document, then you must specify the directory.  For example, if your Web page document which contains the applet tags is in the directory /HTMLdocs and your Java applet is in the directory /HTMLdocs/apps, then you should specify 'apps' as the Codebase.

  The height, width, vspace and hspace are all attributed to the size you wish your Java applet to be on-screen.

  The alignment acts just as the alignment for an inline image.  The alignment preview box will demonstrate how each alignment attribute works.

Tag:

<APPLET CODE="Animate.class" CODEBASE="/apps" ALT="A Java applet goes here" ALIGN=Middle WIDTH=450 HEIGHT=250 VSPACE=44 HSPACE=44>

</APPLET>

The parameter tag is used to specify different parameters (variables) for the Java applet that you specified.  For example, if the Java applet you specified requires you (the Web page author) to specify the font and font size you must do it using parameters (unless of course it is already written into the actual applet).  The parameter dialog box is shown below.

It requires that you specify the name of the parameter and the value.  The name is what your Java applet initially looks for.  Once it finds the name it reads in the assigned value and assigns the value to a variable.  The Java applet can then use the variable to perform whatever function the applet was written for (whether it's an animation applet or a scrolling text applet).  For example, if your Java applet requires a font name and the variable/parameter name it is looking for is 'Font', then you should specify the name and a corresponding value (Courier, Times New Roman, etc.) using the Parameter tag, as shown below.

Tag:

<PARAMETER Name="Font" Value="Courier">


Background Sound

The following figure shows the BGSound dialog box:

Using the Internet Explorer BGSound tag, the author can create Web pages with background sounds or 'soundtracks'.  Sounds can be either samples (.wav or .au format) or MIDI files (.mid format).

To specify a background sound fill  in the input boxes on the BGSound dialog box.

This begins with the filename of the background sound.  The author can browse for the filename if it resides on his/her hard drive.

The author can also specify how many times the sound file will loop (play again).  The range is from 'None' (play once) to an 'Infinite' loop which will play the sound file continuously.

Tag:

<BGSOUND SRC="music.wav" LOOP=Infinite>

This tag is only supported by Microsoft's Internet Explorer.  Netscape doesn't support it.


Floating Frames

The following figure shows the Floating Frames dialog box:

Using the Internet Explorer IFRAME tag, the author can create Web pages with embedded or inline frames.  A floating frame can be thought of as a 'picture within a picture'.  They are very much like images in your Web page.  The frame can be placed anywhere on your Web page (like an image) and any HTML document(Web page) can be loaded into the frame.

Tag:

<IFRAME SRC="http://www.mcwebsoftware.com" WIDTH=100 HEIGHT=200>

The following properties are supported by the floating frame:

REQUIRED

Source URL - This is the Web address (or URL) of the Web page you wish to be displayed in the floating frame.

Width - Used to specify the width (in pixels or percentage of screen size/browser width) of a graphic image.

Height - Used to specify the height (in pixels or percentage of screen size/browser height) of a floating frame.

ALTernative text - Used to replace the floating frame in text-based browsers or browsers that don't support floating frames.  This is the text that you wish to appear if people are not able to see graphical images in non-supporting browsers.

OPTIONAL

Horizontal Space - This controls the horizontal space to the left and right of the floating frame.  This prevents neighboring text from pressing up against the frame.  Specified in pixels.

Vertical Space - This controls the vertical space above and below the floating frame.  This prevents neighboring text from pressing up against the frame.  Specified in pixels.

Frame Border Size - This controls the thickness of the border around the floating frame.  Setting BORDER=0 will show no border.

Scroll bars - This specifies whether or not the floating frame has scroll bars to allow the user to scroll horizontally or vertically if the frame size is smaller than the Web page that it displays.

Align - To align neighboring text and images with the floating frame.

Left/Right:

These alignments provide a floating image type.  Aligning left will float the frame down and over into the left margin, and subsequent text will wrap around the right hand side of that floating frame.  Align=right aligns the floating frame with the right margin and text wraps around the left hand side of the floating frame.

This tag is only supported by Microsoft's Internet Explorer.  Netscape doesn't support it.


Marquee

The following figure shows the Marquee dialog box:

The marquee tag (Internet Explorer) allows you to make a scrolling text marquee.  There are a variety of attributes that control marquees.

  In the first input box on the Marquee dialog box the author should type the text he/she wishes to scroll across the screen.  Simple enough!

The remaining attributes in the dialog box are ALL optional, but they provide a great deal of control over your scrolling text.

  The Behavior attribute specifies how the text should behave.  There are three possible values for behavior: SCROLL, SLIDE, and ALTERNATE.  Scroll (the default) causes the text to start at one side of the screen, scroll all the way across and completely off the screen, and then start again.  Slide causes the text to start completely off one side, scroll across the screen and stop as soon as the text touches the other side of the screen.  Alternate causes the text to bounce back and forth within the marquee.

  The Align attribute specifies that the text around the marquee should align with the TOP, MIDDLE or BOTTOM of the marquee.

  The Loop attribute specifies the number of times a marquee will loop when activated.  If the attribute Loop=1 or if Loop=Infinite is used it will loop indefinitely.  Loop can be set to any number.

  The Height and Width attributes specifies the height of the marquee, either in pixels or as a percentage of the screen height/width.

  The Vspace attribute specifies the top and bottom margins for outside of the marquee in pixels.

  The Hspace attribute specifies the left and right margins for outside of the marquee in pixels.

  ScrollAmount specifies the number of pixels between each successive draw of the marquee text.

  ScrollDelay specifies the number of milliseconds between each successive draw of the marquee text.

  Background color specifies the background color for the marquee either as an RGB code or as a primary color name (red, blue, etc.)

This tag is only supported by Microsoft's Internet Explorer.  Netscape doesn't support it.


Functions Menu

Listed below are the functions found in the Functions pull-down menu.

LINK TO BROWSER  -  Shortcut Key:  F5

Pressing the Link to Browser button (or choosing its menu item) will result in the specified Web browser displaying the active HTML document for WYSIWYG viewing purposes.  The browser path and title MUST be specified in the INI file located in the same directory as the Web Weaver executable file(for Windows 3.1x) or in the Windows 95 Registry(for Windows 95).  The following format should be followed in the INI file:

Browser=C:\netscape\netscape.exe

The Windows 95 Registry contains this information in a siimilar format.

This information can easily be entered/edited by changing program preferences.  Choose the View menu item and then the Preferences menu item.  A dialog box will display allowing you to change program preferences and setttings.  You will see that you can specify 2 different browsers for viewing your Web pages.  The Browser#1 and Browser#2 text input boxes require the full path and filename of the Web browsers you wish to use.  For example, the Browser #1 entry may look like this:

c:\Program Files\Microsoft Internet\iexplore.exe

The easiest way to fill in this input box with the correct path and filename is to click the 'Browse' button next to it.  A directory/file dialog box will appear allowing you to search for the correct Web browser executable file.  For Internet Explorer it is iexplore.exe and for Netscape Navigator it is netscape.exe.

When you have found the appropriate file, select it and click OK.  The correct path and filename will be entered into the Browser text input box in the preferences section.

HTML STRIPPER  -  Shortcut Key:  F6

This item will parse the current HTML document, remove all HTML tags, and save the remaining text in a file of your choice.  A dialog box will pop-up asking you to specify a filename for the stripped file.  References to images will be replaced with "[IMAGE]", <P> will be replaced with a carriage return, <HR> will be replaced with a dashed line, and some special characters (quotation marks, for example) tags will be replaced with the actual character.

OPEN IMAGE MAPPER  -  Shortcut Key:  F7

This item will open the image mapping program(Map THIS!) that is included with Web Weaver (assuming you've specified the correct path and filename in your INI file using the Options/Preferences dialog box).

OPEN FTP CLIENT  -  Shortcut Key:  F8

This item will open the FTP Client program of your choice (assuming you've specified the correct path and filename in your INI file using the Options/Preferences dialog box).

CONVERT TO HTML LIST/TABLE

This item will convert selected text into HTML List items or Table data.  To convert existing text into List items, the text must be separated by carriage returns.  For example, if the user had existing text below:

Dogs

Cats

Pigs

Chickens

Frogs

Cows

Then that text could be selected, converted to list items and would then appear like:

<UL>

<LI> Dogs

<LI> Cats

<LI> Pigs

<LI> Chickens

<LI> Frogs

<LI> Cows

</UL>

To convert to tables, the existing text must be delimited (separated) by commas, spaces or tabs.  For example, the following text is separated by tabs:

Dogs	Cats	Pigs	Cows

Chickens	Frogs	Birds	Zebras

When selected and converted to a table it will appear like:

<TABLE>

<TR><TD>Dogs</TD>

<TD>Cats</TD>

<TD>Pigs</TD>

<TD>Cows</TD>

</TR>

<TR>

<TD>Chickens</TD>

<TD>Frogs</TD>

<TD>Birds</TD>

<TD>Zebras</TD></TR>

</TABLE>


Imagemaps and MapThis! ImageMapping software
Imagemaps

Check out Live Image, an image map creation program by Media Tech at http://www.mediatec.com/

What is an image map, you ask?  Well, I'm sure you've encountered them while browsing the Web.  Image maps are images that contain different areas (hotspots) that can be clicked on and a different action or Web page is assigned to each hotspot.  Clicking on these different hotspots will take you to a different page or load a different image, file, etc.  Many sites are using image maps on their introduction pages instead of using text tables of contents.  They may have one image that contains smaller images(icons) which represent the different directions you can go.  For example, one Web page contains a bookshelf with books having different titles, each book being a hotspot.  Each book hotspot is assigned to another location, so when you click on the cook book it takes you to a page with recipes.  Clicking on A Tale of Two Cities will link you to a Web page on the Classics, and so on.

Let's look at a better example.  The image below has different hotspots which link to different help pages in this help file.  Try it out by clicking on different areas of the image and see where it takes you.  This is an imagemap.

There are a few things that make up an image file and allow it to work.

1.	Any graphic image.

2.	A MAP file that tells your internet server which hotspot is linked to which location, image, sound, etc.  The map file just consists of Web addresses (URLs) and the corresponding pixel coordinates that define the respective hotspot.  For example,

rect http://www.website1.net/index.html   0,0  250,123

rect http://www.website2.net/users/jack/mypage.html   250,123  400,123

The rect stands for a rectangular shaped hotspot.  Other shapes like circles, polygons, and ellipses are supported as well.  Map files usually end in the extension .map or .imp.

3.	HTML code in the Web document to tell the server to process the image as an imagemap.  This code looks roughly like the following:

<A HREF="/cgi-bin/imagemap/~mmcconne/yourimage.map"><IMG SRC="yourimage.gif" ISMAP></A>

The /cgi-bin/imagemap part of that HREF reference tells the browser where the script is which will process the imagemap.  The /~mmcconne/yourimage.map part tells the server where the map file is located(the directory and filename).  In this case, it is located in my personal directory.

4.	Your server must have a cgi-bin (Common Gateway Interface) script file which can interpret the image map file and be able to display the image as a mapped image on the Web page.  Most Internet service providers have these cgi-bin scripts built-in so you don't have to program them yourself.  All you need to know is the name and directory of the cgi-bin file for the image map, and you can either ask your Internet service provider or look at other people's Web pages who use the same Internet service provider and find one that has an imagemap.  When you find a page that has one, view the source code and copy the HTML code and cgi-bin file/path that is used to interpret the image map file.  Remember that the Web page you are copying this information from should be hosted by the same Internet service provider as you.


Right side of Image

You just clicked on the right side of the image!!!!


Left side of Image

You just clicked on the left side of the image!!


Insert menu item: Special Characters

These characters are characters that must be represented by specific tags because they are interpreted as HTML tags themselves or they are not represented by a key on the standard keyboard.  Below are the different categories of special characters that you can easily select from their respective dialog boxes.

Vowels

Various

Math Variables


Vowels (Special Characters)

The Vowels special characters dialog box helps you to insert vowels from different languages into your Web document very easily without knowing the special character codes.

When you choose the Vowels special characters menu item, this dialog box appears.

To insert a character click on the appropriate one.  The HTML code will be inserted into the document,

Then click on another character to insert it or close the Special characters dialog box.


Various (Special Characters)

The Various special characters dialog box helps you to insert various characters into your Web document very easily without knowing the special character codes.

When you choose the Various special characters menu item, the same dialog box as the Vowels dialog box appears.

To insert a character click on the appropriate one.  The HTML code will be inserted into the document,

Then click on another character to insert it or close the Special characters dialog box.


Math Variables (Special Characters)

The Math variables special characters dialog box helps you to insert math variables into your Web document very easily without knowing the special character codes.

When you choose the Math variables special characters menu item, the same dialog box as the Vowels dialog box appears.

To insert a character click on the appropriate one.  The HTML code will be inserted into the document,

Then click on another character to insert it or close the Special characters dialog box.


Insert menu item: Hypertext

Uses:

To create linkable text which connects the user to another Web site(URL), external image, sound file, etc.

Tag:	<A HREF="link">linked text</A>

When this button or menu item is selected, the following dialog box appears:

This box allows you to insert hypertext into your HTML document that can be linked to external graphics, URLs, anchors(bookmarks) or sounds.  Using this dialog box makes it easier to code since you dont need to know the actual HTML tags.  You can just type the hypertext and the object/location to which it will be linked and this program inserts the correct HTML tags into the document.

In the box marked: Enter text to be hyperlinked below type the actual text that is to be the hypertext on your HTML document.  When using a browser to view your HTML document this text will be a different color than the rest of the text and when it is clicked on it will be linked to an image, URL, anchor or a sound.

In the box marked: Enter URLof Web page or file to link to type the URL that you want your hypertext to link to (Remember, dont type the DOS paths or filenames for the images or sounds.  Type the path/filename that will appear on the system where your HTML Web page will finally reside).  You can assign your 15 favorite URLs or filenames so that they will appear in the pull-down box for easier selection.  See the Favorite URLs page for more information.  When the hypertext in your final HTML document is clicked on it will link you to the respective site or file.

For example, if the hypertext you enter is 'bird image' and the link site/file is an external image called 'bird.jpg' (type bird.jpg in the 2nd box) then the output will be the HTML tag that represents the following formatted text on your final HTML document:

If you take a look at this bird image, then youll see exactly what this bird looks like.

Clicking on the words 'bird image' will produce the external image of the bird.

Another example is this: If you enter 'Tufts University' as the hypertext and 'http://www.tufts.edu' as the link site/file then the output will be the HTML tag that represents the following formatted text on your final HTML document:

Check out the departments and people at Tufts University.  Their Web Site is really growing.

Clicking on the words Tufts University will link you to Tufts Web page.

If you are using Netscape frames, then you should specify which frame the linked URL should be opened in (otherwise, the URL will be opened in the same frame that the clicked hypertext was in).  For example, suppose you have a two-framed Web page :frame #1 name being 'MENU' and frame #2 being 'MAINWINDOW'.  Your hypertext is in the MENU frame and you want the URL linked to that hypertext to open in the MAINWINDOW frame when you click on it.  If you don't specify a target frame name, then the linked URL will open in the MENU frame when the hypertext is clicked.  So, you must specify the name 'MAINWINDOW' in the appropriate input box in the Hypertext dialog box.

If you wish to link your hypertext to an anchor (bookmark) in the same document or a different document, then you can select the 'Link to a Bookmark?' checkbox and an input box will appear for you to type the name of the anchor (bookmark) to link to.  If the destination anchor is in the same document as the hypertext linking to it, then you don't need to specify a URL name.  If the destination anchor is in a different Web page then you should specify the URL of that page in the appropriate input box in the Hypertext dialog box.


Favorite URLs

The following figure shows how your favorite URLs can be inserted into Web Weaver and retrieved easily without having to type them in each time you insert hypertext or a linked inline image.


Insert menu item: Inline Image

Uses:

To insert an image and display it in a Web page.

Tag:	<IMG SRC="inline image" ALT="IMAGE" ALIGN=Top>

Images can also be linked to another Web site(URL), external image, sound file, etc. shown by the code below:

Tag:	<A HREF="linked site, ext. image"><IMG SRC="inline image" ALT="IMAGE" ALIGN=Top>

When this button or menu item is selected, the following dialog box appears:

This box allows you to insert graphic files as inline images or figures into your HTML document that can be linked to external graphics, URLs, anchors or sounds or that can just stand alone as an image.  Using this dialog box makes it easier to code since you dont need to know the actual HTML tags.  You can just enter the path/filename of the inline image by browsing for the graphics file, and enter the object/location to which it will be linked (if applicable) and this program inserts the correct HTML tags into the document.  You can also specify if the inline image will be an Image Map (click the Imagemap checkbox).  An imagemap is a single image that has different areas(hotspots) that can be clicked on and will take you to different Web pages depending on where you clicked.

  Clicking on the 'Advanced' button will open the Advanced Image dialog box for inputting advanced image features such as Inline videos and Imagemap settings.

In the box marked: Enter filename of Inline Image enter the filename of the graphic file that is to be the inline image on your HTML document.  You can use the browse button to find the image on your hard disk.  When using a browser to view your HTML document this graphic will be displayed and it will be outlined in blue if it is linked to an image, URL, anchor or a sound, rendering it clickable (clicking on the image will link you to the specified site/file.)

  In the next text box type the name of the directory in which the graphic image file will reside.  You can use forward slashes or backslashes in you directory names and Web Weaver will correct them to the WWW standard.  If your HTML document is in the c:\webwev directory and your images are in the c:\webwev\images directory, you need only to specify the relative directory, that is

images/

in order for your browser to know where you images reside.

Clicking the 'Fixed Dir' check box forces the use of the full 'local' path and filename of the image in case you might be moving your HTML files around and want to insure that the links to the images won't be broken.

  In the box marked: Enter ALTernative text to replace image in text browsers type the text that you wish to appear if people are not able to see the image in non-graphical Web browsers.  For example, if you type [BIRD PHOTO] in this text box, then the following will appear in text based browsers when the graphics cant be displayed:

[BIRD PHOTO]

  In the box marked: Alternative Low-res image type the filename of the low resolution image you wish to be loaded initially by the browser.  Because the specified low-res image should be smaller in size, it will download faster and provide an image until the browser has a chance to download the actual image that will take the low-res image's place.

  If you wish to specify the location of neighboring text in relation to the image and other images in the same line (i.e., if you wish to align the neighboring text at the top, middle or bottom of the photo) specify this in the align selection boxes.  Netscape ALIGN extensions are Left, Right, Baseline, AbsMiddle, AbsBottom, and TextTop.  The Align Preview box will show you how the text will appear next to the image depending on which alignment you have chosen and what other images you have in the same line.

Netscape also allows other graphics tag extensions in order to allow the user greater flexibility in displaying inline images.

LINKING:

If you wish to link the inline image to an external image, click on the check box labeled Link Graphic to URL, External Image or Sound File and type the address or path/filename of the URL, external image/file in the box marked Enter path/filename of URL, External Image, or Sound File to link to.  The pull-down box makes it easy to keep all of your favorite URLs at your fingertips so you don't have to keep typing them.  See the Favorite URLs page for information on how to setup your favorite URLs.

You can also use the browse button to look for the filenames to enter into this text box.

When the hypertext in your final HTML document is clicked on it will link you to the respective site or file.

When you are finished entering all the pertinent information into the dialog box, click OK.  If you wish to only add attributes to already existing tags in your HTML document (e.g., you forgot to enter the Align tag when you filled out the last Inline Image dialog box, and you want to go back and add it) just place your cursor inside the HTML IMG tag in the appropriate location, choose Inline Image from the Insert pull down menu, enter the appropriate attribute(Align tag) and then click Insert instead of OK.  Try it and you'll see how useful it is when you forget to include an image attribute.  You can also enter many common attributes using the Insert/Attributes pull down menu.


Inline Image attributes: Align Extensions
Inline Image attribute: Align Extensions

Uses:

To align neighboring text and images with the current inline image.  The Inline Image dialog box demonstrates the appearance of the different align attributes.

Tag:

<IMG ALIGN=left|right|top|texttop|middle|absmiddle|baseline|bottom|absbottom>

Left/Right:

These alignments provide a floating image type.  Aligning left will float down and over into the left margin, and subsequent text will wrap around the right hand side of that image.  Align=right aligns the image with the right margin and text wraps around the left hand side of the image.

Top/Middle/Bottom:

Top aligns the image with the top of the tallest item in that line.

Middle aligns the image with the middle of the tallest item in that line.

Bottom aligns the image with the bottom of the tallest item in that line.

Absmiddle:

This aligns the middle of the current line with the middle of the largest item in the line.

Baseline:

This aligns the bottom of the image with the baseline of the text in the current line.

Absbottom:

This aligns the bottom of the image with the bottom of the lowest item in the current line.


Inline Image attributes: Netscape Extensions
Inline Image attribute: Netscape Extensions

Listed below are the Netscape extension attributes for inline image layout.  They add more functionality to HTML 2.0 image tags, and allow more flexible layout of images.

Uses:

Used to alter the appearance, and control the behavior of images.

Tag:	<IMG WIDTH=value HEIGHT=value>

Specifying these values speeds up display of the graphics when a document is being loaded since the viewer won't have to wait for the image to be loaded and calculate its size.  Also, the layout of the page will be immediately set so there will be no resizing while everything is loading into the browser.

Tag:	<IMG BORDER=value>

This controls the thickness of the border around the displayed image.  Setting BORDER=0 will show no border.  This may be confusing if the image is a link because the colored border that signifies a link will not be seen by a user.

Tag:	<IMG VSPACE=value HSPACE=value>

This controls the vertical space above/below and the horizontal space to the left and right of the image.  This prevents neighboring text from pressing up against the image.


Insert menu item: Forms

Uses:

To create a submission form so that online users can input information and submit it to the author of the web page which contains the form.

_____________________________________________________________________________________

When the Form Maker menu item is selected, the following dialog box appears:

What to do:

For each form that you wish to create, you must first select a FORM METHOD and specify a FORM ACTION.

If you are a beginner at making forms, then it is a good idea to select the checkbox that allows you to use the CGI script included with Web Weaver for processing your form.  A CGI script is a program which processes forms among other things.  A form cannot work without a CGI script.  The FORM METHOD and FORM ACTION input boxes will be filled in appropriately.  You will have to insert your email address into the input box that requests it.  This tells the form script where to send the form output.  When someone fills out your form and submits it, it will be sent to this email address.  When you have finished entering your email address, click the 'Insert Form Method/Action' button.  See 'Implementing Web Weaver's CGI script' at the end of this chapter for an explanation on how to make your Form work.

If you have your own CGI script for processing forms, then select the appropriate FORM METHOD.  GET and POST are the two available FORM METHODS that you can choose.  They are just different ways for the Form contents to be processed and sent.  It is more common to use the POST method because it can support more information.

Type the path and filename of the CGI script into the FORM ACTION input box.  When you have finished entering the FORM ACTION, click the 'Insert Form Method/Action' button.

Step 2 of the Form creation process will appear.  The following dialog box appears:

This dialog box allows you to specify the Form fields that you wish to include in your Web page.  The different types of Form fields are as follows:

  Text

  Textarea

  Image

  Hidden

  Checkbox

  Radio

  Password

  Select

  Submit

  Reset

INSERTING FORM FIELDS

Input Field types except SELECT

To insert the form elements you must select an INPUT FIELD TYPE from the dropdown combo box, input the respective required or optional attributes and FORM TEXT, then click the 'Insert Form Input Line' button.  Do this for each input field you want in the form.  When you have inserted the last input field, click 'Done with Form'.  This is valid procedure for all input types except for the SELECT input type.

SELECT Input Field Type

1. To put a SELECT (list box)input type into your form, first enter the FORM TEXT that you wish to appear next to your selection list box.

2. Input the name attribute and the Multiple and Size attributes if necessary.  Click on the 'Insert Form Input Line' button.

3. Now you are ready to enter in the OPTIONS that will be the choices in the Selection list box.  Enter an option into the required Option attribute and enter the Selected and Value attributes if necessary.  Click on the 'Insert Option' button to insert your first option.  The option attribute text boxes will clear so you can input more options.  Repeat the above step (#3) for as many options that you have.

4. When you have reached your last option, click on the 'Insert Option' button as you did in step 3 and then click on the 'Done with Select' button to finish inputting the Select input type. If you are finished with the form, click on the 'Done with Form' button.

Below are the definitions for the different elements and types of form input:

FORM METHOD specifies a method of accessing the action URI.  There are two methods: Get and POST.

FORM ACTION specifies the action URI for the form.

INPUT TYPE represents the type of field for user input.  The different input types are: TEXT, TEXTAREA, PASSWORD, CHECKBOX, IMAGE, HIDDEN, SELECT, SUBMIT, and RESET.

TEXT:  The default value of the TYPE attribute is TEXT.  This indicates a single line text entry field.

TEXTAREA:  This is a multiline text entry field for obtaining information such as comments, addresses, etc.

PASSWORD:  This is a text field as above, except that the value is obscured as it is entered in.

CHECKBOX:  This is just what it sounds like.  It represents an on/off (yes/no) switch.

RADIO:  This also represents an on/off switch, except that only one can be highlighted in a group.  When one is highlighted, the others are blank.

IMAGE:  This specifies that an image is displayed and two form fields of input are allowed: the x and y coordinates of where the image was clicked.  When a pixel is chosen, the form is submitted.

HIDDEN:  This represents a hidden field where the user doesn't interact with this field.  The value of the field is specified by the author instead.

SELECT:  This represents a list box which offers the user a list of choices to choose from.

SUBMIT:  This represents an input option (a button) which, when selected, submits the contents of the form.

RESET:  This represents an input option (a button) which resets the values of the form to their original state.

Form Text: This is the text the author wants the user to see when viewing the form.  For example, if the input type is a checkbox and the author wanted the user to see a checkbox followed by the words 'Chocolate cake' then the Form Text would be 'Chocolate Cake'.

Each of the input types has different required and optional attributes.  A list follows:

Name: This is the name for the form field corresponding to the input type.  For example, if you had a Form field that users were to enter their telephone number into, then an appropriate NAME for that form field would be 'Phone'.

Value: This is the initial value of the field.  It indicates the value to be returned if this particular option was chosen.

Size: This is the amount of display space allocated to the input field.

Maxlength: This constrains the number of characters that can be entered into an input box.

Checked: This indicates that the initial state is on.

Src: This is the filename of the image file.

Multiple:  Indicates that more than one option may be included in the value.

Option:  A list item provided in the Selection List Box(SELECT Input type).

Selected:  This indicates that this SELECT Input type option is initially selected..

Rows:  The number of rows (lines of text) that can be input into the textarea text box.

Columns:  The number of columns (characters) that can be input into the textarea text box.

IMPLEMENTING WEB WEAVER'S CGI SCRIPT FOR PROCESSING YOUR FORM

Unless you are running your own Web server (most of you are not), then you CANNOT test your form from your local computer.  You must upload it and the CGI script to your Internet Service Provider's (ISP) server and then test it on the Web.

There are a few things you must do to make your Form and CGI script work correctly.

First we'll try using the default settings in the CGI script to see if the work on your ISP's server.  Follow these steps:

1) Make sure your ISP allows custom CGI scripts (made by customers) to reside on their server.  Sometimes ISPs don't want CGI scripts other than their own on their server.  They may be afraid of security risks.

2) After you have completed the HTML form Web page, upload it (as ASCII format) to your Web disk space provided by your ISP.

3) Upload the file formmail.cgi found in the Web Weaver FORMS directory (as ASCII format) to your Web disk space provided by your ISP.  Make sure this file is in the same directory as your HTML form Web page on your ISP's Web disk space.

4) Now we'll explain file permissions to you.  Web servers have permissions for each file on their hard disks so different users can have access to files and others cannot.  These servers have the capability to restrict users from reading files, writing to files, or executing files.  So there are 3 restrictions for files: read(4), write(2), and execute(1).

There are also 3 levels of user that can be restricted: user(you), group, and world.

What we need to set for our CGI script are permissions that allow everyone to read and execute the CGI script, but not write to it.  Using your FTP client you can specify the permissions by selecting the file and select permissions from the pull-down menus or the right-click pop-up menu.  It may give you a box that lets you set permissions easily.  Do this by selecting the following:

User: Read, write, and execute

Group: Read and Execute

World: Read and Execute

If you must type in the UNIX command to change permissions then the syntax would be:

chmod formmail.cgi 755

where the numbers 755 represent the permissions.  Here's how we got the numbers.  Adding the numbers together for read and execute permissions results in 4+1=5.  You want to give yourself all permissions, so that would be 4+2+1=7.  So, to represent these permissions for user, group, world we would have the following permission numbers: 755.

5) Now test the Form online and see if it works.

If you get a server error or the form didn't work, then you may have to change a few things in the CGI script.

Follow these steps carefully:

A) Check with your ISP and ask them the correct path of the program called PERL on their system.  The first line in the formmail.cgi program calls the PERL program to compile and interpret the formmail.cgi script.  The default path is:

/usr/bin/perl

and the first line in the formmail.cgi script reads:

#!/usr/bin/perl

If the path is different on your ISP's server, then you must update the first line of formmail.cgi to reflect the correct path.  Open formmail.cgi in Web Weaver and edit the first line.  Do not save the file.  You must export it.  Select Export-Save as UNIX file from the File menu in Web Weaver.  Then export/save it as the same name: formmail.cgi.  The exporting as a UNIX file is crucial for the script to work.

B) Now upload the formmail.cgi script and reset the permissions as described in step 4 above.  Test the online form.  If it still does not work, go on to step C.

C) Check with your ISP and ask them the correct path of the mail program called 'sendmail' on their system.  The 31st line in the formmail.cgi program calls the sendmail program.  The default path of the sendmail program on most systems is:

/usr/lib/sendmail

You should edit the formmail.cgi script to reflect the correct path of the send mail program.  The 31st line in formmail.cgi reads:

$mailprog = '/usr/lib/sendmail';

Remember to Export it from Web Weaver, upload it, and set permissions correctly as described above.  Test the online form again to see if it works.

If it doesn't contact your ISP for further troubleshooting.  We cannot determine the problem since we don't have access to your ISP's settings or server.

For more information on FORMS check out some of these web pages.


List - Bulleted List
List - Bulleted Lists

Uses:

   Cookies

   Cake

   Pie

_____________________________________________________________________________________

When this button or menu item is selected, the following dialog box appears:

This box allows you to insert bulleted list items into your HTML document.  Using this dialog box makes it easier to code since you dont need to know the actual HTML tags.  You can just type each bulleted item and this program inserts the correct HTML tags into the document.

In the box marked: Enter text for each bulleted list item type an item you wish to be bulleted in your list.  If you are entering the first bulleted item of your list, type it in the box, and then click on the Start a New List button.  Otherwise just type in each bulleted list item and click on the Add a List Item button.  When you are finished click 'Done'.

If you have previously made a bulleted list in your HTML document and wish to add a bulleted list item into that list, then place your cursor in the position where you wish this list item to go, open the Bulleted List dialog box, type the list item into the text box, hit the Add to Existing List button and then click the 'Done' button.

NETSCAPE Extensions provide an alternative to round bullets in your bulleted lists.  Circle, disc, or square bullets can be chosen.  Remember that these types can only be seen on a Netscape browser.  Clicking on the desired bullet type before clicking "Start a New List" will change the bullet type in the entire list.

When using a browser to view your HTML document a coded bulleted list like the following:

Tags:

<UL>

<LI>Cookies

<LI>Cake

<LI>Pie

</UL>

will appear like:

   Cookies

   Cake

   Pie

Note: If text has been selected in the main text area of Web Weaver and the Bulleted List dialog box is opened, then that selected text will appear in the Bulleted List text box.

Also, if you choose a Netscape bullet type and didn't intend to, then you can just double click anywhere in the background of the Insert Bulleted List dialog box, and these values will be cleared.


List - Numbered List(Ordered List)
List - Numbered Lists (Ordered List)

Uses:

1.	Cookies

2.	Cake

3.	Pie

_____________________________________________________________________________________

When this button or menu item is selected, the following dialog box appears:

See bulleted list image for similar layout.

This box allows you to insert numbered list items into your HTML document.  Using this dialog box makes it easier to code since you dont need to know the actual HTML tags.  You can just type each numbered item and this program inserts the correct HTML tags into the document.

In the box marked: Enter text for each numbered list item type an item you wish to be numbered in your list.  If you are entering the first numbered item of your list, type it in the box, and then click on the Start a New List button.  Otherwise just type in each numbered list item and click on the Add a List Item button.  When you are finished click the "Done" button.

If you have previously made a numbered list in your HTML document and wish to add a numbered list item into that list, then place your cursor in the position where you wish this list item to go, select the Numbered List Menu Item, type the list item into the text box, hit the Add to Exisiting List button and then click the Done button.

NETSCAPE Extensions provide an alternative to numbers in your numbered lists.  Uppercase and lowercase letters and Roman numerals can be chosen.  Remember that these types can only be seen on a Netscape browser.  Clicking on the desired number type before clicking "Start a New List" will change the number appearance in the entire list.

When using a browser to view your HTML document a coded numbered list like the following:

Tags:

<OL>

<LI>Cookies

<LI>Cake

<LI>Pie

</OL>

will appear like:

1.	Cookies

2.	Cake

3.	Pie

Netscape lists can look like:

I.    	Cookies

II.   	Cake

III.	Pie

i.	Cookies

ii.	Cake

iii.	Pie

A.	Cookies

B.	Cake

C.	Pie

a.	Cookies

b.	Cake

c.	Pie

Note: If text has been selected in the main text area of Web Weaver and the Numbered List dialog box is opened, then that selected text will appear in the Numbered List text box.

Also, if you choose a Netscape number type and didn't intend to, then you can just double click anywhere in the background of the Insert Numbered List dialog box, and these values will be cleared.


List - Descriptive List
List - Descriptive Lists

Uses:

Cookies-my favorite dessert

These are my favorite snack in the whole world wide web.

Cake-my second favorite dessert

Cake is my second favorite.  It tastes good with ice cream.

Pie-my third favorite dessert

I like pie, too, but it doesnt compare to the first two desserts!

________________________________________________________________________________

When this button or menu item is selected, the following dialog box appears:

This box allows you to insert descriptive list items into your HTML document.  Using this dialog box makes it easier to code since you dont need to know the actual HTML tags.  You can just type the of each descriptive item and this program inserts the correct HTML tags into the document.

In the box marked: Descriptive List Topic: type a list topic you wish to be in your descriptive list and in the box marked: List Text to follow List Topic: type in the text that will follow below the list topic.  If you are entering the first descriptive topic and text items of your list, type them in their respective boxes, and then click on the Start a New List button.  Otherwise just type in each descriptive list topic and text item and click on the Add a List Item button.  When you are finished click "Done".

If you have previously made a descriptive list in your HTML document and wish to add a descriptive list topic and text item into that list, then place your cursor in the position where you wish this list item to go, select the Descriptive List Menu Item, type the list topic and text items into their text boxes, hit the Add to Exisiting List button and then click the Done button.

You can apply font properties to the List topic text directly in the Descriptive List dialog box.  Simply select the text in the Descriptive List Topic text box and click the bold, italic, or underline buttons to apply those properties.

When using a browser to view your HTML document a coded descriptive list like the following:

Tags:

<DL>

<DT>Cookies-my favorite dessert

<DD>These are my favorite snack in the whole world wide web.

<DT>Cake-my second favorite dessert

<DD>Cake is my second favorite.  It tastes good with ice cream.

<DT>Pie-my third favorite dessert

<DD>I like pie, too, but it doesnt compare to the first two desserts!

</DL>

will appear like:

Cookies-my favorite dessert

These are my favorite snack in the whole world wide web.

Cake-my second favorite dessert

Cake is my second favorite.  It tastes good with ice cream.

Pie-my third favorite dessert

I like pie, too, but it doesnt compare to the first two desserts!


Converting text to lists or tables
Converting Text to List or Table

Uses:

Used to convert existing text into an HTML list or table.  Excel spreadsheets can be saved as text and then converted using this feature.

When this button or menu item is selected, the following dialog box appears:

To convert existing text into List items, the text must be separated by carriage returns.  For example, if the user had existing text below:

Dogs

Cats

Pigs

Chickens

Frogs

Cows

Then that text could be selected, converted to list items and would then appear like:

<UL>

<LI> Dogs

<LI> Cats

<LI> Pigs

<LI> Chickens

<LI> Frogs

<LI> Cows

</UL>

To convert to tables, the existing text must be delimited (separated) by commas, spaces or tabs.  For example, the following text is separated by tabs:

Dogs	Cats	Pigs	Cows

Chickens	Frogs	Birds	Zebras

When selected and converted to a table it will appear like:

<TABLE>

<TR><TD>Dogs</TD>

<TD>Cats</TD>

<TD>Pigs</TD>

<TD>Cows</TD>

</TR>

<TR>

<TD>Chickens</TD>

<TD>Frogs</TD>

<TD>Birds</TD>

<TD>Zebras</TD></TR>

</TABLE>


Insert menu item: Anchors
Insert menu item: Anchor/Bookmark

Uses:

Used for establishing an anchor at a specific point in a Web page so that it may be linked to from the same or a different document (Web page).

Tag:

<A NAME="anchortext">some text</A>

When this button or menu item is selected, the following dialog box appears:

In the actual Web page when the source anchor hypertext is clicked, then the browser links you to the point of the target/destination anchor in the same or in a different page.

In the input box marked 'Enter text to be bookmarked', type the text that will appear on the page after the source anchor hypertext has been clicked.

In the input box marked 'Enter the Bookmark/Anchor name', type the name of the anchor.  When creating the hypertext link to this anchor you will specify this particular name to link to it.


Insert menu item: Embedded Item
Insert menu item: Embedded Object

Use:

The Embedded object tag is used to insert multimedia sounds, animations, videos, etc. into your Web page.

Tag:

<EMBED SRC="ding.wav" WIDTH=100 HEIGHT=200 ALIGN=Middle CONTROLS=SMALLCONSOLE AUTOSTART=TRUE LOOP=TRUE ALT="This is a ding sound.">

When this menu item is selected, the following dialog box appears:

In the 'Enter URL of filename of object to embed' input box type the filename of the file you wish to embed.  For a sound file named ding.wav, you would type 'ding.wav'.

In the ALT text input box type a description of the object.  This description will be displayed in place of the object in any browsers that don't support the embedded object tag.

Set the objects screen width and height by inputting the number of pixels in the Width and Height input boxes.

Control consoles provide a set of buttons to control playback of the multimedia object.  You can specify small controls, large control console or a hidden console.

The alignment determines how surrounding text and images will be aligned with the object.  Top, Middle and bottom are the different choices.

Autostart tells the browser to automatically begin play of the multimedia object when the Web page is loaded.

'Loop the sound' tells the browser to infinitely play the multimedia object (over and over again).


Insert: Paragraph/Text Elements
Insert menu item: Paragraph/Text Element Tags

See below for descriptions of each Paragraph/Text element tag:

______________________________________________________________________

   Headings  -  <H1></H1>

   Address  -  <ADDRESS></ADDRESS>

   Aligned Paragraph  -  <P ALIGN=></P>	[HTML 3.0]

   Blockquote  -  <BLOCKQUOTE></BLOCKQUOTE> or <BQ></BQ>

   Byline  -  <BYLINE></BYLINE>	[HTML 3.0]

   Comment  -  <!-- -->

   Horizontal Rule  -  <HR>

   Line Break  -  <BR>

   Listing  -  <LISTING></LISTING>

   Literal  -  <LIT></LIT>	[HTML 3.0]

   Non-breaking space  -  &nbsp;

   Paragraph  -  <P>

   Plaintext  -  <PLAINTEXT></PLAINTEXT>

   Preformatted Text  -  <PRE></PRE>

   Tab  -  <TAB>	[HTML 3.0]

______________________________________________________________________________

HEADINGS

The Insert Headings menu items are equivalent to the Headings buttons located on the top toolbar.  When any of them is selected the following tag is inserted in the active text document (depending on which heading number is selected).

Selecting text in the active document and then choosing the Insert Heading menu item will result in the selected text being surrounded by the HTML heading tag in the document.  Otherwise the heading tag will be inserted where the cursor is, and the cursor will move to the middle of the tag so the user can type the text that is to have that heading value.

Tag:	<H1> | </H1>

ADDRESS

Used to insert information regarding your email address or where you can be reached.

Tag:	<ADDRESS>text</ADDRESS>

The text which is enhanced by the ADDRESS tags will appear italic in most browsers.

When this button or menu item is selected, the above tag is inserted into the active document.

ALIGNED PARAGRAPH

Indicates the beginning of a new paragraph.  This differs from HTML 2.0 paragraph tag in that it has a closing </P> tag to indicate the end of a paragraph.  Also the this version of the paragraph tag can include attributes within the opening tag such as: ALIGN, CLASS, CLEAR,  ID, LANG, and NOWRAP. Below is an example of the paragraph tag using the Align attribute.  The paragraph enclosed within the <P></P> tags would be aligned to the right margin, left margin, center of the page or justified to both margins depending on which attribute value was used.

Tag:	<P ALIGN=></P>

BLOCKQUOTE

Used to insert text quoted from another source.  Different from an inline quote in that it creates it's own paragraph.  Usually a larger quote.

Tag:	<BLOCKQUOTE> text </BLOCKQUOTE>

or	<BQ>text</BQ>

BYLINE

Unsure if this tag is included in the HTML 3.0 specification.

COMMENT

Used to insert a comment into the HTML document that won't be seen in a viewer.  Used for tag commentary.

Tag:	<!-- text -->

HORIZONTAL RULE

Inserts a horizontal line across the page as shown below:

______________________________________________________________________

Tag:	<HR>

See also Netscape HR

LINE BREAK  -  Shortcut Key:  CTRL-K

Inserts a line break when placed in a text string.  The text following the <BR> tag is shifted one line down and begins at the left margin of the page.

Tag:	<BR>

LISTING

Used to insert an example computer listing.  Embedded tags are ignored, but embedded tabs are allowed.

Tag:	<LISTING> text </LISTING>

LITERAL

Unsure if this tag is included in the HTML 3.0 specification.

Non-breaking space

Inserts a space character.  HTML does not recognize two or more spaces in a row, so the non-breaking space character is used to specify several spaces in a row..

Tag:	&nbsp;

PARAGRAPH

Indicates the beginning of a new paragraph.

Tag:	<P>

PLAINTEXT

Used to insert text with a plain format.  Obsolete.

Tag:	<PLAINTEXT>text</PLAINTEXT>

PREFORMATTED TEXT

Used to insert preformatted text that the user wants to be displayed 'as is'.  The preformatted text may include embedded tags, but not all tags are permitted.

Tag:	<PRE> text </PRE>

TAB

Used to set tab stops in a document so a user can indent text to specified tab stops.  The user can specify how many spaces he/she wishes to indent by using the INDENT attribute.  Typing a number after the equal sign will result in an indentation of that number of ens.  An en is one- half the font size.  Using the ID and TO attributes a user can create a named tab stop.  The ID attribute is used to name the tab stop and the TO attribute is used to jump to any named tab stop. For example, if the user typed:

My dog is my favorite pet<TAB ID="dogtab"> because he is my best friend.

this would set the name of the tab stop to 'dogtab'.

Then typing:

<TAB TO="dogtab">He eats a lot of food.

would result in tabbing to the tab stop named 'dogtab'.

The align attribute is also allowed within the <TAB> tag in order to create left, center and right tab stops.

Tag:	<TAB>

<TAB INDENT=>

<TAB ID=>

<TAB TO=>

<TAB ALIGN=>


Netscape Extensions: Horizontal Rule

Uses:

Inserts a horizontal line across the page.  The Netscape extensions allow the user to specify the thickness, width, alignment, and shading of the line.

Size:

Allows the user to set the thickness of the horizontal rule.

Tag:	SIZE=number

Width:

The default horizontal rule is always as wide as the page.  The user can specify the desired width in pixels or percent of document width.

Tag:	 WIDTH=number|percent

Align:

Horizontal rules that are not the width of the page can be aligned next to the left margin, right margin, or centered on the page.

Tag:	ALIGN=left|right|center

NoShade:

Noshade allows the user to specify a solid bar rather than the shaded default.

Tag:	NOSHADE

Also, if you choose a Netscape align type and didn't intend to, then you can just double click anywhere in the background of the Horizontal Rule dialog box, and these values will be cleared.


Insert menu item: Head Element Tags
Insert menu item: Structure Tags

Head element tags describe the functions of the Web page to the browser software.  They are usually not seen by the person browsing the page, but are used to tell the browser software important information about the Web document.  See below for descriptions of each head element tag:

______________________________________________________________________

   Banner  -  <BANNER></BANNER>	[HTML 3.0]

   Base  -  <BASE>

   Body  -  <BODY></BODY>

   Head  -  <HEAD></HEAD>

   HTML  -  <HTML></HTML>

   IsIndex  -  <ISINDEX>

   Link  -  <LINK>	[HTML 3.0]

   NextID  -  <NEXTID>

   Title  -  <TITLE></TITLE>

______________________________________________________________________________

BANNER

This inserts the HTML tag for a banner.  Banners are static displays which remain stationary on the browser screen.  They do not scroll up or down with the Web page as it is being viewed.  Banners are good for advertising, displaying logos, making stationary image toolbars, etc.

Tag:	<BANNER> text,images,etc</BANNER>

BASE

This inserts the HTML tag to specify the name of the file in which the current document is stored.  This is useful when link references within the document do not include full pathnames.

Tag:	<BASE> filename

BODY

This inserts the HTML tag to signify the body element of the HTML document.  The body contains all the tags for the final appearance of the document when viewing it through a browser.

Tag:	<BODY> body elements(main part of document) </BODY>

HEAD

This inserts the HTML tag for the head elements such as TITLE, ISINDEX, NEXTID, LINK, and BASE.

Tag:	<HEAD> head elements </HEAD>

HTML

This inserts the HTML tag to signify the beginning and end of the HTML document.  This tag informs browsers that they are reading an HTML document and that it should be interpreted as one.

Tag:	<HTML> entire document </HTML>

ISINDEX

This inserts the HTML tag to specify a searchable index file.  In other words, it tells the browser that this document is 'searchable'.  A search prompt and input box will be placed on-screen wherever you specify <ISINDEX> in your HTML document.  Typing text-to-be-searched-for in the input box and clicking on the Search button will result in the server being queried for the specified information, and hopefully a response from the server.  Yahoo is an example of a searchable index which responds to the user with many examples of Web pages that contain the text that the user searched for..

Tag:	<ISINDEX>

LINK

This inserts the HTML tag to specify relationships to other documents.  Link has the attributes REL, REV, and HREF.

REL defines the relationship between the active document and another document

REV defines a reverse relationship between another document and the active document.

HREF links to the URL of another document.

Tag:	<LINK REV= HREF=>

NEXTID

This inserts the HTML tag to set a variable value.

Tag:	<NEXTID> variable name

TITLE

This inserts the HTML tag for the document title.  This tag is restricted to the head element discussed above, and it represents the title of the URL.  If text has been selected, choosing this menu item causes the selected text to be surrounded by the beginning and ending title tags as shown below:

Tag:	<TITLE>Selected Text</TITLE>

If no text has been selected, choosing this menu item causes the title tag to be inserted into the main text with the cursor placed in between the beginning and ending title tags so the title text will be ready to be typed area as shown below:

<TITLE>|</TITLE>


Insert menu item: Physical Style Tags

Physical style tags are used to alter/enhance the appearance of the text in a Web document.  They provide a simple way to format text characters for effective documents.  See below for descriptions of each physical style tag.

______________________________________________________________________

   Bold  -  <B></B>

   Italic  -  <I></I>

   Strikethrough  -  <S></S>	[HTML 3.0]

   Subscript  -  <SUB></SUB>	[HTML 3.0]

   Superscript  -  <SUP></SUP>	[HTML 3.0]

   Typewriter Text  -  <TT></TT>

______________________________________________________________________

BOLD

This inserts the HTML tag to make text appear bold.  Selecting the Bold menu item after selecting text will surround that text with the BOLD tag.

Tag:	<B> text </B>

ITALIC

This inserts the HTML tag to make text appear in italics.  Selecting the Italic menu item after selecting text will surround that text with the I tag.

Tag:	<I> text </I>

STRIKETHROUGH

This inserts the HTML tag to strike a line through the selected text.  Selecting the Strikethrough menu item after selecting text will surround that text with the S tag.

Tag:	<S> text </S>

SUBSCRIPT

This inserts the HTML tag to display the selected text as subscript.  Selecting the Subscript menu item after selecting text will surround that text with the SUB tag.

Tag:	<SUB> text </SUB>

SUPERSCRIPT

This inserts the HTML tag to display the selected text as superscript.  Selecting the Superscript menu item after selecting text will surround that text with the SUP tag.

Tag:	<SUP> text </SUP>

TT

This inserts the HTML tag to represent text in the typewriter font.  Selecting the Typewriter Text menu item after selecting text will surround that text with the TT tag.

Tag:	<TT> text </TT>

UNDERLINE

This inserts the HTML tag to make text appear underlined.  Selecting the Underline menu item after selecting text will surround that text with the U tag.

Tag:	<U> text </U>


Insert menu item: Logical Style Tags

Logical style tags indicate how text is to be used by the browsing software.  These tags do not indicate how the text will appear even though the appearance of the text may be different for each logical style tag.  The difference between physical and logical style tags is that all browser software will display text enhanced by physical tags in the same way.  Browsers may display text that is enhanced by logical tags in different ways even though the same tag is being used.  One browser may display text enhanced with the Emphasis tag as bold, whereas another browser may show the text with the same HTML code as a larger font.  Logical tags are used to let the browser software know what the tagged text is going to be used for.  See below for descriptions of each Logical style tag:

______________________________________________________________________

   Abbreviation  -  <ABBREV></ABBREV>	[HTML 3.0]

   Acronym  -  <ACRONYM></ACRONYM>	[HTML 3.0]

   Argument  -  <ARG></ARG>	[HTML 3.0]

   Author  -  <AU></AU>	[HTML 3.0]

   Citation  -  <CITE></CITE>

   Code  -  <CODE></CODE>

   Credit  -  <CREDIT></CREDIT>	[HTML 3.0]

   Defining Instance  -  <DFN></DFN>

   Deleted Text  -  <DEL></DEL>	[HTML 3.0]

   Emphasis  -  <EM></EM>

   Footnote  -  <FN></FN>	[HTML 3.0]

   Inline Quote  -  <Q></Q>	[HTML 3.0]

   Inserted Text  -  <INS></INS>	[HTML 3.0]

   Keyboard  -  <KBD></KBD>

   Note  -  <NOTE></NOTE>	[HTML 3.0]

   Person  -  <PERSON></PERSON>	[HTML 3.0]

   Sample  -  <SAMP></SAMP>

   Strong  -  <STRONG></STRONG>

   Variable  -  <VAR></VAR>

______________________________________________________________________

ABBREVIATION

This logical tag modifies surrounded text so it is recognized by the browser to be an abbreviation.  Selecting the Abbreviation menu item after selecting text in the current document will result in the highlighted text being surrounded by the ABBREV tag.

Tag:	<ABBREV> text </ABBREV>

ACRONYM

This logical tag modifies surrounded text so it is recognized by the browser to be an acronym.  Selecting the Acronym menu item after selecting text in the current document will result in the highlighted text being surrounded by the ACRONYM tag.

Tag:	<ACRONYM> text </ACRONYM>

ARGUMENT

Unsure if this tag has made it into the HTML 3.0 specification.

AUTHOR

This logical tag modifies surrounded text so it is recognized by the browser to be the name of an author.  Selecting the Author menu item after selecting text in the current document will result in the highlighted text being surrounded by the AU tag.

Tag:	<AU> text </AU>

CITATION

This logical tag modifies surrounded text so it is recognized by the browser to be a citation or a brief quote.  Selecting the Citation menu item after selecting text in the current document will result in the highlighted text being surrounded by the CITE tag.

Tag:	<CITE> text </CITE>

CODE

This logical tag modifies surrounded text so it is recognized by the browser to be a sample of code (usually used to display lines of computer programming code in a fixed-width font such as Courier).  Selecting the Code menu item after selecting text in the current document will result in the highlighted text being surrounded by the CODE tag.

Tag:	<CODE> text </CODE>

CREDIT

This logical tag modifies surrounded text so it is recognized by the browser to be a credit or reference to an author/artist, and is usually included WITHIN the blockquote tags.  Selecting the Credit menu item after selecting text in the current document will result in the highlighted text being surrounded by the CREDIT tag.

Tag:	<CREDIT> Person's name </CREDIT>

Enclosed within blockquote tags:

<BQ>

Quote

<CREDIT> Person's name</CREDIT>

</BQ>

DEFINING INSTANCE (Definition)

This logical tag modifies surrounded text so it is recognized by the browser to be a word/phrase that is to be defined or has been defined.  Selecting the Defining Instance menu item after selecting text in the current document will result in the highlighted text being surrounded by the DFN tag.

Tag:	<DFN> text </DFN>

DELETED TEXT

This logical tag modifies surrounded text so it is recognized by the browser to be deleted text.  This will show the user that the on-screen text is understood to be deleted from the document (also for contract documents).  Selecting the Deleted Text menu item after selecting text in the current document will result in the highlighted text being surrounded by the DEL tag.

Tag:	<DEL> text </DEL>

EMPHASIS

This inserts the HTML tag to emphasize text.  The standard emphasized text is equivalent to bolded text.  Selecting the Emphasis menu item after selecting text will surround that text with the EM tag.

Tag:	<EM> text </EM>

FOOTNOTE

This logical tag modifies surrounded text so it is recognized by the browser to be a footnote.  Selecting the Footnote menu item after selecting text in the current document will result in the highlighted text being surrounded by the FN tag.

Tag:	<FN> text </FN>

INLINE QUOTE

This logical tag modifies surrounded text so it is recognized by the browser to be a short quotation used within a paragraph.  This differs from blockquotes in that blockquotes are set apart from the rest of the text as complete paragraphs themselves.  Selecting the Inline Quote menu item after selecting text in the current document will result in the highlighted text being surrounded by the Q tag.

Tag:	<Q> text </Q>

INSERTED TEXT

This logical tag modifies surrounded text so it is recognized by the browser to be inserted text.  This is useful for showing text that has been inserted into an original document, such as a contract.  Selecting the Inserted Text menu item after selecting text in the current document will result in the highlighted text being surrounded by the INS tag.

Tag:	<INS> text </INS>

KEYBOARD

This inserts the HTML tag to display a keyboard key.  Selecting the Keyboard menu item after selecting text will surround that text with the KBD tag.

Tag:	<KBD> text </KBD>

NOTE

This logical tag modifies surrounded text so it is recognized by the browser to be an important note, warning, etc.  This is useful for showing warning messages or cautions to get a reader's attention.  Selecting the Note menu item after selecting text in the current document will result in the highlighted text being surrounded by the NOTE tag.

Tag:	<NOTE> text </NOTE>

PERSON

This logical tag modifies surrounded text so it is recognized by the browser to be the name of a person.  This is used to specify the name of a person, possibly for indexing programs, search programs, or linking to another person's site.  Selecting the Person menu item after selecting text in the current document will result in the highlighted text being surrounded by the PERSON tag.

Tag:	<PERSON> text </PERSON>

SAMP

This logical tag modifies surrounded text so it is recognized by the browser to be sample output (example text).  Selecting the Sample menu item after selecting text in the current document will result in the highlighted text being surrounded by the Samp tag.

Tag:	<SAMP> text </SAMP>

STRONG

This inserts the HTML tag to give text the stronger emphasis characteristic.  Selecting the Strong menu item after selecting text will surround that text with the STRONG tag.

Tag:	<STRONG> text </STRONG>

VAR

This logical tag modifies surrounded text so it is recognized by the browser to be the name of a variable.  Selecting the Variable menu item after selecting text in the current document will result in the highlighted text being surrounded by the VAR tag.

Tag:	<VAR> text </VAR>


Insert menu item: Attributes

The Attributes menu item has been removed from Web Weaver because it was repetetive and served little function.  Use the following definitions purely for reference about what these attributes perform.  (They are still used in Web documents, but Web Weaver no longer has a menu item for EACH attribute.)

Attributes affect and enhance many different HTML tags.  They are helpful in successful formatting and improving the look and feel of Web documents.  They also provide information to the browser software so it can interpret what the document author really wanted.  See below for descriptions of each attribute tag:

______________________________________________________________________

   Align  -  ALIGN=

   Alternate Text  -  ALT=

   Border  -  BORDER=

   Class  -  CLASS=

   Clear  -  CLEAR=

   Dingbat  -  DINGBAT=""	[HTML 3.0]

   Height  -  HEIGHT=

   ID  -  ID=""

   Image Map  -  ISMAP

   Lang  -  LANG=

   No Shade  -  NOSHADE

   No Wrap  -  NOWRAP

   Size  -  SIZE=

   Width  -  WIDTH=

______________________________________________________________________

ALIGN

Aligns text or images with respect to the position of neighboring text or images.

Tag:	ALIGN=left|right|top|texttop|middle|absmiddle|baseline|bottom|absbottom|justify

ALTERNATE TEXT

Used to replace graphical images in text-based browsers.  This is the text that you wish to appear if people are not able to see graphical images in non-graphical Web browsers.  For example, if you type [BIRD PHOTO] in this text box, then the following will appear in text based browsers when the graphics cant be displayed:

[BIRD PHOTO]

Tag:	ALT=text

BORDER

This controls the thickness of the border around displayed images and table borders.  Setting BORDER=0 will show no border.  This may be confusing when using linked images because the colored border that signifies a link will not be seen by a user.

Tag:	BORDER=Value

where value is a number.

CLASS

CLASS is used to specify a variation on a typical, standard HTML element.   This is used mainly with Style Sheets which will define how certain HTML pages will be laid out and how user specified tags will appear.  In other words, instead of specifying ten different attributes (font, color, size, etc.) for different paragraphs, a  style sheet will allow the HTML author to define different combinations of formatting and name them so that only the name of the combination needs to be used in the main HTML document.

For example,  if a Web page has a series of questions and answers, the author can define what attributes a question has in the style sheet (likewise for the answer).  The question text may have to be bold, the color red, font size 5, etc.  This can be specified in the style sheet and will be referenced in the HTML document.  Starting a paragraph with <P CLASS=QUESTION> will cause  the browser to reference the style sheet and make the text in that paragraph red, bold, and font size 5.  The HTML document will therefore be less congested and authors can reuse style sheets in all of their documents to minimize size of files and time to create them.  More than one CLASS can be specified for a single element.   These classes are separated by a period.  For example, if the author wanted rhetorical question to be underlined, then it could be specified in the style sheet and the paragraph containing the rhetorical question would begin with

<P CLASS=QUESTION.RHETORICAL>

and the text would be red, bold, font size 5, and underlined.

CLEAR

This prevents text from filling in an area between an image and a margin.

Clear=left starts the text at the next clear left margin.

Clear=right starts the text at the next clear right margin.

Clear=All starts the text at the next clear margin on both sides.

This is different from the Netscape Clear because you don't have to use a BREAK tag <BR> in order to clear text.  Clear is now included in all text element tags (paragraphs, headings, lists, etc.)

DINGBAT

This attribute indicates a symbol or image that is to mark the heading that it is associated with.  For example, symbols such as disks, disk drives, folders, audio sounds, etc. can be used to mark different headings.

<H1 DINGBAT="disk">This disk holds important files.</H1>

would access a disk image provided by the browser (not from the internet, so nothing would be downloaded over the Net) and place it at the beginning of the heading.  Also applies to unordered lists in HTML 3.0.

HEIGHT

Used to specify the height (in pixels or percentage of screen size/browser height) of a graphic image.  Specifying this value speeds up display of the graphic when a document is being loaded since the viewer won't have to wait for the image to be loaded and calculate its size.  Heights of graphics can be altered using the HEIGHT tag as well.  The original height of the image does not have to be used.

Tag:	HEIGHT=Value

where value is number of pixels.

ID

Used in place of HTML 2.0 Anchors.  It is used to replace destination Anchors which allow the user to link to specific locations within an HTML document.  The ID tag can be placed within most HTML body tags, such as text, links, and image tags.  For example,

<P ID="AnchorName">This is the second paragraph.

You can link to the second paragraph by clicking <A HREF="#AnchorName">click</A>.

Clicking on the word 'click' would bring you to the location of the ID point.

ISMAP

Used within the Image (IMG) tag to indicate that the inline image is to be an imagemap.  An imagemap is a single image that has different areas(hotspots) that can be clicked on and will take you to different Web pages depending on where you click.

Tag:	ISMAP

LANG

Lang is used to inform the browser which country-specific punctuation and notation to use for a specified text selection.  This element can be used in most of the BODY elements.

Tag:	LANG=Value

where Value is a standard ISO language abbreviation consisting of a language and a country code.

NOSHADE

Noshade allows the user to specify a solid bar horizontal rule rather than the shaded default.

Tag:	NOSHADE

NOWRAP

This tells the browser not to automatically wrap the text to the next line.  Instead the text will remain on one line.

Tag:	NOWRAP

SIZE

Allows the user to set the thickness of the horizontal rule(Netscape).

Tag:	SIZE=number

WIDTH

Used to specify the width (in pixels or percentage of screen size/browser width) of a graphic image.  Specifying this value speeds up display of the graphic when a document is being loaded since the viewer won't have to wait for the image to be loaded and calculate its size.  Widths of graphics can be altered using the HEIGHT tag as well.  The original width of the image does not have to be used.

Tag:	WIDTH=Value

where value is number of pixels.


Insert menu item: Math Tags

The Math tag menu item has been removed from Web Weaver because math tags have not been released in the latest specification so most browsers do not support them.  Use the following definitions purely for reference about what these attributes perform.  The Math tags will be integrated back into Web Weaver when thy have been fully defined by the World Wide Web Consortium.

Math tags are essential in creating technical Web documents.  They provide a way to represent different mathematical expressions and variables which broaden the scope of the World Wide Web.  Currently, Math tags are not supported by most browsers.  See below for descriptions of each element tag:

______________________________________________________________________

   Above  -  <ABOVE></ABOVE>	[HTML 3.0]

   Array  -  <ARRAY></ARRAY>	[HTML 3.0]

   Atop  -  <ATOP>	[HTML 3.0]

   Below  -  <BELOW></BELOW>	[HTML 3.0]

   Box  -  <BOX></BOX> or {}	[HTML 3.0]

   Choose  -  <CHOOSE></CHOOSE>	[HTML 3.0]

   Item  -  <ITEM>	[HTML 3.0]

   Math  -  <MATH></MATH>	[HTML 3.0]

   Over  -  <OVER>	[HTML 3.0]

   Root  -  <ROOT>#<OF></ROOT>	[HTML 3.0]

   Row  -  <ROW>	[HTML 3.0]

   Square Root  -  <SQRT></SQRT>	[HTML 3.0]

   Subscript  -  _ _ or <SUB></SUB>	[HTML 3.0]

   Superscript  -  ^ ^ or <SUP></SUP>	[HTML 3.0]

   Text  -  <TEXT></TEXT>	[HTML 3.0]

   Upright Font  -  <T></T>	[HTML 3.0]

   Upright Bold Font  -  <BT></BT>	[HTML 3.0]

______________________________________________________________________

ABOVE

This HTML tag identifies the text it surrounds as the numerator of an expression (as in a fraction).

Tag:	<ABOVE>math expression</ABOVE>

ARRAY

This HTML tag is used to form an array or matrix of items,variables, or expressions.  All elements/items of the array must be surrounded by these beginning and ending ARRAY tags.

Tag:	<ARRAY>array rows and items</ARRAY>

Normally the code for an array with rows and items will appear like the following:

Tag:	<ARRAY>

<ROW><ITEM>item<ITEM>item<ITEM>item

<ROW><ITEM>item<ITEM>item<ITEM>item

<ROW><ITEM>item<ITEM>item<ITEM>item

</ARRAY>

ATOP

Used between math expressions.  This is useful for specifying that an expression is to be placed above another expression, but no line is to be drawn between them (unlike a fraction).  See the <OVER> tag.

Tag:	math expression<ATOP>math expression

BELOW

This HTML tag identifies the text it surrounds as the denominator of an expression (as in a fraction).

Tag:	<BELOW>math expression</BELOW>

BOX

This is used to group math expressions together in order to include them in operations and exclude others.  Notice that there are two different HTML tags that are used to 'box' or group math expressions together.  Brackets can also be used.  These brackets are invisible on-screen when browsing.  They are particularly useful when trying to specify which math variables/symbols are included in a numerator and which are included in the are included in the denominator.

Tag:	<BOX>math expression</BOX>

Also,	{}

For example,   5 * <BOX> x <OVER> y </BOX> +2

will result in 5* x/y +2   but there will be no brackets/parentheses visible on-screen.

CHOOSE

This attribute encloses math expressions within parentheses (on-screen).

Tag:	<CHOOSE>math expression</CHOOSE>

ITEM

This HTML tag denotes an item within a row within an array.

Tag:	<ITEM>array item/math expression

MATH

The <MATH> tags surround all math formulas, expressions, etc.  Browsers need math expressions to be surrounded by this tag in order to interpret the code as math expressions.

Tag:	<MATH>all math expressions</MATH>

OVER

Used between math expressions.  This is useful for specifying that an expression is to be placed above another expression with a line drawn between them, like in a fraction.  See the <ATOP> code.

Tag:	math expression<OVER>math expression

ROOT

This tag specifies the root of the expression following it taken to the nth degree.  The nth degree is specified where the number sign lies between the <ROOT> and the <OF> in the following tag:

Tag:	<ROOT>#<OF>math expression</ROOT>

For example, the cube root of 1-x will be tagged like the following:

<ROOT>3<OF>1-x</ROOT>

ROW

This HTML code denotes a row within an array(matrix).

Tag:	<ROW>array items

SQUARE ROOT

The text surrounded by this tag is displayed as the square root of the enclosed expression.

Tag:	<SQRT>math expression</SQRT>

For example, the square root of 1+x will be tagged like the following:

<SQRT>1+x</SQRT>

SUBSCRIPT

Used to represent subscripted characters.  Also use the underscore  _ _ as an equivalent HTML tag.  For example, x<SUB>0</SUB> and x_0_ both represent x sub zero.

Tag:	<SUB>math expression</SUB>

Also:	_math expression_

SUPERSCRIPT

Used to represent superscripted characters.  Also use the caret   ^ ^ as an equivalent HTML tag.  For example, x<SUP>2</SUP> and x^2^ both represent x squared.

Tag:	<SUP>math expression</SUP>

Also:	^math expression^

TEXT

Used to include text within a math element.

Tag:	<TEXT>text</TEXT>

UPRIGHT FONT

Used to change the appearance/formatting of text, symbols, and variables within math elements.  Upright font is a 'non-italic' font.  Variables are usually rendered in an italic font.

Tag:	<T>math expression</T>

UPRIGHT BOLD FONT

Used to change the appearance/formatting of text, symbols, and variables within math elements.  Upright font is a 'non-italic' font.  This tag changes the formatting of text/symbols within math elements to an upright bold font(non-italic).

Tag:	<BT>math expression</BT>


Tables

Tables are important for presenting tabulated data or laying out advanced Web pages.  They allow the designer more control over where objects, images, and text are placed on the Web page.

The following dialog box appears when you choose the Table Maker menu item:

The first step in creating a table is to specify the number of rows and columns in the table.  You can change the size of the table either using this dialog box or later on when you are specifying the cell contents in the last step.  Be sure not to have extra blank rows and columns in your table unless you want blank rows/columns represented on your Web page.  If you click NEXT without entering an initial table size, the default of 10 rows by 10 columns is used.

Click the NEXT button and the following dialog box will appear:

STEP 2

The table caption and border properties can be set in this step of the Table maker.  They are optional properties, so you don't have to change them.  The default settings are

'no table caption' and 'no table border'.

Table Caption:  If you wish to title your table so people will know what the contents of the table are regarding, the caption is one way of doing this.  You can choose to have your table caption placed either at the top of the table or at the bottom of (underneath) the table.  Choose the appropriate alignment to position the caption in one of these two positions.

Border:  You can specify the width of the border which surrounds each cell and the entire table.  The lowest value of the table border size is 0.  No border will be shown if BORDER=0.

Click the NEXT button and the following dialog box will appear:

STEP 3

Table dimensions, cell spacing and cell padding can be set using this step.  These properties are optional and do not need to be set.  The defaults are cell spacing=0 and cell padding=0.

Table Width:  This indicates the width of the table.  The units of table width can be specified in ens, pixels, or relative to the current column of text(percentage of screen width).  Web Weaver assumes you'll be using relative percentage of the current text column.  If you need to specify the width in ens or pixels you can manually manipulate the code.

.

Table Height:  This indicates the height of the table.  The units of table height can be specified in ens, pixels, or relative to the current column of text(percentage of screen height).  Web Weaver assumes you'll be using relative percentage of the current text column.  If you need to specify the height in ens or pixels you can manually manipulate the code.

Cell Spacing:  This feature allows you to set the spacing between each cell.  If Cell Spacing is equal to 0 then there will be no space (or gap) between the column or row lines.  If the Cell Spacing is set to something other than 0, then each cell will be spaced that distance away from the cells surrounding it.

Cell Padding:  This feature allows you to set the padding between the cells and their contents.  If Cell Padding is equal to 0 then there will be no space (or gap) between the cell walls and the cell contents(text/object).  If the Cell Padding is set to something other than 0, then each cell wall will be spaced that distance away from the cell's contents.

Click the NEXT button and the following dialog box will appear:

STEP 4

This step allows you to set the table colors including the border colors and background colors.  Individual cell colors can be set using the next step.

TABLE COLORS

Background Color:  By selecting a color from the color picker box, the user can set the background color for the entire table.

Border Color:  By selecting a color from the color picker box, the user can set the border color for the entire table.  This must be used with the Border attribute.

BorderColorLight:  By selecting a color from the color picker box, the user can set the independent border color control over one of the two colors used to create a 3D border.  Opposite of BorederColorDark.  This must be used with the Border attribute.

BorderColorDark:  By selecting a color from the color picker box, the user can set the independent border color control over one of the two colors used to create a 3D border.  Opposite of BorederColorLight.  This must be used with the Border attribute.

When you have finished setting the Table Color Properties, click the NEXT button and the Cell Properties dialog box will pop up.  This box allows the user to enter in contents and properties for each cell in the table.  The Cell Properties dialog box is shown below.

Step 1.

The initial highlighted cell in the table is row 1, column 1 (you can use the mouse or arrow keys to move around the table).  Select the cell you wish to enter information into.  Start typing the content you wish to appear in this cell.

You will notice the input box marked 'Cell contents'.  It contains the contents of the current cell.  You can always return to another cell and edit it's contents in the 'Cell contents' input box.

You can also browse for an image and Web Weaver will insert the HTML image code with the chosen image filename into the selected cell.  Once you have entered the text/image/HTML code in the text box go on to step 2.

Step 2.

Cell Properties enhance each and every cell of the table, and affect how the text/object inside each cell is aligned.  You can enter Cell Properties for each cell item that you insert into the table or you can select more than one cell and apply the properties to those cells.  Let's discuss the different properties so you know what each one does.

Column Span:  This is another phrase for cell width.  If you wish the text/object in a cell to be two cells wide as opposed to the other cells in the table which are one cell wide, then choose Column Span to be 2 columns wide.  Unlike most spreadsheets, the corresponding cell below the cell with Column Span =2 will only be 1 cell wide unless you specify that it, too, should have a Column Span of 2.

Row Span:  This is another phrase for cell height.  If you wish the text/object in a cell to be two cells high as opposed to the other cells in the table which are one cell high, then choose Row Span to be 2 rows wide.  Unlike most spreadsheets, the corresponding cell adjacent to the cell with Row Span =2 will only be 1 cell high unless you specify that it, too, should have a Row Span of 2.

Horizontal Alignment:	  You can specify whether you wish your text/object to be aligned to the left, to the right or in the center of each cell.

Vertical Alignment:  You can specify whether you wish your text/object to be aligned to the top, to the bottom or in the middle of each cell.

Table Header:  Making a cell's contents into a table header will merely give it a boldface font so it appears to the person browsing the page that this cell is a heading describing the cells below it or in the same row to the right of it.

CELL COLORS:

Background Color:  By selecting a color from the color picker box, the user can set the background color for a specific cell.

Border Color:  By selecting a color from the color picker box, the user can set the border color for a specific cell.  This must be used with the Border attribute.

BorderColorLight:  By selecting a color from the color picker box, the user can set the independent border color control over one of the two colors used to create a 3D border.  Opposite of BorederColorDark.  This must be used with the Border attribute.

BorderColorDark:  By selecting a color from the color picker box, the user can set the independent border color control over one of the two colors used to create a 3D border.  Opposite of BorederColorLight.  This must be used with the Border attribute.

Font face:  This sets the Font of the selected cell(s).

Font Size:  This sets the Font size of the selected cell(s).

Font color:  This sets the font color of the selected cell(s).

After you enter in the appropriate Cell Properties for the selected cell(s) you can move to other cells to enter their properties.  The cell properties of each cell are retained.

Step 3.

Once you have finished entering in all data into each cell in the table, you can click on the 'Done' button.  This will insert the contents of the Table Maker's table along with the Table Properties into your HTML document.  It's that easy!!

So, what do all of these HTML tags mean??  Well, let's dissect some of it.  The Cell and Table Properties are pretty self explanatory because I just explained what they mean, but the other table tags need to be defined.  After you input your table into your HTML document, the code should resemble something like this(I've included all the possible tags to show you where they go):

<TABLE BORDER=4 CELLSPACING=2 CELLPADDING=5 WIDTH="70%" HEIGHT="30%">

<CAPTION ALIGN=top>Example Flow Chart</CAPTION>

     <TR>

          <TH ROWSPAN=2 VALIGN=Top> Item 1</TH>

          <TH VALIGN=Top> Item 2</TH>

     </TR>

     <TR>

          <TD ALIGN=Left > Item 3</TD>

     </TR>

</TABLE>

The above example is a table containing three cells.  The HTML code for beginning a table is the table start tag <TABLE>.

  The border size is equal to 4.  The distance between each cell(cell spacing) is equal to 2.  The distance between the cell walls and the cell contents(cell padding) is equal to 5.  The width of the table is equal to 70% of the screen width, and the table height is 30% of the screen height.  The table caption is 'Example Flow Chart' and it is positioned at the top of the table.

The first row begins with the <TR> tag and ends with the </TR> tag.  All the HTML code for the cells in each row must be enclosed with the beginning and ending Row tags <TR></TR>.  The first row item (row 1, column 1) is a table header because of the <TH></TH> tags.  Its rowspan (cell height) is equal to 2 rows and them contents 'Item 1' are aligned to the top of the cell.  The second row item (row 1,column 2) is also a table header, has a single rowspan, and the contents 'Item 2' are also aligned to the top of the cell.  The ending table row tag </TR> signifies the end of the first row, so we will move on to the second row.

We already know that the first cell in row 1 had a rowspan of 2 rows, so the first cell(row 2, column 1) in the second row is used by the first cell in row 1.  Therefore, there is only one cell item in row 2, and it is located in row 2, column 2.  The second row starts with the beginning row tag <TR> and contains a table data tag <TD></TD> to signify normal table data in this cell (not a table header, that is).  The contents of this cell 'Item 3' are aligned to the left of the cell.  The ending table data tag </TD> signifies the end of that cell's contents, and the ending table row tag </TR> signifies the end of that row.  The HTML code for a table ends with the ending table tag </TABLE>.

If you want further information about the layout of HTML 3.0 tables, check out the great site on the Helpful Web Sites page entitled: The Table Sampler at http://home.mcom.com/assist/net_sites/tables.html


Window Menu

Cascade

This lines the opened text windows in a cascading fashion.

Tile Horizontally

This tiles the opened text windows one on top of the other in a horizontal fashion for easier editing.

Tile Vertically

This tiles the opened text windows vertically next to each other (standing up) for easier editing.

Arrange Icons

This arranges any minimized text window icons on the bottom of the screen.

Close All

This will close all of the open documents in Web Weaver.  If you have modified any document in any way, Web Weaver will prompt you if you wish to save the changes.

Window List

This is a list of the currently opened text windows.  The currently highlighted text window is shown checked on the window list.


Help Menu

The Help pull-down menu includes the following items:

Contents

Choosing the Contents menu item displays the Web Weaver help file which you are reading right now..

Web Wizard

Web Wizard provides an easy way to learn the basics of HTML document authoring with an easy to use, step by step process.

Tutorial

The Web Weaver tutorial provides a more in-depth look at how to write HTML documents.  Discussion of HTML tag formats and the basic elements of a Web page make it easy to learn HTML.

About

This is the well-known 'About' screen of every application.  It displays some info on where to reach me.