Vishal Rajpal

About 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.

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

Do you want to know how to develop your skillset to become a Java Rockstar?

Subscribe to our newsletter to start Rocking right now!

To get you started we give you two of our best selling eBooks for FREE!

JPA Mini Book

Learn how to leverage the power of JPA in order to create robust and flexible Java applications. With this Mini Book, you will get introduced to JPA and smoothly transition to more advanced concepts.

JVM Troubleshooting Guide

The Java virtual machine is really the foundation of any Java EE platform. Learn how to master it with this advanced guide!

Given email address is already subscribed, thank you!
Oops. Something went wrong. Please try again later.
Please provide a valid email address.
Thank you, your sign-up request was successful! Please check your e-mail inbox.
Please complete the CAPTCHA.
Please fill in the required fields.
Examples Java Code Geeks and all content copyright © 2010-2014, Exelixis Media Ltd | Terms of Use | Privacy Policy | Contact
All trademarks and registered trademarks appearing on Examples Java Code Geeks are the property of their respective owners.
Java is a trademark or registered trademark of Oracle Corporation in the United States and other countries.
Examples Java Code Geeks is not connected to Oracle Corporation and is not sponsored by Oracle Corporation.
Do you want to know how to develop your skillset and become a ...
Java Rockstar?

Subscribe to our newsletter to start Rocking right now!

To get you started we give you two of our best selling eBooks for FREE!

Get ready to Rock!
You can download the complementary eBooks using the links below:
Close