Introduction to Html5


Published on

HTML5 is a language for structuring and presenting content for the World Wide Web. it is the fifth revision of the HTML standard (created in 1990 and standardized as HTML4 as of 1997) and as of February 2012 is still under development. Its core aims have been to improve the language with support for the latest multimedia while keeping it easily readable by humans and consistently understood by computers and devices (web browsers, parsers, etc.). It improves interoperability and reduces development costs by making precise rules on how to handle all HTML elements, and how to recover from errors

Published in: Technology, Design
No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Introduction to Html5

  1. 1. Introduction to HTML5
  2. 2. INTRODUCTION HTML5 is the new standard for HTML. HTML5 is still a work in progress HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG). New features of HTML5 are based on HTML, CSS, DOM, and JavaScript. Reduce the need for external plugins (like Flash)
  3. 3. HTML5 New Input Types color Your favorite color: <input type="color" name="favcolor" /> date datetime datetime-local Email E-mail: <input type="email" name="usremail" /> month number range search Tel Telephone: <input type="tel" name="usrtel" /> time url
  4. 4. HTML5 New Form Elements<datalist> The list is created with <option> elements inside the <datalist>. The <datalist> element specifies a list of options for an input field.<form action="demoform.html" method="get">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><input type="submit" /></form>
  5. 5. 2) <keygen><form action="demokeygen.html" method="get">Username: <input type="text" name="usr_name" />Encryption: <keygen name="security" /><input type="submit" /></form>
  6. 6. 3)<output><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>
  7. 7. HTML5 New Form Attributes Autocomplete Novalidate1) Autocomplete <form action="demo_form.html" method="get" autocomplete="on"> First name:<input type="text" name="fname" /><br /> E-mail: <input type="email" name="email" /><br /> <input type="submit" /></form>2) Novalidate<form action="demo_form.html" novalidate="novalidate"> E-mail: <input type="email" name="user_email" /> <input type="submit" /> </form>
  8. 8. New input attributes: Autocomplete Autofocus form form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget) height and width list min, max and step<input type="number" name="points" min="0" max="10" step="3" /> multiple Placeholder<input type="search" name="user_search" placeholder="Search W3Schools" /> required
  9. 9. HTML5 Global Attributes Contenteditable <p contenteditable="true">This is a paragraph. It is editable.</p> Contextmenu <element contextmenu="menu_id"> Draggable(true) Dropzone <element dropzone="copy|move|link"> Hidden SpellcheckFirst name: <input type="text" name="fname" spellcheck="true" />
  10. 10. HTML5 Tags<fieldset> <form> <fieldset disabled=“disabled”> <legend>Personalia:</legend> Name: <input type="text" /><br /> Email: <input type="text" /><br /> Date of birth: <input type="text" /> </fieldset> </form> New Attributes1) Disabled2) Form3) Name
  11. 11. <video><video width="320" height="240" controls="controls"><source src="movie.mp4" type="video/mp4" /></video> New Attributes1) Autoplay2) Controls (play,pause.seeking,volume,caption,track)3) Height4) Loop5) Muted6) Poster7) Preload <video controls="controls" preload="none">8) Width9) src
  12. 12. <details> The open attribute is a boolean attribute. When present, it specifies that the details should be visible (open) to the user.<details open="open"><summary>Copyright 1999-2011.</summary><p> - by Refsnes Data. All Rights Reserved.</p><p>All content and graphics on this web site are the property of the company Refsnes Data.</p></details>
  13. 13. <area><img src ="planets.gif" width="145" height="126" alt="Planets" usemap ="#planetmap" /> <map name="planetmap"> <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun" /> <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury" /> </map>New Attributes:-1) Hreflang2) Media <img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap" /> <map name="planetmap"> <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm" media="screen and (min-color-index:256)" /> </map>3) Rel
  14. 14. <select> New Attributes1) Autofocus: It specifies that the drop-down list should automatically get focus when the page loads.2) Form: <form action="demo_form.asp" id="carform"> Firstname:<input type="text" name="fname" /><br /> <input type="submit" /> </form> <select name="carlist" form="carform"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> </select>
  15. 15. <button><button type="button">Click Me!</button> New Attributes:-1) Autofocus2) Disabled3) Form4) Formaction5) Formenctype6) Formmethod7) Formnovalidate8) formtarget
  16. 16. <nav>: It defines a section of navigation links.<nav> <a href="/html/">HTML</a> | <a href="/html5/">HTML5</a> | <a href="/css/">CSS</a> | <a href="/css3/">CSS3</a> | <a href="/js/">JavaScript</a></nav>
  17. 17. <html> manifest AttributeAdvatages:1) Offline browsing2) Increased Speed3) Reduced server load<!DOCTYPE HTML> <html manifest=" demo_html.manifest "> <head> <title>Title of the document</title> </head> <body> The content of the document...... </body> </html>
  18. 18. Example of manifest fileCACHE MANIFEST index.html theme.css images/logo.png scripts/main.js NETWORK: server.cgi FALLBACK: /offline.htm
  19. 19. <progress> The <progress> tag represents the progress of a task. The <progress> tag is currently supported in Firefox, Opera, and Chrome.<progress value="22" max="100"></progress>Attributes:-1) max:- Specifies how much work the task requires in total.2) value:- Specifies how much of the task has been completed.
  20. 20. <iframe> The <iframe> tag specifies an inline frame. An inline frame is used to embed another document within the current HTML document.<iframe src=""></iframe>New attributes:-1) Sandbox2) Seamless3) srcdoc
  21. 21. HTML5 Web Storage=>HTML5 offers two new objects for storing data on the client: localStorage - stores data with no time limit SessionStorage - stores data for one session HTML5 uses JavaScript to store and access the data.
  22. 22. The local Storage Object The localStorage object stores the data with no time limit. Included in MySQL binary distributions (except on Windows), invoke configure with the --with-csv-storage-engine option to enable it.<script type="text/javascript"> localStorage.lastname="Smith"; document.write(localStorage.lastname); </script>
  23. 23. The sessionStorage Object The sessionStorage object stores the data for one session. The data is deleted when the user closes the browser window.How to create and access a sessionStorage: <script type="text/javascript"> sessionStorage.lastname="Smith"; document.write(sessionStorage.lastname); </script>
  24. 24. Tags Not Supported In HTML5 <acronym> <applet> <basefont> <big> <center> <dir> <font> <frame> <frameset> <noframes> <strike> <tt> <u>
  25. 25. Contact us Information: Sales: Partners: Careers: jobs@netgains.orgINDIA (Chandigarh) USA (New York)Mobile: +91 9876597755 NETGAINS AMERICA LLCOffice: +91 (172) 2700428 87 Wolfs Lane, 2nd FloorFax: +91 (172) 2700428 Pelham, New York - 10803 Office: + 1 (917) 779-0480 Toll Free: +1 (866) 693-5132