• Like
  • Save
Introduction to Html5
Upcoming SlideShare
Loading in...5
×

Introduction to Html5

  • 10,273 views
Uploaded 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 …

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

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
10,273
On Slideshare
0
From Embeds
0
Number of Embeds
5

Actions

Shares
Downloads
0
Comments
3
Likes
13

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Introduction to HTML5
  • 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. 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. 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="http://www.w3schools.com" /> <option label="Google" value="http://www.google.com" /> <option label="Microsoft" value="http://www.microsoft.com" /></datalist><input type="submit" /></form>
  • 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. 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. 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. 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. 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. 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. <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. <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. <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. <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. <button><button type="button">Click Me!</button> New Attributes:-1) Autofocus2) Disabled3) Form4) Formaction5) Formenctype6) Formmethod7) Formnovalidate8) formtarget
  • 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. <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. Example of manifest fileCACHE MANIFEST index.html theme.css images/logo.png scripts/main.js NETWORK: server.cgi FALLBACK: /offline.htm
  • 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. <iframe> The <iframe> tag specifies an inline frame. An inline frame is used to embed another document within the current HTML document.<iframe src="http://www.w3schools.com"></iframe>New attributes:-1) Sandbox2) Seamless3) srcdoc
  • 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. 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. 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. Tags Not Supported In HTML5 <acronym> <applet> <basefont> <big> <center> <dir> <font> <frame> <frameset> <noframes> <strike> <tt> <u>
  • 25. Contact us Information: info@netgains.org Sales: sales@netgains.org Partners: partners@netgains.org 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