Newsletter HTML Editor Basics

Overview: What are we talking about?

This article will review the basic functions and buttons within the Newsletter HTML editor.

Luckily today you do not have to be a computer programmer to create Web pages or Newsletters. HTML is the programming code interpreted by a computer so that people can view the Internet. HTML editors, such as the toolbar below, can automatically convert any type of data into HTML code.

Cybergolf’s HTML editor is very similar to most word processors. The HTML editor gives its users the ability to lay out their content in a professional manner. In order to learn how to use the HTML editor, the user must become familiar with the various icons and their functions.

Below you will find an explanation for each HTML editor icon and its function:

Bold: Clicking this icon will type all your text in a bold style. When you no longer want to bold text, simply click this icon again and the text will no longer type bold. You can also left-click and highlight existing text and then click the ‘Bold’ icon in order to make the selected text bold.

Italic: Clicking this icon will type all your text in an italic style. When you no longer want to italicize text, simply click this icon again and the text will no longer type italic. You can also left-click and highlight existing text and then click the ‘Italic’ icon in order to make the selected text italic.

Underline: Clicking this icon will type all your text in an underlined style. When you no longer want to underline text, simply click this icon again and the text will no longer type underlined. You can also left-click and highlight existing text and then click the ‘Underline’ icon in order to make the selected text underlined.

Cut: By clicking on this icon you will be able to cut text from a paragraph and then paste the text to another area. Left-click and highlight the text or image and then click on the ‘Cut’ icon. The text or image will be removed and is ready to be pasted into another area.

Copy: By clicking on this icon you will be able to copy text from a paragraph and then paste the text to another area. Left-click and highlight the text or image and then click on the ‘Copy’ icon. The text or image will be duplicated is ready to be pasted into another area, with the original text or image still in the same area.

Paste: Once some text or an image has been copied or cut, you can place it in a different location by clicking this icon.

Select All: By clicking this icon, you can highlight all the text, images, and other content in the HTML editor. When content is highlighted you can either cut or copy the content, so that all the content can be quickly pasted to another HTML editor for another page.

Undo: By clicking this icon, you will be able to fix a mistake. If you accidentally deleted some content, just click the ‘Undo’ button and the content should be back to its original state.

Redo: If you clicked the ‘Undo’ icon and then realized that you did not want to remove the edit, just click this ‘Redo’ icon and the content will revert back to the state that it was in before clicking undo.

Left Align: By clicking this icon you will be able to align the content to the left side of the page.

Center Align: By clicking on this icon you will be able to align the content to the center of the page.

Right Align: By clicking on this icon you will be able to align the content to the right side of the page.

Numbered List: If you would like to create a list that automatically assigns numbers, click on the ‘Numbered List’ icon. This option will line up the list of content with a number before each line.

Bulleted List: If you would like to create a list that automatically assigns bullet points, click on the ‘Bulleted List’ icon. This option will line up the list of content with a bullet point before each line.

Increase Indent: By clicking on this icon you will be able to create an indenture in your text for the beginning of a paragraph or to align selected lines so that they are even. The ‘Indent’ icon is very similar to clicking the “Tab” key on your keyboard.

Decrease Indent: By clicking on this icon you will be able to reverse an indenture in your text. The ‘Decrease Indent’ icon is very similar to clicking the “Backspace” key on your keyboard.

Insert Hyperlink: If you wish to create a hyperlink in your content, simply left-click and highlight some existing text or an image, and then click on the ‘Insert Hyperlink’ icon. You will notice that when text is highlight or an image is selected the ‘Insert Hyperlink’ icon will be highlighted in the toolbar. For more information, see Help with Links.

Remove Hyperlink: If you wish to remove a hyperlink that was created simply highlight the hyperlink text or image and click on the ‘Remove Hyperlink’ icon.

Insert Image: By clicking on the ‘Insert Image’ icon, you can insert images into the HTML editor with your other content. For more information on inserting images, see Help with Images.

Insert Table: By clicking on the ‘Insert Table’ icon, you can insert tables into the HTML editor. Tables are great for creating charts that display rates, scorecard information, and to help with your content layout. For more information on inserting tables, see Help with Tables.

Horizontal Line: By clicking on the ‘Horizontal Line’ icon, you can insert a solid line under a paragraph to separate sections on the page more efficiently.

Special Characters: Sometimes you may want to add some text or symbols that are not located on your computer’s keyboard. Click on the ‘Special Characters’ icon and a window with list of symbols and text will appear. Simply click on one of these characters and the symbol will be inserted into the page.

Font Style: The Cybergolf HTML editor offers about a dozen different font styles, which allows you to give HTML text a unique appearance. Select a font style from the drop-down menu and the text will appear in your desired style. If you wish to change the font style of existing text simply left-click and highlight the text; then once the text is highlighted, select a font style from the drop-down menu and the text style will switch.

Some of your favorite font styles may not be available on the font drop-down menu because most fonts found in Microsoft Word are not transferable to HTML. You may notice on certain Internet browsers that some of the fonts offered by the Cybergolf HTML editor may not appear the way you want because your Internet browser is not set up to accept the font style.

Font Size: The Cybergolf HTML editor allows you to change the size of the text. Just select a number in the Size drop-down menu (1 - smallest and 7 - largest) and begin typing text onto the page. If you wish to change the font size of existing text, simply left-click and highlight the text. Once the text is highlighted, select a font size on the drop down menu.

Text Color: By clicking the ‘Text Color’ icon you will be able to change the default black color text to any color you wish.

Text Background Color: By clicking the ‘Text Background Color’ icon you will be able to change the text background color to any color you wish.

HTML Source Code: If you already have the HTML code created from another HTML editor program (such as FrontPage or Dreamweaver), then all you need to do is copy and paste the HTML code into Cybergolf’s HTML editor. Simply check the source box, and you will be able to view the actual HTML code of your newsletter design, or you will be able to paste your own HTML code into the system.

One thing you may need to keep in mind when copying and pasting HTML into the Cybergolf HTML editor is that you will have to upload the images separately into the editor in order for them to appear normally.

Spell Check: By clicking the ‘Spell Check’ link, you will be able to check your newsletter for spelling and grammatical errors.