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.



Published on

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


  1. 1. HTML5The next generation of HTML By, Kaushik Vinay T G
  2. 2. What is HTML5?HTML5 will be the new standard for HTML, XHTML, and the HTML DOM.The previous version of HTML came in 1999. The web has changed a lot since then.HTML5 is still a work in progress. However, most modern browsers have some HTML5 support.
  3. 3. New FeaturesThe canvas element for drawingThe video and audio elements for media playbackBetter support for local offline storageNew content specific elements, like article, footer, header, nav, sectionNew form controls, like calendar, date, time, email, url, search
  4. 4. HTML5 Video/AudioUntil now, there has not been a standard for showing a Video/Audio on a web page.HTML5 defines a new elements which specifies a standard way to embed a video/movie on a web page: the <video> element.A standard way to embed a audio on web page: the <audio> element.Currently, there are 3 supported video formats : MP4, WebM, and Ogg.There are 3 supported audio formats:Mp3,Ogg, and Wav.To show a video in HTML5, this is all you need: Code: <video width="320" height="240" controls="controls"> <source src="movie.mp4" type="video/mp4" /> </video>To show a audio in HTML5 is similar to the above code,Just replace the video tag with audio tag and use an audio format instead of video format mentioned in the code
  5. 5. HTML5 Canvas 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. A canvas element is added to the HTML5 page. The canvas element has no drawing abilities of its own. All drawing must be done inside a JavaScriptCode:<canvas id="myCanvas" width="200" height="100"> A simple Canvas example</canvas><script>var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");ctx.fillStyle="#FF0000";ctx.fillRect(0,0,150,75);</script>
  6. 6. HTML5 Web StorageHTML5 offers two new objects for storing data on the client: LocalStorage - stores data with no time limit SessionStorage - stores data for one sessionEarlier, this was done with cookies. Cookies are not suitable for largeamounts of data, because they are passed on by EVERY request tothe server, making it very slow and in-effective.In HTML5, the data is NOT passed on by every server request, butused ONLY when asked for. It is possible to store large amounts ofdata without affecting the websites performance.The data is stored in different areas for different websites, and awebsite can only access data stored by itself.HTML5 uses JavaScript to store and access the data.HTML5 Web storage is also called ”Cookies on Steroids”.
  7. 7. The localStorage ObjectThe localStorage object stores the data with no time limit. This meansdata is still available when the browser is closed and reopened, andalso instantly between tabs and windows.An example to count the number of times a user has visited a pageCode:<script type="text/javascript">if (localStorage.pagecount) { localStorage.pagecount=Number(localStorage.pagecount) +1; } else { localStorage.pagecount=1; }document.write("Visits "+ localStorage.pagecount + " time(s).");</script>
  8. 8. The sessionStorage ObjectThe sessionStorage object stores the data for one session. The data is deleted when the user closes the browser window.Data in this storage is accessible to any page from the same site opened in that window.An similar example to count the number of times a user has visited a page, in the current session.Code:<script type="text/javascript">if (sessionStorage.pagecount) { sessionStorage.pagecount=Number(sessionStorage.pagecount) +1; } else { sessionStorage.pagecount=1; } document.write("Visits "+sessionStorage.pagecount+" time(s) thissession.");</script>
  9. 9. HTML5 Form Input TypesHTML5 has several new input types for forms. These newfeatures allow for better input control and validation.The new input types: email url number range Date pickers (date, month, week, time, datetime, datetime-local) search color
  10. 10. HTML5 Form Input Types(Cont.)Input Type – email The email type is used for input fields that should contain an e-mail address. The value of the email field is automatically validated when the form is submitted.Code: E-mail: <input type="email" name="user_email" />Input Type – url The url type is used for input fields that should contain a URL address. The value of the url field is automatically validated when the form is submitted.Code: Homepage: <input type="url" name="user_url" />
  11. 11. HTML5 Form Input Types(Cont.) Opera 10.50’s rendering of <input type=number>.Input Type – number The number type is used for input fields that should contain a numeric value. You can also set restrictions on what numbers are accepted.Code: Points: <input type="number" name="points" min="1" max="10" />
  12. 12. HTML5 Form Input Types(Cont.) Google Chrome’s rendering of <input type=range>.Input Type - range The range type is used for input fields that should contain a value from a range of numbers.The range type is displayed as a slider bar. You can also set restrictions on what numbers are accepted.Code: <input type="range" name="points" min="1" max="10" />
  13. 13. HTML5 Form Input Types(Cont.)Input Type - search The search type is used for search fields, like a site search, or Google search. The search field behaves like a regular text field.Input Type - color <input type=color> on the BlackBerry. The color type is used for input fields that should contain a color. The Opera browser will allow you to select a color from a color picker, Googles Chrome will only allow hexadecimal color values to be submitted: Code: Color: <input type="color" name="user_color" />
  14. 14. HTML5 Form ElementsHTML5 has several new elements and attributes for forms.The new form elements: <datalist> <keygen> <output><output> Element The <output> element is used for different types of output, like calculations or script output: Code: <form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0 <input type="range" name="a" value="50" />100 +<input type="number" name="b" value="50" /> =<output name="x" for="a b"></output> </form>
  15. 15. HTML5 Form Elements(Cont.)<datalist> Element The <datalist> element specifies a list of options for an input field. The list is created with <option> elements inside the <datalist>. To bind a <datalist> to an input field, let the list attribute of the input field refer to the id of the datalist.Code: Webpage: <input type="url" list="url_list" name="link" /> <datalist id="url_list"> <option label="W3Schools" value="" /> <option label="Google" value="" /> <option label="Microsoft" value="" /> </datalist>
  16. 16. HTML5 Form Elements(Cont.)<keygen> Element The purpose of the <keygen> element is to provide a secure way to authenticate users. The <keygen> element is a key-pair generator. When a form is submitted, two keys are generated, one private and one public. The private key is stored on the client, and the public key is sent to the server. The public key could be used to generate a client certificate to authenticate the user in the future.Code: <form action="demo_form.asp" method="get"> Username: <input type="text" name="usr_name" /> Encryption: <keygen name="security" /> <input type="submit" /> </form>
  17. 17. HTML5 Form Attributes This covers some of the new attributes for <form> and <input>.autocomplete Attribute The autocomplete attribute specifies that the form or input field should have an autocomplete function. When the user starts to type in an autocomplete field, the browser should display options to fill in the field:Code: First name: <input type="text" name="fname" autocomplete=”on”/>autofocus Attribute The autofocus attribute specifies that a field should automatically get focus when a page is loaded.Code: User name: <input type="text" name="user_name" autofocus="autofocus" />
  18. 18. HTML5 Form Attributes(Cont.)form Attribute The form attribute specifies one or more forms the input field belongs to. The form attribute must refer to the id of the form it belongs to:Code: <form action="demo_form.asp" method="get" id="user_form"> First name:<input type="text" name="fname" /> <input type="submit" /></form> Last name: <input type="text" name="lname" form="user_form" />height and width Attributes The height and width attributes specifies the height and width of the image used for the input type image.Code: <input type="image" src="img_submit.gif" width="24" height="24" />
  19. 19. HTML5 Form Attributes(Cont.)min, max and step Attributes The min, max and step attributes are used to specify restrictions for input types containing numbers or dates. The max attribute specifies the maximum value allowed for the input field.The min attribute specifies the minimum value allowed for the input field.The step attribute specifies the legal number intervals for the input field (if step="3", legal numbers could be -3,0,3,6, etc).Code: Points: <input type="number" name="points" min="0" max="10" step="3" />multiple Attribute The multiple attribute specifies that multiple values can be selected for an input field.Code: Select images: <input type="file" name="img" multiple="multiple" />
  20. 20. HTML5 Form Attributes(Cont.)novalidate Attribute The novalidate attribute specifies that the form or input field should not be validated when submitted. If this attribute is present the form will not validate form input.placeholder Attribute The placeholder attribute provides a hint that describes the expected value of an input field.Code: <input type="search" name="user_search" placeholder="Search W3Schools" />required Attribute The required attribute specifies that an input field must be filled out before submitting.Code: Name: <input type="text" name="usr_name" required="required" />
  21. 21. Drag And Drop An image being Dragged and Dropped.By default,all links, text nodes (or selections of), and image elementsare draggable. This means that you don’t have to do anything to tellthe browser they can be dragged around the page.Our simple demo will have a drop zone and a couple of images thatyou can drag into the drop zone. And when you drop them,the imagesource will appear in the drop zone
  22. 22. Drag And Drop(Cont.)Since there’s nothing to be done to the draggable images, you just needto hook up the drop zone, which requires the following event handlers: Drag over: Tell the browser this is an element that accepts drop data. On drop: Once something has been dropped on the element, do something with the dropped data. Code: <script> var drop = document.getElementById(‘drop’); drop.ondrop = function (event) { this.innerHTML += ‘<p>’ + event.dataTransfer. getData(‘Text’) + ‘</p>’; return false; }; drop.ondragover = function () { return false; }; </script>
  23. 23. GEOLOCATIONThe geolocation API gives us a way to locate the exact position of ourvisitor. Google Maps detects geolocation support and adds the “locate me” functionalityThe geolocation API offers two methods for getting the geo information from your user: getCurrentPosition is a one-shot method for grabbing the user’s current location. watchPosition keeps an eye on their position and keeps polling at regular intervals to see if their location has changed. watchPosition mirrors getCurrentPosition’s functionality, but also if the user’s position changes, it will tell your code.
  24. 24. ConclusionDespite inconsistent browser implementations of its features,HTML5 is an exciting technology for creating new and powerfulbrowser-based applications.Unlike previous versions, HTML5 promises better integration ofmultimedia and other applications inside the core of most Webpages. While HTML5 adoption started off slowly, growingevangelism from a number of leading vendors in the last sixmonths has spurred adoption by developers everywhere.
  25. 25. Thank You
  26. 26. References Introducing to HTML5 by Bruce Lawson and Remy Sharp. To check the compatibility of the browser with each element of HTML5, you can visit the site: