Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Introduction of html5


Published on

Published in: Education, Technology, Design
  • Be the first to comment

Introduction of html5

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