An Introduction To HTML5
15 likes21,967 views
This document provides an introduction to HTML5: - It discusses backwards compatibility, progressive enhancement, and the <!DOCTYPE html> declaration in HTML5. - It describes the syntax options of HTML or XHTML and provides examples of new HTML5 elements like <video>, <canvas>, and various new <input> types. - It includes a full sample HTML5 page with new elements, semantics, and WAI-ARIA roles for accessibility.
An Introduction To HTML5
- 1. An Introduction to HTML5
- 13. Web Hypertext Application Technology Working Group - WHATWG
- 14. Web Hypertext Application Technology Working Group - WHATWG
- 16. What is HTML5?
- 22. <!DOCTYPE html>
- 23. HTML or XHTML syntax?
- 25. <DIV>A monkey</DIV> <p id=john>John’s P</p> <input type=text> <input type="text"> <input type="text" />
- 26. <DIV>A monkey</DIV> <p id=john>John’s P</p> <input type=text> <input type="text"> <input type="text" />
- 28. As XHTML <?xml version="1.0"?> <html xmlns="http://www.w3.org/1999/xhtml"> MUST be application/xhtml+xml or application/xml <noscript>Not in XHTML</noscript>
- 30. <audio> <aside> <nav> <section> <hgroup> <article> <figure> <time> <header> <video> <figcaption> <footer>
- 31. <input type="color"> <input type="range"> <input type="number"> <input type="email"> <input type="time"> <input type="search"> <input type="month"> <input type="tel"> <input type="date"> <input type="datetime"> <input type="week"> <input type="datetime-local"> <input type="url">
- 32. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML5 example</title> </head> <body> <div id="container"> <header role="banner"> <h1>HTML5 example</h1> <p>A page with valid simple HTML5 markup complemented with WAI-ARIA landmark roles for accessibility.</p> </header> <nav role="navigation"> <ul> <li><a href="http://getfirefox.com">Download Firefox</a></li> <li><a href="http://robertnyman.com/">Robert's talk</a></li> </ul> </nav> <article id="main" role="main"> <section id="main-content"> <header> <hgroup> <h2>A title</h2> <h3>Subtitle to the above title</h3> </hgroup> </header> <article> <p>Some content, created <time datetime="2010-01-31">January 31st 2010</time>.</p> </article> <article> <p>Some more content - I guess you get the drift by now.</p> </article> </section> <aside role="complementary"> This is just a demo page to see HTML5 markup and WAI-ARIA landmark roles in action. </aside> </article> <footer id="page-footer" role="contentinfo"> Created by <a href="http://robertnyman.com/">Robert Nyman</a> </footer> </div> </body> </html>
- 33. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML5 example</title> </head>
- 34. <header role="banner"> <h1>HTML5 example</h1> <p> A page with valid simple HTML5 markup complemented with WAI-ARIA landmark roles for accessibility. </p> </header>
- 35. <nav role="navigation"> <ul> <li> <a href="http://getfirefox.com"> Download Firefox </a> </li> <li> <a href="http://robertnyman.com/"> Robert's talk </a> </li> </ul> </nav>
- 36. <article id="main" role="main"> <section id="main-content"> <header> <hgroup> <h2>A title</h2> <h3>Subtitle to the above title</h3> </hgroup> </header> <article> <p> Some content, created <time datetime="2010-01-31">January 31st 2010</time>. </p> </article> <article> <p>Some more content - I guess you get the drift by now.</p> </article> </section> <aside role="complementary"> This is just a demo page to see HTML5 markup and WAI-ARIA landmark roles in action. </aside> </article>
- 37. <footer id="page-footer" role="contentinfo"> Created by <a href="http://robertnyman.com/">Robert Nyman</a> </footer>
- 39. <aside aria-live="polite" aria-relevant="additions" aria-atomic="true"> Some sidebar content </aside>
- 40. WAI-ARIA Authoring Practices 1.0 Live Regions - http://www.w3.org/WAI/PF/aria-practices/ #LiveRegions
- 41. Video
- 43. <video src="swedish-flag.ogv" controls width="320" height="240"> </video>
- 44. <video controls> <source src="swedish-flag.mp4"> <source src="swedish-flag.ogv"> <p> Sorry, your web browser doesn't support the video element. </p> </video>
- 46. <video controls> <source src="http://robertnyman.com/video/swedish-flag.mp4"> <source src="http://robertnyman.com/video/swedish-flag.ogv"> <object width="425" height="340" type="application/x-shockwave-flash" data="http://pics.robertnyman.com/ria/ShizVidz-2010012201.swf"> <param name="movie" value="http://pics.robertnyman.com/ria/ ShizVidz-2010012201.swf"> <param name="allowFullScreen" value="true"> <param name="flashVars" value="s=ZT0xJmk9MzE5NjcyNDUwJms9UUVOdUomYT01MjU0ODc5X21uWFdIJnU9cm9iZXJ0b nltYW4="> </object> <p>Sorry, your web browser doesn't support, well, anything...</p> </video>
- 51. “The WebM project is dedicated to developing a high-quality, open video format for the web that is freely available to everyone”
- 55. Canvas
- 56. <canvas id="my-canvas" width="200" height="200"> I am canvas </canvas>
- 57. var canvas = document.getElementById("my-canvas"), context = canvas.getContext("2d");
- 58. var canvas = document.getElementById("my-canvas"), context = canvas.getContext("2d"); context.fillStyle = "#f00"; context.fillRect(0, 0, 100, 100); context.strokeStyle = "#00f"; context.strokeRect(25, 25, 50, 50);
- 60. var canvas5 = document.getElementById("my-canvas-5"), context5 = canvas5.getContext("2d"), img = document.createElement("img"); img.addEventListener("load", function () { context5.drawImage(img, 0, 0, 600, 200); // Get canvas content as a base64 image var base64Img = canvas5.toDataURL("image/png"); }, false); img.setAttribute("src", "view.jpg");
- 62. HTML5 Canvas for Internet Explorer - explorercanvas
- 66. History API
- 67. var url = "http://robertnyman.com", title = "My blog", state = { address : url }; window.history.pushState(state.address, title, url);
- 69. Web Sockets
- 73. var ws = new WebSocket("ws://robertnyman.com/wsmagic"); // Send data ws.send("Some data"); // Close the connection ws.close();
- 74. var ws = new WebSocket("ws://robertnyman.com/wsmagic"); // When connection is opened ws.onopen = function () { console.log("Connection opened!") }; // When you receive a message ws.onmessage = function (evt) { console.log(evt.data); }; // When you close the connection ws.onclose = function () { console.log("Connection closed"); }; // When an error occurred ws.onerror = function () { console.log("An error occurred") };
- 76. Offline web applications Drag & drop File API Cross-document messaging Web workers Editing - contenteditble Web storage
- 88. Sjoerd Visscher - HTML5 Shiv
- 89. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML5 IE fix</title> <script>document.createElement("article");</script> </head> <body> <article>Article content</article> </body> </html>
- 90. Remy Sharp - HTML5.js
- 96. Robert Nyman robertnyman.com/speaking/ robertnyman.com/html5/ Twitter: @robertnyman Pictures: Ninja Turtle: http://www.originalprop.com/blog/2008/03/20/teenage-mutant-ninja-turtles-costume- Designed to exclude: http://www.ij.org/index.php?option=com_content&task=view&id=2603&Itemid=249 restoration/ Canvas: http://morethananelectrician.wordpress.com/2009/08/22/old-paint-but-a-new-canvas/ Bruce Willis: http://www.starsjournal.com/3192/bruce-willis-is-being-sued-for-4-million-dollars.html Excited: http://www.flickr.com/photos/48600103384@N01/3679671408 Swedish flag: http://www.olssonfoto.se/JAlbum/SGP%202008%20Ullevi/slides/Svenska%20flaggan.html History: http://animatedtv.about.com/od/fgmultimedia/ig/-Family-Guy--Pictures/Griffin-Family-History.htm Euro Coin: http://accidentaldong.blogspot.com/2009/10/euro-uh-oh.html Sockets: http://www.gigaweb.com/products/view/31681/plug-socket-adult-costume.html Smurfette in car: http://www.schleich-s.com/cms_schleich/cms_bilder/detail/40265.jpg AJAX: http://www.aqlanza.com/technologies01.html Baby smurf one: http://images.esellerpro.com/13/I/106/33/baby%20A.jpg Comet: http://www.blogiversity.org/blogs/cstanton/archive/2009/12/16/revealing-hidden-comet-strikes.aspx Baby smurf two: http://www.arbgames.com.au/images/T/Smurf%20Baby%20With%20Teddy.jpg Flash: http://www.zerofractal.com/assets/error-flash.jpg History (Robots): http://world.honda.com/ASIMO/history/image/top/title.jpg You look nice today: http://laughingsquid.com/you-look-nice-today-a-twitter-induced-podcast/ 2001: http://www.rense.com/general7/alchemkubrick.htm Yes, we can!: http://www.educationuk.org/pls/hot_bc/obj_pls_image?p_img_id=18470 W3C keys: http://www.w3.org/2008/Talks/1120-Budapest-WAIAGE/Overview.html Pros and cons: http://www.mimifroufrou.com/scentedsalamander/2009/03/ifra_seminar_the_pros_cons_of.html Mozilla logo: http://www.w3.org/2008/security-ws/papers/mozilla.html Awesome!: http://randazza.wordpress.com/2009/02/17/competing-views-on-the-auto-admit-story-define- Apple logo: http://www.mobilewhack.com/iphone-helps-apples-profits-soar-to-new-heights/ awesome-2/ Google logo: http://userlogos.org/node/1120 Google wave logo: http://mediesverige.se/?p=470 Free!: http://trendwatching.com/trends/freelove.htm Google start page: http://www.google.com/press/images.html#productimages Small dog/big dog: http://jaybot7.com/blog/wp-content/uploads/2009/09/bigcompany.jpg Strict teacher: http://teacherpictures.com/ HTML5 man: http://poomblox.net/2009/12/06/experience-html5-without-having-to-wait-13-years/ Hands in the sky (affirmation): http://www.academyofawakening.com.au/affirmation_cd.htm iPad spoof: http://failblog.org/2010/01/27/name-fail-photoshop-win/ Failure: http://www.hennessy.id.au/quentingeorge/archives/000378.html Accessibility fail: http://failblog.org/2008/11/13/accessibility-fail/ IE 9: http://www.redmondpie.com/internet-explorer-9-to-be-announced-at-pdc-9140118/ Open API: http://www.socialsignal.com/news/2007/07/31/open-api Someone is wrong on the Internet: http://xkcd.com/386/ Backwards compatibility: http://www.aeropause.com/wordpress/archives/images/2009/03/ Firefox: http://www.flickr.com/photos/tedion/3966234643/ backwardscompatibility.jpg Google Chrome: http://www.flickr.com/photos/tedion/3966233919/ Progressive enhancement: http://www.flickr.com/photos/cole007/4187641210/ Safari: http://www.rapidshareindex.com/Apple-Safari-v4-0-3-Portable_284132.html Choice: http://www.naset.org/uploads/pics/choice.gif Opera: http://www.geek.com/wp-content/uploads/2009/11/Opera_512x512.png Mixed martial arts: http://thegreatgeekmanual.com/blog/t-shirt-of-the-week-mixed-martial-arts-and-crafts Internet Explorer trash: https://www.adaptavist.com/download/attachments/28999748/ie6trash.png Ok icon: http://www.axialis.com/objects/ip_icon_02.shtml Darth Vader: http://threekidcircus.com/threekidcircus/archives/2009/09/darth_jenny.html Flowers: http://successisnotanoption.tumblr.com/post/596574399/no-known-provenance-for-the-image- This way/that way: http://www.fresheventure.com/77/internet-vs-offline-business-ownership/ stole-it-off Don't worry, be happy: http://amiestreet.com/music/the-hit-co/don-t-worry-be-happy/ Shiny: http://punditkitchen.files.wordpress.com/2008/09/political-pictures-sarah-palin-john-mccain-look-shiny- Squirrels: http://pictures.todaysbigthing.com/2010/03/08 object.jpg Accessibility success: http://www.access-it-events.org/success.of.access-it.2009.php Video: http://www.praxmatrix.com/video.php
Editor's Notes
- #11: Moving away from W3C
- #14: Moving away from W3C
- #15: Moving away from W3C
- #16: New semantics
- #17: Accessibility
- #18: New semantics
- #19: New semantics
- #20: New semantics
- #22: HTML or XHTML?
- #23: HTML or XHTML?
- #25: HTML or XHTML?
- #27: HTML or XHTML?
- #47: HTML or XHTML?
- #50: HTML or XHTML?
- #54: HTML or XHTML?
- #56: HTML or XHTML?
- #57: HTML or XHTML?
- #58: HTML or XHTML?
- #59: HTML or XHTML?
- #61: HTML or XHTML?
- #62: HTML or XHTML?
- #63: HTML or XHTML?
- #93: New semantics
- #94: New semantics
- #95: New semantics
- #96: New semantics
- #98: New semantics
- #99: New semantics
- #100: New semantics
- #101: New semantics
- #102: New semantics
- #103: New semantics
- #107: New semantics
- #108: New semantics