HTML 5

Where
HTML5 is used?

HTML 5 is used to develop any kind of
online application without using additional plugins. It can be used to develop
application with animation, apps, movies, music and even any other complex
application. The applications for Tablet, Netbook, Notebook, Smartphone or
Smart TV can be developed using HTML5. The applications which run offline (i.e.
when you are not online) can be developed using HTML5. Because of all those reasons many vendors
such as Google, IBM, Microsoft, AOL,
Apple, Nokia, Opera and many other are working with HTML5.

Difference
between HTML and HTML5 :

Below are the major differences between
HTML and HTML5 –

1.In HTML 5 new features are
added such as Canvas, better support to Video and Audio tags compared to HTML

2.No need of external plugins
such as Flash in HTML 5, where as in HTML there is need of external plugins
like Flash.

3.Error Handling in HTML 5 is
easier than HTML.

4.Markup is used to reduce
scripting in HTML5, However in HTML there is no such provision.

5.HTML 5 is device independent.
Application can be developed for Netbook, Tablet and Smart TV etc. using HTML
5. It is not possible with HTML.

What
are the new features in HTML5?

Let see some important new features in
HTML5 –

1.The video and audio new
elements are used for media playback\

2.For drawing 2D pictures or
imagescanvas element is helpful.

3.Some interesting elements for
writing content are introduced such as footer,
header, article, nav and section

4.HTML 5 has local storage
support.

5.Search, url, date, time, email
and calendar such new forms are introduced in HTML5.

Let’s start discuss various
important aspects of HTML5 -

Canvas: In order to draw graphics on web page on the fly, canvas element of
HTML5 is used. The methods such as paths, circles, boxes, text etc. are present
in canvas element in order to draw graphics and also for adding images to web
page.

Different browser
supports for canvas :

Firebox, Opera, Internet Explorer 9+,
Chrome and Safari browsers support canvas element. As HTML5 is still in
evolving, there still scope for improvement in browser support. The Internet
Explorer 8 or Internet Explorer 7 or earlier version do not supportcanvas
element of HTML5.

How to create Canvas?

In order to create rectangular area on HTML page,
canvas element is used. As like table element in HTML, canvas element as do not
have border or content by default. The
canvas tag example is given below –

<canvas id="magmaCanvas" width="500"
height="500"></canvas>

If you see in the example, it is required
to provide id, width and height attributes of canvas element. We can write
canvas element as many as we need. If you want to add style to your canvas
element as well as border then use below code snippet –

We can write on canvas using Java script.
Canvas is two dimensional grid structures and hence it is defined with
coordinates. If you want to draw line on canvas, you have to use canvas path
such as moveTo(x,y) and lineTo(x,y) etc.
Using attractive fonts you can write content on canvas. What if want to draw
rectangles, circles, text or lines? Yes you can create those figures using
canvas gradients such as createLinearGradient and createRadialGradient.

What
is SVG in HTML5?

SVG is abbreviation for Scalable Vector
Graphics which is used to create vector based graphics. If you create graphics
using SVG, even if resized or zoomed the quality of graphics remain same. The
animation of each and every element and attribute is possible in SVG. You can
use any text editor to edit as well as to create SVG images. Such SVG images
can be indexed, searched, scripted as well can be compressed.

Different browser supportsfor SVG :SVG works very in fine in most of the browsers such
asFirefox, Internet Explorer 9+, Opera, Safari and Chrome.

How to create SVG image?

Below is the sample example of SVG image in
HTML5. You can you below code in order
to get SVG image in your web page i.e. HTML5 page.

In HTML5, Geolocation is used to find out
user’s position. Off course, the privacy is major factor in it, so location
will not be available, if user do not approve to show the position or location.Geolocation
also helps in retrieving information specific to location such as points or
hotels etc. of interest near to use, with GPS road details can be captured.

Different browser supports for Geolocation:

Most of the major browsers support
Geolocation feature of HTML5. Examples of it are Internet Explorer 9+,
Chrome,Firefox, Opera and Safari. Currently available smart phones give more
accurate position with GPS use.

Methods for Geolocation:

getCurrentPosition is one of the method
which is used to get information about the location.Latitude, longitude,
accuracy, altitude, heading, speed and timestamp these are some parameters used
for getting current position.

There are other two interesting methods are
present such as watchPosition and clearWatch. watchPosition method returns
position of user even if user moves from one location to other location. The
clearWatch method is used to stop the watchPosition method.