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

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 1997 HTML 3.2 – “Wilbur” 1997 HTML 4 - ”Cougar” - CSS 1999 HTML XHTML draft 2001 XHTML 2008 HTML5 / XHTML5 draft 2011 feature complete HTML HTML5

IEFFSaf.Chr.Op. contenteditable attribute Cross-document messaging getElementsByClassName New, stylable HTML5 elements Canvas (basic support) Audio element Drag and Drop Video element Offline web applications Web Workers Text API for Canvas HTML5 form features Released Browsers

IEFFSaf.Chr.Op. contenteditable attribute * Cross-document messaging * getElementsByClassName * New, stylable HTML5 elements * Canvas (basic support) * Audio element * Drag and Drop * Video element * Offline web applications * Web Workers * Text API for Canvas * HTML5 form features * Beta Browsers

Pre-HTML5 Changes to old Tags: Doctype

HTML5 Changes to old Tags: Doctype

Pre-HTML5 Changes to old Tags: html

HTML5 Changes to old Tags: html

Pre-HTML5 Changes to old Tags: meta

HTML5 Changes to old Tags: meta

Pre-HTML5 Changes to old Tags: link

HTML5 Changes to old Tags: link

Semantics Increases readability Easier Styling New Tags:

HTML5 - Semantics

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

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

HTML5 - Canvas

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

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

HTML5 - Video

Video tag is not supported Video

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('', '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:

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

HTML5 – New input types

New input types

Micro Data Special Attributes Types of items Persons, Organizations, Events, etc ItemType

HTML5 – Micro Data

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

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

work/multipage/index.html Timmy Kokke Silverlight and Expression Usergroup