Getting Started With HTML5

Introduction

This article explains HTML5 and what's new in it. This article also explains how to create HTML5 using the Netbeans IDE 7.4.

What is HTML

HTML was invented in 1990 by a scientist called Tim Berners-Lee. It stands for "Hyper Text Markup Language" and is the main markup language for creating web pages and other information that can be displayed in a web browser. It is a language that enables presentation of information in the internet (in web browsers).

What's new in HTML5

There are the following new features added in HTML5.

Canvas element

Used to draw graphics like painting, images, draw rectangle, etcetera.

New Form Elements

<output>

Sets the final result of a calculation.

<keygen>

In forms it is used to generate key pairs

<datalist>

Defins a list of pre-defined options as input controls.

New Media element

The following media elements are added:

<audio>

Plays audio files.

<track>

Sets text tracks for <audio> and <video>.

<embed>

Adds a plug-in for a container.

<video>

Plays movies or videos.

<source>

Adds multiple media files.

New Semantic/Structural Elements

<aside>

Sets contents aside from the page content.

<article>

Provides elaboration for an article.

<command>

Adds a command button that a user can invoke.

<bdi>

Adds a part of text that might be formatted in another direction.

<details>

Adds some external detail that a user can hide or view.

<summary>

Adds a heading for a detail element.

<dialog>

Adds a window or dialog box.

<figure>

Adds diagrams, photos, code listening, etcetera.

<footer>

Adds a footer line for a section or document.

<header>

Adds a header line for a section or documents.

<figcaption>

Adds a caption for a figure or a diagram.

<mark>

Highlights some text in a web page.

<meter>

Sets a scalar measurement with a specified range.

<nav>

Adds a blink.

<progress>

Shows the progress of a task.

<ruby>

Sets a ruby annotation.

<rt>

Defines an explanation of the text in a web page.

<rp>

Sets what we want to show in web browser.

<section>

Defines or adds a section to a web page.

<time>

Adds time and date to a web page.

<wbr>

Creates a line breakup.

Start creating HTML5 features in Netbeans IDE

The following is the procedure we need to follow.

Step 1

Open the Netbeans IDE.

Step 2

Now go to "File Menu" then select "New Project" as in the following.

Step 3

Now choose "HTML5" -> "HTML5 Application" as in the following figure.

Step 4

Click on "Next". Then a new window is generated. Provide your project name there as shown in the following figure.

Step 5

Click on "Finish". Your project is generated with a default "index.html" as in the following figure.

Now add some media components to show the benefits of HTML5's new features.

Step 6

In this step we show how to play video in HTML5. First add a video file (as I added "nature.mp4") in your project window. Now you need to modify the "index.html" file as from the following code.

<!DOCTYPE html>

<html>

<body>

If it is not played try to run this code in different browser!

</video>

</body>

</html>

Step 7

Run your project and ensure that the video is playing. You will see the output as in the following figure . While running, set your browser information; if you are using the Chrome browser then you need to add the extension "Netbeans Connector" and then run your file.

Step 8

Now create a new HTML file in which we show how to play audio using HTML5 in the Netbeans IDE. Right Click on the project then choose "New" -> "HTML File" as in the following.

Step 9

Now add an audio file (I added the file "TuHiKhwahish.mp3") to your project menu and write the following code in your new HTML file.

<!DOCTYPE html>

<html>

If it is not played then run in different browser.

</audio>

</html>

Step 10

Now run your new file (I added the file "AudioFile.html"); the following output is generated.

Step 11

Now create another HTML file to play video directly from Youtube. Provide the name as "Youtubeplay" and write the following codefor it.

<!DOCTYPE html>

<html><embed

width="600" height="350"

src="https://www.youtube.com/v/phzKG-Y-SI8"

type="application/x-shockwave-flash">

</embed>

<html>

Step 12

Now run your file ("Youtubeplay.html"); you will see that your video is directly played through Youtube as in the following.

Now click on the play button; your video will start playing as in the following.

Now create a Geo-location to find user location.

Step 13

Now create a new HTML file named "ShowUserLocation" and write the following code:

<!DOCTYPE html>

<html>

<body>

<p id="user">Click on the display button to find out your positions:</p>

<button onclick="findLocation()">Click To Find Your Position</button>

var i=document.getElementById("user");

Function findLocation()

{

If (navigator.geolocation) Then

{

navigator.geolocation.getCurrentPosition(givePosition);

}

else{i.innerHTML="This function is not worked in your browser. Please try it in another Browser.";}

}

function givePosition(findposition)

{

i.innerHTML="Latitude: " + findposition.coords.latitude +

"<br>Longitude: " + findposition.coords.longitude;

}

</script>

</body>

</html>

Step 14

Now run your file and see that same output as below.

Now click on "Click To Find Your Position Button" and see your location there. It appears as in the following, with my location shown.

Summary

In this article I explained some important features of HTML5 that can be implemented using the Netbeans IDE. Thanks for reading.