Embed Size (px)
Citation preview
HTML5An Introduction
Timmy Kokke | UNIT4 Internet Solutions | Expression Blend MVP / Webguy
Agenda
What is HTML?Past, Present and FutureWhat's New?
Changes to old TagsSemantic elementsNew Tags
More Information
What is HTML?
What is HTML?
HyperText Markup Language
What is HTML?<!--...-->
<!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>
What is HTML?CSS
What is HTML?JavaScript
Past, Present, Future
Past, Present, Future1991 HTML first mentioned – Tim Berners-Lee – HTML Tags1993 HTML1993 HTML 2 draft1995 HTML 2 – W3C1995 HTML 3 draft 1997 HTML 3.2 – “Wilbur”1997 HTML 4 - ”Cougar” - CSS 1999 HTML 4.012000 XHTML draft 2001 XHTML 2008 HTML5 / XHTML5 draft2011 feature complete HTML52022 HTML5
Past, Present, Future
IE FF Saf. Chr. Op.
contenteditable attribute 8.0 3.6 4.0 4.0 10.1Cross-document messaging 8.0 3.6 4.0 4.0 10.1getElementsByClassName 8.0 3.6 4.0 4.0 10.1New, stylable HTML5 elements 8.0 3.6 4.0 4.0 10.1Canvas (basic support) 8.0 3.6 4.0 4.0 10.1Audio element 8.0 3.6 4.0 4.0 10.1Drag and Drop 8.0 3.6 4.0 4.0 10.1Video element 8.0 3.6 4.0 4.0 10.1Offline web applications 8.0 3.6 4.0 4.0 10.1Web Workers 8.0 3.6 4.0 4.0 10.1Text API for Canvas 8.0 3.6 4.0 4.0 10.1HTML5 form features 8.0 3.6 4.0 4.0 10.1
Released Browsers
Past, Present, Future
IE FF Saf. Chr. Op.
contenteditable attribute 9.0 3.7 4.* 5.0 10.5Cross-document messaging 9.0 3.7 4.* 5.0 10.5getElementsByClassName 9.0 3.7 4.* 5.0 10.5New, stylable HTML5 elements 9.0 3.7 4.* 5.0 10.5Canvas (basic support) 9.0 3.7 4.* 5.0 10.5Audio element 9.0 3.7 4.* 5.0 10.5Drag and Drop 9.0 3.7 4.* 5.0 10.5Video element 9.0 3.7 4.* 5.0 10.5Offline web applications 9.0 3.7 4.* 5.0 10.5Web Workers 9.0 3.7 4.* 5.0 10.5Text API for Canvas 9.0 3.7 4.* 5.0 10.5HTML5 form features 9.0 3.7 4.* 5.0 10.5
Beta Browsers
What’s New?
What’s New?
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
What’s New?
HTML5
<!DOCTYPE html>
Changes to old Tags: Doctype
What’s New?
Pre-HTML5
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
Changes to old Tags: html
What’s New?
HTML5
<html lang="en" xml:lang="en">
Changes to old Tags: html
What’s New?
Pre-HTML5
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
Changes to old Tags: meta
What’s New?
HTML5
<meta charset="utf-8">
Changes to old Tags: meta
What’s New?
Pre-HTML5
<link rel="stylesheet" href="style-original.css" type="text/css" />
Changes to old Tags: link
What’s New?
HTML5
<link rel="stylesheet" href="style-original.css" >
Changes to old Tags: link
<header><hgroup>
<nav><article><aside><footer>
What’s New?Semantics
Increases readabilityEasier Styling New Tags:
What’s New?
HTML5 - Semantics
Demo
<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>
What’s New?Semantics
What’s New?Canvas
Dynamic, Scriptable rendering of 2D imagesUses JavaScript to drawResolution-dependent bitmap
What’s New?
HTML5 - Canvas
Demo
What’s New?
<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
What’s New?
Play video in the browserDoesn’t need a pluginAccessible through JavaScript
Video
What’s New?
HTML5 - Video
Demo
What’s New?
<video width="360" height="240" controls= "controls" > <source src="LittleWing.mp4“ type="video/mp4"> </source>
Video tag is not supported</video>
Video
What’s New?Local Storage
Store data on the clientEasy accessDatabase like features Able to track changes
What’s New?
HTML5 – Local Storage
Demo
What’s New?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:
What’s New?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
What’s New?
HTML5 – New input types
Demo
What’s New?New input types
What’s New?Micro Data
Special AttributesTypes of items
Persons, Organizations, Events, etcItemType
http://microformats.org/http://www.data-vocabulary.org/
What’s New?
HTML5 – Micro Data
Demo
What’s New?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 >
What’s New?
Web workers Offline web applicationsCross-document messagingDrag and DropGeolocationServer sent DOM eventsWebsocketsInline SVG
What else?
HTML5 – An Introductionwww.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
