Html5 nl
Download as KEY, PDF0 likes459 views
The document discusses the history and evolution of HTML standards from 1991 to present. It covers versions of HTML like 2.0, 3.2, 4.0, XHTML 1.0 and 1.1. It also discusses new semantic elements introduced in HTML5 like article, aside, header, nav, section and others. It provides examples of using new HTML5 form input types like email, date, time and search as well as the video element.
![<!--[if lt IE 9]>
<script
src="http://html5shim.googlecode.com/
svn/trunk/html5.js"></script>
<![endif]-->](https://image.slidesharecdn.com/html5-nl-110607060846-phpapp01/85/Html5-nl-32-320.jpg)
Html5 nl
- 1. Wilfred Nas Front end developer anwb, ing, agis, vst-pn, essent... wnas.nl @wnas
- 3. What is it all about?
- 12. XHTML 2.0 ....
- 13. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/ xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> </head> <body> </body> </html>
- 15. hetzelfde als HTML 4
- 17. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/ xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> </head> <body> </body> </html>
- 18. <!DOCTYPE HTML> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML 5</title> </head> <body> <p>foo</p> </body> </html>
- 19. <!DOCTYPE HTML> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML 5</title> </head> <body> <p>foo</p> </body> </html>
- 22. <div id=header> <div id=nav> <ul> <li><a href=foo.html>foo</a></li> ... </ul> </div> <div class=headers> <h1>header</h1> <p>tagline</p> </div> </div>
- 23. <header> <nav> <ul> <li><a href=foo.html>foo</a></li> ... </ul> </nav> <hgroup> <h1>header</h1> <h2>tagline</h2> </hgroup> </header>
- 24. New article meter aside nav audio output canvas progress details section figcaption summary figure time footer video header hgroup mark
- 26. Semantiek Hoe duidelijker, hoe beter je te begrijpen bent.
- 28. <header> beter
- 29. <header> <hgroup> <h1>header</h1> <h2>tagline</h2> </hgroup> </header> <section> <article> <hgroup> <h1>header</h1> <time>2011-06-08</time> </hgroup> <p>fooooo</p> <section> <h1>header</h1> <p>baaaaaar</p> <footer>copy</footer> </section> <aside> <time>22.00</time> </aside> </article> </section>
- 30. <article> “Like an article of clothing, not a newspaper article.” (@brucel)
- 31. Maar wat doen we met oudere browsers? ( kuch IE )
- 32. <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/ svn/trunk/html5.js"></script> <![endif]-->
- 33. article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section { display:block; }
- 34. “wel of geen aanhalingstekens?”
- 37. <INPUT type=”TEXT” Class=‘foo bar’ />
- 38. use “quotes” and lowercase.
- 39. Form elementen Dingen die je al lang wilde...
- 40. <input>
- 43. // build an input to test for html5 attr. var i = document.createElement('input'); // see if placeholder is supported if ( !('placeholder' in i) ) { //provide placeholder support }
- 44. search tel time url datetime- email local datetime number date range month color week
- 45. autocomplete height and novalidate width autofocus list form min form overrides max formaction, step formenctype, multiple formmethod, pattern (regexp) formnovalidate, placeholder formtarget required
- 47. <input type=email required> (alle browsers)
- 48. <input type=email required> (indien niet ondersteund)
- 49. <input type=email required> (alle browsers, met javascript)
- 56. <video width="320" height="240" controls> <source src="movie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a. 40.2"'> <source src="movie.webm" type='video/webm; codecs="vp8, vorbis"'> <source src="movie.ogv" type='video/ogg; codecs="theora, vorbis"'> </video>
Editor's Notes
- #2: goedemiddag mensen, ik ben Wilfred Nas ik doe front end ontwikkeling. dit doe ik al zo&#x2019;n 15 jaar. eerst als ontwerper en later enkel code...\n
- #3: \n
- #4: \n
- #5: \n
- #6: \n
- #7: \n
- #8: and the working group was shut down.\n
- #9: \n
- #10: \n
- #11: \n
- #12: \n
- #13: \n
- #14: \n
- #15: \n
- #16: \n
- #17: \n
- #18: \n
- #19: \n
- #20: het html element is overbodig, als ook het head als de body. Dit was al in html4...\n
- #21: \n
- #22: jaja, ook de body tag kun je gebruiken om je document te stylen...\n
- #23: een hele mooie opbouw van een navigatie element en een header in een html4 document. Toch best wel mooi, niet?\n
- #24: hier is hetzelfde document, alleen met html5 elementen in plaats van betekenisloze div&#x2019;s...\n
- #25: We hebben redelijk wat leuke nieuwe elementen...\n
- #26: \n
- #27: \n
- #28: \n
- #29: \n
- #30: \n
- #31: \n
- #32: \n
- #33: de beste vinding van IE. conditional comments. Dit stukje moet dus in de head en niet onderin de body...\n
- #34: css, voor (zover ik weet) oudere browsers... de laatste safari, chrome, opera en firefox doen dit al...\n
- #35: \n
- #36: \n
- #37: \n
- #38: \n
- #39: \n
- #40: \n
- #41: De meest makkelijke manier om een input element te definieren.\n
- #42: om een zoek veld aan te geven met een &#x2018;placeholder&#x2019;.\n
- #43: \n
- #44: \n
- #45: \n
- #46: \n
- #47: \n
- #48: \n
- #49: \n
- #50: \n
- #51: \n
- #52: opera\n
- #53: firefox\n
- #54: webkit\n
- #55: \n
- #56: \n
- #57: \n
- #58: \n