Comprehensive HTML 5

In this HTML5 training class, you'll start by getting your hands dirty and jumping right into HTML5 code. You'll 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 you build applications that work offline. Along the way, you'll learn about the current state of browser support for HTML5 and the theory behind all the changes that have been made.

Learning Objectives

• Learn how to start building HTML5 pages today
• Learn the major benefits of HTML5
• Understand the difference between HTML5 and HTML 4
• Become 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
• Learn the current state of browser support for HTML5 and how to make your HTML5 sites degrade gracefully

Prerequisites: If you are new to HTML, you should take our Introduction to HTML class first. Everything covered in that course is relevant to HTML5 and is prerequisite knowledge for this class.

Experience in the following areas is required: HTML 4, Basic CSS, Basic JavaScript. Experience in the following areas would be beneficial: JSON, DOM, Ajax

Course Outline

1. Laying out a Page with HTML5
   1. Page Structure

                                                              i.      Laying out a Page with HTML 4 - the "old" way

                                                            ii.      Laying out a Page with HTML5

2. New HTML5 Structural Tags
3. Page Simplification

2. HTML5 - How We Got Here
   1. The Problems HTML 4 Addresses
   2. The Problems XHTML Addresses
   3. The New More Flexible Approach of HTML5 - Paving the Cowpaths
   4. New Features of HTML5

                                                              i.      HTML5 and JavaScript

                                                            ii.      Additional Changes

                                                          iii.      Modernizr

5. The HTML5 Spec(s)
6. Current State of Browser Support

3. Sections and Articles
   1. The section Tag

                                                              i.      The HTML 4 Way

                                                            ii.      The HTML5 Way

                                                          iii.      Display of HTML5 Structural Elements

2. The article Tag
3. Outlining

                                                              i.      Sectioning

4. Accessibility

4. HTML5 Audio and Video
   1. Supported Media Types
   2. The audio Element

                                                              i.      Audio Formats

                                                            ii.      Multiple Sources

                                                          iii.      Audio Tag Attributes

                                                          iv.      Getting and Creating Audio Files

3. The video Element

                                                              i.      Video Tag Attributes

                                                            ii.      Creating and Converting Video Files

4. Accessibility
5. Scripting Media Elements
6. Dealing with Non-Supporting Browsers

                                                              i.      Graceful Degradation

5. HTML5 Forms
   1. Modernizr
   2. New Input Types

                                                              i.      search

                                                            ii.      tel

                                                          iii.      url and email

                                                          iv.      date/time input types

                                                            v.      number

                                                          vi.      range

                                                        vii.      min, max, and step attributes

                                                      viii.      color

3. HTML5 New Form Attributes

                                                              i.      autocomplete

                                                            ii.      novalidate

4. Some Other New Form Field Attributes

                                                              i.      required

                                                            ii.      placeholder

                                                          iii.      autofocus

                                                          iv.      autocomplete

                                                            v.      form

                                                          vi.      pattern

5. New Form Elements

                                                              i.      datalist

                                                            ii.      progress and meter

6. HTML5 Web Storage
   1. Overview of HTML5 Web Storage
   2. Web Storage

                                                              i.      Browser Support

                                                            ii.      Local Storage

                                                          iii.      Session Storage

                                                          iv.      Prefixing your Keys

3. Other Storage Methods

                                                              i.      Web Database Storage

                                                            ii.      Indexed Database API

7. HTML5 Canvas
   1. Getting Started with Canvas

                                                              i.      Context

2. Drawing Lines

                                                              i.      Multiple Sub-Paths

                                                            ii.      The Path Drawing Process

                                                          iii.      The fill() Method

3. Color and Transparency
4. Rectangles
5. Circles and Arcs

                                                              i.      Radians

6. Quadratic and Bézier Curves

                                                              i.      Practice

7. Images

                                                              i.      drawImage() - Basic

                                                            ii.      drawImage() - Sprites

8. Text

                                                              i.      Text Properties

8. Integrated APIs
   1. Offline Application API

                                                              i.      Cache Manifest File

                                                            ii.      The HTML File

                                                          iii.      Managing ApplicationCache with JavaScript

                                                          iv.      A Sample Application

2. Drag and Drop API