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.

Figure and Optional FigCaption Markup

Marking up content, applies to a element as a unit, and not to a fragment. A single image (tag) element for example, is a unit. As another example, a single pre element with content, is still a single unit.

For the client (user) to mark up content as a figure, and giving an optional figure caption, the single unit element has to be selected first (with the mouse pointer or using the shift and arrow key). In the case of an image, a single click on the image for selection, might do. After selecting the single unit element, click the Figure button, in the menu bar. A JavaScript prompt dialog box will appear, asking the user for the string of the figure-caption. If the cancel button is clicked at this dialog box, no figure caption will be associated with the figure; and the single unit element will be marked up as a figure, without any caption.

If the caption string is typed into the prompt dialog box, and the OK button clicked, then a JavaScript Confirmation dialog box will appear, asking the user if he/she would want the caption to appear just above the single unit element. If the user clicks cancel, then the caption will appear just below the single unit element. If the user clicks OK, then the caption will appear just above the single unit element. The single unit element and the caption form the complete figure.

Description Definition, Description Term, Description List

To have a Description List (DL) or its children: Description Term (DT) and Description Definition (DD) marked-up in the word processor, select first each text for DD markup (with the mouse pointer or using the shift and arrow key); then drop down the correct select element; and then choose the Description Definition option. The effect should appear on the screen, with indentation to the right. Apart from the indentation, the DD text is not styled. It is the responsibility of the web-developer (programmer) to style the DD element text, as he/she deems fit, in the CSS style sheet.

Next, select each text for DT markup (with the mouse pointer or using the shift and arrow key); then drop down the same correct select element; and then choose the Description Term option. Apart from that the cursor (I bar) will appear at the right end of the DT text, there is no styling (and no indentation) of the DT text. It is the responsibility of the web-developer (programmer) to style the DT element text, as he/she deems fit, in the CSS style sheet.

Next, select all the DD and DT texts together, presuming already marked-up (with the mouse pointer or using the shift and arrow key); then drop down the same correct select element; and then choose the Description List option.

Upload File

There is the "Browse…" button with the text, "No file selected." next to it. When this button or the text next to it is clicked, a "File Upload" dialog box opens, for only one file to be selected. There are features in the dialog box, which the user can use to navigate to a particular directory and select only one file.

When the file is clicked to select it (becomes highlighted). The OK button or Select button of the dialog box has to be clicked, to dismiss the dialog box. The file is already selected. The text "No file selected." will change to the name of the file selected, without the preceding directory path. If the submit button of the form is clicked, the content of the file selected and its name, will be sent to the web-server. What exactly happens in the web-server is not address in this tutorial.

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