Finding Your Way Around Coffee Cup

The Coffee Cup text editor works in a similar way to a normal text editor. Just like Microsoft Word it enables you to format and tweak your document so that it appears in all the correct fonts, sizes, and colours for the finished product.

The Coffee Cup editor does exactly the same thing except for web pages. It is simple to use and does not add extraneous amounts of HTML coding like some other text editors.
Download it here for a Free Trial.

Getting Started

Once you open a new file it has three working modes (view them across the top of your page)

The Code Editor- the page that first opens and where you make changes to your document.

The Visual Editor- For WYSIWYG (What You See Is What You Get) editing- this mode is disabled in the Free version, so we will ignore it.

The Preview Page- which shows how you page will appear when it is loaded onto the web.

The first thing we do when opening the Code Editor is to delete all of the code that appears before us. This contains data for Header and Title information which we have already entered into our Storyboarding Page in readiness for loading. Site Build It takes care of all of this information on our behalf.

Paste in your content which you have typed up into a basic text editor (Notepad or Wordpad- not Word). You will see it before you exactly as you had typed it. If you click to the Preview mode you page will most likely not appear as you want it for your completed web page. Now is the time to 'pretty it up' for the web.

If you hold your mouse over the icons that run along the top of your page, you will see that almost all of the functions that you would ever need to use are found here.

The most important one's are:

Aa (Font)- these refer to the font wizard which helps you to choose font styles, sizes and colours. When choosing styles and sizes for your whole document, simply 'Select All' and make your selections, check the result on the Preview Page, and then go back and unhighlight your work.

**TIP- The most commonly used font on the web is 'Verdana', we recommend this font in 'Size 2' for standard text on web pages.

P (Paragraph)- P in HTML language, always refers to a paragraph. This is one of the most straightforward pieces of code to learn, and you will see it appear as you edit your work. When using the editor, simply highlight the section of text that you wish to be a paragraph and then hit the 'P' button. Too easy!

Arrow Symbol (Break)- Hold your mouse over this button, and it indicates 'break', which means a line break between words. If you have sentences which appear in Preview mode as running together when you don't want them to, simply place the cursor in the place where you want your 'break' and hit the key. The 'break' key can also be used in lieu of a paragraph break, by inserting it twice.

B (Bold)- The easiest of all, the 'bold key'. Simply highlight the text that you wish to display as bold, and hit the 'bold' key. Exactly the same for the next button across which is to display Italics.

The above 5 keys will cover most basic functions that you need to use on your pages. In the next Coffee Cup tutorial we will look at creating a link within the editor.

Back to Home from Using the Free HTML Editor