Implementation of HTML5 Application on Netbeans IDE

Introduction

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

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

Canvas

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.

Geolocation

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

Example

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.

di.jpg

Step 2

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

d2.jpg

Step 3

Click on "New Project" as in the following:

d3.jpg

Step 4

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

d4.jpg

Step 5

Click on "Next" as in the following:

d4.jpg

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>

<html>

<head>

<title></title>

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

</head>

<body>

 <h1>Fill your details below</h1>

 <form action="">

  <table>

   <tr>

   <td>First name:</td>

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

   <td>Last name:</td>

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

   </tr>

   <tr>

   <td>Address:</td>

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

   </tr>

   <tr>

   <td>Age:</td>

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

   </tr>

   <tr>

   <td>Contact Number:</td>

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

   </tr>

    <tr>

    <td>Country:</td>

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

    </tr>

    <tr>

    <td>State:</td>

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

    </tr>

     <tr>

     <td>PinCode:</td>

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

     </tr>

    </table>

 

</form> 

<p><b></b>

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

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

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

</video>

</body>

</html>

 

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

 

Output

 

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

 

output.jpg