html

Eclipse HTML Editor Tutorial

In this tutorial, we will learn to use the HTML Editor available through the Web Tools Platform (WTP) within Eclipse.

HTML stands for Hyper Text Markup Language, and is composed of a set of markup tags that form / describe a specific document content containing HTML tags and text. A web browser can read such HTML documents and compose them into visible or audible web pages. The browser does not display the HTML tags, but uses them to interpret the content of the page. HTML describes the structure of a website semantically along with cues for presentation, making it a markup language rather than a programming language.

 
The HTML Editor helps ease HTML page development within eclipse.

Validate the editor availability

The first step is to validate whether the HTML editor is available for your Eclipse Installation. If you have already installed Eclipse IDE for Java EE Developers, you may skip this section.

Go to Menu –> Window –> Preferences.

Browse to Web –> HTML Files –> Editor

Verify HTML Editor availability
Verify HTML Editor availability

In case, you do not find Web under Preferences, you will have to install the Web Tools Platform (WTP) in your eclipse. The WTP is available by default for Eclipse 4.3 JEE and above. For versions prior to 4.3, please follow the New Software Installation instructions here.

The update site repository links for webtools for specific eclipse releases can be found here.

Customizing the HTML editor

In the below steps, we will explore the HTML editor default configurations and customizations that can be achieved based on our preferences.

  1. General editor customizations
  2. Here, we can customize the HTML editor for basic formatting of source code within HTML. These include code line width, splitting of attributes, code identation and corresponding size. Moreover, there are also options to add new OR remove default inline elements within HTML.
    The case provider helps differentiate tag names and attributes names for the content assist and code generation.

    As seen in screenshot below, we have added the div tag as an inline element for our own customization.

    HTML Editor - General configurations
    HTML Editor – General configurations

  3. Content Assist
  4. In this section, we can customize the content assist for the HTML editor – auto suggest delay, proposal category for the Ctrl + space command and finally proposal category for cyclic invocation of content assist. The screen allows one to change the priority of proposal of suggestion / content assist when invoked.

    HTML Editor - Content Assist
    HTML Editor – Content Assist

  5. Syntax coloring
  6. Here, we can customize the syntax coloring of HTML code within HTML files.

    HTML Editor - Syntax coloring
    HTML Editor – Syntax coloring

  7. New HTML Templates
  8. Here, we can add new custom Templates as well as modify existing templates to suit our preferences.

    HTML Editor - Available Templates
    HTML Editor – Available Templates

    As part of this tutorial, we will create a new template named “div tag with custom css” as shown below.

    HTML Editor - New Template
    HTML Editor – New Template

  9. Typing (html source)
  10. In this part of the editor customizations, once can edit typing related properties while coding using HTML (within html files).

    HTML Editor - Typing customizations
    HTML Editor – Typing customizations

  11. HTML Validation
  12. Finally, as part of the HTML editor, once can customize and set either of WARNING / ERROR / INFO severity levels for various scenarios of HTML validations.

    HTML Editor - Validation
    HTML Editor – Validation

HTML Editor in Action

After reviewing the editor features and configuration, let us know see the HTML editor in action.

Create a new “Dynamic Web Project”.

Go to Menu –> New –> Dynamic Web Project.
Please select the appropriate webapp archetype in case you are creating a new Maven project.

Once the web project is created, we can now create a new HTML file. Right click on the project context, and click New.
Select HTML file and provide a name to the HTML File – HTMLEditorWelcome.html. Click Next.

In this step, select the desired template to use for the new HTML file. In this tutorial, we will use the already existing HTML 5 template. Click Finish and notice the new HTML file created with the doctype element at the top (for HTML 5).

New HTML page
New HTML page

Once the HTML file is created, use the Ctrl + Space content assist to see the available HTML tags options.

HTML Editor - content assist
HTML Editor – content assist

On hitting Ctrl + Space the second time, the default and any new templates created are available to be inserted within the HTML file. For example, in step above we created the custom div tag as a template and it is available through the content assist and can be inserted within the HTML file.

HTML Editor - content assist - II
HTML Editor – content assist – II

Let us complete our example HTML page by adding some headers and paragraph tags.

New HTML Page
New HTML Page

HTMLEditorWelcome.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML Editor</title>
</head>
<body>
	<h1>HTML Editor</h1>
	<p>This is an example about the HTML Editor</p>
	<h2><i>By Java Code Geeks</i></h2>
</body>
</html>

Add the created HTML file as the welcome page in the web.xml (Deployment descriptor).

HTMLEditorWelcome.html

<!DOCTYPE web-app PUBLIC
 "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
 "http://java.sun.com/dtd/web-app_2_3.dtd" >

<web-app>
	<display-name>HTML Editor Example</display-name>
	<welcome-file-list>
		<welcome-file>HTMLEditorWelcome.html</welcome-file>
	</welcome-file-list>
</web-app>

Right-click and run the application on server.

HTML Editor - Browser Output
HTML Editor – Browser Output

Download the Eclipse Project

This was an example demonstrating use of HTML Editor in eclipse.

Download
You can download the full source code of this example here: HTMLEditorExample.zip

Vishal Rajpal

Vishal enjoys designing and developing small and mid-sized Enterprise solutions in Java and it's ecosystem. He has graduated from RGTU, India in Electronics and Telecommunication Engineering. Currently, Vishal is working with an Analytics organization, enabling the in-house analytics as well as client teams to use technology as a differentiator for projects / problems related to Big Data.
Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Inline Feedbacks
View all comments
Back to top button