Downloaded 98 times
Uploaded byJason Hando
HTML5 and CSS3 for Teachers
CSS3 and HTML5 are known as the "new kids on the web block". HTML5 Core refers to the markup language specification, while the HTML5 Family includes additional emerging technologies like CSS3, Web Workers, Web Storage, and Geolocation that enhance the user experience. Key features of HTML5 include more readable markup, audio and video elements without plugins, 2D drawing with canvas, and semantic structural elements. CSS3 introduces properties for visual effects like text shadows, transitions, and 3D transforms to create richer interactive designs on the web.
More Related Content
Similar to HTML5 and CSS3 for Teachers
HTML5 and CSS3 for Teachers
- 1. CSS3 & HTML5 The New Kids on the Web Block Jason Hando jason@utopiainternet.com
- 2. HTML5 Core vsFamily
- 3. HTML5 Core vsFamily ✦ HTML5 Core is the markup language spec
- 4. HTML5 Core vsFamily ✦ HTML5 Core is the markup language spec ✦ HTML5 Family are collection of next gen tech:
- 5. HTML5 Core vsFamily ✦ HTML5 Core is the markup language spec ✦ HTML5 Family are collection of next gen tech: ✦ HTML5, CSS3, Web Workers, Web Storage, Web SQL Databases, Web Sockets, Geolocation, Microdata, Device API and File API, SVG (?).
- 6.
- 7. HTML5 Family ✦ HTML5: next generation markup language
- 8. HTML5 Family ✦ HTML5: next generation markup language ✦ CSS3: next generation styling spec
- 9. HTML5 Family ✦ HTML5: next generation markup language ✦ CSS3: next generation styling spec ✦ Web Storage: local and session (offline)
- 10. HTML5 Family ✦ HTML5: next generation markup language ✦ CSS3: next generation styling spec ✦ Web Storage: local and session (offline) ✦ Web Workers: browser tasks (stability)
- 11. HTML5 Family ✦ HTML5: next generation markup language ✦ CSS3: next generation styling spec ✦ Web Storage: local and session (offline) ✦ Web Workers: browser tasks (stability) ✦ Web Sockets: asynchronous networking (replaces AJAX)
- 12. HTML5 Family ✦ HTML5: next generation markup language ✦ CSS3: next generation styling spec ✦ Web Storage: local and session (offline) ✦ Web Workers: browser tasks (stability) ✦ Web Sockets: asynchronous networking (replaces AJAX) ✦ Geolocation: scripts can query location
- 13. HTML5 Family ✦ HTML5: next generation markup language ✦ CSS3: next generation styling spec ✦ Web Storage: local and session (offline) ✦ Web Workers: browser tasks (stability) ✦ Web Sockets: asynchronous networking (replaces AJAX) ✦ Geolocation: scripts can query location ✦ File APIs: upload multiple files inside browser
- 14. HTML5 Family ✦ HTML5: next generation markup language ✦ CSS3: next generation styling spec ✦ Web Storage: local and session (offline) ✦ Web Workers: browser tasks (stability) ✦ Web Sockets: asynchronous networking (replaces AJAX) ✦ Geolocation: scripts can query location ✦ File APIs: upload multiple files inside browser ✦ Device APIs: access to cameras, bluetooth etc
- 16.
- 17. HTML5 Core ✦ HTML to XML (XHTML) to HTML
- 18. HTML5 Core ✦ HTML to XML (XHTML) to HTML ✦ 2004 Paper to W3C: rejected
- 19. HTML5 Core ✦ HTML to XML (XHTML) to HTML ✦ 2004 Paper to W3C: rejected ✦ WHATWG = Mozilla, Opera and Apple (Safari)
- 20. HTML5 Core ✦ HTML to XML (XHTML) to HTML ✦ 2004 Paper to W3C: rejected ✦ WHATWG = Mozilla, Opera and Apple (Safari) ✦ 2006... “Can we use your Spec for HTML5, pretty please?” - W3C
- 21. HTML5 Core ✦ HTML to XML (XHTML) to HTML ✦ 2004 Paper to W3C: rejected ✦ WHATWG = Mozilla, Opera and Apple (Safari) ✦ 2006... “Can we use your Spec for HTML5, pretty please?” - W3C ✦ Working draft not W3C recommendation
- 22.
- 23.
- 24. HTML5 Core ✦ More human readable markup
- 25. HTML5 Core ✦ More human readable markup ✦ Audio and video tags (plugin free)
- 26. HTML5 Core ✦ More human readable markup ✦ Audio and video tags (plugin free) ✦ 2D Bitmap drawing format (canvas)
- 27. HTML5 Core ✦ More human readable markup ✦ Audio and video tags (plugin free) ✦ 2D Bitmap drawing format (canvas) ✦ Remove presentational elements (center, font)
- 28. HTML5 Core ✦ More human readable markup ✦ Audio and video tags (plugin free) ✦ 2D Bitmap drawing format (canvas) ✦ Remove presentational elements (center, font) ✦ Disallows direct table layout & removes frames
- 29.
- 30. Semantic Structure <body> <sectionid="wrapper"> <header> <h1>ContentEditable</h1> </header> <article> <section> <p> A grey outline on hover.</p> </section> </article> </body>
- 31. Semantic Structure <body> <sectionid="wrapper"> <header> <h1>ContentEditable</h1> </header> <article> <section> <p> A grey outline on hover.</p> </section> </article> </body>
- 32. Semantic Structure <body> <sectionid="wrapper"> <header> <h1>ContentEditable</h1> </header> <article> <section> <p> A grey outline on hover.</p> </section> </article> </body>
- 33. Semantic Structure <body> <sectionid="wrapper"> <header> <h1>ContentEditable</h1> </header> <article> <section> <p> A grey outline on hover.</p> </section> </article> </body>
- 34. Semantic Structure <body> <sectionid="wrapper"> <header> <h1>ContentEditable</h1> </header> <article> <section> <p> A grey outline on hover.</p> </section> </article> </body>
- 35.
- 36.
- 37. Audio Tag ✦ src — a valid URL specifying the content source.
- 38. Audio Tag ✦ src — a valid URL specifying the content source. ✦ autoplay — a boolean specifying whether the file should play as soon as it can.
- 39. Audio Tag ✦ src — a valid URL specifying the content source. ✦ autoplay — a boolean specifying whether the file should play as soon as it can. ✦ loop — a boolean specifying whether the file should be repeatedly played.
- 40. Audio Tag ✦ src — a valid URL specifying the content source. ✦ autoplay — a boolean specifying whether the file should play as soon as it can. ✦ loop — a boolean specifying whether the file should be repeatedly played. ✦ controls — a boolean specifying whether the browser should display its default media controls.
- 41. Audio Tag ✦ src — a valid URL specifying the content source. ✦ autoplay — a boolean specifying whether the file should play as soon as it can. ✦ loop — a boolean specifying whether the file should be repeatedly played. ✦ controls — a boolean specifying whether the browser should display its default media controls. ✦ preload — none / metadata / auto — where 'metadata' means preload just the metadata and 'auto' leaves the browser to decide whether to preload the whole file.
- 42. Audio Tag ✦ Replace .ogg with .mp3 for Safari ✦ Until standard provide Flash alternative
- 43. Canvas Element ✦ Replacement for plugin-dependent 2D drawing and animation features in browsers ✦ Draw graphs ✦ Create animations ✦ Create games
- 46. CSS3 ✦ Time, time, time ✦ Fonts, fonts, fonts ✦ Reducing images, improving accessibility
- 47. Text Shadow h2 {text-shadow:x-offset y-offset blur-radius #000;} h2 {text-shadow: 1px 1px 5px #000;}
- 48. Text Shadow h2 {text-shadow:x-offset y-offset blur-radius #000;} h2 {text-shadow: 1px 1px 5px #000;}
- 50. Examples of other CSS3 Usage
- 51. This example iscreates a graph using nothing but CSS3
- 52. This example isuses CSS3 to create an interactive cube with Popouts
- 53. This example usesa simple CSS3 text shadow for 3D effect (wear glasses)
- 54. 3D Effect span { text-shadow: -0.06em 0 red, 0.06em 0 cyan; letter-spacing: 0.08em; }
- 55. Web Typography ✦ @font-face ✦ Text-Shadow ✦ MultiColumn Text
- 57. This example isusing the Action Man @font-face kit from Font Squirrel
- 58.
- 59.
- 60. THANK YOU Jason Hando jason@utopiainternet.com
Editor's Notes
- #3 WHATWG = Web Hypertext Application Technology Working Group
- #4 WHATWG = Web Hypertext Application Technology Working Group
- #5 WHATWG = Web Hypertext Application Technology Working Group
- #15 WHATWG = Web Hypertext Application Technology Working Group
- #16 WHATWG = Web Hypertext Application Technology Working Group
- #17 WHATWG = Web Hypertext Application Technology Working Group
- #18 WHATWG = Web Hypertext Application Technology Working Group
- #19 WHATWG = Web Hypertext Application Technology Working Group