Published on

  • Be the first to comment

  • Be the first to like this


  1. 1. HTML 5 Bhargav Pavra ©Bhargav Pavra
  2. 2. Topic To be Covered: • Introduction • Multimedia • Graphics • Applications • Semantics and Forms • CSS 3 ©Bhargav Pavar
  3. 3. Introduction • What is HTML5?  HTML5 is the new standard of HTML. • How Did HTML5 Get Started?  HTML5 is a cooperation between the W3C and WHATWG. •Some rules for HTML5 were established: ` New features should be based on HTML, CSS, DOM, and JavaScript. Reduce the need for external plug-in (like Flash). Better error handling. More markup to replace scripting. HTML5 should be device independent. The development process should be visible to the public. ©Bhargav Pavar
  4. 4. <!DOCTYPE> •The <!DOCTYPE> declaration must be the very first thing in your HTML document, before the <html> tag. •The <!DOCTYPE> declaration is not an HTML tag; it is an instruction to the web browser about what version of HTML the page is written in. HTML 5 ex: <!DOCTYPE html> HTML 4.01 ex: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" ""> ©Bhargav Pavar
  5. 5. HTML5 Multimedia •With HTML5, playing video and audio is easier than ever. • <video> • <audio> ©Bhargav Pavar
  6. 6. <video> & <audio> •Today, most videos are shown through a plug-in (like flash). However, different browsers may have different plug-ins. •HTML5 defines a new element which specifies a standard way to embed a video/movie on a web page: the <video> element. •Example •<video src=“movie.mp4” autoplay loop controls height=“300px” width=“300px” > •<audio src=“song.mp3” controls> ©Bhargav Pavar
  7. 7. ©Bhargav Pavar
  8. 8. Browser Supports(video Format)Browser Supports(audio Format) ©Bhargav Pavar
  9. 9. HTML5 Graphics With HTML5, drawing graphics is easier than ever: •Using the <canvas> element •Using inline SVG(Scalable Vector Graphics) •Using CSS3 2D/3D<canvas> •The HTML5 <canvas> element is used to draw graphics, on the fly, via scripting (usually JavaScript). •The <canvas> element is only a container for graphics. You must use a script to actually draw the graphics. ©Bhargav Pavar
  10. 10. ©Bhargav Pavar
  11. 11. HTML5 Applications With HTML5, web application development is easier than ever. •Web Storage •App Cache •Web Worker •SSE ©Bhargav Pavar
  12. 12. • Web Storage • With HTML5, web pages can store data locally within the users browser. • Earlier, this was done with cookies. • However, Web Storage is more secure and faster. The data is not included with every server request, but used ONLY when asked for. • The data is stored in key/value pairs, and a web page can only access data stored by itself. •There are two new objects for storing data on the client: localStorage - The localStorage object stores the data with no expiration date. The data will not be deleted when the browser is closed, and will be available the next day, week or year. sessionStorage - The sessionStorage object is equal to the localStorage object, except that it stores the data for only one session. The data is deleted when the user closes the browser window. ©Bhargav Pavar
  13. 13. •App Cache • HTML5 introduces application cache, which means that a web application is cached, and accessible without an internet connection. Application cache gives an application three advantages: 1. Offline browsing - users can use the application when theyre offline 2. Speed - cached resources load faster 3. Reduced server load - the browser will only download updated/changed resources from the server • To enable application cache, include the manifest attribute in the documents <html> tag,It’s simple text file. • Example: <html manifest="demo.appcache"> CACHE MANIFEST NETWORK FALLBACK ©Bhargav Pavar
  14. 14. • Web Workers • A web worker is a JavaScript that runs in the background, independently of other scripts, without affecting the performance of the page. • When executing scripts in an HTML page, the page becomes unresponsive until the script is finished. • You can continue to do whatever you want: clicking, selecting things, etc., while the web worker runs in the background. • Web workers are supported in all major browsers, except Internet Explorer. ©Bhargav Pavar
  15. 15. • SSE-(Server-Sent Event)• HTML5 Server-Sent Events allow a web page automatically gets updatesfrom a server.•This was also possible before, but the web page would have to ask if anyupdates were available. With server-sent events, the updates comeautomatically.•Examples: Facebook/Twitter updates, stock price updates, newsfeeds, sport results, etc.•Server-Sent Events are supported in all major browsers, except InternetExplorer.•Example: var source=new EventSource("demo_sse.php"); source.onmessage=function(event) { document.getElementById("result") + "<br>"; }; ©Bhargav Pavar
  16. 16. New Input Types • color • datetime • email • month • number • range • url ©Bhargav Pavar
  17. 17. • Input Type: color •Select a color from a color picker. • <input type="color" name="favcolor"> •Example• Input Type: datetime •Define a date and time control (with time zone). • <input type="datetime" name="bdaytime"> •Example• Input Type: email • Define a field for an e-mail address (will be automatically validated when submitted) • <input type="email" name="usremail"> •Example• Input Type: month • The month type allows the user to select a month and year. •<input type="month" name="bdaymonth"> •Example ©Bhargav Pavar
  18. 18. • Input Type: number • The number type is used for input fields that should contain numeric value. •You can also set restrictions on what numbers are accepted. • <input type="number" name="quantity" min="1" max="5"> •Example• Input Type: range • The range type is used for input fields that should contain a value from a range of numbers. •You can also set restrictions on what numbers are accepted. •<input type="range" name="points" min="1" max="10"> •Example• 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. • <input type="url" name="homepage"> •Example ©Bhargav Pavar
  19. 19. <datalist> •The <datalist> element specifies a list of pre-defined options for an <input> element. •The <datalist> element is used to provide an "autocomplete" feature on <input> elements. Users will see a drop-down list of pre-defined options as they input data. •Example: <input list="browsers"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> ©Bhargav Pavar
  20. 20. <keygen>•The purpose of the <keygen> element is to provide a secure way toauthenticate users.•The <keygen> tag specifies a key-pair generator field in a form.•When the form is submitted, two keys are generated, one private andone public.•The private key is stored locally, and the public key is sent to the server.The public key could be used to generate a client certificate toauthenticate the user in the future.•Example:<form action="demo_keygen.asp" method="get">Username: <input type="text" name="usr_name">Encryption: <keygen name="security"><input type="submit"></form> ©Bhargav Pavar
  21. 21. <output> •The <output> element represents the result of a calculation (like one performed by a script). •Example: <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> ©Bhargav Pavar
  22. 22. •Structure and Semantics <div <header> id="header"> <div class="article"> <article> <div <div <nav> <div <section> id="content"> <aside> id="nav"> id="right"> <div <footer> id="footer"> ©Bhargav Pavar
  23. 23. <progress> Tag•Show completion progress of a taskProgress bars are widely used inother applications Works with scripted applications.•Useful for: •Indicate loading progress of an AJAX application •Show user progress through a series of forms •Making impatient users wait.•Example:Downloading progress:<progress value="22" max="100"></progress> ©Bhargav Pavar
  24. 24. <meter> Tag •Representing scalar measurements or fractional values. •Useful for: User Ratings (e.g. YouTube Videos) Search Result Relevance Disk Quota Usage •Example <meter value="2" min="0" max="10">2 out of 10</meter><br> <meter value="0.6">60%</meter> ©Bhargav Pavar
  25. 25. <mark> Tag•Marked or Highlighted text•Indicates point of interest or relevanceUseful for: Highlighting relevant code in a code sample Highlighting search keywords in a document (e.g. in Google Cache)•Example <p>This is a <mark>Mark</mark>tag example.</p> This is a Mark tag example. ©Bhargav Pavar
  26. 26. •HOW WELL DOES YOUR BROWSER SUPPORT HTML5? Source: Where ,Score Out of 500 ©Bhargav Pavar
  27. 27. THANKS ©Bhargav Pavar