This is the outline for a new night course I will be teach at SAIT, starting September 29. I've touched on some of the topics featured in the outline in this blog; others are completely new, and are yet to be addressed in any articles. Prerequisites for the course will be XHTML (CMPN 215, "Web Page Design and Management") and CSS (CMPN 266). Pre-requisite waivers will be provided for applicants with an appropriate background.

Course Outline: Transitioning to HTML5

1. Introduction to HTML5

   Introduction

   HTML5 is the successor to XHTML, and introduces dozens of new tags. It also changes many of the rules that you have used until now. Comprehending why HTML5 has been introduced, how it came to be, and what it replaces allows us to understand the appropriate uses of HTML5.

   Learning Outcome:

   Create a basic valid HTML5 document.

   Objectives

   1. Discuss the history of HTML development to HTML5
   2. Elucidate the goals of HTML5
   3. Summarize the differences between XHTML and HTML5
   4. Discuss HTML5’s new semantic container elements
   5. Convert a simple XHTML document to HTML5
   6. Write an HTML5 page from scratch that includes semantic containers

2. HTML5 Rich Media

   Introduction

   Some of the most revolutionary advances of HTML5 are the <audio> , <video> and , <canvas> tags, which allow for in-browser support of rich media without the need for plugins.

   Learning Outcome:

   Embed rich media on an HTML5 page for multiple browsers.

   Objectives

   1. Define a codec and the current state of play for support of codecs by different browsers.
   2. Discover free programs for encoding audio and video for HTML5.
   3. Embed video and audio in a web page for different browsers.
   4. Discuss fallback options for older browsers.
   5. Create simple playback controls for audio and video with JavaScript.
   6. Use the <canvas> element on a web page.

3. HTML5 Forms

   Introduction

   HTML5 introduces a dozen new input types to forms, making far richer web forms possible and potentially eliminating a great deal of JavaScript.

   Learning Outcome

   Create a valid HTML5 form.

   Objectives

   1. Use HTML5 inputs in a form
   2. Use the placeholder and autofocus attributes
   3. Explore in-browser validation
   4. Use JavaScript fallbacks for older browsers that do not support HTML5 forms.

4. CSS and JavaScript for HTML5

   Introduction

   While most older browsers can display HTML5 elements, they do not always know how to do so. We can use CSS and/or JavaScript to help older browsers understand and display HTML5 tags.

   Learning Outcome

   Write a stylesheet for an HTML5 page.

   Objectives

   1. Write a stylesheet to support the display of HTML5 elements.
   2. Use a JavaScript “shim” to support HTML5 in Internet Explorer
   3. Write CSS to customize the appearance of HTML5 tags in browsers.

5. HTML5 Microdata and Microformats

   Introduction

   Traditional metatags have largely been replaced in HTML5 by microdata and microformats, which allow far more specific and richer semantic markup of web pages.

   Learning Outcome

   Write microdata and microformats on a web page.

   Objectives

   1. Compare and contrast microdata, microformats, RDFa and metatags
   2. Add microdata to appropriate content (a meeting schedule) on a web page.
   3. Add microformats to appropriate content (recipes, resumes) on a web page.