WEBPlug documentation: Using WebPlug

An HTML editor for the Amiga

Using WebPlug

Is not the intention of this document to teach you how to create your own HTML pages... You should know HTML to use WebPlug. Anyway, learning HTML while using WebPlug is easier.
This is why this doc only explains the features of WebPlug. You should know the use of every HTML tag.
In a near future, my homepage will include a list of links to web-pages that teach HTML (spanish and english). If you know of one of these pages, please let me know.

General notes before starting.
WebPlug's functions
Using the editor
Sending documents to browsers

Main Index

Some general notes before starting...

The 'Add <BR>' checkmark found in most windows makes WebPlug authomagically add a <BR> (Force return) after each tag added.<BR>This only works in tags that aren't 'single' tags ( <BR>, <LI> and so are 'single' tags).
The 'Cut & Paste' checkmark makes WebPlug use the clipboard. For example, you want to make a sentence bold. Simply mark it in your text editor and select the 'Bold' entry in the styles list. WebPlug will do the rest.
Some windows contain lists of tags (for example, the format window). Double-clicking an item of these lists is like selecting it and pressing Insert. If the item is in Italics, double-clicking it will open a window with some options for the tag.
Because of it's nature, no more than one copy of the program can be execute every time.

Go to top.

WebPlug's functions

WebPlug's functions are accessible via the functions menu or via the 'Toolbar'. This toolbar contains image buttons that give access to nearly all it's features.
Each button opens a window that contains the gadgets necessary to create a part of the HTML doc.

Here you'll find information about these functions (from left to right, in order):

Translation: This function will translate the ASCII chars to its' HTML equivalent. Simply mark a block of text and press 'Translate'. After a while (if the text is large), the text will appear translated.
The window have 2 checkmarks, which select whether to translate '<', '>', and '&' or not. This is usefull if you mark a block of text that contains HTML tags, so the '<>' won't be translated.
Info / HTML header: This GUI will insert the HTML header information for the document. Simply type the title (that will be translated) and press 'Insert'.
You can set the BaseFont and you can decide if you want the '<BODY> </BODY>' tags to be inserted or not (you can add them late with the Background function).
Is possible to add some information about the author of the document. This information is inserted as comments in the document.
Styles window: Nothing to explain here. Just mark a block of text and insert a style.
Supports Drag'n'Drop to the textfield.gadget.
Format window: Contains a list of formatting HTML tags. Simply select a tag, an alignment an go ! :-)
Supports Drag'n'Drop to the textfield.gadget.
Images window: This window offers a GUI to insert images into your document. When you load a document (or save it), the path is automatically copied into the image filename string gadget.
Pressing 'Show' will cause WebPlug to display the image (using Datatypes or an external viewer. See Configuration.)
When specifying a new image, you'll see that WebPlug's window gets busy. This is because the program is using Datatypes to know the size of the image and set it in the window. Of course, this will only happen for kickstart v39+; anyway, the size could be manually modified later. Kick 36/37 users will have to do it this way.
Forms window: The forms window allows you to create any form in HTML. Is divided in 2 register-pages, Form and Input. 'Forms' contains the data of the
tag. The Input page contains a list of all possible inputs. Double-click any entry to open the config window for the input.
Only a note: The Select Item (Option) window contains an 'Automatic generation' tool. It will generate automatically the number of options you want.
Supports Drag'n'Drop to the textfield.gadget.

List window

Nothing to explain here. Just mark a block of text and insert a list tag. Future versions of WebPlug will offer some kind of automatic generation for lists.
Supports Drag'n'Drop to the textfield.gadget.

Background window

Here you can specify all the tags concerning the background of the page. The 'Show' button will make WebPlug display the background image you have selected.
If you want to specify a color, just activate it (by selecting the checkmark) and click on the popup-image. The color requester will appear.

Tables window

This page contains the GUI to create tables. It features an automatic generation of tables. If you want, a number will be introduced in each cel (-1 if it's a header cell).
The parameters of each automatically generated cell are taken from current settings...
Supports Drag'n'Drop to the textfield.gadget.

Links window

Here you can specify an HTML link. Simply type in the 'Link to' field where do you want the link to point to, mark a block and type insert.

Custom Tags/Strings window

WebPlug now supports user-configurable HTML tags and strings. This function opens a window that includes 2 lists, Custom Tags and Custom Strings.
You can define a new custom tag (Button New) and then edit it. A CTag consists on a comment, the start tag and the end tag. These tags behave exactly as WebPlug's internal ones. Of course, you can use Drag'n'Drop to apply them.

This function also includes Custom Strings. A custom string is just a string that you can add to the text, for example, a URL that you use very often. The custom strings can be dragged and dropped on the textfield, or on any string-gadget of WebPlug.
List window: Nothing to explain here. Just mark a block of text and insert a list tag. Future versions of WebPlug will offer some kind of automatic generation for lists.
Supports Drag'n'Drop to the textfield.gadget.
Background window: Here you can specify all the tags concerning the background of the page. The 'Show' button will make WebPlug display the background image you have selected.
If you want to specify a color, just activate it (by selecting the checkmark) and click on the popup-image. The color requester will appear.
Tables window: This page contains the GUI to create tables. It features an automatic generation of tables. If you want, a number will be introduced in each cel (-1 if it's a header cell).
The parameters of each automatically generated cell are taken from current settings...
Supports Drag'n'Drop to the textfield.gadget.
Links window: Here you can specify an HTML link. Simply type in the 'Link to' field where do you want the link to point to, mark a block and type insert.
Custom Tags/Strings window: WebPlug now supports user-configurable HTML tags and strings. This function opens a window that includes 2 lists, Custom Tags and Custom Strings.
You can define a new custom tag (Button New) and then edit it. A CTag consists on a comment, the start tag and the end tag. These tags behave exactly as WebPlug's internal ones. Of course, you can use Drag'n'Drop to apply them.

This function also includes Custom Strings. A custom string is just a string that you can add to the text, for example, a URL that you use very often. The custom strings can be dragged and dropped on the textfield, or on any string-gadget of WebPlug.

Go to top.

Sending the doc to a browser...

WebPlug is not a WYSIWYG program. This means that you have no inmediate visual result of what you're doing.
To 'solve' somehow this problem, WebPlug features the BrowserLinks. A BrowserLink is simply a shared library that teaches it how to communicate to a given WWW-browser. This way, you can edit the HTML document, and send it to a browser for testing reasons with a single mouse click.

By now the following browsers are supported:

AMosaic (tested with v1.2)

Setting a BrowserLink...: BrowserLinks teach WebPlug how to communicate with a WWW browser. You have to tell WebPlug which browser will you use by setting the appropiate BrowserLink. Simply go to the prefs window and specify the full path of the BrowserLink..
You have to set the full path of the browser, too, so WebPlug can find it when you want to run it.
Running the selected browser: If you have specified the full path of your browser, you can execute it by selecting the 'Browser/Run browser' menu or by clicking the 1st button (from left to right) in the Browser Window.. Then, WebPlug will try to execute it and will wait for the browser's ARexx port.
If for any reason the browser is not loaded, you can cancel the wait by simply clicking 'Cancel' on the load window.
Please note that if the browser is already loaded and you want to use it with WebPlug you have to select 'Browser/Run browser' anyway. In this case, WebPlug will not load the browser, of course; it will load the BrowserLink only.
Actually sending it...: Simply select the menu 'Send to browser' or click on the 2nd button (from left to right) in the Browser window, if you send it for the first time, and 'Reload document' if it is not the case.
If the browser supports it, and you've set the 'Bring browser to front/back' option in the prefs, the browser's screen will become the frontmost.

Go to top.

Using the editor...

WebPlug's built-in editor is based on the Textfield.gadged (© Mark Thomas). This gadget conflicts with an existing TextField.mcc. To avoid hangs, just don't select the TextField entry in MUI-Prefs for WebPlug.

Here goes a list of usefull shortcuts (taken directly from Textfield.gadget docs):

SHIFT CURSOR UP : Move to the top line in the current page, or scroll up one page if cursor is on top line
SHIFT CURSOR DOWN: Move to the bottom line in the current page,or scroll down one page if cursor is on top line
CTRL or SHIFT CURSOR RIGHT : Move to the right end of the current line
CTRL or SHIFT CURSOR LEFT: Move to the left end of the current line
SHIFT BACKSPACE:Delete all text to the left of cursor on the current line
SHIFT DELETE:Delete all text to the right of the cursor on the current line (in block cursor mode this also includes the highlighted character).
CTRL CURSOR UP : Move to the top line of the text
CTRL CURSOR DOWN: Move to the bottom line of the text
ALT CURSOR RIGHT: Move to the next word
ALT CURSOR LEFT:Move to the previous word
ALT CURSOR UP:Move to first character in gadget
ALT CURSOR DOWN:Move to last character in gadget
ALT BACKSPACE:Deletes the word to the left of the cursor starting at the current cursor position
ALT DEL:Deletes the word to the right of the cursor starting at the current cursor position
CTRL X:Deletes the whole line that the cursor is on
RAMIGA V:Paste text from clipboard to current cursor position (menu Edit/Paste).
RAMIGA C: Copies the current block of text to the clipboard (same as menu Edit/Copy).
RAMIGA X: Cuts the current block of text to the clipboard (same as menu Edit/Cut).
RAMIGA A:Mark all text
RAMIGA U:Undeletes (pastes) the last block of text marked, or recover from RAMIGA E

As of v1.1, WebPlug can handle up to 5 documents at the same time in memory. You can easily switch from a document to another by simply selecting the desired document in the cycle-list of the editor's window (I recommend to have the cycle gadgets' pop-up option in the MUI settings, at least for WebPlug).

WebPlug can remember 5 locations in each document. This way, you don't have to search an search for a given position in the document. Just 'Mark' it (using the Edit/Mark) menu and return to this point at any time (by using the Edit/Go to menu).

v1.1+ also allows you to set the font of the editor. I recommend to use non-proportional fonts (like XEN), as the refresh is much faster.

From v1.2, WebPlug features Drag'n'Drop support for it's listviews. Simply select a tag (from any window) and drop it on the textfield gadget. It will be inserted as if you pressed 'Insert' (that's the reason why the 'Insert' buttons can be hidden in this version).

WebPlug includes a very simple 'Search' function. It will search (case insensitive) for a given string all over the document. You can even make WebPlug select (mark or block :-) the found string, so you can easily add tags to it.
The string you want to find is "translated" (to ISO-chars).

The editor is still simple. Newer versions of WebPlug will include more options.

Go to top.