CoffeeCup HTML Editor 18 is an advanced web design tool for building professional, high-quality websites that support HTML5 and CSS3.
The HTML Editor provides intuitive tools such as tag references, code completion, live previews, and components that update instantly on all pages. Combined with other powerful tools, these features simplify and accelerate web development.
Starting a website is quick and easy with multiple options available. You can create new HTML or CSS files from scratch or jumpstart your design using an existing theme or layout.
If you already have a website, you can open its files directly from your computer or access them from your web server. The Open From Web feature allows you to use any website as a starting point, regardless of ownership.
Common website elements, such as menus, headers, and footers, can be saved in the Components Library and reused across multiple pages. Rather than manually updating these elements on each page, you can edit the library item, which will automatically update everywhere.
CoffeeCup HTML Editor 18 includes three tools designed, to catch and correct errors, ensuring your code is valid.
New Start Screen
The new welcome screen will give your web development a fast start. If you need to create a quick static page, click New HTML Page. You can also begin from this new Start Screen with a responsive template, start a complex web project, or experiment with some PHP.
Get started in seconds
To work on your website is lightning quick. You can create new HTML or CSS files from scratch or jumpstart your design with an existing theme or ready-to-use layout.
If you have a website, you can open its files from your computer or access them directly from your web server. With the Open From Web option, you can use any website as a starting point; it does not have to be yours.
Visual code selector + Live preview
Utilize the split-screen preview to see your webpage displayed right below your code. Or use the external preview to display your page in another window or a second monitor. The live preview shows you exactly what your design will look like as you work.
Template Downloader
You can use a collection of free, 100% responsive templates. The new Template Installer imports these designs into the HTML Editor with just two clicks. If you want to learn CSS Grid, download a template and experiment with the code.
Code with confidence
A comprehensive Tag Reference section provides the correct tags right at your fingertips. Code Completion automatically suggests tags as you type and intelligently recommends selectors from your referenced CSS files. A built-in Validation Tool allows you to check all types of code to ensure your pages are perfectly valid.
Using these tools helps produce valid code, ensuring your pages display consistently and are more accessible to users with disabilities and search engines.
More Features of CoffeeCup HTML Editor 18:
- Cross-browser compatibility is important, so the HTML Editor allows you to add up to 10 different browsers and open them directly from the program.
- Certain characters must be formatted as HTML entities to render properly. The Characters tab allows you to insert these entities with a simple click.
- Website Projects help keep your website organized, all but eliminating broken links and incorrectly referenced images.
- The built-in Validate HTML tool opens the W3C markup validation service in the web browsers set as your default.
- HTML and CSS code completion virtually eliminates unclosed tags and typos; it even serves up the selectors from every referenced CSS file.
- The HTML Editor comes with 10 new, professionally designed themes. You can preview the themes before applying them to your pages in the sleek new Theme Chooser.
- The Tags tab is a comprehensive reference for HTML, PHP, and CSS tags.
- Split-Screen Preview allows you to view your webpage in a browser directly from within the Code Editor.
Changes in CoffeeCup HTML Editor 18.0 Build 890 :
The CoffeeCup HTML Editor 18 introduces more user interface color improvements, additional productivity features, and various tweaks and bug fixes.
Most Notable feature improvements:
- Load and Save Syntax Highlighter color schemes
- Pre-installed dark color schemes
- Auto Correct/Change
- Code Templates
- PHP Syntax Checking
Editor Options Dialog Changes
- The Editor Options dialog can now be shown directly from the Tools menu via Highlighter Colors, Options, AutoCorrect, Code Templates… menu (or Ctrl+Alt+,) [Control+Alt+Comma). There is a button in the old location in the Preferences Customization tab as well.
- The Editor Options Dialog is larger and resizable. You can modify the settings for all of the document types (HTML, CSS, JavaScript, Perl, Text) without leaving the Editor Options dialog. Please note, that each of the document types has its own Highlighter, Options, AutoCorrect, and Code Template settings.
- The Save and Apply Changes button will save your changes and then if applicable to the document type, it will update the currently open document in the Editor so you can see the changes before dismissing the dialog.
- The Reset button will reset the installed parser file to the installed state. There is an option in the dialog to preserve your Auto Correct and Code Templates.
Highlighter Tab Changes
Highlighting Color Schemes menu button: Load, Save, and Delete color schemes. Color schemes are saved in the parsers folder with the “*.scs” file extension. Use the Open Parsers Folder button to quickly access this folder.
- The Example code for the HTML highlighter has been improved. Edit the example, by modifying the html.html file in the Parsers folder.
- There is now a Show only monospaced (fixed-width) fonts option since most developers prefer to work with fixed-width fonts.
- There is now a Swap Colors button.
- Improved Foreground and Background Color buttons have been made the same as in Quick Start. Don’t forget, to click the color for a browse dialog (now the CoffeeCup Common Color dialog), and click the arrow to drop down the quick color picker.
- Clicking on the Gutter in the Highlighting tab Syntax Editor now selects Gutter in the list.
- Clicking on the Left Margin in the Highlighting tab Syntax Editor now selects Left Margin in the list.
Options Tab Changes
General Layout improvements and mouse hover hints are now included for each option.
There was a bug in the Editor Options Block Indent Step Size and Default Tab Stop settings, you may need to adjust these settings. Previously, the Editor inserted twice as many characters as it was supposed to. Also, the Indent/Unindent menu items did not use these correctly.
Auto Correct/Change Tab Addition
Auto Correct/Change will substitute a word when one of the actuation keys is pressed. This feature can be used to correct mis-typed words, or used to expand abbreviations to save you typing time. For example, you may want to be able to type bkgc and have that auto-correct to background-color. The possibilities are endless!
Code Templates Tab Addition
Snippets are great for larger code templates that may need explanation, but Code Templates are also useful for quickly inserting commonly used code.
There are two ways to use Code Templates:
- Type all or part of the code template name and then press the activation key (Ctrl+J by default). If there is an exact match for what you have typed, the code template will be inserted. If there is no match or a partial match, the code templates list will pop up.
- Press the activation key (Ctrl+J by default) to show a list of all Code Templates, then double-click or press enter to insert one.
Miscellaneous Additions, Changes, and Fixes
The main interface document tab colors now match the current parser colors.
- The added Syntax Check PHP menu is located under the Documents menu.
- There was a bug in the Editor Options Block Indent Step Size and Default Tab Stop settings, you may need to adjust these settings. Previously, the Editor inserted twice as many characters as it was supposed to. Also, the Indent/Unindent menu items did not use these correctly.
- When the Editor Options Cursor beyond the End of the Line was on, insertions beyond the natural end of the line sometimes resulted in the cursor being placed in the wrong location after the insertion.
- The Main Window Status Bar Column value was off when the “Cursor beyond EOL” option was turned on and the cursor was beyond EOL.
- Syntax Editor Gutter Font color is now automatically changed to a contrasting color based on the Gutter Color (white/black).
- Colorization of code colors was causing a “flashing” of various User Interface items while typing.
- Backspace with text selected when the cursor was beyond the end of a line (Highlighter Options include Cursor Beyond EOL) did not delete text, it just did the same as the cursor left.
Supported Operating Systems: Windows 7, 8, 8.1, 10, 11.
