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]()