SlideShare a Scribd company logo
HTML 5 Its a new standard for html,xhtml. It is widely used in web applications. It should be based on html,css and Javascript. It reduce the need for external plugins (like flash) Better error handling. More markup to replace scripting. Html5 should be device independent.
NEW FEATURES Most interesting new features in html5. The canvas element for drawing. The video and audio elements for media playback. Better support for local offline storage. New content specific elements like calender,date,time,email,url,search.
NEW ELEMENTS  Html 5 includes new elements for better source,drawing,media content and better from handling. New elements like article,audio,source,embed,canvas,datalist,keygen,output etc. New input type attribute values for better input control before sending the datas.
NEW ATTRIBUTES Some of the new attributes values are : Tel – input value for telphone numbers Email – input value for email id. Time – input value for timings Date – input value of changing the dates Month – input value of changing the month.Color – input  value of changing the colour.
VIDEOS Many modern websites shows videos. HTML5 provides a standard for showing them. Today, most videos are shown through a plugin (like flash). However, not all browsers have the same plugins. HTML5 specifies a standard way to include video, with the video element.
How It Works To show a video in HTML5, this is all you need: <video src=&quot;movie.ogg&quot; controls=&quot;controls&quot;> </video> The control attribute is for adding play, pause, and volume controls. It is also always a good idea to include the width and height attributes. Insert content between the <video> and </video> tags for browsers that do not support the video element:
AUDIOS HTML5 provides a standard for playing audio. Until now, there has never been a standard for playing audio on a web page. Today, most audio are played through a plugin (like flash). However, not all browsers have the same plugins. HTML5 specifies a standard way to include audio, with the audio element. The audio element can play sound files, or an audio stream.
CANVAS The canvas element is used to draw graphics on a web page. The HTML5 canvas element uses JavaScript to draw graphics on a web page. A canvas is a rectangular area, and you control every pixel of it. The canvas element has several methods for drawing paths, boxes, circles, characters, and adding images.
Create a Canvas Element Add a canvas element to the HTML5 page. Specify the id, width, and height of the element: <canvas id=&quot;myCanvas&quot; width=&quot;200&quot; height=&quot;100&quot;></canvas> The canvas element has no drawing abilities of its own. All drawing must be done inside a JavaScript.
WEB STORAGE Storing Data on the Client HTML5 offers two new methods for storing data on the client: * localStorage - stores data with no time limit * sessionStorage - stores data for one session Earlier, this was done with cookies. Cookies are not suitable for large amounts of data, because they are passed on by EVERY request to the server, making it very slow and in-effective.
HTML5 STORAGE In HTML5, the data is NOT passed on by every server request, but used ONLY when asked for. It is possible to store large amounts of data without affecting the website's performance. The data is stored in different areas for different websites, and a website can only access data stored by itself. HTML5 uses JavaScript to store and access the data.
DETAILS Prepared by: T.Kokila, Email id :  [email_address] Blog: http: Reference: Html5 reference.

More Related Content

Introduction of html5

  • 1. HTML 5 Its a new standard for html,xhtml. It is widely used in web applications. It should be based on html,css and Javascript. It reduce the need for external plugins (like flash) Better error handling. More markup to replace scripting. Html5 should be device independent.
  • 2. NEW FEATURES Most interesting new features in html5. The canvas element for drawing. The video and audio elements for media playback. Better support for local offline storage. New content specific elements like calender,date,time,email,url,search.
  • 3. NEW ELEMENTS Html 5 includes new elements for better source,drawing,media content and better from handling. New elements like article,audio,source,embed,canvas,datalist,keygen,output etc. New input type attribute values for better input control before sending the datas.
  • 4. NEW ATTRIBUTES Some of the new attributes values are : Tel – input value for telphone numbers Email – input value for email id. Time – input value for timings Date – input value of changing the dates Month – input value of changing the month.Color – input value of changing the colour.
  • 5. VIDEOS Many modern websites shows videos. HTML5 provides a standard for showing them. Today, most videos are shown through a plugin (like flash). However, not all browsers have the same plugins. HTML5 specifies a standard way to include video, with the video element.
  • 6. How It Works To show a video in HTML5, this is all you need: <video src=&quot;movie.ogg&quot; controls=&quot;controls&quot;> </video> The control attribute is for adding play, pause, and volume controls. It is also always a good idea to include the width and height attributes. Insert content between the <video> and </video> tags for browsers that do not support the video element:
  • 7. AUDIOS HTML5 provides a standard for playing audio. Until now, there has never been a standard for playing audio on a web page. Today, most audio are played through a plugin (like flash). However, not all browsers have the same plugins. HTML5 specifies a standard way to include audio, with the audio element. The audio element can play sound files, or an audio stream.
  • 8. CANVAS The canvas element is used to draw graphics on a web page. The HTML5 canvas element uses JavaScript to draw graphics on a web page. A canvas is a rectangular area, and you control every pixel of it. The canvas element has several methods for drawing paths, boxes, circles, characters, and adding images.
  • 9. Create a Canvas Element Add a canvas element to the HTML5 page. Specify the id, width, and height of the element: <canvas id=&quot;myCanvas&quot; width=&quot;200&quot; height=&quot;100&quot;></canvas> The canvas element has no drawing abilities of its own. All drawing must be done inside a JavaScript.
  • 10. WEB STORAGE Storing Data on the Client HTML5 offers two new methods for storing data on the client: * localStorage - stores data with no time limit * sessionStorage - stores data for one session Earlier, this was done with cookies. Cookies are not suitable for large amounts of data, because they are passed on by EVERY request to the server, making it very slow and in-effective.
  • 11. HTML5 STORAGE In HTML5, the data is NOT passed on by every server request, but used ONLY when asked for. It is possible to store large amounts of data without affecting the website's performance. The data is stored in different areas for different websites, and a website can only access data stored by itself. HTML5 uses JavaScript to store and access the data.
  • 12. DETAILS Prepared by: T.Kokila, Email id : [email_address] Blog: http: Reference: Html5 reference.