This tutorial explains How to use the Complete HTML Form Word Processor with Spelling Check and Editable Inserted Table, plus Free Download. The hyperlink to click for the free download of the complete code, is given at the end of this document. The previous five tutorials explain how the complete code was designed.

How to use the Complete HTML Form Word Processor with Spelling Check and Editable Table

Bold Text

To bold text, select the text and then click the Bold Button. To delete the bold text, place the cursor at the end of the bold text, and use the Keyboard Backspace Key.

Italic Text

To italicize text, select the text and click the Italic button. To delete the italic text, place the cursor at the end of the italic text, and use the Keyboard Backspace Key.

Underline Text

To underline text, select the text and click the Underline button. To delete the underlined text, place the cursor at the end of the underlined text, and use the Keyboard Backspace Key.

Text Heading

To make text a header, select the text and click the correct select element. Then choose the header size. To delete a header (text), place the cursor at the end of the header, and use the Keyboard Backspace Key.

Insert Hyperlink

To insert hyperlink, place the cursor at a position for the insertion. Click the Insert Hyperlink Button. Then two JavaScript prompt windows will appear, one after the other. The first prompt window will ask for the name (short description) of the hyperlink, and the next one will ask for the URL of the hyperlink. To delete a hyperlink, place the cursor at the end of the hyperlink, and use the Keyboard Backspace Key.

Insert Image

To insert image, place the cursor at a position for the insertion. Click the Insert Image Button. Then two JavaScript prompt windows will appear, one after the other. The first prompt window will ask for the URL of the image, and the next one will ask for the alternative-text (alt) for the image. The alt is optional. After that, the image should appear, if it exists at its destination, and if the connection is not slow. To delete an image, select the image (either by dragging with the mouse pointer or using shift and arrow keys), then place the cursor at the end of the image, and use the Keyboard Backspace Key.

Special Format for Computer Language Code

To do a special format for the computer language code, select the code segment of interest (either by dragging with the mouse pointer or using shift and arrow keys), then click the Code button. To delete formatted code, select all the formatted code (either by dragging with the mouse pointer or using shift and arrow keys), then place the cursor at the end of the selection, and use the Keyboard Backspace Key.

Unordered List

To format a section of text into an unordered bulleted list. Select the section of text first. This section of text selected, has to consist of text lines without blank lines in-between, otherwise there will be issues. After selecting, the Unordered List button is clicked. To delete an unordered list, select the whole list (either by dragging with the mouse pointer or using shift and arrow keys), then place the cursor at the end of the selection, and use the Keyboard Backspace Key.

Ordered List

To format a section of text into an ordered numbered list. Select the section of text first. This section of text selected, has to consist of text lines without blank lines in-between, otherwise there will be issues. After selecting, the Ordered List button is clicked. To delete an ordered list, select the whole list (either by dragging with the mouse pointer or using shift and arrow keys), then place the cursor at the end of the selection, and use the Keyboard Backspace Key.

Superscript and Subscript

To have a superscript or subscript in the word processor, select the text that is to go up or down respectively (with the mouse pointer or using the shift and arrow key), then drop down the correct select element; and then choose the superscript option or subscript option. To delete the superscript or subscript, place the cursor at the end of the marked-up text, and use the Keyboard Backspace Key.

Creating a Table

For the insertion (creation) of a table, place the cursor at the position for the insertion. After clicking the Create Table option of the correct select element, two JavaScript prompt windows will appear, one after the other. The first prompt window will ask for the number of rows (excluding the header row); and the next one will ask for the number of columns. After that, the default table will appear with default contents. The user has to replace the default contents with his/her own contents.

Deleting a Table

Select all the contents of the table (either by dragging with the mouse pointer or using shift and arrow keys). Click the Delete Table option of the correct select element.

For some of the above markups, a blank line may appear above or below the markup. Just use the Keyboard Backspace Key to remove it.

Modifying the Complete Code

If the reader has read all the seven parts of this series and understood, then with some small extra studies, the reader can modify the complete code. For example, the reader can replace the button names with standard icons. The reader can provide the possibility to insert or delete columns and rows for the table. There are other possibilities.

Free Download and Use

There is a zip file to download. The name of the zip file is form.zip . It contains a form directory with two files: a readMeFirst file (readMeFirst.txt) and the HTML complete code file (completeCode.html). Click the following link to download it:

https://www.broad-network.com/Internet/articles/_general/dir0/images/form.zip

Installation

There is no classical installation.

Just copy the content of the style element from the complete HTML code file, into the style element of your personal or commercial webpage. Copy everything in the form element including the start and end tags of the form element, and place where you want the word processor to be in your webpage. Go live! That is all.

Chrys