1. HTML/JSP Editor

To edit an HTML or JSP file, do one of the following:

• Double-click an HTML or JSP file.
• Right-click an HTML or JSP file, and select Open.

The HTML editor has the following modes:

• Source Mode—The Source mode is a source code editor for HTML and JSP code that includes smart content assist, line numbering, colored syntax highlighting, format operations, real-time validation, marking of problematic source as you type, and code formatting.
• Design Mode—The Design mode has a dual panel view with the Design mode in the top panel and the Source mode in bottom panel. The design mode is a WYSIWYG visual editing mode. The design canvas allows web UI controls to be selected, copied, cut, pasted, and repositioned using drag-and-drop. This mode includes a design palette that contains UI web controls you can add to the design canvas.
• Preview Mode—The Preview mode allows you to quickly see how your page looks in a browser. The Preview mode loads the current source from the Design mode, even if the editor contents have not yet been saved. The HTML source is rendered in the Preview mode and is “rooted” at the location of the resource. If images in the HTML document are relative to the current location of the HTML page, then the images are rendered correctly in the preview.

The Design mode is the default when opening a file. Change modes by clicking the appropriate tab on the bottom of the editor. 

This overview shows the concepts and features most important to HTML editing using the source code editor. For information on using the Design mode, click here. 

2. Editing the Source Code

You can access the source code from the Source mode or the Design mode. The Design mode has a dual panel view with the Design mode in the top panel and the Source mode in bottom panel.

The following productivity features are available when editing the source code directly:

• Syntax color and highlighting
• Smart code completion and content assist
• HTML Validation
• Source Formatting and Cleanup
• HTML Templates
• HTML Snippets

2.1 Smart Code Completion and Content Assist

Throughout the source, the editor provides content-specific code assistance. 

Tag names: Code assist provides a list of available HTML tags based on your current context.

Tag attributes: Code assist provides a list of attributes specific to the tag being edited.

Tag attribute code assist

Attribute values: When appropriate, the code assist provides you with a list of known possible values.

Attribute value code assist

2.2 HTML Validation

There are two types of HTML validation: “As you type” and “Resource changed.”

As you type: When you make changes to an HTML document, the editor is always checking the validity of your HTML syntax, just as the Java editor does.

Note: Validation errors and warning of this type do not appear in the Problems view.

Resource changed: When the resource is modified, either saved, moved, copied, or imported, the resource builder performs HTML validation on the resource. 

Note: You can set validation preferences by selecting Window>Preferences from the menu, expanding MyEclipse, and choosing Validation.

“Resource Changed” HTML validation

2.3 Source Formatting and Cleanup

To quickly format the source code, right-click the editor, and select Source>Format. The formatter doesn’t modify the HTML tag elements internally. It only adjusts indentation and spacing of HTML elements.

Use the Cleanup Document option for advanced formatting and style adjustments that allow you to change the cases of both tag names and attributes. There are other options for inserting required tags and attributes. To use this option, right-click in the editor and select Source>Cleanup Document. Select the Format source checkbox to include the Format Document action as part of the document cleanup.

<nav>
   <ul>
     <li>
     </li>
   </ul>
</nav>

<ul>
   <li class="item1"></li>
   <li class="item2"></li>
   <li class="item3"></li>
   <li class="item4"></li>
   <li class="item5"></li>
</ul>

3. Outline View

The Outline view provides a real-time tree view of the HTML document. Each node in the tree represents an HTML element. Click a tree node to highlight the corresponding HTML element in the source editor and to activate the element in the Properties view.

Right-click an HTML element in the outline to see a list of actions enabled for it. The contents of each of these menus are context-sensitive based on the type and location of the HTML element. For instance, in the following example, the menu items for a <tr> tag in the Add Before menu show only those HTML tags that make sense in the parent <table> context.

4. Properties View

The Properties view allows you to edit valid attributes for any selected HTML element. 

5. Preferences Page

To edit the HTML Editor preferences, right-click the source editor, and select Preferences from the menu. Or, you can select Window>Preferences>MyEclipse>Files and Editors and select the appropriate editor. The Common Editor preferences are used by all MyEclipse editors, including the HTML Editor.

 

The HTML Source preference has options specific to HTML editing such as format rules, content assist, tag names, and cases.

HTML Source preferences

6. Related Topics 

• Minimap View