Html5 - short intro
- 1. HTML5 Jason Eiseman Librarian for Emerging Technologies Yale Law School
- 2. 1990
- 3. <title>Hypertext Links</title> <h1>Links and Anchors</h1> A link is the connection between one piece of <a href=WhatIs.html>hypertext</a> and another. 1990
- 4. “Support Existing Content” HTML5 Design Principles:http://www.w3.org/TR/html-design-principles
- 5. World Wide Web Consortium
- 6. W3C HTML 4.01 - 1999 XHTML 1.0 - 2002 XHTML 1.1 - 2010 http://www.w3.org/
- 7. Web Hypertext Application Technology Working Group
- 8. WHATWG Web Forms 2.0 - 2004 http://www.whatwg.org
- 9. WHATWG & W3C HTML5 - 2008 - working draft 2012? - candidate 2022? - standard http://www.w3.org
- 10. So why worry about HTML5 now? 2022?
- 11. Internet Firefox Chrome Explorer 9 Safari Opera all support HTML5 today Today?
- 12. Today?
- 13. Today?
- 15. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML: XHTML 1.0 Strict//EN" "http://www.w3.org/ TR/xhtml1/DTD/xhtml1-strict.dtd"> HTML5: <!DOCTYPE html> DOCTYPE
- 16. XHTML: <script type="text/javascript" src="javascript.js"></script> HTML5: <script src="javascript.js"></script> Scripts
- 17. XHTML: <link type="text/css" rel="stylesheet" media="all" href="style.css" /> HTML5: <link rel="stylesheet" href="style.css" /> Stylesheets
- 18. <div id= "header"> <div id= "nav"> <div id= "section"> <div id= "sidebar"> <div id= "footer"> Semantics & Page Structure
- 19. <header> <nav> <article> <section> <aside> <footer> Semantics & Page Structure
- 20. Microformats Semantics & Page Structure
- 21. forms
- 22. Validation Forms
- 25. Forms
- 26. Datalist Forms
- 27. Forms
- 29. Forms
- 30. <input name="email" type="email" /> <input name="url" type="url" /> Forms
- 31. @ Forms
- 32. / .com Forms
- 35. canvas
- 37. <canvas id="theCanvas" width="800" height="800"> </canvas> Canvas
- 38. <script type="application/javascript"> function draw() { var canvas=document.getElementById('theCanvas'); var context=canvas.getContext('2d'); context.strokeRect(10, 10, 600, 200); context.font="bold 40px sans-serif"; Canvas
- 39. <body onload="draw()"> <canvas id="theCanvas" width="800" height="800"> <img src="carrells.gif" /> </canvas> </body> Canvas
- 40. Canvas
- 42. Canvas - paper.js - available at: http://paperjs.org
- 43. video
- 45. <video src="movie.mp4" controls width="360" height="240" poster= "placeholder.jpg "> </video> Video
- 46. X Ogg WebM/VP8 Firefox X Ogg WebM/VP8 Chrome H.264 X X Internet Explorer 9 H.264 X X Safari Video
- 48. Video
- 49. Video
- 50. <video controls preload width="270" height="186" poster ="poster.png"> <source src="http://jasoneiseman.com/aall11/chain.mp4" type="video/ mp4"> <source src="http://jasoneiseman.com/aall11/chain.ogv" type="video/ ogg"> <object width="270" height="186"> <param name="movie" value="http://jasoneiseman.com/aall11/ chain.swf"> <embed src="http://jasoneiseman.com/aall11/chain.swf" width="270" height="186"> </object> </video> Video
- 51. <video width="270" height="186" controls preload poster ="poster.png"> Video
- 52. <source src="http://jasoneiseman.com/aall11/chain.mp4" type="video/ mp4"> <source src="http://jasoneiseman.com/aall11/chain.ogv" type="video/ ogg"> Video
- 53. <object width="270" height="186"> <param name="movie" value="http://jasoneiseman.com/aall11/ chain.swf"> <embed src="http://jasoneiseman.com/aall11/chain.swf" width="270" height="186"> </object> Video
- 54. Video
- 55. Video
- 56. <head> <script type="text/javascript" src="http://html5.kaltura.org/js" > </script> </head> <body> <video kentryid="0_swup5zao" kwidgetid="_243342"></video> </body> Video
- 57. Video
- 58. Dive Into HTML5 http://diveintohtml5.org/video.html Video
- 59. audio
- 62. <audio controls> <source src="audio.mp3" type= "audio/mpeg"> <source src="audio.ogg" type= "audio/ogg"> </audio> Audio
- 67. offline web applications Advanced Functionality
- 69. further reading
- 73. http://jasoneiseman.com/aall11.zip jasoneiseman@gmail.com Further Reading