Sunday, May 12, 2013

Introduction to HTML5

As we know the HTML is HyperText Markup Language special used for creation of web pages. HTML is a markup language. Markup language contains set of tags. The tags describe the document content.The HTML document contain HTML tags and text. So we call sample html page as web page. And Now HTML5 becomes the new standard for html. HTML5 is popular due to its lots of new features.So this article give you indetails information of HTML5. HTML5 is being developed as next major version of html. The new features in HTML5 is based on HTML,CSS,DOM and JavaScript.

How to start writing HTML5 documents?

 The HTML5 documents starts with syntax :
         The HTML5 does not use DTD so the declaration becomes so simpler and short compare to the other html versions. The HTML5 declaration is shown as below
         <!DOCTYPE html>

HTML4 declaration as below

        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "">
The above syntax differentiate the HTML5 and older version of HTML4.

The simple HTML5 documents look like below

<!DOCTYPE html>
<title> The sample HTML5 title </title>
Hello World! in HTML5

The new features in HTML5 :

1) The canvas element <canvas> generally used for drawing purpose
2) The video and audio element
3) Local storage
4) Local SQL database
5) The some new element like <article>, <footer>, <header>,<nav>,<section>
6) Form control like calender, date, time, email, URL, Search

Browser who support HTML5 :

    Still their is no single browser who support all functionality of HTML5 because HTML5 not have official standard. The all new releases of (chrome, firefox, IE, safari) continue to add new HTML5 features.

HTML5 Canvas :
This canvas element of HTML5 is used to draw graphics on web page or on the fly.Canvas is the only element to draw graphics. Here we use the javascript. It has several methods for drawing paths, boxes, circle and adding images and so on.

  We can create canvas using 
<canvas id="myCanvas" width="500" height="100"></canvas>
   you can add multiple <canvas> elements on one web page.

So the sample program of draw rectangle on canvas using javascript as below
<!DOCTYPE html>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Browser not support canvas html5 tag.
var c=document.getElementById("myCanvas");
var a=c.getContext("2d");
The output of above html documents as below

You can draw line using stroke() method,circle using arc() method on a canvas.The strokeText() and fillText() function for drawing text on canvas. drawImage() method is used to draw an image on canvas.

for more details relating this visit :

HTML5 Audio element:

<audio> element of HTML5 used to play music, sound and audio streams on web pages. All recent browsers support audio tag.

The following examples uses audio tag

<!DOCTYPE html>
<audio controls>
  <source src="horse.mp3" type="audio/mpeg">
  <source src="horse.ogg" type="audio/ogg">
  Browser does not support this audio format.

the output of above html tag as below

HTML5 Video element:

<video> element of HTML5 used to play movie clips and video streams.

The following example used video tag

<!DOCTYPE html>
<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Browser does not support the video tag.

the output of above html code shown below,

We will see the local storage, local sql database, article, calender and much more features about HTML5 in next article...