HTML5 - An Introduction
Download as pptx, pdf3 likes1,233 views
This document provides an overview of HTML including its history, new features in HTML5, and how it has evolved over time. It discusses changes to old tags like the doctype and meta tags. It introduces new semantic elements in HTML5 like header, nav, article, and footer. It also covers new features such as canvas for drawing, video elements, local storage, new input types, microdata, and web workers. In the end it provides additional resources for learning more about HTML5.
![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:](https://image.slidesharecdn.com/html5-introduction-101201031231-phpapp02/85/HTML5-An-Introduction-32-320.jpg)
![HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://cdn.slidesharecdn.com/ss_thumbnails/html5smartmarkupforsmarterwebsites-futureofwebappslasvegas2011-110628193453-phpapp01-thumbnail.jpg?width=560&fit=bounds)
More Related Content
What's hot (20)
Viewers also liked (10)
Similar to HTML5 - An Introduction (20)
More from Timmy Kokke (20)
Recently uploaded (20)
HTML5 - An Introduction
- 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
- 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. IE FF Saf. Chr. Op. contenteditable attribute 8.0 3.6 4.0 4.0 10.1 Cross-document messaging 8.0 3.6 4.0 4.0 10.1 getElementsByClassName 8.0 3.6 4.0 4.0 10.1 New, stylable HTML5 elements 8.0 3.6 4.0 4.0 10.1 Canvas (basic support) 8.0 3.6 4.0 4.0 10.1 Audio element 8.0 3.6 4.0 4.0 10.1 Drag and Drop 8.0 3.6 4.0 4.0 10.1 Video element 8.0 3.6 4.0 4.0 10.1 Offline web applications 8.0 3.6 4.0 4.0 10.1 Web Workers 8.0 3.6 4.0 4.0 10.1 Text API for Canvas 8.0 3.6 4.0 4.0 10.1 HTML5 form features 8.0 3.6 4.0 4.0 10.1 Released Browsers
- 11. IE FF Saf. Chr. Op. contenteditable attribute 9.0 3.7 4.* 5.0 10.5 Cross-document messaging 9.0 3.7 4.* 5.0 10.5 getElementsByClassName 9.0 3.7 4.* 5.0 10.5 New, stylable HTML5 elements 9.0 3.7 4.* 5.0 10.5 Canvas (basic support) 9.0 3.7 4.* 5.0 10.5 Audio element 9.0 3.7 4.* 5.0 10.5 Drag and Drop 9.0 3.7 4.* 5.0 10.5 Video element 9.0 3.7 4.* 5.0 10.5 Offline web applications 9.0 3.7 4.* 5.0 10.5 Web Workers 9.0 3.7 4.* 5.0 10.5 Text API for Canvas 9.0 3.7 4.* 5.0 10.5 HTML5 form features 9.0 3.7 4.* 5.0 10.5 Beta Browsers
- 13. Pre-HTML5 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1 -strict.dtd"> Changes to old Tags: Doctype
- 14. HTML5 <!DOCTYPE html> Changes to old Tags: Doctype
- 15. Pre-HTML5 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> Changes to old Tags: html
- 16. HTML5 <html lang="en" xml:lang="en"> Changes to old Tags: html
- 17. Pre-HTML5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> Changes to old Tags: meta
- 18. HTML5 <meta charset="utf-8"> Changes to old Tags: meta
- 19. Pre-HTML5 <link rel="stylesheet" href="style- original.css" type="text/css" /> Changes to old Tags: link
- 20. HTML5 <link rel="stylesheet" href="style- original.css" > Changes to old Tags: link
- 23. <body> <header> <hgroup> <h1>Demo page</h1> <h2>Semantic sample demo page</h2> </hgroup> </header> <nav> <ul> Some nice looking navigation </ul> </nav> <section> <article> <header> <h1>First Paragraph</h1> </header> <section> Lorem ipsum … </section> </article> ... <aside> Some links and useful side notes </aside> <footer> Timmy Kokke - Copyright © 2010. </footer> </body> Semantics
- 24. Canvas Dynamic, Scriptable rendering of 2D images Uses JavaScript to draw Resolution-dependent bitmap
- 25. HTML5 - Canvas
- 26. <canvas id="example" width="200" height="200"> This text is displayed if your browser does not support HTML5 Canvas. </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 width="360" height="240" controls= "controls" > <source src="LittleWing.mp4“ type="video/mp4"> </source> Video tag is not supported </video> 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 <input type="search"> search boxes <input type="number"> spinboxes <input type="range"> sliders <input type="color"> color pickers <input type="tel"> telephone numbers <input type="url"> web addresses <input type="email"> email addresses <input type="date"> calendar date pickers <input type="month"> months <input type="week"> weeks <input type="time"> timestamps <input type="datetime"> precise, absolute date+time stamps <input type="datetime-local"> 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 <section itemscope itemtype="http://data-vocabulary.org/Person"> <span itemprop="name">Timmy Kokke</span><br> <span itemprop="org">UNIT4 Internet Solutions</span><br> <span itemprop="title">Expression Blend MVP / Webguy</span><br> </section >
- 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 [email protected] http://twitter.com/sorskoot http://www.timmykokke.com Silverlight and Expression Usergroup http://www.sixin.nl
Editor's Notes
- #10: Tim Berners-Lee – CERN – 1991 – “HTML Tags” – Opmaak taal voor wetenschappelijke documenten – 1993 Mosaik -> 1994 NetScape 1995 – HTML 2.0 eerste door W3C gepubliceerde versie HTML 3.2 – “Wilbur” HTML4 – “Cougar” – CSS support (JavaScript kwam in NetScape 2 onder de naam Mocha en later LiveScript) Web Hypertext Application Technology Working Group – WHATWG – Apple Mozilla en Opera zijn bezorgt over W3C => mission to meet the needs of both users and developers
- #25: Canvas was initially introduced by Apple for use inside their own Mac OS X WebKit component, powering applications like Dashboard widgets and the Safari browser. Later, it was adopted by Gecko browsers and Opera[1] and standardized by the WHATWG on new proposed specifications for next generation web technologies.
- #27: NonogramDemo.html
- #28: Elke browser ondersteund “eigen” video formaat (H.264, Ogg, VP8) Maar, het feit dat sites als Youtube, DailyMotion en Vimeo HTML5 Video gaan ondersteunen getuigd van het feit dat de addoptie toeneemt.
- #31: Database: Web SQL – Opera, Safari, Chrome Indexed Database API – FireFox IE onbekend.
- #35: Demo in Opera, Opera Mob and Firefox
- #37: metadata aan de inhoud van bestaande webpagina's toe voegen Microformats voegen semantiek toe aan de bestaande elementen en geeft deze een betekenis
- #38: http://www.google.com/webmasters/tools/richsnippets?url=https%3A%2F%2Fptop.only.wip.la%3A443%2Fhttp%2Fwww.timmykokke.com%2Fwp-content%2Fuploads%2F2010%2F11%2FMicrodata.html&view=