Published on

Slide gives an idea, "What HTML 5" is really.
Just have a look whats new and improvements made from the previous versions of Html and Xhtml.

1 Comment
  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide


  1. 1. Submitted by :-Akash Tripathi
  2. 2. • HTML5 is a markup language for structuring and presenting content for the World Wide Web.• HTML5 is the next major revision of the HTML standard superseding HTML 4.01, XHTML 1.0, and XHTML 1.1.• HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG).
  3. 3. • <!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01//EN" "">• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict //EN" "">• <!DOCTYPE html>
  4. 4. The <meta> tag The <meta> tag• <meta http-equiv="Content- Type" • <meta charset="UTF-8"> content="text/html;charset=UTF- 8"> The <script> tagThe <script> tag • <link rel="stylesheet"• <script type="text/javascript“ src="file.js"> href="file.css"> </script>
  5. 5. • Content-editable • contextmenuElements Attributes • draggable • dropzone • Hidden • data • spellcheck
  6. 6. Event handlers in Javascript or vbscript to specify values of event tag attribute. Attributes can be used to trigger any javascript or vbscript code of given value, when there is any event occurring for any HTML5 element. Documentation:- Action:- Media:- Windows and forms:- Oncanplay offline/online/onoffline Onclick/ondbclick Onabort/onblur/onfocus oncanplaythrough onoine/ononline Ondrag/ondragend Onplay/onpause/onplaying Onerror/oninvalidonbeforeprint/onafterprint ondragcenter/ondragleave ondragover/ondragstart Onemptied/onended ondrop Onformchange/onforminput Onbeforeonload/onload onunload Onloadeddata/onprogress Onkeydown/onkeypress Oninput/onsubmit onkeyup Onratechange Onhaschange onreadystatechange Onmousedown Onpopstate/onresize onmousemove Onseeked/onseeking Onredo/onundo onsuspend/ontimeupdate Onmouseout/onmouseover onselect onmouseup Onvolumechange/onwaiting Onstorage Onmousewheel
  7. 7. Web Form 2.0 provides a greater degree of semantic mark-up than HTML4 and remove a great deal of the need for tedious scripting and styling. New <input> new in HTML5 <input> typesattributes in HTML5 Month step readonly min Color formaction Date autocomplete Time week list Rangelist multiple url max placeholder required pattern formenctype Search Email Telformnovalidate Datetime-local formmethod Datetime Number form autofocus
  8. 8. Labels<label for="inputID">Label: </label><input id="inputID" name="inputName" type="text" />The value of the for attribute should match the value of theinputs id attribute
  9. 9. Attributes<label for="inputID">Label: </label><input id="inputID" name="inputName"placeholder="placeholder text"pattern="w{6,9}"requiredautofocustype="text"/>
  10. 10. <label for="inputID">Label: </label><input id="inputID" name="inputName"placeholder="placeholder text"pattern="w{6,9}"requiredautofocustype="text"/>
  11. 11. form attribute form="notMyParentForm" Note: form=" disassociates a form element from its parent form. “ color attribute <input name="color" type="color" /><input id="color"name="color“type="color"placeholder="#FFFFFF"pattern="#[0-9A-Fa-f]{6}"required />
  12. 12. url attribute <input name="website" type="url" /> <input id="website" name="url“ type="url“ placeholder="" pattern="(http|https|ftp)://[a-zA-Z0-9-./]*"/>Different dynamic keyboards displayedbased on input type.
  13. 13. tel attribute <input name="telephone" type="tel" /> <input id="phone" name="phone" type="tel" placeholder="415-555-1212" pattern="d{3}-d{3}-d{4}"/>email attribute<input name="address" type="email" /><inputid="email"name="email"type="email"placeholder="" multiple />
  14. 14. number attribute <input ‘number specific attributes: id="nickels" •min type="number" •max placeholder="0, 5, 10 …" •step pattern="[0-9]*[05]" min="0" max="1000" step="5" />range attribute<input id="range"name="range"type="range"placeholder="0 to 10"pattern="[0-9]|10" min="0" max="10" step="1"/>
  15. 15. search attribute <form> <input name="q" type="search"> <input type="submit" value="Go"> </form>date attribute<form><input name="birthday" type="date"><input type="submit" value="Go"> </form>datetime attribute<form><input name="t" type="datetime"><input type="submit" value="Go"> </form>week attribute<form><input name="w" type="week"><input type="submit" value="Go"> </form>time attribute<form><input name="t" type="time"><input type="submit" value="Go"> </form>
  16. 16. validation attribute var validityObject = document.getElementById[form_control].validity;Examples:- Styling:-validityObject.valueMissing ::-webkit-validation-bubble {}validityObject.typeMismatch ::-webkit-validation-bubble-arrow-clipper {}validityObject.patternMismatch ::-webkit-validation-bubble-arrow {}validityObject.tooLong ::-webkit-validation-bubble-message {}validityObject.rangeUnderflowvalidityObject.rangeOverflowvalidityObject.stepMismatchvalidityObject.validvalidityObject.customError
  17. 17. <meter>, <progress> & <output> attributeExample:-<meter value=75 min=0 max=100 >75% full</meter><progress>loading...</progress><progress value="75" max="100">75% complete</progress><output>
  18. 18. Speech Input attribute<input type="text" x-webkit-speech />Developed for you in parts by
  19. 19. Persistent local storage is one of the areas where nativeclient applications have held an advantage over webapplications. For native applications, the operatingsystem typically provides an abstraction layer for storingand retrieving application-specific data like preferencesor runtime state. Logo for localstorage
  20. 20. Implementationfunction supports_html5_storage() { try { return localStorage in window && window[localStorage] !== null; } catch (e) { return false; } }
  21. 21. For receiving and storinginterface Storage { getter any getItem(in DOMString key); setter creator void setItem(in DOMString key, in anydata);};var foo = localStorage.getItem("bar"); // ... localStorage.setItem("bar", foo);For removinginterface Storage { deleter void removeItem(in DOMString key); void clear();};For total number of valuesinterface Storage { readonly attribute unsigned long length; getter DOMString key(in unsigned long index);};
  22. 22. Property Type Descriptionkey string the named key that was added, removed, or modified the previous value (now overwritten), or null if a new item wasoldValue any addednewValue any the new value, or null if an item was removedurl* string the page which called a method that triggered this change
  23. 23. var Socket = new WebSocket(url, [protocal] );AttributesSocket.readyStateSocket.bufferedAmountEventsOpen Socket.onopenMessage Socket.onmessageError Socket.onerrorClose Socket.oncloseMethodsSocket.send()Socket.close()
  24. 24. // Let us open a web socket var ws = new WebSocket("ws://localhost:9998/echo"); ws.onopen = function() { // Web Socket is connected, send data using send() ws.send("Message to send"); alert("Message is sent..."); ws.onmessage = function (evt) { var received_msg =; alert("Message is received..."); }; ws.onclose = function() {// websocket is closed. alert("Connection is closed..."); };
  25. 25. HTML 5 defines the <canvas> element as “a resolution-dependent bitmap canvas which can be used for rendering graphs, game graphics, or other visual images on the fly.” A canvas is a rectangle in your page where you can use JavaScript to draw anything you want. Simple shapesfunction draw_b() { var b_canvas = document.getElementById("b"); var b_context = b_canvas.getContext("2d"); b_context.fillRect(50, 25, 150, 100);}var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");ctx.moveTo(0,0);ctx.lineTo(300,150);ctx.stroke();
  26. 26. var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.beginPath(); ctx.arc(95,50,40,0,2*Math.PI); ctx.stroke(); var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.font="30px Arial"; ctx.fillText("Hello World",10,50); / ctx.strokeText("Hello World",10,50);var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");// Create gradientvar grd=ctx.createLinearGradient(0,0,200,0);/ var grd=ctx.createRadialGradient(75,50,5,90,60,100);grd.addColorStop(0,"red");grd.addColorStop(1,"white");// Fill with gradientctx.fillStyle=grd;ctx.fillRect(10,10,150,80);
  27. 27. <img id="cat" src="images/cat.png" alt="sleeping cat“width="177" height="113"><canvas id="e" width="177" height="113"></canvas>drawImage(image,dx,dy)drawImage(image,dx,dy, dw, dh)drawImage(image, , sx, sy, sw, sh, dx, dy, dw, dh)
  28. 28. The geolocation API lets you share your location with trusted web sites.The geolocation API centers around a new property on the global navigatorobject: navigator.geolocation.The simplest use of the geolocation API looks like this: function get_location() { navigator.geolocation.getCurrentPosition(show_ map); } function show_map(position) { var latitude = position.coords.latitude; var longitude = position.coords.longitude; // lets show a map! }
  29. 29. Property Type Notescoords.latitude double decimal degreescoords.longitude double decimal degrees meters above the referencecoords.altitude double or null ellipsoidcoords.accuracy double meterscoords.altitudeAccuracy double or null meters degrees clockwise from truecoords.heading double or null northcoords.speed double or null meters/secondtimestamp DOMTimeStamp like a Date() object
  30. 30. Microdata is a standardized way to provide additionalsemantics in your web pages. <div itemscope> <p>My name is <span itemprop="name">Zara</span>.</p> </div> <div itemscope> <p>My name is <span itemprop="name">Nuha</span>.</p> </div>
  31. 31. Drag and drop is a very common feature. It is when you "grab" an object and drag it to a different location.<img draggable="true">function drag(ev){ev.dataTransfer.setData("Text",; event.preventDefault()} function drop(ev) { ev.preventDefault(); var data=ev.dataTransfer.getData("Text");; }
  32. 32. <video src=myVideo.ogv width=320 height=240 controls poster=image.jpg> </video><video src=myVideo.ogvwidth=320 height=240controls poster=image.jpg>Download my awesome video in<a href=myVideo.ogg>Ogg</a>or <a href=myVideo.mp4>MP4</a> format </video> <audio src="audio.mp3“ controls preload> </audio>
  33. 33. HTML5 can be used as an alternative to Adobe Flash.
  34. 34. •Stability, faster processes and sponsorship deals.•WHATWG/W3C split?•W3C work to ensure the spec doesnt become forked•How soon will HTML5 become a stable standard? Targeting2014…!!!•Browser vendors rapidly providing updates•Sponsorship deal for w3c
  35. 35. The End