HTML Editor

From HostBaby Wiki

The HTML Editor is a simple tool that can help you make updates to your content areas on the wizard.

It will only appear in larger text boxes on the wizard (i.e. anywhere you can type more than one visible line of text.)

Contents 1 Bold, Italic, and Underline 2 Text Align 3 Format 4 Font Family 5 Font Size 6 Text Color 7 Remove Formatting 8 Paste as plain Text 9 Bullets and Numbering 10 Indent 11 Undo and Redo 12 Text Links 13 Horizontal Rule 14 Insert Non-breaking space 15 Anchor Points 16 Visual control characters 17 Add Video (NEW) 18 Add Images 19 Insert HTML 20 Toggle Full Screen

Bold, Italic, and Underline

Pretty self-explanitory. Select the text that you want to Bold, Italicize or underline and then select the corresponding button on the editor.

Text Align

You can use these buttons to center your text or justify your paragraphs to the left, right, or center.

Format

Here are some pre formatted text options that will make use of your templates' built in font styling. Don't be surprised if it looks different on your live site.

Font Family

This setting allows you to change the font for the text in your content area, should you wish to do so. The HTML editor only uses Common Fonts (fonts that are common to all operating systems) -- this ensures that your site's content is consistent for every person that surfs your site. To choose a new font, simply highlight that font's name and start typing.

Next, we have the

Font Size

This allows you to increase or decrease the size of your font according to your tastes. Simply highlight the desired size and start typing.

Bold, Underline and Italics are also self-explanatory, so we can combine what we've learned so far in the following example of Font-Family Courier New, in Font Size 36, Bolded:

Text Color

Select the text with your cursor and then use the "A" button to select a color.

Remove Formatting

This is a useful tool. Sometimes you just want to erase all the links, bolds and fonts and start over with clean un-formatted text. To do this, just select the text and hit the erase button.

Paste as plain Text

Often pre-formatted text doesn't translate well between programs. Use this tool to remove formatting before you insert it in the editor.

The button beside it with a W is especially for pasting from Microsoft Word. You should never copy text directly from a word document without using this button. Otherwise you will have formatting problems.

Bullets and Numbering

1. With this
2. Cool Feature
3. You can create bulleted or numbered
4. lists

Indent

Here's a couple of quick and easy buttons to create paragraph indents.

Undo and Redo

Did you goof up? Use these buttons to undo or redo the last change you made.

Text Links

Now, let's make a text link (which is making some text in your content area a clickable link to another site, or another page of your site.)

First, type some text, and then highlight the bit of text you wish to become clickable:

Then click the little icon that looks like a bit of unbroken chainlink, and a window will pop up as follows:

Fill in the information with your desired link address (URL), target and title:

and click the Insert button. You will then be dropped back into the content window, where you will see your text underlined to represent that it is now a link:

Horizontal Rule

Use these buttons to create horizontal lines to separate text or images.

Insert Non-breaking space

You probably won't use this much. This buttons inserts a space just like your spacebar does. Sometimes it's useful if you want to force a single space break rather than a double.

Anchor Points

This will allow you to link to a particular area on a page. For instance, if you set an anchor point in the middle of a document and call it "Turtle" then you can link to it by going to

http://yourdomain.com/home.html#turtle

(subbing "yourdomain.com" for your actual website name)

Visual control characters

Allows you to see visual cues for invisible characters such as paragraph breaks.

Add Video (NEW)

You will now notice a small 'film strip' icon on the bottom right-hand corner of the Toggle Editor.

Use this to select a video that you have already uploaded to your File Bank and insert it on the page.

See this link for detailed instructions: Uploading_and_Displaying_Video

Add Images

Next, let's add an image to the post. Click the little icon that looks like a picture of a tree:

This will pop up another little window that you can use to fill in the details of your image.

If your picture is already uploaded to your image bank, you can use the drop down menu to select it.

(If you haven't uploaded your image yet, click here)

You also have the option of inserting the image location or URL of any image online and insert it into your site.

An image URL looks something like this:

http://somewebsite/images/picture.jpg

Once you're done filling in your information, click the Insert button, and you will be dropped back into the content area, where you will see your image.

If you've chosen to align your image to the left or the right, you will be able to type next to the image, so that the text will wrap around it, like so:

Once you're done with your entry, don't forget to click the ADD button to commit those changes permanently:

Once you've saved your changes, you can preview them. Here is an example of the entry we made using the HTML editor on a live site:

Insert HTML

Weather you are adding a PayPal button, YouTube video, Facebook badge, or Twitter widget, use the HTML insert button to enter code.

1. Make sure to copy all the code for whatever you are inserting. (missing even a "/" can break code).
2. Hit the HTML button
3. Paste the code into the box
4. Hit insert
5. Click change

Now you can Publish your site and see the wonderous widget you have inserted.

Toggle Full Screen

You can use this button to edit in a full screen window.