0
- <code>Gopinath T.M</code>
<ul><li>HTML5 will be the new standard for HTML, XHTML, and the HTML DOM. </li></ul><ul><li>WHATWG was working with web fo...
<ul><li>The canvas element for drawing </li></ul><ul><li>The video and audio elements for media playback </li></ul><ul><li...
Document DOM HTML 5 text/html XHTML 5 application/xhtml+xml
<ul><li>HTML Older version Code </li></ul><ul><ul><li><img src=&quot;path/to/image&quot; alt=&quot;About image&quot; />  <...
<ul><li>HTML Older Version Code. </li></ul><ul><ul><li><link rel=&quot;stylesheet&quot; href=&quot;path/to/stylesheet.css&...
<ul><li>HTML Older Version  </li></ul><ul><ul><li>We need to  add some client side script to make the things happened. </l...
<ul><li>Color </li></ul><ul><li>date  </li></ul><ul><li>datetime  </li></ul><ul><li>datetime-local  </li></ul><ul><li>emai...
<ul><li>HTML Older Version Code. </li></ul><ul><ul><li><form action=&quot;&quot; method=&quot;get&quot;> </li></ul></ul><u...
<ul><li>HTML Older Version </li></ul><ul><ul><li>We need to required some client side script to validate the things. </li>...
<ul><ul><li>HTML Older Version </li></ul></ul><ul><ul><ul><li>We need to  add some client side script to make the things h...
<ul><li>HTML5 </li></ul><ul><ul><li><audio autoplay=&quot;autoplay&quot; controls=&quot;controls&quot;> </li></ul></ul><ul...
<ul><li><video controls preload> </li></ul><ul><li><source src=&quot;cohagenPhoneCall.ogv&quot; type=&quot;video/ogg; code...
 
<ul><li><form action=&quot;&quot; method=&quot;post&quot;> </li></ul><ul><li><label for=&quot;username&quot;>Create a User...
<ul><li><h3> Search Results </h3> </li></ul><ul><li><p> They were interrupted, just after Quato said, <mark>&quot;Open you...
<ul><li>LocalStorage - stores data with no time limit </li></ul><ul><ul><li><script type=&quot;text/javascript&quot;> loca...
<ul><li><canvas id=&quot;myCanvas&quot; width=&quot;200&quot; height=&quot;100&quot; style=&quot;border:1px solid #c3c3c3;...
<ul><li>http://html5test.com/ </li></ul>
<ul><li>www.developersnacks.com </li></ul>
Upcoming SlideShare
Loading in...5
×

HTML5 with examples

3,683

Published on

this is slide for html5 guide with examples.

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
3,683
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
243
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "HTML5 with examples"

  1. 1. - <code>Gopinath T.M</code>
  2. 2. <ul><li>HTML5 will be the new standard for HTML, XHTML, and the HTML DOM. </li></ul><ul><li>WHATWG was working with web forms and applications, and W3C was working with XHTML 2.0. In 2006, they decided to cooperate and create a new version of HTML. </li></ul>
  3. 3. <ul><li>The canvas element for drawing </li></ul><ul><li>The video and audio elements for media playback </li></ul><ul><li>Better support for local offline storage </li></ul><ul><li>New content specific elements, like article, footer, header, nav, section </li></ul><ul><li>New form controls, like calendar, date, time, email, url, search </li></ul>
  4. 4. Document DOM HTML 5 text/html XHTML 5 application/xhtml+xml
  5. 5. <ul><li>HTML Older version Code </li></ul><ul><ul><li><img src=&quot;path/to/image&quot; alt=&quot;About image&quot; />  <p>Image of Mars. </p>. </li></ul></ul><ul><li>HTML5 </li></ul><ul><ul><li><figure> </li></ul></ul><ul><ul><li><img src=&quot;path/to/image&quot; alt=&quot;About image&quot; /> </li></ul></ul><ul><ul><li><figcaption> </li></ul></ul><ul><ul><li><p>This is an image of something interesting.</p> </li></ul></ul><ul><ul><li></figcaption> </li></ul></ul><ul><ul><li></figure> </li></ul></ul>
  6. 6. <ul><li>HTML Older Version Code. </li></ul><ul><ul><li><link rel=&quot;stylesheet&quot; href=&quot;path/to/stylesheet.css&quot; type=&quot;text/css&quot; /> </li></ul></ul><ul><ul><li><script type=&quot;text/javascript“ </li></ul></ul><ul><ul><li>src=&quot;path/to/script.js&quot;></script> </li></ul></ul><ul><li>HTML5 </li></ul><ul><ul><li><link rel=&quot;stylesheet&quot; href=&quot;path/to/stylesheet.css&quot; /> </li></ul></ul><ul><ul><li><script src=&quot;path/to/script.js&quot;></script> </li></ul></ul>
  7. 7. <ul><li>HTML Older Version </li></ul><ul><ul><li>We need to add some client side script to make the things happened. </li></ul></ul><ul><li>HTML5 </li></ul><ul><ul><li><ul contenteditable=&quot;true&quot;> </li></ul></ul><ul><ul><li><li> Break mechanical cab driver. </li> </li></ul></ul><ul><ul><li><li> Drive to abandoned factory </li></ul></ul><ul><ul><li><li> Watch video of self </li> </li></ul></ul><ul><ul><li></ul> </li></ul></ul>
  8. 8. <ul><li>Color </li></ul><ul><li>date  </li></ul><ul><li>datetime  </li></ul><ul><li>datetime-local  </li></ul><ul><li>email  </li></ul><ul><li>File with multiple file selection. </li></ul><ul><li>month  </li></ul><ul><li>number  </li></ul><ul><li>range  </li></ul><ul><li>Search </li></ul><ul><li>Tel </li></ul><ul><li>time  </li></ul><ul><li>url </li></ul><ul><li>week </li></ul>
  9. 9. <ul><li>HTML Older Version Code. </li></ul><ul><ul><li><form action=&quot;&quot; method=&quot;get&quot;> </li></ul></ul><ul><li><label for=&quot;email&quot;>Email:</label> </li></ul><ul><li><input id=&quot;email&quot; name=&quot;email&quot; type=“text&quot; /> </li></ul><ul><li><button type=&quot;submit&quot;> Submit Form </button> </li></ul><ul><li> </form> </li></ul><ul><li>HTML5 </li></ul><ul><ul><li><form action=&quot;&quot; method=&quot;get&quot;> </li></ul></ul><ul><li><label for=&quot;email&quot;>Email:</label> </li></ul><ul><li><input id=&quot;email&quot; name=&quot;email&quot; type=&quot;email&quot; /> </li></ul><ul><li><button type=&quot;submit&quot;> Submit Form </button> </li></ul><ul><li></form> </li></ul>
  10. 10. <ul><li>HTML Older Version </li></ul><ul><ul><li>We need to required some client side script to validate the things. </li></ul></ul><ul><li>HTML5 </li></ul><ul><ul><li><form method=&quot;post&quot; action=&quot;&quot;> </li></ul></ul><ul><ul><li><label for=&quot;someInput&quot;> Your Name: </label> </li></ul></ul><ul><ul><li><input type=&quot;text&quot; id=&quot;someInput&quot; name=&quot;someInput&quot; placeholder=&quot;Douglas Quaid&quot; required> </li></ul></ul><ul><ul><li><button type=&quot;submit&quot;>Go</button> </li></ul></ul><ul><ul><li></form> </li></ul></ul>
  11. 11. <ul><ul><li>HTML Older Version </li></ul></ul><ul><ul><ul><li>We need to add some client side script to make the things happened. </li></ul></ul></ul><ul><li>HTML5 </li></ul><ul><ul><li><form method=&quot;post&quot; action=&quot;&quot;> </li></ul></ul><ul><li><label for=&quot;someInput&quot;> Your Name: </label> </li></ul><ul><li><input type=&quot;text&quot; id=&quot;someInput&quot; name=&quot;someInput&quot; placeholder=“Enter your name&quot; required> </li></ul><ul><li><button type=&quot;submit&quot;>Go</button> </li></ul><ul><li></form> </li></ul>
  12. 12. <ul><li>HTML5 </li></ul><ul><ul><li><audio autoplay=&quot;autoplay&quot; controls=&quot;controls&quot;> </li></ul></ul><ul><li><source src=&quot;file.ogg&quot; /> </li></ul><ul><li><source src=&quot;file.mp3&quot; /> </li></ul><ul><li><a href=&quot;file.mp3&quot;>Download this file.</a> </li></ul><ul><li></audio> </li></ul>
  13. 13. <ul><li><video controls preload> </li></ul><ul><li><source src=&quot;cohagenPhoneCall.ogv&quot; type=&quot;video/ogg; codecs='vorbis, theora'&quot; /> </li></ul><ul><li><source src=&quot;cohagenPhoneCall.mp4&quot; type=&quot;video/mp4; 'codecs='avc1.42E01E, mp4a.40.2'&quot; /> </li></ul><ul><li><p> Your browser is old. <a href=&quot;cohagenPhoneCall.mp4&quot;>Download this video instead.</a> </p> </li></ul><ul><li></video> </li></ul>
  14. 15. <ul><li><form action=&quot;&quot; method=&quot;post&quot;> </li></ul><ul><li><label for=&quot;username&quot;>Create a Username: </label> </li></ul><ul><li> <input type=&quot;text&quot; </li></ul><ul><li> name=&quot;username&quot; </li></ul><ul><li> id=&quot;username&quot; </li></ul><ul><li> placeholder=&quot;4 <> 10&quot; </li></ul><ul><li> pattern=&quot;[A-Za-z]{4,10}&quot; </li></ul><ul><li> autofocus </li></ul><ul><li> required> </li></ul><ul><li><button type=&quot;submit&quot;>Go </button> </li></ul><ul><li></form> </li></ul>
  15. 16. <ul><li><h3> Search Results </h3> </li></ul><ul><li><p> They were interrupted, just after Quato said, <mark>&quot;Open your Mind&quot;</mark>. </p> </li></ul>
  16. 17. <ul><li>LocalStorage - stores data with no time limit </li></ul><ul><ul><li><script type=&quot;text/javascript&quot;> localStorage.lastname=&quot;Smith&quot;; document.write(localStorage.lastname); </script> </li></ul></ul><ul><li>Ses sionStorage - stores data with one time session </li></ul><ul><ul><li><script type=&quot;text/javascript&quot;> sessionStorage.lastname=&quot;Smith&quot;; document.write(sessionStorage.lastname); </script> </li></ul></ul>
  17. 18. <ul><li><canvas id=&quot;myCanvas&quot; width=&quot;200&quot; height=&quot;100&quot; style=&quot;border:1px solid #c3c3c3;&quot;> </li></ul><ul><li>Your browser does not support the canvas element. </li></ul><ul><li></canvas> </li></ul><ul><li><script type=&quot;text/javascript&quot;> </li></ul><ul><li>var c=document.getElementById(&quot;myCanvas&quot;); </li></ul><ul><li>var ctx=c.getContext(&quot;2d&quot;); </li></ul><ul><li>ctx.fillStyle=&quot;#FF0000&quot;; </li></ul><ul><li>ctx.fillRect(0,0,150,75); </li></ul><ul><li></script> </li></ul>
  18. 19. <ul><li>http://html5test.com/ </li></ul>
  19. 20. <ul><li>www.developersnacks.com </li></ul>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×