Implementation of HTML5 Application on Netbeans IDE


This article explains how to create a HTML5 application in the Netbeans IDE. The Netbeans IDE is used for the development of the example.

What is HTML5

HTML5 stands for Hyper Text Markup Language version 5. It is the latest version of HTML, and it is basically used for presenting content for the World Wide Web.

Features of HTML5

Web Workers

Many web applications use heavy scripts to perform functions, so web workers basically use separate background threads and the performance of the web page is not effected by this.


Video can be embedded without a third-party Codec. Embedding a video becomes as simple as embedding an image.


This feature enables the developer to render graphics on the fly.

Application Caches

Using this feature a web page will start storing more and more information locally on the visitor's computer.


It is best known for use on mobile devices and HTMl5 enables Geolocation.

Advantages of HTLM5

The advantages of HTLM5 are:

  • Mutuality
  • Improved Semantics
  • Elegant Forms
  • Consistency
  • Better Accessibility
  • Offline Application Cache
  • Client-Side Database
  • Cleaner Markup
  • Improved Code


In this example; we show how to use HTML5 code in the Netbeans IDE. There are certain steps in the Netbeans IDE that we need to follow as explained below.

Step 1

Open the Netbeans IDE.


Step 2

Click on "File" from the Menu bar as in the following:


Step 3

Click on "New Project" as in the following:


Step 4

Select "HTML/JavaSrcipt" and "HTML5 Application" as in the following:


Step 5

Click on "Next" as in the following:


Step 6

Instead of project name specify "HTML5Demo" and instead of project location specify the path where want to save your project to the click on "Next" as in the following:

fig 5.jpg

Step 7

In the shown window select "No Site Template" and than click on "Next" as in the following:

fig 6.jpg

Step 8

Now in the shown window select from the library jQuery version 1.9.0 minified and than click on the button ">". It will be in the selected box, now again select from the library jqueryui verions 1.10.0 minified and than click on the button ">". It will be in the selected box as in the following:

fig 7.jpg

Step 9

Click on "Finish" as in the following:

fig 7.jpg

Step 10

Write the following code (the code is for a simple HTML form and HTML5 video feature) as in the following:

<!DOCTYPE html>




<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">



 <h1>Fill your details below</h1>

 <form action="">



   <td>First name:</td>

   <td><input type="text" name="FirstName"></td>

   <td>Last name:</td>

   <td><input type="text" name="LastName"><br></td>




   <td colspan="2"><input type="text" name="Address"><br></td>




   <td colspan="2"><input type="text" name="Age"><br></td>



   <td>Contact Number:</td>

   <td><input type="text" name="Contact Number"><br></td>




    <td><input type="text" name="Country"><br></td>




    <td><input type="text" name="State"><br></td>




     <td><input type="text" name="Pincode"><br></td>






  <video width="320" height="240" controls>

  <source src="movie.mp4" type="video/mp4">

  <source src="movie.ogg" type="video/ogg">





fig 8.jpg

fig 7a.jpg


Step 11 


Now right-click on "HTML5Demo" and thrn click on "Run" from the shown menu bar as in the following:


fig 12.jpg




The output will be in your browser window and it shows a detail form and a video as in the following:



Similar Articles