Web Programming Step by Step

Lecture 26
The Future: HTML 5, CSS 3, ECMAScript 5

References: html5rocks.com, alistapart.com, w3schools, Dive Into HTML 5, W3C Draft HTML 5 Spec, Chrome Experiments

Except where otherwise noted, the contents of this presentation are Copyright 2010 Marty Stepp and Jessica Miller.

Valid XHTML 1.1 Valid CSS!

What is HTML 5?

What's new in HTML 5?

What's new, continued

The old way

bad tags

HTML 5 semantically meaningful tags

good tags

HTML 4 / XHTML embedding a video

<object classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" id="player" width="340" height="280">
  <param name="url" value="http://www.domain.com/path/to/winmovie.wmv" />
  <param name="src" value="http://www.domain.com/path/to/winmovie.wmv" />
  <param name="showcontrols" value="true" />
  <param name="autostart" value="true" />
  <!--[if !IE]>-->
  <object type="video/x-ms-wmv" data="http://www.domain.com/path/to/winmovie.wmv" width="340" height="280">
    <param name="src" value="http://www.domain.com/path/to/winmovie.wmv" />
    <param name="controller" value="true" />
    <param name="autostart" value="true" />
  </object>
  <!--<![endif]-->
</object>

HTML 5 embedding a video

<video src="video.ogv" width="425" height="350"></video>

CSS 3 new features

JavaScript DOM new features

JavaScript (ECMAScript) 5 features (1, 2)

Browser support (1, 2, 3, 4)