Introduction to HTML5

Target Student: This course is intended for students who have experience with HTML 4, basic CSS, and basic Java Script.

Delivery Method: Students will start by getting their hands dirty and jumping right into HTML5 code. They will learn about the new HTML5 structural, semantic, and form tags, how to use Canvas to create drawings natively in the browser, how to work with HTML5 audio and video, the new methods for storing variables client-side, and how to build applications that work offline. Along the way, they will learn about the current state of browser support for HTML5 and the theory behind all the changes that have been made.

Course Objectives: Upon successful completion of this course, students will be able to:

* Start building HTML5 pages.
* Understand the major benefits of HTML5.
* Understand the difference between HTML5 and HTML 4.
* Be familiar with HTML5′s new elements and attributes.
* Work with audio and video in HTML5.
* Work with HTML5′s new Canvas element to create code-based drawings.
* Use Web Storage for offline applications.
* Use all the cool new HTML5 form elements.
* Understand the current state of browser support for HTML5 and how to make HTML5 sites degrade gracefully.

Course Content

Lesson 1: Laying out a Page with HTML5
Topic 1A: Page Structure
Topic 1B: New HTML5 Structural Tags
Topic 1C: Page Simplification

Lesson 2: HTML5 – How We Got Here
Topic 2A: The Problems HTML 4 Addresses
Topic 2B: The Problems XHTML Addresses
Topic 2C: The New More Flexible Approach of HTML5
Topic 2D: New Features of HTML5
Topic 2E: The HTML5 Spec(s)
Topic 2F: Current State of Browser Support

Lesson 3: Sections and Articles
Topic 3A: The section Tag
Topic 3B: The article Tag
Topic 3C: Outlining
Topic 3D: Accessibility

Lesson 4: HTML5 Audio and Video
Topic 4A: Supported Media Types
Topic 4B: The audio Element
Topic 4C: The video Element
Topic 4D: Accessibility
Topic 4E: Scripting Media Elements
Topic 4F: Dealing with Non-Supporting Browsers

Lesson 5: HTML5 Forms
Topic 5A: Modernizr
Topic 5B: New Input Types
Topic 5C: HTML5 New Form Attributes
Topic 5D: Some Other New Form Field Attributes
Topic 5E: New Form Elements

Lesson 6: Overview of HTML5 Web Storage
Topic 6A: Overview of HTML5 Web Storage
Topic 6B: Web Storage
Topic 6C: Other Storage Methods

Lesson 7: HTML5 Canvas
Topic 7A: Getting Started with Canvas
Topic 7B: Drawing Lines
Topic 7C: Color and Transparency
Topic 7D: Rectangles
Topic 7E: Circles and Arcs
Topic 7F: Quadratic  Curves
Topic 7G: Images
Topic 7H: Text

Lesson 8: Integrated APIs
Topic 8A: Offline Application API
Topic 8B: Drag and Drop API

Prerequisites:

Experience in the following areas is required:
· HTML 4
· Basic CSS
· Basic JavaScript

Experience in the following areas would be beneficial:
· JSON
· DOM
· Ajax