Downloaded 28 times
More Related Content
Html5 - short intro
- 1. HTML5 Jason Eiseman Librarian forEmerging Technologies Yale Law School
- 2.
- 3. <title>Hypertext Links</title> <h1>Links andAnchors</h1> A link is the connection between one piece of <a href=WhatIs.html>hypertext</a> and another. 1990
- 4. “Support Existing Content” HTML5Design Principles:http://www.w3.org/TR/html-design-principles
- 5. World Wide WebConsortium
- 6. W3C HTML 4.01 - 1999 XHTML 1.0 - 2002 XHTML 1.1 - 2010 http://www.w3.org/
- 7. Web Hypertext Application TechnologyWorking 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 worryabout HTML5 now? 2022?
- 11. Internet Firefox Chrome Explorer 9 Safari Opera all support HTML5 today Today?
- 12.
- 13.
- 14.
- 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 & PageStructure
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30. <input name="email" type="email"/> <input name="url" type="url" /> Forms
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 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()"> <canvasid="theCanvas" width="800" height="800"> <img src="carrells.gif" /> </canvas> </body> Canvas
- 40.
- 41.
- 42. Canvas - paper.js- available at: http://paperjs.org
- 43.
- 44.
- 45. <video src="movie.mp4" controlswidth="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
- 47.
- 48.
- 49.
- 50. <video controls preloadwidth="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"> <sourcesrc="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.
- 55.
- 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.
- 58. Dive Into HTML5 http://diveintohtml5.org/video.html Video
- 59.
- 60.
- 61.
- 62. <audio controls> <source src="audio.mp3"type= "audio/mpeg"> <source src="audio.ogg" type= "audio/ogg"> </audio> Audio
- 63.
- 64.
- 65.
- 66.
- 67. offline web applications AdvancedFunctionality
- 68.
- 69.
- 70.
- 71.
- 72.
- 73. http://jasoneiseman.com/aall11.zip jasoneiseman@gmail.com Further Reading