An Introduction to HTML5

Ordered List Brandon Keepers Grand Rapids Web Development Group January
31, 2011 HTML5 An Introduction to Monday, January 31, 2011

HTML5 Hyper Trendy Marketing Lingo v5 @kplawver Monday, January 31,
2011

Monday, January 31, 2011

1. Overview 2. History 3. Features Monday, January 31, 2011

1. Overview Monday, January 31, 2011

What is HTML5? good question. Monday, January 31, 2011

http://whatwg.org/html Monday, January 31, 2011

http://www.w3.org/TR/html5/ Monday, January 31, 2011

…it’s complicated Monday, January 31, 2011

HTML5 is… DOM API Structural elements Multimedia elements Canvas Microdata

HTML5 is “not”… Web Workers Web Storage WebSocket API WebSocket
protocol Geolocation API Monday, January 31, 2011

2. History Monday, January 31, 2011

HTML 4.0 published December 1997 Monday, January 31, 2011

…working group shut down Monday, January 31, 2011

XML 1.0 February 1998 Monday, January 31, 2011

XHTML draft December 1998 Monday, January 31, 2011

application/xhtml+xml Monday, January 31, 2011

Appendix C Monday, January 31, 2011

XHTML 1.1 May 2001 Monday, January 31, 2011

Appendix C Monday, January 31, 2011

Workshop on Web Applications and Compound Documents June 2004 Monday,
January 31, 2011

…evolve HTML 4 Monday, January 31, 2011

voted 11:4 against Monday, January 31, 2011

WHATWG June 2004 Monday, January 31, 2011

Web Applications 1.0 Monday, January 31, 2011

W3C works with WHATWG October 2006 Monday, January 31, 2011

Web Applications 1.0 becomes HTML5 Monday, January 31, 2011

3. Features Monday, January 31, 2011

doctype the “standards mode” trigger Monday, January 31, 2011

<!DOCTYPE html
PUBLIC "-‐//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-‐strict.dtd"> Monday, January 31, 2011

<!DOCTYPE html> Monday, January 31, 2011

the root element <html> Monday, January 31, 2011

<html xmlns="http://www.w3.org/1999/xhtml" lang="en"
xml:lang="en"> Monday, January 31, 2011

<html lang="en"> Monday, January 31, 2011

Character Encoding Monday, January 31, 2011

Content-‐Type: text/html; charset="utf-‐8" Monday, January 31, 2011

Structural Elements <section> <nav> <article> <aside> <hgroup> <header> <footer> Monday,
January 31, 2011

Inline Elements <time> <mark> <meter> <progress> Monday, January 31, 2011

Multimedia <video> <audio> Monday, January 31, 2011

<video src="movie.mp4" width="320" height="240"
autoplay></video> Monday, January 31, 2011

<video width="320" height="240" controls> <source src="pr6.mp4" type='video/mp4; codecs="mp4a.40.2"'>
<source src="pr6.webm" type='video/webm; codecs="vp8, vorbis"'> <source src="pr6.ogv" type='video/ogg; codecs="theora, vorbis"'> </video> Monday, January 31, 2011

canvas resolution-dependent bitmap canvas Monday, January 31, 2011

<canvas id="a"></canvas> canvas#a {height:200px; width:200px;} Monday, January 31, 2011

var a = document.getElementById("a"); var context = a.getContext("2d"); context.fillRect(0, 0,
150, 150); Monday, January 31, 2011

2D Context Rectangles c.fillRect(x, y, w, h); c.strokeRect(x, y, w,
h); Transformations c.scale(x, y); c.rotate(angle); c.translate(x, y); c.transform(a, b, c, d, e, f); c.setTransform(a, b, c, d, e, f); Colors and Styles c.strokeStyle = color; c.fillStyle = color; Text c.fillText(text, x, y, maxWidth); Paths c.moveTo(x, y); c.lineTo(x, y); c.arcTo(x1, y1, x2, y2, radius); c.rect(x, y, w, h); c.fill(); c.stroke(); State c.save(); c.restore(); Monday, January 31, 2011

…and so much more! Monday, January 31, 2011

Ordered List Thank you! [email protected] @bkeepers Brandon Keepers Grand Rapids
Web Development Group January 31, 2011 Monday, January 31, 2011

An Introduction to HTML5

An Introduction to HTML5

More Decks by Brandon Keepers

Other Decks in Programming

Featured

Transcript