An Introduction
Timmy Kokke | UNIT4 Internet Solutions | Expression Blend MVP / Webguy
What is HTML?
Past, Present and Future
What's New?
Changes to old Tags
Semantic elements
New Tags
More Information
HyperText Markup Language
<!--...-->
<!doctype>
<a>
<abbr>
<acronym>
<address>
<applet>
<area>
<b>
<base>
<basefont>
<bdo>
<big>
<blockquote>
<body>...
CSS
JavaScript
1991 HTML first mentioned – Tim Berners-Lee – HTML Tags
1993 HTML
1993 HTML 2 draft
1995 HTML 2 – W3C
1995 HTML 3 draft
19...
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
getElemen...
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
getElemen...
Pre-HTML5
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1
-strict.dtd">
C...
HTML5
<!DOCTYPE html>
Changes to old Tags: Doctype
Pre-HTML5
<html xmlns="http://www.w3.org/1999/xhtml"
lang="en" xml:lang="en">
Changes to old Tags: html
HTML5
<html lang="en" xml:lang="en">
Changes to old Tags: html
Pre-HTML5
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8">
Changes to old Tags: meta
HTML5
<meta charset="utf-8">
Changes to old Tags: meta
Pre-HTML5
<link rel="stylesheet" href="style-
original.css" type="text/css" />
Changes to old Tags: link
HTML5
<link rel="stylesheet" href="style-
original.css" >
Changes to old Tags: link
<header>
<hgroup>
<nav>
<article>
<aside>
<footer>
Semantics
Increases readability
Easier Styling
New Tags:
HTML5 - Semantics
<body>
<header>
<hgroup>
<h1>Demo page</h1>
<h2>Semantic sample demo page</h2>
</hgroup>
</header>
<nav>
<ul>
Some nice lo...
Canvas
Dynamic, Scriptable rendering of 2D images
Uses JavaScript to draw
Resolution-dependent bitmap
HTML5 - Canvas
<canvas id="example" width="200" height="200">
This text is displayed if your browser does not support HTML5
Canvas.
</can...
Play video in the browser
Doesn’t need a plugin
Accessible through JavaScript
Video
HTML5 - Video
<video width="360" height="240" controls= "controls" >
<source src="LittleWing.mp4“ type="video/mp4">
</source>
Video tag ...
Local Storage
Store data on the client
Easy access
Database like features
Able to track changes
HTML5 – Local Storage
Local Storage
openDatabase('documents', '1.0', 'Local document storage', 5*1024*1024, function (db) {
db.changeVersion('',...
New input types
<input type="search"> search boxes
<input type="number"> spinboxes
<input type="range"> sliders
<input typ...
HTML5 – New input types
New input types
Micro Data
Special Attributes
Types of items
Persons, Organizations, Events, etc
ItemType
http://microformats.org/
http://...
HTML5 – Micro Data
Micro Data
<section itemscope itemtype="http://data-vocabulary.org/Person">
<span itemprop="name">Timmy Kokke</span><br>
<...
Web workers
Offline web applications
Cross-document messaging
Drag and Drop
Geolocation
Server sent DOM events
Websockets
...
www.whatwg.org/specs/web-apps/current-
work/multipage/index.html
www.w3schools.com/html5
http://html5test.com/
Timmy Kokke...
HTML5 - An Introduction
HTML5 - An Introduction
HTML5 - An Introduction
Upcoming SlideShare
Loading in...5
×

HTML5 - An Introduction

2,658

Published on

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,658
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
127
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide
  • 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

  • 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.
  • NonogramDemo.html
  • 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.
  • Database:
    Web SQL – Opera, Safari, Chrome
    Indexed Database API – FireFox
    IE onbekend.
  • Demo in Opera, Opera Mob and Firefox
  • metadata aan de inhoud van bestaande webpagina's toe voegen
    Microformats voegen semantiek toe aan de bestaande elementen en geeft deze een betekenis
  • http://www.google.com/webmasters/tools/richsnippets?url=http%3A%2F%2Fwww.timmykokke.com%2Fwp-content%2Fuploads%2F2010%2F11%2FMicrodata.html&view=
  • HTML5 - An Introduction

    1. 1. An Introduction Timmy Kokke | UNIT4 Internet Solutions | Expression Blend MVP / Webguy
    2. 2. What is HTML? Past, Present and Future What's New? Changes to old Tags Semantic elements New Tags More Information
    3. 3. HyperText Markup Language
    4. 4. <!--...--> <!doctype> <a> <abbr> <acronym> <address> <applet> <area> <b> <base> <basefont> <bdo> <big> <blockquote> <body> <br> <button> <caption> <center> <cite> <code> <col> <colgroup> <dd> <del> <dfn> <dir> <div> <dl> <dt> <em> <fieldset> <font> <form> <frame> <frameset> <h1> <h2> <h3> <h4> <h5> <h6> <head> <hr> <html> <i> <iframe> <img> <input> <ins> <isindex> <kbd> <label> <legend> <li> <link> <map> <menu> <meta> <noframes> <noscript> <object> <ol> <optgroup> <option> <p> <param> <pre> <q> <s> <samp> <script> <select> <small> <span> <strike> <strong> <style> <sub> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <title> <tr> <tt> <u> <ul> <var>
    5. 5. CSS
    6. 6. JavaScript
    7. 7. 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
    8. 8. 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
    9. 9. 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
    10. 10. 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
    11. 11. HTML5 <!DOCTYPE html> Changes to old Tags: Doctype
    12. 12. Pre-HTML5 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> Changes to old Tags: html
    13. 13. HTML5 <html lang="en" xml:lang="en"> Changes to old Tags: html
    14. 14. Pre-HTML5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> Changes to old Tags: meta
    15. 15. HTML5 <meta charset="utf-8"> Changes to old Tags: meta
    16. 16. Pre-HTML5 <link rel="stylesheet" href="style- original.css" type="text/css" /> Changes to old Tags: link
    17. 17. HTML5 <link rel="stylesheet" href="style- original.css" > Changes to old Tags: link
    18. 18. <header> <hgroup> <nav> <article> <aside> <footer> Semantics Increases readability Easier Styling New Tags:
    19. 19. HTML5 - Semantics
    20. 20. <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
    21. 21. Canvas Dynamic, Scriptable rendering of 2D images Uses JavaScript to draw Resolution-dependent bitmap
    22. 22. HTML5 - Canvas
    23. 23. <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
    24. 24. Play video in the browser Doesn’t need a plugin Accessible through JavaScript Video
    25. 25. HTML5 - Video
    26. 26. <video width="360" height="240" controls= "controls" > <source src="LittleWing.mp4“ type="video/mp4"> </source> Video tag is not supported </video> Video
    27. 27. Local Storage Store data on the client Easy access Database like features Able to track changes
    28. 28. HTML5 – Local Storage
    29. 29. 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:
    30. 30. 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
    31. 31. HTML5 – New input types
    32. 32. New input types
    33. 33. Micro Data Special Attributes Types of items Persons, Organizations, Events, etc ItemType http://microformats.org/ http://www.data-vocabulary.org/
    34. 34. HTML5 – Micro Data
    35. 35. 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 >
    36. 36. Web workers Offline web applications Cross-document messaging Drag and Drop Geolocation Server sent DOM events Websockets Inline SVG What else?
    37. 37. 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 Silverlight and Expression Usergroup http://www.sixin.nl
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×