![WHA WHA WHAT? ,[object Object]](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)
Recommended
More Related Content
What's hot
What's hot (12)
Viewers also liked
Similar to Intro to HTML 5
Similar to Intro to HTML 5 (20)
Recently uploaded
Recently uploaded (20)
Intro to HTML 5
- 1. GETTING GANGSTA WITH Jeremy Woertink
- 3. W3C Working Draft 22 January 2008
- 4. Editors: Ian Hickson, Google, Inc. and David Hyatt, Apple, Inc.
- 10. makes shit shorter<html xmlns="http://www.w3.org/1999/xhtml"lang="en"xml:lang="en"> <html lang="en"> <meta http-equiv="Content-Type"content="text/html; charset=utf-8"> <meta charset="utf-8"> <link rel="stylesheet"href="application.css"type="text/css"> <link rel="stylesheet"href="application.css">
- 11. "heavy emphasis on blogs"?
- 12. <sectionid="archive"> <article class="article"> <header> <h1>HTML 5 stuffs</h1> </header> <div class="content"> Here we can talk about our <mark>HTML 5</mark> stuff! </div> <footer> <p>Posted <time pubdate=""datetime="2011-4-6T19:30">Wednesday</time>.</p> </footer> </article> </section>
- 13. Is that it?
- 14. NOPE!
- 16. header
- 17. footer
- 18. nav
- 19. article
- 20. hgroup
- 21. aside
- 22. time
- 23. mark
- 24. audio
- 25. video
- 26. canvas
- 27. command
- 28. datalist
- 29. details
- 30. figure
- 31. figcaption
- 32. keygen
- 33. meter
- 34. output
- 35. progress
- 36. rp
- 37. rt
- 38. ruby
- 39. source
- 40. summary
- 42. draggable
- 43. irrelevant
- 44. ref
- 45. template
- 46. data-
- 47. list
- 48. max
- 49. min
- 50. multiple
- 51. pattern
- 52. placeholder
- 53. step
- 54. contenteditable
- 55. autocomplete
- 56. autofocus
- 57. form
- 58. formaction
- 59. formmethod
- 60. formonvalidate
- 61. formtarget
- 63. tel
- 64. time
- 65. url
- 66. week
- 67. color
- 68. date
- 69. datetime
- 70. datetime-local
- 71. email
- 72. file
- 73. month
- 74. number
- 75. range
- 83. navigator.onLine
- 84. Worker()
- 85. WebSocket()
- 86. drag & drop
- 87. File upload
- 88. in-line editing
- 91. <audiosrc="audio/sample.mp3"controls="false"> <p>If you see this, then audio isn't supported.</p> </audio> <script async="false"> varaudio= document.querySelector('audio'); audio.play(); // plays the audio audio.pause(); // pauses the audio audio.volume=100; // increase to 100% volume audio.duration; // length of audio in seconds audio.currentTime=10; // start playing at 10 seconds varaudio2=newAudio(); // make a new audio object audio2.src='audio/sample2.mp3'; </script>
- 92. <VIDEO>
- 93. <videocontrols="false"> <source src="video/sample.mp4"type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> <source src="video/sample.webm"type='video/webm; codecs="vp8, vorbis"'> <p>If you see this, then video isn't supported.</p> </video> <script async="false"> varvideo= document.querySelector('video'); video.play(); // plays the video video.pause(); // pauses the video video.volume=100; // increase to 100% volume video.autoplay =false; // no autoplay video.currentTime=10; // start playing at 10 seconds // new Video() doesn't exist :( </script>
- 94. <CANVAS>
- 95. <canvaswidth="400" height="400"> <p>If you see this, then canvas isn't supported.</p> </canvas> <script async="false"> varcanvas= document.querySelector('canvas'), brush=canvas.getContext('2d'), xPos=10, yPos=10, ruby=newImage(); ruby.src='images/ruby.png'; ruby.onload=function() { brush.drawImage(ruby, xPos, yPos); } var x1 = 0, y1 = 0, x2 = 0, y2 = 400; brush.fillStyle('#ff0000'); brush.fillRect(x1, y1, x2, y2); brush.save(); </script>
- 96. Want to use HAML?
- 97. !!! 5 %html{:lang => 'en'} %head %title HTML 5 using HAML %body %section#container %video{:controls => true,:width=> 450,:height=> 200} %source{:src => media_path('sample.mp4')} %source{:src => media_path('sample.webm')} #song %audio{:autoplay=>false, :src=> media_path('sample.mp3')}
- 98. WebSocket()
- 100. Used for server-client communication
- 102. NodeJS