Monday, November 11, 2024

Create an Static HTML5 Web Project in Eclipse

Eclipse has been the editor of choice for Web Application Development for a while now – especially for Java-powered multi-tiered apps. That being said, there are many flavors of Eclipse that target more straight ahead Web projects, such as those that feature JavaScript, or a collection of static pages. The Helios release 2 of the Eclipse IDE for Java EE Developers added support for HTML5-specific development. Some of the goodies that Eclipse provides include HTML5 page templates, code completion for HTML5 elements, a Properties editor for HTML5 attributes, and a WYSIWYG editor for visual development of your HTML5 pages. In today’s article, I’ll show you how to setup a static HTML5 Web project in Eclipse Juno.

Downloading and Installing Eclipse Juno

Eclipse Juno is available for download from the eclipse.org site. HTML5 support was added to the second Helios release. It’s your best bet is you only want to create static web pages and want to minimize the download time. The latest and greatest at this time is Juno. The specific flavor that we’re going to use is the Eclipse IDE for Java EE Developers. On the download page, you’ll see several links for different operating systems on the right-hand side of the page. Supported OSes include Windows 32 & 64 bit, Mac OS X (Cocoa 32 & 64), as well as Linux 32 & 64 bit. All versions are compressed as .zip archives for Windows and .tar files for Mac and Linux. Each archive is a self contained installation, so there’s no fancy install wizards to go through or, in the case of Windows, DLL files going into your System directory. Just decide where you want to put Eclipse and extract to that folder. The downside to not having an installation program is that, at least in Windows, there is not program group created in your Start menu. Therefore, I recommend creating a shortcut to the eclipse executable in the “eclipse” root of the installation archive.

 

Designating a Workspace

You probably know the drill already, but for those of you who are new to Eclipse, this bears going over.

A workspace is a place to group related projects together. Every time that you launch Eclipse, it will ask you to choose a workspace to work from, unless you tell it to always open the same one. If it’s the first time that you run eclipse, you’ll have to choose a folder to store your projects in. By convention, I like to include the word “workspace” in the folder name so that workspaces are easier to find later. A good name for this one might be “Web workspace”.

Creating the Project

Helios Eclipse features projects specifically for Web development – namely JavaScript and Static Web Projects, like the one we are going to create – while Juno also supports dynamic web sites that include server-side smarts. Having said that, you can install a plugin for Helios such as the Spring Tools Suite to add support for dynamic web projects.

To create the project, Select New > Static Web Project from the main menu. If you don’t see it there, select Other… to bring up the Select a Wizard dialog. Then expand the Web folder; you’ll see “Static Web Project” there. Select it and click Next >. On the Static Web Project screen, give your project a name, like “HTML5 Demo”, and click Next >. On the following screen, note that the space between HTML5 and Demo is replaced by an underscore. Click Finish to create the project.

Adding an HTML File

Expand the HTML5 Demo folder in the Project Explorer, right-click on the WebContent folder and select New > HTML File from the popup menu.

On the “Create a New HTML File” screen of the “New HTML file” wizard, enter “index” in the File name field. Eclipse will automatically add the extension. Click Next >

On the Select HTML Template screen you can see the inclusion of an HTML5 template – New HTML File (5). Select it and click Finish to create the new HTML file. That will also open it in the Editor pane:

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>

</body>
</html>

Changing the Character Encoding

The default character set is “ISO-8859-1”. There are two ways to change it: globally or on a case-by-case basis. The global settings can be located via Window > Preferences from the menu bar. On the Preferences dialog, expand the Web item and select HTML Files. On that screen, you’ll see an Encoding drop-down. It contains numerous character sets to choose from. I tend to favor ISO 10646/Unicode(UTF-8) myself. There are also settings for the default file extension (suffix) and encoding when loading files. Click OK to save any changes and close the dialog. The encoding of a specific page can be accessed via the Properties dialog. Right click the index.html page in Project Explorer to bring up the popup menu and select Properties at the bottom. Under Text file encoding, there is a radio button that allows you to select the character set from a drop-down. It contains far less entries than those of the global preferences, but it does have the most common character sets, including UTF-8. Changing the encoding from here doesn’t change it in the meta tag either; you’ll have to do that manually.

 

Conclusion

Today we saw how to use Eclipse to create a Static Web Project using the new HTML5 Template. In the next article, we’ll look at how to use the auto-complete feature, the WYSIWYG (What You See Is What You Get) Editor, and learn how to create our own HTML5 templates.

Rob Gravelle
Rob Gravelle
Rob Gravelle resides in Ottawa, Canada, and has been an IT guru for over 20 years. In that time, Rob has built systems for intelligence-related organizations such as Canada Border Services and various commercial businesses. In his spare time, Rob has become an accomplished music artist with several CDs and digital releases to his credit.

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Popular Articles

Featured