WYSIWYG HTML Editor How-to – Notified Solution Center

HTML builder toolbar section icons


	Clear your work area of any text or formatting, and open a new document.
	Print a black and white preview of your work area


	Click on the "Undo" button to undo changes you have done one by one.
	Click on the "Redo" button to redo changes you have undone and want back in place.
	To cut a portion of the document, highlight the desired portion and click on the "Cut" button (keyboard shortcut – CTRL + X for PC and CMD + X for Mac).
	To copy a portion of the document, highlight the desired portion and click on the "Copy" button (keyboard shortcut – CTRL + C for PC and CMD + X for Mac).
	To paste a portion of code or text into your document, click on the area of the document you would like to paste to (a blinking cursor will appear in the active area) click on the "paste" button (keyboard shortcut – CTRL + V for PC and CMD + V for Mac).
	To paste as plain text (removes any text formatting), click on the "Paste as Plain Text" button. This will open a new window where you can paste and then insert your text without any formatting (keyboard shortcut – CTRL + Shift + V for PC and CMD + Shift + V for Mac).
	Select all text or formatting for any currently active row, column, or text area
	Find and replace any front-facing (what the visitor sees) with another string of text.


	Insert or Edit an image into your chosen active work area (a blinking cursor will appear in the active area)
	To create a hyperlink, select the text or image for the link, and then click on the "Insert/edit link" button. The full URL of the page to be linked can be typed in the URL text box. A target window information (optional) can also be supplied. When finished, click on the "Ok" button to insert the hyperlink you just created
	To insert a special character, click on the "Insert Special Character" button. A pop-up window will appear with a list of special characters. Click on the character to insert it into your web page.
	Adds a blank line over a Horizontal line under your text. Please note the image above, as this is different from an underline.
	To create an anchor, select the text or image for the anchor, then click on the "Insert/edit anchor" button. A pop-up window will contain existing anchor information. Enter the name of the anchor and click on the "Ok" button.
	Used mostly in formatting a page for printing Page breaks won't show up front-facing (what the visitor sees) on the page, but will break up the page into multiple pages when printing.
	Several different formatting options for inputting time and dates
	Non-breaking space is a character entity that can: Create white space between words or web page elements stop the browser from breaking a line in the wrong place.


	Adds/removes the outlines of tables and other elements, for visual purposes only.
	Show any blocks of HTML visually in your work area: paragraph, div, blockquote, pre.
	Adds a dotted line around cells, tables, and rows to make them easier to see in your layout
	Shows a preview of what your page will look like to your front-facing visitor (what the visitor sees when they visit)
	Opens your current work area and HTML builder bars in the full window of your browser.


	Turns selected text into bold text.
	Turns selected text into italicized text.
	Turns selected text into underlined text. Please note: on most websites, the underlined text usually means that a word or phrase is a link to another web page. In this case, however, the underline formatting does not create a link (to create a link, see the "Insert/Edit Link" Button ).
	Turns selected text into ~~strikethrough text~~.
	Turns selected text into ^{superscript text}.
	Turns selected text into _{subscript text}.
	Contains multiple options for HTML text formatting, Headings, Inline fonts, Blocks, and Alignment
	Removes any text or HTML formatting from the selected part of the work area (a blinking cursor will appear in the active area)


	To insert a table, select the desired location, then click on the "Insert Table" button. A new window will pop up showing a 10X10 grid of squares. Dragging your mouse over the grid will fill squares in a Column X Row order. After finding the correct size for your table click the corresponding square in the grid to add the table to your work area.
	Width - the width of the table; Height - the height of the table Cell Padding - padding around cells Cell Spacing - spacing between cells Alignment - the alignment of the content within the cells Border - thickness of the border around the cells Caption - choose whether or not to have a caption above the table. Advanced options include Style - add style tags to tables
	Delete the highlighted table in your work area
	Here you can edit the alignment, background color, and several other properties of the cells of the table.
	Here you can edit the alignment, background color, and several other properties of the rows of the table.
	Here you can edit the alignment, background color, and several other properties of the columns of the table.


	Takes you to the HTML Source Editor so that you can directly edit the HTML source code.

Fonts & text styling section:

	Click on the "Undo" button to undo changes you have done one by one.
	Click on the "Redo" button to redo changes you have undone and want back in place.
	Used to add HTML formatting to highlighted text
	Turns selected text into bold text.
	Turns selected text into italicized text.
	Moves all selected text to the left.
	Centers all selected text.
	Moves all selected text to the right.
	Moves all selected text to the left and the right.


	To decrease the indent of a paragraph, click on the "Decrease indent" button. Each consecutive click will move text further to the left
	To increase the indent of a paragraph, click on the "Increase indent" button. Each consecutive click will move text further to the right.
	To create a hyperlink, select the text or image for the link, and then click on the "Insert/edit link" button. The full URL of the page to be linked can be typed in the URL text box. A target window information (optional) can also be supplied. When finished, click on the "Ok" button to insert the hyperlink you just created
	Insert or Edit an image into your chosen active work area (a blinking cursor will appear in the active area)
	Print a black and white preview of your work area
	Shows a preview of what your page will look like to your front-facing visitor (what the visitor sees when they visit)
	Choose the font family i.e. Arial, Arial Black, etc... for your currently active work area/table, cell, row, or highlighted text
	Choose the font size for your currently active work area/ table, cell, row, or highlighted text
	Choose the text color for your currently active work area/ table, cell, row, or highlighted text
	Choose the background color for your currently active work area/ table, cell, row, or highlighted text

Tips for success:
HTML can be daunting! Not sure what the definition of an Html tag is? Please see this: HTML reference

Comments

Related articles