1. An Introduction Timmy Kokke | UNIT4 Internet Solutions | Expression Blend MVP / Webguy

2. What is HTML? Past, Present and Future What's New? Changes to old Tags Semantic elements New Tags More Information

4. HyperText Markup Language

6. CSS

7. JavaScript

9. 1991 HTML first mentioned – Tim Berners-Lee – HTML Tags 1993 HTML 1993 HTML 2 draft 1995 HTML 2 – W3C 1995 HTML 3 draft 1997 HTML 3.2 – “Wilbur” 1997 HTML 4 - ”Cougar” - CSS 1999 HTML 4.01 2000 XHTML draft 2001 XHTML 2008 HTML5 / XHTML5 draft 2011 feature complete HTML5 2022 HTML5

10. IEFFSaf.Chr.Op. contenteditable attribute8.03.64.0 10.1 Cross-document messaging8.03.64.0 10.1 getElementsByClassName8.03.64.0 10.1 New, stylable HTML5 elements8.03.64.0 10.1 Canvas (basic support)8.03.64.0 10.1 Audio element8.03.64.0 10.1 Drag and Drop8.03.64.0 10.1 Video element8.03.64.0 10.1 Offline web applications8.03.64.0 10.1 Web Workers8.03.64.0 10.1 Text API for Canvas8.03.64.0 10.1 HTML5 form features8.03.64.0 10.1 Released Browsers

11. IEFFSaf.Chr.Op. contenteditable attribute9.0 3.74.*5.010.5 Cross-document messaging9.0 3.74.*5.010.5 getElementsByClassName9.0 3.74.*5.010.5 New, stylable HTML5 elements9.0 3.74.*5.010.5 Canvas (basic support)9.0 3.74.*5.010.5 Audio element9.0 3.74.*5.010.5 Drag and Drop9.0 3.74.*5.010.5 Video element9.0 3.74.*5.010.5 Offline web applications9.0 3.74.*5.010.5 Web Workers9.0 3.74.*5.010.5 Text API for Canvas9.0 3.74.*5.010.5 HTML5 form features9.0 3.74.*5.010.5 Beta Browsers

13. Pre-HTML5 Changes to old Tags: Doctype

14. HTML5 Changes to old Tags: Doctype

15. Pre-HTML5 Changes to old Tags: html

16. HTML5 Changes to old Tags: html

17. Pre-HTML5 Changes to old Tags: meta

18. HTML5 Changes to old Tags: meta

19. Pre-HTML5 Changes to old Tags: link

20. HTML5 Changes to old Tags: link

21. Semantics Increases readability Easier Styling New Tags:

22. HTML5 - Semantics

23. Demo page Semantic sample demo page Some nice looking navigation First Paragraph Lorem ipsum …... Some links and useful side notes Timmy Kokke - Copyright © 2010. Semantics

24. Canvas Dynamic, Scriptable rendering of 2D images Uses JavaScript to draw Resolution-dependent bitmap

25. HTML5 - Canvas

26. This text is displayed if your browser does not support HTML5 Canvas. var example = document.getElementById('example'); var context = example.getContext('2d'); context.fillStyle = "rgb(255,0,0)"; context.fillRect(30, 30, 50, 50); Canvas

27. Play video in the browser Doesn’t need a plugin Accessible through JavaScript Video

28. HTML5 - Video

29. Video tag is not supported Video

30. Local Storage Store data on the client Easy access Database like features Able to track changes

31. HTML5 – Local Storage

32. Local Storage openDatabase('documents', '1.0', 'Local document storage', 5*1024*1024, function (db) { db.changeVersion('', '1.0', function (t) { t.executeSql('CREATE TABLE docids (id, name)'); }, error); }); function saveState(text){ localStorage["localStorageDemo"] = text; } function restoreState(){ return localStorage["localStorageDemo"]; } SQL Web: Local Storage:

33. New input types search boxes spinboxes sliders color pickers telephone numbers web addresses email addresses calendar date pickers months weeks timestamps precise, absolute date+time stamps local dates and times

34. HTML5 – New input types

35. New input types

36. Micro Data Special Attributes Types of items Persons, Organizations, Events, etc ItemType http://microformats.org/ http://www.data-vocabulary.org/

37. HTML5 – Micro Data

38. Micro Data Timmy Kokke UNIT4 Internet Solutions Expression Blend MVP / Webguy

39. Web workers Offline web applications Cross-document messaging Drag and Drop Geolocation Server sent DOM events Websockets Inline SVG What else?

40. www.whatwg.org/specs/web-apps/current- work/multipage/index.html www.w3schools.com/html5 http://html5test.com/ Timmy Kokke info@timmykokke.com http://twitter.com/sorskoot http://www.timmykokke.com info@timmykokke.com http://twitter.com/sorskoot http://www.timmykokke.com Silverlight and Expression Usergroup http://www.sixin.nl http://www.sixin.nl