Web Weaver Help File

Copyright 1995-99, McWeb Software

All Rights Reserved.

http://www.mcwebsoftware.com

HTML Help and ordering info

  What is Web Weaver?

  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
Web Weaver/J-Perk Order Form

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

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

Call in your order at (617) 437-9393

Fax in your order at (617) 277-0676

If ordering with cash, check or money order:

Please fill out the following registration form, enclose payment in US dollars (plus shipping & handling) in form of check or money order, and send to the address at the bottom of this page.  If you order Web Weaver and J-Perk together, then a discount applies.

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 98 for Windows 95/98/NT	______

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

with spellchecker &  Site Management/Analysis tool

____@ $29.95 each	J-Perk for Windows 95/98/NT

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

____@ $44.95 each	Web Weaver 98 and J-Perk bundle	______

____@ $49.95 each	Web Weaver 98 Gold and J-Perk bundle	______

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

____@ $4.95 each	Upgrade to Web Weaver Gold if you are

an existing Web Weaver (standard version) user (must

provide name and email address you originally ordered with)______

____@ $10.00 each	Upgrade to Web Weaver 98 from any previous

version of Web Weaver (must provide name and email

address you originally ordered with)	______

Add $8.50 Shipping & Handling if shipped on CD-ROM via postal "snail" mail	______

TOTAL	_________

Pick shipping method: 	CD-ROM___	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 02446

USA

or fax it to us with your credit card information at (617) 277-0676.

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-1999


What's New in Web Weaver!

What's New! in version 98.02

- A bug with the Site Mongrel QuickView window is now fixed.  The SAVE button in QuickView was not functioning properly.

- The print function is now working correctly.  It no longer prints blank pages before printing the document.

- You can now specify the number of Recently Used files to be displayed on the File menu.  You can display between 1 and 10 recently used files.

- Web Weaver can now automatically open the most recently used file when it starts.

- The Help | Contents menu item now works in Windows NT.

- Site Mongrel has some additional features.  Doubleclicking on a broken hyperlink or image will result in the file being opened and the error will be highlighted.

- You can override the default browser setting in Preferences and specify which browser you wish to use for browser #1.

- The Table wizard has been updated.  It warns the user if resizing the table will result in  losing data.  Also, the preview button is now fixed.

The HyperLink dialog box now offers some special effects items.

What's New! in version 98

  Web Weaver now allows you to preview images in the Image browser and in other dialog boxes where Web Weaver requires you to select an image.

  The Form Wizard has been enhanced.

  An Imagemap Wizard has been added for creating Client-side imagemaps.

  The Page Properties, Java applet and Image dialog boxes have been changed to tabbed dialog boxes for more organized entry.

  The advanced image options (such as video and imagemap settings) are now part of the Image dialog box.

  The File List is now re-sizable.  It can also be dragged to the left side of the screen or hidden.

  A spellcheck button and a Find button have been added to the button bar.

  You can now open files from the Web by selecting the ‘File | Open file from the Web’ menu item.

  The Save button now displays if the open document is unsaved.  If it is saved, it will display as a grayed out button.  If the document is not saved, the button will appear as normal.

  Web Weaver now advises you to save your untitled document if you attempt to insert images, objects or any other item that needs to have a relative pathname specified.

  The Horizontal Rule menu item has been moved to the Insert menu and has been renamed Horizontal Line.

  The MailTo menu item has been moved to the Insert menu and has been renamed Email Link.

  The Imagemap Wizard has been moved to the Insert menu.

  The Embedded Object menu item has been renamed Sound/Multimedia Object.

  The Format | Character menu item has been renamed to the Format | Text menu item.

  The View | File List menu item has been added to allow the user to hide the File List.

  The View page with Web browser menu items have been moved to the View menu.

  The ‘Move to Next document’ and ‘Move to Previous document’ menu items have been added to the Window menu.  They allow you to move between open documents in Web Weaver.

  The ‘Submit your Web page to search engines’ menu item has been added.  This links you to the McWeb Software Web site and allows you to submit your Web page to popular search engines.

  The Help | About dialog box now has the capability to check if you are using the current version of Web Weaver.  You must be connected to the Internet to use this feature.

  The Insert | Date and Time feature has been enhanced to allow you to set the Date/Time format.

  CAPSLOCK and INSERT/OVERWRITE key indicators have been added to Web Weaver’s status bar.

  The <DIV></DIV> and <SPAN></SPAN> tags have been added to the Insert | Paragraph/Text Elements menu item.

  Buttons for browsing Internet Explorer Favorites were added to appropriate dialog boxes such as the HyperLink dialog box.  The button allows you to specify a URL by searching through your Internet Explorer Favorites.

  The Format Text dialog box now has a preview section which allows you to see what the formatted text will look like before inserting it.

  The Java applet dialog box has been enhanced to include the setting of applet parameters.

  The Preferences dialog box has more customizable settings and is organized a little differently.  The new settings are as follows:

Show File List

Align File List on left side

Use ending </P> tag when inserting <P>

Use <DIV Align=> instead of <P Align=> tag

Automatically insert carriage return when <BR> tag is inserted

Also, menu type settings have been renamed from Beginner, Intermediate, and Advanced to Minimal, Typical, and Maximum.

  The ‘Web page statistics’ function has been added to the Gold version of Web Weaver.  This allows you to monitor the visitor information on your Web page.  Web Weaver collects the data and then generates a report of graphs that shows:

Number of visits to your Web page

Breakdown of visits by month

Breakdown of visits by day

Breakdown of visits by hour

Breakdown of visits by Web browser

Breakdown of visits by Operating system

Breakdown of visits by domain name

  Global Find and Replace has been enhanced.  It can now handle documents larger than 64K.  It will not replace text in a document that is already open in Web Weaver.  You can open a document in Web Weaver from the Global Find and Replace dialog box after performing a Replace.  You can open a document after performing a Find and Web Weaver will highlight each instance of the Find text.  Javascript files and CGI files can now be searched and replaced.

  Site Mongrel Site Manager has been enhanced:

The main window is now resizable.

The Site Mongrel File List is resizable.

QuickView now allows you to preview images.

Documents can be opened in Web Weaver from Site Mongrel.

The status of Site Mongrel’s operations are displayed in the Status bar at the bottom of the screen.

Site Monrel now checks anchors.

  Web Weaver has the capability to determine if a document is already open and not allow you to open the same document again.

What's New! in version 97h (version 97.6)

  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.

  A "Repeat Last Command" function has been added for inserting HTML

tags repeatedly by pressing the F9 key.

  The ability to specify using uppercase or lowercase HTML tags in

documents is now available.

  The Global Replace function has been enhanced to become the Global Find and Replace function which provides the user with a report (both

on-screen and written to a text file) displaying the number of times the

text was found or replaced in selected documents.

  The Line number displaying which line the cursor is presently on has

been added to Web Weaver's main screen.

  The system's default browser is automatically found when the "Link

to browser #1" button is pushed and a browser hasn't been assigned to it.

  An "Edit with Web Weaver" menu item has been added to provide a quick way to open a document in Web Weaver from Windows Explorer.

  The ability to change the HTML tag syntax colors has been added.

  Several new preference settings exist including:

Specify if you want New documents to start with a blank page;

Specify if you want to open a new document when Web Weaver begins;

The ability to change the HTML tag syntax colors has been added;

Specify if you want the Page Properties dialog box to automatically appear when starting a new document;

Specify if you wish to cascade documents in the Web Weaver window as you open them.

  The custom buttons can now be customized to have starting and ending tags.

  An Import/Export to Mac file format has been added to the File menu.

  New file types have been added to the File Open and Save functions.  Examples are: Server side include files (*.shtml), CGI scripts (*.cgi and

*.pl), and Cold Fusion files (*.cfm)

  Site Mongrel has been enhanced to handle root directory names.

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 (Never used)

<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 (Never used)

<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 in Web Weaver 98

- The KERNEL32.DLL error that was causing Web Weaver to crash has been fixed in this version.

- Global Find and Replace used to save over a file even if it didn’t find the text it was looking for in that file.  This would result in the Time/Date stamp of the file to be updated.  It has been fixed.

- Global Find and Replace can open documents larger than 64K.

Bug Fixes/Improvements since Web Weaver 97.5:

- The missing "browse" button in the Preferences dialog box for selecting

browser #1 has been replaced.

- Bugs in the Form Wizard and form elements have been fixed.

- The special characters function has been fixed.

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!

Inserting 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.

HyperLinked 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

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 all types of information.  Products, services, interests, and every type of information can be found on the Web.  The great thing about the Web is that people can access this information from anywhere in the world.

The Web is made up of millions of "Web sites" and billions of "Web pages".  A Web site is a collection of Web pages, and Web pages are what we see and read when we "surf" the Web.  For example, the Microsoft Web site contains thousands of Web pages that give information about 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 character, 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, 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 a Title Bar, Menu Bar, Button Bar, File List (windows 95/NT version only), a Document Window, and a Status Bar.  These elements are shown in the picture below.

The Menu Bar

The Menu Bar contains all of Web Weaver's commands that help you create HTML documents.  These commands are broken down into the following categories:

Option	Description
File	The File menu includes commands for opening, closing, saving, printing, importing and exporting files.  It also contains commands that allow you to insert a file into the current file and lists the four most recently opened files so that you can quickly open them.
Edit	The Edit menu includes commands that allow you to modify your document.  These commands allow you to cut, copy and paste text within your document.  If you make a mistake you can Undo the last edit that you made to the document.  You can also modify existing HTML tags in the document, find and replace text within the document.
Insert	The Insert menu is the central menu you use for creating your HTML document.  It allows you to insert all supported HTML tags into your document such as: Structure tags, Paragraph tags, Physical Style tags, Logical Style tags, Special HTML characters, Hyperlinks, Images and many others.  It also gives you access to commands for starting wizards to help you create HTML Forms, Tables and Frames.
Format	The Format menu includes commands for changing the look and style of the text in the HTML document (when it is displayed in a browser).  The font style, size, color and physical style can be set using this command.
View	The View menu includes commands for setting Web Weaver's preferences and for viewing the file properties of the current HTML document that is open in Web Weaver.
HTML Extensions	The HTML Extensions menu includes commands for inserting Netscape and Internet Explorer-specific HTML tags that are not included in the HTML specification.  These are proprietary HTML tags recommended by Netscape and Microsoft which are supported by most browsers (but not all).
Tools	The Tools menu includes commands for accessing Web Weaver's advanced functions and common applications.  You can access Web Weaver's HTML Stripper, Spell checker and Site management tool (Gold version only), ReColorize the HTML syntax in Web Weaver's Document window, preview the current HTML document with 2 browsers, and open other applications such as an FTP client and any Graphics application.
Window	The Window menu includes commands that allow you to rearrange icons and windows.  It also lists the document windows that are open and includes a command that allows you to close all document windows at once.
Help	The Help menu includes commands that open Web Weaver's main help file.  Also, there are tutorials, how-to's and a beginner's wizard that can be accessed from this menu.

The File List

Web Weaver for Windows 95/NT includes a File List on the right side of the Web Weaver window.  The File List is used for:

- Opening HTML documents in Web Weaver by doubleclicking on the filename

- Inserting a hyperlink in the current document by dragging and dropping the selected file in the File List

- Performing file operations such as renaming, copying, moving and deleting files (right mouse-click event)

- Checking links within the selected file (right mouse-click event)

- Viewing File properties of the selected file (right mouse-click event)

The Status Bar

Web Weaver’s status bar at the bottom of the Web Weaver window notifies you of any activity going on in Web Weaver.  It also lists the current time, the size of the current document (in bytes), the line number of the current cursor location, and notifies you if CAPS LOCK or the Insert/overwrite function are enabled.

Doubleclicking on the time display in the Status Bar will insert the current date and time into the current document.

Right mouse-button capabilities

Using your right mouse-button in Web Weaver is very useful.  You can click the right-mouse button in the following areas of the Web Weaver window and perform the following functions with the pop-up menus:

Web Weaver window area	Function
Document window	Click the right mouse-button and the Edit pop-up menu will appear allowing you to perform the same commands that are found in the Edit menu.
File List	Click the right-mouse button and the pop-up menu will allow you to choose commands for modifying the files in the File List.  Rename, copy, move, delete, file properties, check links, and open files are available commands in this menu.   Doubleclick an HTML file in the File List and Web Weaver will open it. Doubleclick or drag’n’drop an image in the File List and it will insert the image  HTML code into your Web page.
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 - 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.

Tools - 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 | 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 | 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.

Creating a Link (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' pull-down menu and choose the 'HyperLink' menu item (or click on the hypertext toolbar button [image]).  This will open the 'Insert HyperLink' dialog box shown below.

3. In the box labeled "Enter Hyperlink text:", type the text you wish to be hypertext in your Web page (HTML document).  For our example, this would be the phrase "Click here to go to my page"

4. In the box labeled "Enter URL of Web page or file to link to:" type the name (URL) of the Web page to link to (http://www.mcwebsoftware.com/mypage.html, in our example).  The Advanced attributes can be left blank.

5. Click the OK button and the HTML code for a hyperlink is inserted into your Web page.

(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=" http://www.mcwebsoftware.com/mypage.html ">Click here to go to my page</A>

Inserting an Image into your Web page

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

1. First save your Web page.  Give it a filename and save it onto your computer’s hard drive.  Place your cursor in the location where you want to insert the image.

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

3. In the box labeled "Enter filename of image:", type the filename of the image you wish to insert into your Web page.  For our example, this would be the filename "at_work.gif."  This is the only required input field in this dialog box.  The others fields are all optional attributes, so we won't discuss these at this moment.

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 box.  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 box.  You can also browse the image file list on the lower half of the Image dialog box to select an image.

Caution: The browser might not be able to find the image when it opens the Web page if you inserted an image before saving the Web page for the first time.  If you didn’t save your Web page before inserting an image your image may have to reside in the same directory/folder as the Web page.  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 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 to URL” tab at the top of the Insert Image dialog box.  In the box type the name (URL) of the Web page to link to (construction.html, in this example).

5. Finally, click the OK button and the HTML code for an inline image is inserted into your Web document. When viewing your Web page in a Web browser, the image will be displayed.  If a user clicks on the linked image, their browser will load construction.html.

Note: In the Windows 95/98/NT version of Web Weaver you can easily insert an image by finding it in the 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="at_work.gif">

or if it's hyperlinked:

<A HREF="construction.html"> <IMG SRC="at_work.gif"></A>

Setting Page Properties of your Web page

Let's jazz up your Web page a little.  Right now it's pretty boring because it has a gray or white 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' 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 main title.  In the box 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 exciting.  Click on the ‘Colors’ tab in the Page Properties dialog box.

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.  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 Preview window will change to the color that you have selected 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, the colors will be displayed in the Preview window so that you can see if the colors work well together.  Some colors such as dark red text and a dark blue background won'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. Click the ‘Background Image’ tab and the following screen will appear:

In the box labeled "Enter graphic filename for background:", type the filename of the image you wish to be your Web page background image (or browse for the image using the browse button).  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.

WebReference

http://www.webreference.com

WebMonkey

http://www.webmonkey.com

HTML Goodies

http://www.htmlgoodies.com

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-In 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 98 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

F9	Repeat Last Command

Cntrl-B	Bold

Cntrl-I	Italic

Cntrl-U	Underline

Cntrl-F1	Subscript tag

Shift-Cntrl-F1	Superscript tag

Cntrl-E	Center tag <CENTER></CENTER>

Cntrl-K	Line Break tag <BR>

Cntrl-L	List item tag <LI>

Cntrl-H	Horizontal Rule <HR>

Cntrl-O	File Open

Cntrl-P	Paragraph <P>

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

Cntrl-A	Select All


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


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


Menu Bar Commands

These are Web Weaver's main menu items:

   File Menu

   Edit Menu

   Insert Menu

   Format Menu

   View Menu

   HTML Extensions Menu

   Tools Menu

   Window Menu

   Help Menu


File Menu

The File Menu contains commands for file operations such as opening files, saving files and printing files.

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.

Open file from the Web

This calls the ‘Open file from the Web’ dialog box and allows you to open a Web page from the Internet.  You must type the full URL of the Web page including the “http://”.

Close

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

Insert File

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

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).

Import/Export - Open and Save As Mac format

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

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.

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.


Opening Files from the Web

This menu item allows you to open Web pages in Web Weaver by downloading them from the Web.  Selecting this menu item displays the following dialog box:

In the box labeled ‘Enter Web page URL’ type the URL of the Web page that you want to open in Web Weaver.  It is advisable that you preface the URL with ‘http://’.  For example, type ‘http://www.mcwebsoftware.com/index.html’ rather than ‘www.mcwebsoftware.com/index.html’.

You can also select a Web page from your list of Internet Explorer Favorites by clicking on the button next to the box labeled ‘Enter Web page URL’.

When you are ready to download the page, click the OK button.

Note: You must be connected to the Internet via modem or other connection in order to download a page from the Web.  If you are not connected to the Internet when you click the OK button, Windows should prompt you to connect.

If Web Weaver can’t connect to the specified Web page then an error will be generated and the operation will timeout in 30 seconds.


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

The Edit Menu contains commands for editing the HTML document such as cutting, copying and pasting text as well as finding and replacing text in the HTML document.

Undo

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

Edit Tag

Placing your cursor inside an HTML tag in your document and selecting this menu item results in Web Weaver displaying the dialog box associated with the selected HTML tag so that you can edit the existing attributes of that tag.  Not all tags are supported by this command.

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 HTML 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 Find and Replace

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


Global Find and Replace

Global Find and Replace is the perfect tool for finding and/or replacing text in multiple HTML documents.  If you have a large number of Web pages in your Web site that need to have the same string of text replaced in all of them, then this is the tool to use.

The Global Find and Replace dialog box is shown below:

To Find text in multiple documents (windows 95 version only):

- Type the text you wish to find into the first input box labeled 'Find this text' and select the files to search from the file list box on the right-hand side of the Global Find and Replace dialog box (to select more than one file, use the Shift or CTRL key while picking the files with your mouse).

- Click the Find button and Web Weaver will search the selected files for the text.

- To view the number of found instances in each file, click on the 'Results' tab..  The following screen will be displayed, showing you the number of instances found in each document.

Doubleclick a file listed in the Results section to open it and Web Weaver will highlight all instances of the ‘Find’ text.

To Replace Text in multiple documents:

- Type the text you wish to find into the first input box labeled 'Find this text'.

- Type the replacement text into the second input box labeled 'Replace with this text'.

- Select the files to search/replace from the file list box on the right-hand side of the dialog box (to select more than one file, use the Shift or CTRL key while picking the files with your mouse).

- Click the Replace button and Web Weaver will replace the text in the selected files.  A report of the number of replacements is generated in the form of a text file named 'Global Replace Results.txt' and it can be found in the folder(directory) where the replacements were made.

You can also view the results of replaced instances by clicking on the 'Results' tab.

Doubleclick a file listed in the Results section to open it.

Suggestion:

You can narrow your searches by selecting the 'Match Case' checkbox.  This will cause Web Weaver to find only the exact match of the 'Find' text (case-sensitive).


Insert Menu

   Page Properties

   Structure Tags

   Paragraph/Text Elements

   Logical Style Tags

   Physical Style Tags

   Special Characters

   Anchor/Bookmark

   Email Link

   HyperLink

   Horizontal Line <HR>

   Image

   Sound/Multimedia Object

   Lists

   Table

   Form Wizard

   Frame Wizard

   Image Map Wizard

   Table Wizard

   Date and Time


Date and Time
Inserting Date and Time

Uses:

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

Selecting the Date and Time menu item displays the following dialog box:

In the box labeled ‘Text to precede Date/Time’ type text you wish to appear on your Web page that will come before the current date and time.  For example, type “This Web page was created on” and depending on the date/time format selected the following text will appear on your Web page:

This Web page was created on Monday, May 28, 1998.

In the Date/Time Format box, select the appearance of the date and time to be entered.  The following date/time formats are supported:

Monday, May 28, 1998

Monday, May 28, 1998

5/28/98

28/5/98

May 28, 1998

28 May 1998

May 1998

10:30 PM

5/28/98 10:30 PM


Setting Page Properties

Uses:

The Page Properties dialog box allows you to change the following properties of your Web page:

- Web page title,

- Text and background colors,

- Background image(wallpaper),

- Top and left margins, and

- META tags

HTML Tag:

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

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

WEB PAGE TITLE:

The document title is used by the browser to identify the main title of the HTML document (Web page).  Usually, the Web page title is displayed in the titlebar of the Web browser's window.

WEB PAGE COLORS:

Select the ‘Colors’ tab and the following input boxes will appear:

If you know the RGB color codes, they can be entered into the text boxes using the keyboard.  Otherwise, click the ‘Select’ color boxes and the color palette will appear.  You can then choose from a wide range of colors.

BGCOLOR=###### is the Web page background color.

TEXT=###### is the color of the normal Web page 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).

or select the color scheme from another Web page by clicking the 'Another Web Page' button.

BACKGROUND IMAGE(WALLPAPER):

Select the ‘Background Image’ tab and the following input boxes will appear:

You can browse for a background bitmap file or type the filename into the text input box.  You can make the background wallpaper image into a static watermark by clicking on the watermark check box.  The background image will then remain stationary in your Web page while text and images will scroll over the image.  The code BGPROPERTIES=FIXED will fix the background image as a watermark.  This is an Internet Explorer extension only.

MARGINS:

Select the ‘Margins’ tab and the following input boxes will appear:

Left Margin (Internet Explorer only):

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

Top Margin (Internet Explorer only):

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

META TAGS

Clicking on the OK button will insert the HTML code for your Page Properties.  The location of your cursor in the document is not important.  Web Weaver will find the <BODY> tag and insert the Page Properties in the appropriate locations.


Advanced Page Properties - META tags
META tags

Uses:

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

When the META tag button is clicked, the following dialog box appears:

META tags 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  -  Creating an email link
Creating an Email Link  -  MailTo

Uses:

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

HTML Tag:

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

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

In the box labeled ‘Enter email address here:’ type your email address.  In the box labeled ‘Enter text that will appear as hypertext on the Web page’ type the text you wish to be displayed as a hyperlink on the Web page.  When the user clicks on the hyperlinked email address in their Web browser they will be able to write an email to you.

Example

-Type "info@mcwebsoftware.com" in the first input box labeled ‘Enter email address here’.

-Type "Email Us" in the input box labeled ‘Enter text that will appear as hypertext on the Web page’

- Click OK and the following HTML code will be inserted into your Web page:

<A HREF=”mailto:info@mcwebsoftware.com”>Email Us</A>

This is how the link will appear on the Web page:

Email Us

Clicking on the link would result in the user emailing the address info@mcwebsoftware.com.


Inserting a HyperLink

Uses:

To create text which is linked to another Web page(URL), image, sound file, etc.

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

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

This box allows you to insert hypertext into your Web page that links to other Web pages (URLs), images, anchors(bookmarks), sounds or other files.

In the box labeled ‘Enter Hyperlink text’ type the text that you want to link to another Web page, etc.  When using a browser to view your Web page this text will be a different color (usually blue and underlined) than the rest of the text and the mousepointer will change to the shape of a hand when it is passed over the hypertext.

In the box labeled ‘Enter URL of Web page or file to link to’ type the URL that you want your hypertext to link to.  For example, it can be a Web page on your own site (dogs.html) or it can be a link to another Web site (http://www.yahoo.com).  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.

Example

If you want to link the words “Click here to go to the bird page” to a Web page named “bird.html”, then type:

“Click here to go to the bird page” into the ‘Enter Hyperlink text’ input box

and type:

“bird.html” into the ‘Enter URL of Web page or file to link to’ input box.

After clicking the OK button Web Weaver will insert the following HTML code into your document:

<A HREF="bird.html">bird page</A>

The hyperlink will be displayed in your Web browser as shown below:

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

Clicking on the words 'bird image' will load the Web page named bird.html.

Targeting

If you are using frames in your Web page, you should specify which frame the linked URL should be displayed in (otherwise, the URL will be displayed in the same frame that contained the clicked hypertext).  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, the linked URL will open in the MENU frame when the hypertext is clicked.  So, you must specify the name 'MAINWINDOW' in the Target name input box (for this example).

Anchors and Bookmarks

If you wish to link your hypertext to an anchor (bookmark) in the same Web page or a different Web page, 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).  If the destination anchor that you are trying to link to is in the same document as the hypertext that links to it, you don't need to specify a URL name in the ‘Enter URL of Web page or file to link to’ input box.  If the destination anchor is in a different Web page then you should specify the URL of that page in the ' Enter URL of Web page or file to link to' input box.

For information on creating a destination anchor (bookmark) in a document, click here.

Special Effects

Clicking on the ‘Special Effects’ tab results in the following being displayed:

Setting these properties allows you to specify text to be displayed in the user’s browser when the mousepointer is moved over the hypertext.  You can also specify text (if any) to be displayed when the user moves the mousepointer away from the hypertext.


Inserting Images into your Web page

Uses:

To display an image in a Web page.

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

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

HTML Tag:	<A HREF="linked site, ext. image"><IMG SRC="inline image"></A>

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

In the box marked: “Enter filename of Inline Image” enter the filename of the image  You can use the browse button to find the image on your hard disk.  Also, you can use the image browser located on the lower half of the dialog box.  Browse through folders on your hard drive to view images to select the desired image.

The following attributes are all optional:

ALTERNATIVES:

Select the ‘Alternatives’ tab and the following input boxes will appear:

Specifying alternative text for browsers that can't display images

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 text '[BIRD PHOTO]' will appear in text-based Web browsers.  In current Web browsers, this ALT text is displayed when you move your mouse pointer over the image in the browser window.

Specifying an alternative low resolution image for slow connections

In the box marked: “Alternative Low-res image” type the filename of (or browse for) 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 replace low-res image.

LAYOUT:

Select the ‘Layout’ tab and the following input boxes will appear:

Specifying the image width and height

The images WIDTH and HEIGHT can be specified in pixels in the input boxes provided.

HTML Tag:	<IMG SRC="dog.gif" WIDTH=value HEIGHT=value>

Specifying these values speeds up the display of your Web page when it is being loaded since the Web browser won't have to wait for the image to fully load to calculate its size.

Web Weaver will automatically insert the height and width properties if you browse for your image using the browse button or image browser.

Specifying an image border

The width of the border around the image can be specified in pixels (default is zero for normal images and 1 for linked images).

HTML 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 linked because the colored border that signifies a link will not be displayed.

Aligning text and images

To align neighboring text and images with the current image in your Web page or to align the image on the left/right side of the screen with neighboring text wrapping around it specify this in the align selection boxes.  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.

HTML Tag:

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

Alignment attributes are Left, Right, Baseline, AbsMiddle, AbsBottom, and TextTop.

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.

Specifying spacing between text and images

To allow the user greater flexibility in laying out images and text use the Horizontal Space (HSPACE) and Vertical Space (VSPACE) attributes.  Specified in pixels (default value is zero).

HTML Tag:	<IMG SRC="dog.gif" VSPACE=value HSPACE=value>

These attributes control the vertical space above/below and the horizontal space to the left and right of the image.  Specifying HSPACE=5 and VSPACE=5 will prevent neighboring text and images from coming within 5 pixels of the image.

LINKING:

Select the ‘Link to URL’ tab and the following input boxes will appear:

If you wish to link the image to a Web page (URL), another image or other file, type the URL (address) or filename in the appropriate input box.  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 input box or browse Internet Explorer Favorites using the button.

When using a Web browser to view your Web page the image will be displayed and will be outlined in blue if it is linked, rendering it clickable (clicking on the image will link you to the specified page/file.)

ADVANCED

Select the ‘Advanced’ tab of the Image dialog box and the following input boxes will appear:

It allows you to insert videos into your Web page and to specify imagemap settings.

Video

The attributes of a video clip are as follows:

  The input box labeled ‘Enter filename of Video Clip’ requires the filename of the video clip.  The author can either type the video filename or search for the file using the browse button.

  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.

  The VCR Controls checkbox determines if video playback controls will be displayed on the Web page.  The controls will be displayed on the Web page under the video clip if this checkbox is checked.  (Default is Hide Controls).

Imagemaps

  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 imagemap you must enter the name of the map.  If it is a server side imagemap see the server-side imagemap information.  It can be both a server-side and client-side imagemap.

When you are finished entering all the information into the dialog box, click OK to insert the HTML code into your Web page.


UseMap  -  Client-side image maps
Creating Client-Side Imagemaps

Uses:

To create a client-side image map which allows the user to associate different links with different areas on an image.

HTML 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:

IMAGE FILENAME AND MAP NAME:

Search for the image using the browse button.  When you have found the image in the browse dialog box, select it and click the OK button.  The image filename will be displayed in the box labeled ‘Select image:’ and the image will be displayed on the lower half of the Imagemap dialog box.

In the box labeled ‘Image Map name’ type the name of the map.  It can be any name of your choice.

Click the ‘Next’ button to proceed to the next step.  The following screen will be displayed:

CREATING HOTSPOTS:

To begin drawing hotspots on your image, select one of the shapes (rectangle, circle or polygon/triangle) in the shape box (located on the left side of the Imagemap dialog box.  After selecting a shape, text will be displayed at the top of the dialog box instructing you where to click on the image to create your hotspots.

- A circle shape requires you to click on the circle’s center and then on any point on its radius.

- A rectangle shape requires you to click on the top left corner of the rectangle and then the lower right corner.

- A polygon/triangle shape requires you to click on the vertices of the polygon.  Web Weaver has a maximum of seven (7) vertices for the polygon shape.

When you have completed drawing the shape on your image the ‘Specify URL to link to’ dialog box will appear:

LINKING HOTSPOTS TO WEB PAGES:

This dialog box allows you to specify the Web page URL you wish to link to the hotspot.  In the box labeled ‘Link the hotspot to this URL’ insert the URL or filename to link to the hotspot shape you have just created.

For example, if you draw a rectangular shaped hotspot, you can specify the URL "http://www.yahoo.com".  When the user clicks on this particular area on your imagemap in a Web browser, he/she will be linked to the Yahoo web site.

Targeting Frames

If you need to specify a target frame (when using HTML frames) you can do so by specifying it in the 'Target Frame' box.  When the hotspot is clicked the browser will open the specified URL in the specified frame.

Undo

If you make an error while creating a hotspot you can click the Undo button and Web Weaver will remove the error.

Once you have created all of your hotspots click the Done button to finish.


Imagemaps
Server-side Imagemaps

Imagemaps 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 use image maps on their introduction pages as menus or tables of contents.  For example, one Web page contains a bookshelf with books having different titles, each book is a hotspot linked to a different Web page. For example, when you click on the cook book it takes you to a recipe Web page.  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 by clicking on different areas of the image and see where it takes you.  This is image is considered to be an imagemap.

This section discusses Server-side imagemaps.  Most of today’s Web browsers support Client-side imagemaps which are easier to create.  To learn how to create them click here.

There are a few things that make up an imagemap 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!!


Lists

   Bulleted Lists

   Numbered Lists

   Descriptive Lists

   Convert to List


Bulleted List
Bulleted Lists

Uses:

To create bulleted lists in a Web page.  For example,

   Cookies

   Cake

   Pie

______________________________________________________________________________

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

Starting a new list

In the box labeled ‘Enter text for each bulleted list item’ type the first item you wish to be included in your bulleted list.  Click on the ‘Start a New List’ button.

To insert additional items in your list, type in each bulleted list item in the appropriate box and click on the ‘Add a List Item’ button.  When you are finished click 'Done' button.

Adding to a previously created list

If you have previously made a bulleted list in your HTML document and wish to add a bulleted list item into that list, place your cursor in the position where you wish this list item to go (in the document’s editing window).  Open the Bulleted List dialog box, type the list item into the appropriate box, click 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:

HTML code:

<UL>

<LI>Cookies

<LI>Cake

<LI>Pie

</UL>

will appear like:

   Cookies

   Cake

   Pie

Note: If text has been selected in Web Weaver’s document editing window and the Bulleted List dialog box is opened, then the 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.


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

Uses:

To create numbered lists in a Web page.  For example,

1.   Cookies

2.   Cake

3.   Pie

______________________________________________________________________________

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

See bulleted list image for similar layout.

Starting a new list

In the box labeled ‘Enter text for each numbered list item’ type the first item you wish to be included in your numbered list.  Click on the ‘Start a New List’ button.

To insert additional items in your list, type in each numbered list item in the appropriate box and click on the ‘Add a List Item’ button.  When you are finished click 'Done' button.

Adding to a previously created list

If you have previously made a numbered list in your HTML document and wish to add a numbered list item into that list, place your cursor in the position where you wish this list item to go (in the document’s editing window). Open the Numbered List dialog box, type the list item into the appropriate box, click 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:

HTML code:

<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 Web Weaver’s document editing window 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.


Descriptive List
Descriptive Lists

Uses:

To create descriptive lists in a Web page.  Descriptive lists contain list topics and descriptive list items for each topic.  For example,

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 doesn’t compare to the first two desserts!

_____________________________________________________________________________

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

Starting a new list

In the box labeled ‘Descriptive List Topic:’ type a list topic you wish to be included in your descriptive list and in the box labeled ‘List Text to follow List Topic:’ type in the descriptive text item that will follow the list topic.  Click on the “Start a New List” button.

To insert additional items in your list, type in each descriptive list topic and text item and click on the ‘Add a List Item’ button.  When you are finished click the ‘Done’ button.

Adding to a previously created list

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, place your cursor in the position where you wish this list item to go (in the document’s editing window). Open the Descriptive List dialog box, type the list topic and item into the appropriate boxes, click 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:

HTML code:

<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 doesn’t 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 doesn’t compare to the first two desserts!


Converting text to lists or tables
Converting Text to a 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:

Converting to Lists

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

Dogs

Cats

Pigs

Chickens

Frogs

Cows

The text could be selected, converted to list items and would appear like the following HTML code:

<UL>

<LI> Dogs

<LI> Cats

<LI> Pigs

<LI> Chickens

<LI> Frogs

<LI> Cows

</UL>

Converting to Tables

To convert to tables, the existing text must be delimited (separated) by commas, spaces, tabs or a user-defined delimiter.  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 the following HTML code:

<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>


Format Menu

Uses:

To set text font and color characteristics.

HTML Tag:

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

Characters

Allows the user to specify the font (for the selected text) 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 user’s Web browser does not support the first font name listed, 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.  This latter option will insert the RGB code for the color.

Paragraph

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


View Menu

PREFERENCES - The Preferences dialog box allows you to specify preferences and customize Web Weaver to your liking.

VIEW PAGE WITH BROWSER 1 -  Shortcut Key:  F4

Pressing the Link to Browser button (or choosing its menu item) will result in the specified Web browser displaying the active HTML document for previewing purposes.  The browser path and filename 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 similar 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 and search for the executable files on your hard drive.  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.

VIEW PAGE WITH BROWSER 2 -  Shortcut Key:  F5

Same as View Page with Browser 1.

FILE PROPERTIES  - This displays information about the current HTML document.

FILE LIST  - This toggles the display of the File List on the main Web Weaver window.

VIEW INI FILE - This menu item opens the Web Weaver INI file (webwev.ini) for viewing and/or editing.(Windows 3.1 version only)


Preferences

The Preferences dialog box controls certain environment variables such as:

GENERAL SETTINGS

-  Web page folder - Web Weaver will automatically open this folder when you are trying to open or save a file.

-  Image folder - Web Weaver will automatically open this folder when you are trying to insert an image.

-  Screen font and size - Web Weaver will use this font and font size for the main editing window’s screen font.

-  Show the Tip of the Day at startup - You can turn the Tip of the Day on and off..

-  Word Wrap - You can set your documents to automatically word wrap with this setting.

-  Cascade documents when opening them - This causes documents to cascade when opening them.  The default setting is for documents to maximize when Web Weaver opens them.

- Show Page Properties dialog box for each new document - When you start a new document, the Page Properties box appears to allow you to set page colors, title, etc.  Uncheck this checkbox to stop the Page Properties dialog box from appearing for each new document.

- Open new document on startup - Web Weaver automatically opens a blank/new document when you start.  Uncheck this checkbox and Web Weaver will start with no open documents.

- Open most recently used document on startup - Web Weaver automatically opens the document you were working on when you last used Web Weaver.

- Start new documents with a blank page - Web Weaver automatically uses a standard HTML template when starting a new document.  Check this checkbox to force new documents to be blank.

- Word Wrap - This turns document word wrap on and off.

-  Use Beginner Table Wizard - You have the option of using the Beginner table wizard in Web Weaver or using the advanced wizard.  The Beginner wizard takes you step by step through the creation of a table.  The advanced Wizard allows you to quickly input table properties without all the explanations and step-by-step procedures.

- Show properties box when inserting <HR> Horizontal Line - By default, Web Weaver opens the Horizontal Line properties box when inserting a horizontal line.  This setting allows you to turn this option off.

- Number of files on the Most Recently Used File list - Specify the number of most recently used files that you want to appear on the File menu.  The default is 4.

- Show File List - By default, Web Weaver displays the File List on the left or right side of the main Web Weaver window.  Uncheck this checkbox to hide the File List.

- Align File List on left side - By default, Web Weaver aligns the File List on the right side of the screen.  Check this checkbox to align the File List on the left side of the screen.

PREVIEWERS/APPLICATIONS

-  Browser #1 - 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.  The default browser on your computer is used for Browser #1 unless you choose to override this setting and specify your own browser.

-  Browser #2 - Similar to Browser #1 setting.  This allows you to preview your Web pages with a second browser of your choice.

-  Graphics Application settings - Insert the path/filename of your Image Editing program so Web Weaver can open it for you from the Tools menu.

-  FTP Client settings - Insert the path/filename of your FTP Client so Web Weaver can open it for you from the Tools menu.

-  Printer Program settings - (Obsolete in Web Weaver 98) 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.

CUSTOM BUTTONS

Toolbox(Win 3.1 version) and custom buttons(Win 95 version)

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 Toolbox settings dialog box controls these user-defined buttons.:

FAVORITE URLS

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

MENU SYSTEM

The Menu System settings box allows the user to choose an appropriate 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 Minimum, Typical, Maximum 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.

-  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.

HTML TAGS

-  HTML color syntax highlighting - The user can specify the colors of the HTML tags in Web Weaver's document editing windows (Web Weaver for Windows 95/NT) only.  Different colors can be set for HTML Table tags, regular tags and quoted items.

- Use Uppercase HTML tags - By default, Web Weaver inserts uppercase HTML tags into the document.  Uncheck this checkbox to make Web Weaver insert lowercase HTML tags into the document.

- Use ending </P> tag when inserting <P> - By default, Web Weaver inserts an ending </P> tag when you insert a paragraph tag <P>.  Uncheck this checkbox to make Web Weaver only insert the <P> start tag.

- Use <DIV align=> tag instead of <P align=> tag - By default, Web Weaver uses the paragraph tag <P> when inserting paragraph alignment tags.  HTML 4 convention is to use the DIV tag rather than the P tag for paragraph alignment.  Checking this checkbox forces Web Weaver to insert the DIV tag rather than the P tag for paragraph alignment.  Careful: DIV is not understood by older browsers.

- Automatically insert carriage return when inserting <BR> tag - By default, Web Weaver inserts the <BR> tag when you insert a line break.  Check this checkbox if you want Web Weaver to insert a carriage return after the <BR> tag each time you insert the <BR> tag.


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 image.


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.


File Properties

The File Properties dialog box (shown below) displays information about the current HTML document in Web Weaver.

It displays the following information about a file:

- File Type: Describes whether the file is an HTML document or an image file.

- File Name: Lists the path and filename of the file.

- Web Page Title: If the file is an HTML document, then the Title is listed.

- Last Modified: The date and time the files was last modified.

- File Size: The size of the file in bytes.

- File Size including all images contained within it: The size of the file (in bytes) including files that are referenced in the HTML document.

- Time to download page using 14.4 modem - This indicates the amount of time (in minutes and seconds) it takes to download the Web page using a 14.4 Kbps connection.  This estimate includes the images that are included in the Web page, but if an image in the Web page was not verified in the Link Check, then his time estimate will not be accurate because the image file was not found and the size of the image(in bytes) could not be taken into account.

- Time to download page using 28.8 modem - This indicates the amount of time (in minutes and seconds) it takes to download the Web page using a 28.8 Kbps connection.


Netscape Extensions Menu
HTML Extensions Menu

Listed below are the HTML tags found in the HTML 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 is obsolete)

This tag causes text or images to blink when viewing the document through your browser.

HTML 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.

HTML Tag:	<CENTER> text </CENTER>

This tag is being replaced with the <P align=center></P> tag or the <DIV align=center></DIV> tag, but <CENTER></CENTER> is still supported by today’s Web browsers.

Line Break  -  Shortcut Key:  CTRL-K

The CLEAR attribute has been added to the Line Break tag to provide a way to jump to the next point in the document where the following text or image can be flush next to the margin.

HTML 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.

No Break

All text between the start and end of the NOBR elements will be displayed in the browser screen as one continuous line of text without any line breaks (carriage returns).

HTML Tag:	<NOBR> text </NOBR>

Word Break

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

HTML Tag:	<WBR>

Internet Explorer Tags

Java Tags


Internet Explorer Tags

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

BGSound

Used to embed a sound file in an HTML document to provide sounds or music when the document is loaded by a Web browser.  Also see Sound/Multimedia Object.

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 Web browser's screen.


Background Sound

Use:

The BGSound tag is used to play a sound when your Web page loads in a browser.  The sound can play once or can repeat a specified number of times. Sounds can be either samples (.wav or .au format) or MIDI files (.mid format).  Only Internet Explorer supports this tag. Refer to Sound/Multimedia Object for a more universal tag for inserting sounds or download our product J-Perk from http://www.mcwebsoftware.com to insert sounds on your Web page.

HTML Tag:

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

The following figure shows the BGSound dialog box:

Inserting a Sound

To specify a background sound type the name of the sound file (or browse for it) into the input box labeled ‘Background sound filename’.

Specify how many times the sound file will repeat (play again) in the box labeled ‘Loop’.  The range is from 'None' (play once) to an 'Infinite' loop which will repeat the sound file continuously.

This tag is only supported by Microsoft's Internet Explorer.  Netscape does not support it. Refer to Sound/Multimedia Object for a more universal tag for inserting sounds.


Embedded Object
Sound/Multimedia Object

Use:

The Sound/Multimedia object tag is used to insert sounds, animations, videos, and other multimedia files into your Web page.  Internet Explorer 3.0 and above support this tag.  Netscape 3.0 and above support this tag.  Also reference IE's proprietary BGSound tag for inserting sounds into Web pages.

HTML Tag:

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

When the Sound/Multimedia Object menu item is selected, the following dialog box appears:

Inserting a Sound/Multimedia Object

In the box labeled 'Enter URL or filename of object to embed' type the filename of the sound/multimedia file you wish to play.  You can also use the Browse button to search your hard drive for the file.

In the input box labeled ‘ALT text’ type a description of the object.  This description will be displayed in place of the object in any Web browsers that don't support the <EMBED> HTML tag.

Set the object’s width and height by inputting the number of pixels in the Width and Height input boxes.

You can provide a set of buttons on the Web page to control playback of the sound/multimedia object or make the sound/multimedia object invisible.  Specify small controls, large control console or hidden controls.

The alignment determines how surrounding text and images will be aligned with the object.  Specify top, middle or bottom in the box labeled ‘Align’.  (Bottom is the default).

Autostart tells the browser to automatically begin playing the sound/multimedia object when the Web page is loaded.

The 'Loop the sound' option tells the browser to infinitely repeat the sound/multimedia object.


Floating Frames

Use:

Using the Internet Explorer IFRAME tag, the author can create Web pages containing floating (inline/embedded) frames.  A floating frame can be thought of as a 'picture within a picture'.  They behave like an image in your Web page.  The floating frame can be placed anywhere on your Web page (like an image) and any HTML document(Web page) can be displayed inside the floating frame.

HTML Tag:

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

The following figure shows the Floating Frames dialog box:

The following properties are supported by the floating frame:

REQUIRED

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

Width - Specify the width (in pixels or percentage of browser screen width) of the floating frame window.

Height - Specify the height (in pixels or percentage of browser screen height) of the floating frame window.

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

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 left and right sides of 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 top and bottom of 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 dimensions are 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 neighboring text will wrap around frame.  Align=right aligns the floating frame with the right margin and text wraps around the left hand side of the frame.

This tag is only supported by Microsoft's Internet Explorer.  Netscape does not support it.


Marquee

Use:

The Marquee tag is used to create a scrolling text ticker on your Web page.  Text can scroll from right to left or from left to right.  Only Internet Explorer supports this tag.  For scrolling marquees that work on all browsers, download our product J-Perk from http://www.mcwebsoftware.com.

HTML Tag:

<MARQUEE DIRECTION=LEFT WIDTH=350 HEIGHT=20 SCROLLAMOUNT=1 SCROLLDELAY=5 BGCOLOR=0000FF>text</MARQUEE>

The following figure shows the Marquee dialog box:

  In the first input box marked ‘Enter text you wish to scroll in your marquee’, type the text you wish 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.


Java Tags

Use:

Allows you to incorporate Java applets in your Web page.

HTML 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 Applet dialog box is shown below:

APPLET PROPERTIES

In the box labeled ‘Java applet filename’ type the filename of your java applet class file.  For example, if the name of the Java applet you wish to insert into your HTML document is Animate (or Animate.class), type 'Animate.class' into the input box.

In the box labeled ‘Alternative text for browsers not supporting Java’ type text to appear in your Web Page (HTML document) in place of the Java applet if the browser being used does not support Java.  You could type “A Java applet goes here.  Your browser doesn’t support Java.” into this input box, and a non-Java browser will display this text instead of the Java applet.

In the box labeled ‘Codebase (Applet directory)’ type the name (if any) of the folder(directory) that contains the Java applet class file(s).  If the applet class file(s) is not in the same directory as your Web page (HTML document), then you must specify the directory.  For example, if your Web page document which contains the applet HTML tags is in the directory /HTMLdocs and your Java applet class file(s) is in the directory /HTMLdocs/apps, then you should specify 'apps/' as the Codebase.

Parameters

The parameter tag is used to specify different parameters (variables) for the Java applet.  For example, if the Java applet requires you (the Web page author) to specify the applet font and font size, then you must specify it using parameters.

HTML Tag:	<PARAMETER Name="Font" Value="Courier">

To insert a parameter for the Java applet, click on the ‘Insert’ button in the Parameters section of the dialog box.  The following parameter dialog box will appear:

It requires that you specify the name and value of the parameter.  For example, if your Java applet allows you to specify a sound file as one of its parameters and a valid parameter NAME is “Sound” and a valid parameter VALUE is any sound filename then:

Type “Sound” in the box labeled ‘Parameter name’ and type a sound filename (such as ding.au) in the box labeled ‘Parameter value’.  Then click the ‘Insert’ button on the Paramter dialog box to insert it.

LAYOUT

Clicking on the ‘Layout’ tab displays the following screen:

The height, width, vspace and hspace are all attributed to the size you wish your Java applet to be on-screen.  Hspace  (Horizontal Space) and Vspace (Vertical Space) determine the amount of screen space is between the applet and neighboring text and images.

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


Tools Menu

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

REFRESH TAG COLORS  -  Shortcut Key:  F2

This results in the refreshing of the HTML tag colors in the current document.

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 GRAPHICS APPLICATION  -  Shortcut Key:  F7

This item will open a graphics application of your choice for manipulating images.  You can choose to assign an image editing program or an image mapping program to this function.

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).

REPEAT LAST COMMAND  -  Shortcut Key:  F9

This item will repeat the last HTML code that you entered into the current document. For example, if you just entered the <FONT> tag with numerous settings and want to quickly insert that font tag for other text instead of selecting the text and selecting the same font values again and again, then you would use the Repeat Last Command function.

CHECK LINKS (Web Weaver for Win 95/98/NT only)

This item allows the user to verify the local (on the user's hard drive) hyperlinks in the current document.  It will generate a report telling the user if images or linked Web pages are missing.  Remote pages and images (on the Web) cannot be checked at this time.

SPELL CHECK (available only in Web Weaver Gold)

You can spell check you HTML documents using this function.  All HTML tags are part of the dictionary included with Web Weaver so they will be skipped when the spell check is running.  You can also add your own words to the custom dictionary.

SITE MONGREL SITE MANAGEMENT (Web Weaver for Win 95/98/NT only)

This is a plug-in for Web Weaver that is a full Web site management tool.  It allows the user to check all the local links and images in a Web site with the click of a button.  The Web site is checked on the user's hard drive not on the remote Web server.

WEB PAGE STATISTICS (available only in Web Weaver Gold)

The Web page statistics tools allows you to view specific statistics about your Web page.  Web Weaver analyzes traffic to your Web page and generates a report containing graphs that display the statistics.

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.  Click here for more information.


Check Links
Check Links Tool (Windows 95/98/NT version only)

The Check Links tool is for verifying local hyperlinks and image links (This tool will not check remote links on the Web such as http://www...).  It will only check the links on your local hard drive.  This is beneficial when you create your Web site on your hard drive and then upload it to a Web server.  First checking it on your hard drive and verifying your Web page links insures that the links will be correct when you upload it to a Web server.

A screen shot of the Check Links dialog box is shown below:

The different images next to the listed links have specific meanings.  They are defined below:

 - Valid hyperlink.

 - Invalid hyperlink.

 - Unverified remote link.  This occurs when the link is remote such as http://www.yahoo.com.

 - Valid image.

 - Invalid Image

 - Valid CGI script (note: this does not check the actual CGI script, only it's existence)

 - Invalid CGI script

Other information about the document is listed at the bottom of the Check Links dialog box.  This includes:

File Name

File Title

File Size (in bytes)

File Date - Date and time when file was last modified.

Time to download page using 14.4 modem - This indicates the amount of time (in minutes and seconds) it takes to download the Web page using a 14.4 Kbps connection.  This estimate includes the images that are included in the Web page, but if an image in the Web page was not verified in the Link Check, then his time estimate will not be accurate because the image file was not found and the size of the image(in bytes) could not be taken into account.

Time to download page using 28.8 modem - This indicates the amount of time (in minutes and seconds) it takes to download the Web page using a 28.8 Kbps connection.


Web Page Statistics tool
Web Page Statistics Tool (Gold version only)

The Web page statistics tools allows you to view specific statistics about your Web page.  Web Weaver analyzes traffic to your Web page and generates a report containing graphs that display the statistics.  The following is a list of items that Web Weaver analyzes:

- Number of visits to your Web site

- Breakdown of visits by month

- Breakdown of visits by day

- Breakdown of visits by hour

- Breakdown of visits by operating system (Win95, WinNT, Mac, etc.)

- Breakdown of visits by Web browser (IE, Netscape, etc.)

- Breakdown of visits by domain (.com, .net, et cetera)

An example of the analysis report that Web Weaver generates can be found at http://www.mcwebsoftware.com/accessstats.html.  You can also view it by opening the accessstats.html file in your Web Weaver folder on your hard drive.

INSTRUCTIONS FOR ANALYZING YOUR WEB SITE

You will need three things to start collecting data from your Web page:

1. One line of HTML code in your Web page,

2. A text file named accesslog.txt

3. A CGI script named accesslog.cgi on your Web server

Inserting the HTML code into your Web page

The HTML code that you must insert into the Web page you want to analyze is:

<IMG SRC="accesslog.cgi" width=1 height=1>

This HTML code places a 1 pixel by 1 pixel image on your Web page.  The code doesn’t actually insert an image, though.  It inserts a “call to a script file” named accesslog.cgi.  When your Web page loads, the Web browser says,”I want to load and display this image named accesslog.cgi.”  Since accesslog.cgi is not an image, the browser makes the Web server execute the CGI script named accesslog.cgi.  When it is executed it writes data to the text file named accesslog.txt.

Note: This HTML code assumes that your Web page and the accesslog.cgi file are in the same folder/directory on the Web server.  If your Web server requires that you place CGI scripts in a special folder/directory such as the cgi-bin/ folder, then the HTML code will be different.  It will look something like this:

<IMG SRC="cgi-bin/accesslog.cgi" width=1 height=1>

After you have inserted the HTML code into your Web page, upload it (in ASCII format) to your Web server (using your FTP software).

Uploading the accesslog.txt file to your Web server

The accesslog.txt text file stores the data each time a visitor visits your Web page.  It should reside in the same folder/directory as your Web page on the Web server.

Using your FTP software, upload the accesslog.txt file (in ASCII format) found in the Web Weaver ACCESS folder (in ASCII format) to your Web server.  You must then set the file permissions for the accesslog.txt file.  Set the file permissions for accesslog.txt to be 766 (RWE, RW, RW).

Here is an explanation of file permissions.

Web servers have permissions for each file on their hard disks so different users can have access to files and others cannot.  Web servers have the capability to restrict users from reading files, writing to files, or executing files.  So there are 3 restrictions for files (each with a corresponding number):

read(4)

write(2)

execute(1)

There are also 3 user levels that can be restricted: User(you), Group, and World.

What we need to set for the accesslog.txt file are permissions that allow everyone to read and write to this file, but not to be able to execute it.  Using your FTP client software you can specify the permissions by selecting the accesslog.txt file on the Web server and select permissions from the pull-down menus or use 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 Write

World: Read and Write

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

chmod accesslog.cgi 766

where the numbers 766 represent the permissions.  Here's how we got the numbers.  Adding the numbers together for Read and Write permissions results in 4+2=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: 7 6 6.

Editing the accesslog.cgi file to work correctly with your Web server

In order to work correctly with your Web server, the accesslog.cgi file must be edited.  You can use Web Weaver to edit it.

- From Web Weaver’s File menu, select Import | UNIX file.

- Find the accesslog.cgi file in the Web Weaver folder on your hard drive and import it.

In the accesslog.cgi file there is one item that MUST be edited and another item that might have to be edited (we won’t edit this one unless we have to).  The item that must be edited is the path of the accesslog.txt logfile.  You will notice the following code in the accesslog.cgi file:

$logfile = "/home/ns-home/docs/mmm/accesslog.txt";

You will need to change this to match your home directory path on your Web server. This path leads to the directory(folder) that contains all of your HTML files on your Web server.  If you don’t know what your path is, then you must ask your Internet Service Provider for the path.  It must be exact!!  So, if your provider tells you that your path is /home/users/web/yourname then you would need to edit the code in the accesslog.cgi file to be:

$logfile = "/users/web/yourname/accesslog.txt";

Once you have changed the logfile path in the accesslog.cgi file, you can then “export” it. .  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 with the same filename: accesslog.cgi.  Exporting as a UNIX file is crucial for the script to work.

Now follow the instructions for uploading the accesslog.cgi file.  If the CGI script generates errors after you upload and test it, refer to the Troubleshooting section below.  You may have to edit one more line of the accesslog.cgi file and this process is described in the Troubleshooting section.

Uploading the accesslog.cgi file to your Web server

The following instructions assume that the accesslog.cgi file, accesslog.txt file and your Web page are allowed to reside in the same folder/directory on your Web server.

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

There are a few things you must do to make the accesslog.cgi 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) Upload the file accesslog.cgi found in the Web Weaver ACCESS folder (in ASCII format) to your Web server’s disk space provided by your ISP.  Make sure this file is in the same folder/directory as your Web page on the Web server.

3) You must then set the file permissions for the accesslog.cgi file.  Set the file permissions for accesslog.cgi to be 755 (RWE, RE, RE).

5) Now test it online and see if it works.  Open your online Web page in your Web browser.  Then open the accesslog.txt file in your Web browser to see if data was written to it.  For example, if your Web page is http://www.mcwebsoftware.com/index.html, open it first in your Web browser.  Then open http://www.mcwebsoftware.com/accesslog.txt in your Web browser and see if the data has been written to it.

If it didn’t work correctly or if you received a server error, please refer to the TROUBLESHOOTING section below.

ANALYZING THE DATA AND GENERATING GRAPHS

After you have let the accesslog.txt file accumulate a fair amount of data, it’s time to analyze it and create some graphs.

- Download the accesslog.txt file from your Web server and save it on your computer’s hard drive.

- In Web Weaver, select the ‘Web Page statistics…’ menu item from the ‘Tools’ pulldown menu.  The following dialog box will appear:

- In the box labeled ‘AccessLog path and filename (or Web URL)’ type the path and filename of the accesslog.txt file found on your hard drive.  You can also use the browse button to find the accesslog.txt file on your hard drive.

- Click the ‘View Statistics’ button and Web Weaver will create a file named accessstats.html in the Web Weaver folder on your hard drive.  It will then launch your Web browser and open the report for your viewing.

TROUBLESHOOTING

If you get a server error or the CGI script 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 accesslog.cgi file calls the PERL program to compile and interpret the accesslog.cgi file.  The default path is:

/usr/bin/perl

and the first line in the accesslog.cgi file reads:

#!/usr/bin/perl

If the path is different on your ISP's Web server you must update the first line of accesslog.cgi to reflect the correct path.  Open accesslog.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 with the same filename: accesslog.cgi.  Exporting as a UNIX file is crucial for the script to work.

B) Now upload the accesslog.cgi file and reset the permissions as described in step 3 above.  Test the script.  If it still does not work, contact your ISP for further troubleshooting.  We cannot determine the problem since we don't have access to your ISP's settings or server.


Special Characters

Special characters must be represented by specific HTML 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

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 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 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.


Creating Fill-in Forms
Creating Forms

Uses:

To create a fill-in form so that users can input information and submit it to the author of the web page.

HTML Tag:

<FORM ACTION=”GET” ACTION=”form.cgi”>

<INPUT TYPE=”TEXT” SIZE=30>

<INPUT TYPE=”CHECKBOX”>

</FORM>

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

STEP 1:

The user can choose to use the CGI script that comes with Web Weaver to process the form or they can specify their own script.

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.

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

FORM ACTION specifies the action URI (Uniform Resource Indicator) for the form.

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 ‘Next' button.  Step 2 of the Form creation process will appear:

STEP 2:

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

  Text

  Textarea

  Image

  Hidden

  Checkbox

  Radio

  Password

  Select (Pulldown Menu)

  Submit

  Reset

INSERTING FORM FIELDS

Input Field types (not including Pulldown Menu (SELECT) field type)

1. To insert a Form field select an INPUT FIELD TYPE from the list on the left-hand side of Form Wizard.  The different Form fields are explained below:

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

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 masked(hidden) as the user types into the field.

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 (Pulldown Menu):  This represents a pulldown menu 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.

2. In the box labeled ‘Form text’ type text that you wish to appear next to the Form field on the Web page.

3. Each type of Form field has attributes that must be specified.  Some attributes are required while others are optional. The different Form field attributes are explained below:

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.

In the ‘Attributes’ box (lower right-hand section of Form Wizard) input the required or optional attributes for the particular Form field. These attributes are different depending on which Form field you are inserting.  When you have completed entering the Form field attributes click the 'Insert Form Field’ button.  Repeat this process for each input field you want in the Form.

4. When you have inserted the last Form field, click the 'Done with Form' button.  This is valid procedure for all input types except for the Pulldown Menu (SELECT) input type.

Inserting the Pulldown Menu (SELECT) Form Field

1.	To insert a Pulldown menu (SELECT) Form field into your form, select the ‘Pulldown Menu’  INPUT FIELD TYPE from the list on the left-hand side of Form Wizard.

2.	In the box labeled ‘Form text’ type text that you wish to appear next to the Pulldown menu on the Web page.

3.	Input the ‘Name’ attribute and the ‘Multiple’ and ‘Size’ attributes if necessary.  Click on the 'Insert Form Field' button.

4.	Now you are ready to enter in the OPTIONS that will be the menu items in the Pulldown menu.  Type the menu item text into the required ‘Option’ attribute and enter the ‘Selected’ and ‘Value’ attributes if necessary.  Click on the 'Insert Menu Item(s)' button to insert your first menu item.  The menu item attribute boxes will clear so you can input more menu items.  Repeat this step to insert more menu items.

5.	When you have entered the last menu item, click on the 'Done with Pulldown menu’ button.  You can now continue inserting more Form fields or finish the Form by clicking the ‘Done with Form’ button.

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) Web 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 (in ASCII format) to your Web disk space provided by your ISP.

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

4) Set formmail.cgi file permissions to 755.

Here is an explanation of file permissions.

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 (each with a corresponding number):

read(4)

write(2)

execute(1)

There are also 3 user levels 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 software you can specify the permissions by selecting the file and select permissions from the pull-down menus or use 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: 7 5 5.

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 file calls the PERL program to compile and interpret the formmail.cgi file.  The default path is:

/usr/bin/perl

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

#!/usr/bin/perl

If the path is different on your ISP's server 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 filename: formmail.cgi. Exporting as a UNIX file is crucial for the script to work.

B) Now upload the formmail.cgi file 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 file 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.


Creating 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.  The maximum number of columns and rows is 100.

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 add a title or caption to your table, type it into the Table Caption box.  Your table caption can be placed at the top or 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 table cell.  No border will be shown if BORDER=0.  (Default is BORDER=1).

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 percentage of screen width.  Web Weaver assumes you'll be using percentage of screen width.  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 percentage of screen height.  Web Weaver assumes you'll be using percentage of screen height.  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 in pixels.

Cell Padding:  This feature allows you to set the padding between the cell borders and their contents.  If Cell Padding is equal to 0 then there will be no space (or gap) between the cell borders 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 in pixels.

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, TAB, ENTER 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 labeled '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 code for the image into the selected cell.  Once you have entered contents into the cell 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 individual cell items or you can select multiple cells and apply properties the selected 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 make the contents bold and align the contents in the center of the cell.

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 Tables, check out the great site on the Helpful Web Sites page.


Creating Frames

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

Web Weaver has two Wizards that help you to create Frames.  One wizard allows you to create the Frame layout yourself.  The other wizard has custom templates of different Frame layouts so you can easily choose one that fits your needs.  We will discuss the Custom Frame wizard first.

CUSTOM-MADE FRAME WIZARD

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.

DO IT YOURSELF FRAME WIZARD

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

Adjusts the scrollbars to create the desired frame layout.  When the desired frame layout has been created, 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 the default).

Spacing between frames (or the frame border width) is specified in pixels (FRAMESPACING or BORDER).

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

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

  the URL of the Web page that will be displayed in the particular frame,

  the frame name 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 create them.

  whether the frame will have scrollbars or not,

  whether the frames can be resized by the user viewing the Web page,

  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.  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>

The NOFRAMES code should be placed in the Frame source Web page.

In the Frame Properties dialog box you will see how Web Weaver numbers its frames.  Beginning at the top left with frame number one (1), Frame Wizard 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.

Starting with the upper left frame (Frame 1) you should enter the URL of the Web page to appear in this frame.  The other optional attributes can also be entered.  When you have finished entering the properties for this frame  click 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.

After entering in each frame’s properties, Frame Wizard will automatically insert the HTML code for the Frame layout into the Frame source Web page.

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

Targeting Frames

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 Wizard.  '_top' is a special target name which clears the entire browser screen of frames and displays the URL in the entire browser screen.  Other special target names are _blank, _self, and _parent.

More about targets and Frame 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 those hyperlinks.

If you don't specify names and targets, 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!


Inserting Anchors (Bookmarks)

Uses:

Used for establishing a destination 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).  This is useful for creating a long Web page with hyperlinks at the top of the page which link to different anchors in the same Web page.

HTML Tag:

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

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

This dialog box helps you to insert an anchor in your Web page.  Think of it as placing a bookmark at a specific point in the Web page.  Different Web pages or hypertext can link to that specific bookmark (anchor) and the Web page will be displayed at that particular bookmark (anchor) when it is loaded in a browser.  You will not see the anchor when viewing the Web page.  It is like an invisible bookmark.

To create an anchor:

In the box labeled 'Anchor/Bookmark name', type the name of the anchor.  When creating the hypertext that will link to this anchor you will specify this anchor name to link to it.  See the section on Creating a Hyperlink to learn how to create a hyperlink to an anchor.

In the box labeled 'Enter the text that will be the Anchor/Bookmark’, type the text that will appear on the page at the location of the bookmark  This is optional.  You can simply leave this blank and the anchor will be placed in the location of your cursor in Web Weaver’s document window.

Example

Suppose you want to create an anchor that is located halfway down a Web page.  When the user views the page in a Web browser, they can click a link at the top of the page that will automatically bring them to that anchor/bookmark halfway down the page.

The text that you want to anchor is “Chapter 2: The Human Skeleton” and you want the anchor name to be “skeleton”.

- In the box labeled 'Anchor/Bookmark name', type “skeleton”.

- In the box labeled Enter the text that will be the Anchor/Bookmark, type “Chapter 2: The Human Skeleton”.

Then click the OK button.

You’ve created the anchor/bookmark, but you still need to create the link to that anchor.  This can be done by creating a Hyperlink.

Discussion of a hyperlink to an anchor

The HTML hyperlink tag that will link to an anchor is equivalent to a regular hyperlink tag except it has the anchor name included (separated by a '#'' pound sign).  For example, linking to an anchor named 'ch1' from within the same Web page would look like:

<A HREF="#ch1">Click here for Chapter 1</A>

Linking to an anchor named 'ch1' from a different Web page named "toc.html" would look like:

<A HREF="toc.html#ch1">Click here for Chapter 1</A>


Paragraph/Text Elements
Paragraph/Text Element Tags

Paragraph/Text Element tags are used to define major sections of a document such as paragraphs, chapters and headings.

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  (sometimes used)

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.

HTML Tag:	<H1> | </H1>

ADDRESS (sometimes used)

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

HTML 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 (sometimes used)

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.

HTML Tag:	<P ALIGN=></P>

BLOCKQUOTE (sometimes used)

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.

HTML Tag:	<BLOCKQUOTE> text </BLOCKQUOTE>

or	<BQ>text</BQ>

BYLINE (rarely used)

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

COMMENT (sometimes used)

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

HTML Tag:	<!-- text -->

HORIZONTAL RULE (commonly used)

Inserts a horizontal line across the page as shown below:

______________________________________________________________________

HTML Tag:	<HR>

See also Netscape HR

LINE BREAK  -  Shortcut Key:  CTRL-K

(commonly used)

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.

HTML Tag:	<BR>

LISTING

Used to insert an example computer listing.  Embedded tags are ignored, but embedded tabs are allowed.

HTML Tag:	<LISTING> text </LISTING>

LITERAL

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

Non-breaking space  (commonly used)

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..

HTML Tag:	&nbsp;

PARAGRAPH  (commonly used)

Indicates the beginning of a new paragraph.

HTML Tag:	<P>

PLAINTEXT (obsolete)

Used to insert text with a plain format.  Obsolete.

HTML Tag:	<PLAINTEXT>text</PLAINTEXT>

PREFORMATTED TEXT  (sometimes used)

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.

HTML Tag:	<PRE> text </PRE>

TAB (rarely used)

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.

HTML Tag:	<TAB>

<TAB INDENT=>

<TAB ID=>

<TAB TO=>

<TAB ALIGN=>


Horizontal Rule
Horizontal Line (Horizontal Rule)

Uses:

Inserts a horizontal line across the page.  The attributes allow the user to specify the thickness, width, alignment, and shading of the line.

HTML Tag:

<HR WIDTH=”450” SIZE=”1” ALIGN=”Left” NOSHADE>

Size:

Allows the user to set the thickness of the horizontal rule.

HTML 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.

HTML 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.

HTML Tag:	ALIGN=left|right|center

No Shading:

No shading allows the user to specify a solid bar rather than the shaded default.

HTML Tag:	NOSHADE


Insert menu item: Head Element Tags
HTML 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 (rarely used)

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.

HTML Tag:	<BANNER> text,images,etc</BANNER>

BASE (rarely used)

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.

HTML Tag:	<BASE> filename

BODY (commonly used)

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.

HTML Tag:	<BODY> body elements(main part of document) </BODY>

HEAD (commonly used)

This inserts the HTML tag for the head elements such as TITLE, ISINDEX, NEXTID, LINK, and BASE.

HTML Tag:	<HEAD> head elements </HEAD>

HTML (commonly used)

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.

HTML Tag:	<HTML> entire document </HTML>

ISINDEX (rarely used)

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..

HTML Tag:	<ISINDEX>

LINK (rarely used)

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.

HTML Tag:	<LINK REV= HREF=>

NEXTID (rarely used)

This inserts the HTML tag to set a variable value.

HTML Tag:	<NEXTID> variable name

TITLE (commonly used)

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:

HTML 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

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>

   Underline  -  <U></U>

______________________________________________________________________

BOLD (commonly used)

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.

HTML Tag:	<B> text </B>

ITALIC (commonly used)

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.

HTML Tag:	<I> text </I>

STRIKETHROUGH (sometimes used)

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.

HTML Tag:	<S> text </S>

SUBSCRIPT (sometimes used)

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.

HTML Tag:	<SUB> text </SUB>

SUPERSCRIPT (sometimes used)

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.

HTML Tag:	<SUP> text </SUP>

TT (rarely used)

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.

HTML Tag:	<TT> text </TT>

UNDERLINE (commonly used although Style Sheets should be used instead)

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.

HTML Tag:	<U> text </U>


Insert menu item: Logical Style Tags
Logical Style Tags

Logical style tags indicate the meaning of the text they modify.  These tags do not indicate how the text will appear in the browser.  Today’s browsers display logical style tags differently.  One browser may display the Emphasis tag as bold, whereas another browser may display the same tag in a larger font.  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 (rarely used)

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.

HTML Tag:	<ABBREV> text </ABBREV>

ACRONYM (rarely used)

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.

HTML Tag:	<ACRONYM> text </ACRONYM>

ARGUMENT (rarely used)

Unsure if this tag has made it into the HTML 3.0 specification.

AUTHOR (rarely used)

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.

HTML Tag:	<AU> text </AU>

CITATION (sometimes used)

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.

HTML Tag:	<CITE> text </CITE>

CODE (sometimes used)

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.

HTML Tag:	<CODE> text </CODE>

CREDIT (rarely used)

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.

HTML Tag:	<CREDIT> Person's name </CREDIT>

Enclosed within blockquote tags:

<BQ>

Quote

<CREDIT> Person's name</CREDIT>

</BQ>

DEFINING INSTANCE (Definition) (rarely used)

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.

HTML Tag:	<DFN> text </DFN>

DELETED TEXT (rarely used)

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.

HTML Tag:	<DEL> text </DEL>

EMPHASIS (sometimes used)

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.

HTML Tag:	<EM> text </EM>

FOOTNOTE (rarely used)

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.

HTML Tag:	<FN> text </FN>

INLINE QUOTE (rarely used)

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.

HTML Tag:	<Q> text </Q>

INSERTED TEXT (rarely used)

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.

HTML Tag:	<INS> text </INS>

KEYBOARD (sometimes used)

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.

HTML Tag:	<KBD> text </KBD>

NOTE (rarely used)

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.

HTML Tag:	<NOTE> text </NOTE>

PERSON (rarely used)

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.

HTML Tag:	<PERSON> text </PERSON>

SAMP (sometimes used)

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.

HTML Tag:	<SAMP> text </SAMP>

STRONG (sometimes used)

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.

HTML Tag:	<STRONG> text </STRONG>

VAR (sometimes used)

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.

HTML Tag:	<VAR> text </VAR>


Insert menu item: Attributes
HTML Attributes

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.

HTML 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 can’t be displayed:

[BIRD PHOTO]

HTML 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.

HTML 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.

HTML 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.

HTML 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.

HTML 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.

HTML 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.

HTML Tag:	NOWRAP

SIZE

Allows the user to set the thickness of the horizontal rule(Netscape).

HTML 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.

HTML Tag:	WIDTH=Value

where value is number of pixels.


Math Tags
Math Tags (HTML 3.0 proposed)

The Math tag menu item has been removed from Web Weaver because math tags have not been released in the latest HTML specification.  Most Web browsers do not support them.  Use the following definitions purely for referenc.  The Math tags will be integrated back into Web Weaver when and if they have been fully defined by the World Wide Web Consortium and supported by the major Web browsers.

Math tags are essential in creating technical Web documents.  They provide a way to represent different mathematical expressions and variables.  See below for descriptions of each Math HTML 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 (rarely used)

This HTML tag identifies the text it surrounds as the numerator of an expression (as in a fraction).

HTML Tag:	<ABOVE>math expression</ABOVE>

ARRAY (rarely used)

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.

HTML Tag:	<ARRAY>array rows and items</ARRAY>

Normally the code for an array with rows and items will appear like the following:

HTML 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 (rarely used)

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.

HTML Tag:	math expression<ATOP>math expression

BELOW (rarely used)

This HTML tag identifies the text it surrounds as the denominator of an expression (as in a fraction).

HTML Tag:	<BELOW>math expression</BELOW>

BOX (rarely used)

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.

HTML 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 (rarely used)

This attribute encloses math expressions within parentheses (on-screen).

HTML Tag:	<CHOOSE>math expression</CHOOSE>

ITEM (rarely used)

This HTML tag denotes an item within a row within an array.

HTML Tag:	<ITEM>array item/math expression

MATH (rarely used)

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.

HTML Tag:	<MATH>all math expressions</MATH>

OVER (rarely used)

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.

HTML Tag:	math expression<OVER>math expression

ROOT (rarely used)

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:

HTML 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 (rarely used)

This HTML code denotes a row within an array(matrix).

HTML Tag:	<ROW>array items

SQUARE ROOT (rarely used)

The text surrounded by this tag is displayed as the square root of the enclosed expression.

HTML Tag:	<SQRT>math expression</SQRT>

For example, the square root of 1+x will be tagged like the following:

<SQRT>1+x</SQRT>

SUBSCRIPT (rarely used)

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.

HTML Tag:	<SUB>math expression</SUB>

Also:	_math expression_

SUPERSCRIPT (rarely used)

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.

HTML Tag:	<SUP>math expression</SUP>

Also:	^math expression^

TEXT (rarely used)

Used to include text within a math element.

HTML Tag:	<TEXT>text</TEXT>

UPRIGHT FONT (rarely used)

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.

HTML Tag:	<T>math expression</T>

UPRIGHT BOLD FONT (rarely used)

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).

HTML Tag:	<BT>math expression</BT>


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.

Move to Previous document - Ctrl-Tab

If you have more than one document open in Web Weaver, this will move between documents.

Move to Next document - Shift-Ctrl-Tab

If you have more than one document open in Web Weaver, this will move between documents.

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..

How to use Web Weaver

This tutorial gives you a quick guide to learning the basics of Web Weaver.

How to Upload your page to the Web

This tutorial informs users how to upload their Web pages to the Web.

Submit your Web page to Search engines

This menu item links to a Web page on McWeb Software’s Web site.  The page has links to Search engines so that you can easily submit your Web page to them.

Beginner Wizard

Beginner 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.

HTML Glossary

This glossary provides a list, definitions, and examples of HTML tags.

About

This is the well-known 'About' screen of every application.  It displays some info on how to reach McWeb Software.