Website HTML Editor Basics

Overview: What are we talking about?

This article reviews the basic functions and buttons within the website HTML editor.

Website HTML Editor Basics

Luckily today you do not have to be a computer programmer to create Web pages. 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:

Source: Clicking on this button will toggle the view between the HTML Editor view and the Textarea code view. In some cases you may see a field above this row of icons titled "Editor Type:" with a drop down box that allows you to toggle between the two as well.

Show Blocks: Clicking this button will toggle the view of the HTML Editor to display any containers like the paragraph, or div tags (<p></p> and <div></div>). This view can be helpful if spacing between lines and paragraphs are an issue.

Maximize: Clicking this button will expand the viewing area allowing you a larger area to work in. This setting is more beneficial for those who edit in the Textarea view and need the extra area to view the additional lines of HTML code.

Undo: 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 ‘Redo’ and the content will revert back to the state that it was in before clicking undo.

Insert/Remove 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.

Insert/Remove 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.

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

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

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

Justify: By clicking on this icon you will be able to align the content to the right and left side of the Web page.

Link: 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.

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

Anchor: The anchor button is similar to the link button, but allows you to jump to a specific section on a page that you define. Use of this button may require some knowledge and familiarity with HTML. For more information on using Anchor tags, click here.

Insert Special Character: 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 Web page.

Create DIV Container: Clicking this button will create a div container that you can use to put text and image content in. Div tags are a useful formatting tool allowing a wide variety of options. Use of the div tag may require knowledge and/or experience with HTML coding. For more information about div tags, click here.

iFrame: This button will create an inline frame, or iframe. Which you can use to embed a video, document, or form. For more information about iframe tags, click here.

Flash (NO LONGER SUPPORTED): Clicking this button will allow you to display a flash file (.flv) on your site. You'll need to upload the file before clicking this button as you will need the URL of the flash file after it's been uploaded. Due to memory issues with Flash, some devices like the Apple's iPhone and iPad will not support Flash and because of this we don't recommend the use of Flash. Not all users will be able to view this file.

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

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

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 images, see Help with Tables.

Templates: Click this button if you want to use one of the preformatted templates for the content areas of your site. Templates include a preformatted list and table.

Remove Format: When you copy and paste text and/or images from another program or application like Microsoft Word or Adobe PDF, the formatting gets copied over with it. Sometimes this is preferred, sometimes this isn't. If you ever want to strip the formatting of the text in the HTML editor, left-click and hold your mouse button to highlight the text, and then click this button to remove the formatting.

Bold: By clicking on this icon you will be able to type all your text in a bold style. When you no longer want to bold text, simply click the ‘Bold’ 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: By clicking on this icon you will be able to type all your text in an italic style. When you no longer want to italicize text, simply click the ‘Italic’ 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: By clicking on this icon you will be able to type all your text in an underlined style. When you no longer want to underline text, simply click the ‘Underline’ icon again and the text will no longer type with an underline. You can also left-click and highlight existing text and then click the ‘Underline’ icon in order to make the selected text underlined.

Font: 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: Select a number in the Size dropdown menu (8 - smallest and 72 - 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 dropdown menu.

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

Paragraph Format: Highlighting text and then clicking this button will allow you to format your text in to a paragraph format defined by you. The paragraph formatting style options are: Normal, Heading 1 (Largest), Heading 2, Heading 3, Heading 4, Heading 5, Heading 6 (Smallest), Small Paragraph, Address, and Normal (DIV).

Formatting Styles: This button will remain inactive in most cases. However it's usage maybe required in the future. If that is the case, we'll update this section with more information at that time.