nTier Training’s HTML5 training class, intended for experienced HTML developers with some JavaScript experience, teaches the new features of HTML5 and how to put them to immediate use.

Course Duration: 2 days
Prerequisites:

All attendees must be fluent in HTML 4 and have practical experience with the basics of CSS and JavaScript. Prior knowledge of JSON, DOM, and Ajax is helpful but not required.

Course Objectives:
  • Build HTML5 pages
  • Understand the major benefits of HTML5
  • Understand the difference between HTML5 and HTML 4
  • Use the new elements and attributes of HTML5
  • Work with audio and video in HTML5
  • Work with new Canvas element to create code-based drawings in HTML5
  • Use web storage for offline applications
  • Use all of the new HTML5 form elements
  • Understand the current state of browser support for HTML5 and how to make your HTML5 sites degrade gracefully
Course Outline:
  •  Introduction

 

  • Laying Out a Page with HTML5
    • Page Structure
    • New HTML5 Structural Tags
    • Page Simplification

 

  • HTML5 – How We Got Here
    • The Problems HTML 4 Addresses
    • The Problems XHTML Addresses
    • The Flexible Approach of HTML5 – Paving the Cowpaths
    • New Features of HTML5
    • The HTML5 Spec(s)
    • Current State of Browser Support

 

  • Sections and Articles
    • The Section Tag
    • The Article Tag
    • Outlining
    • Accessibility

 

  • HTML5 Audio and Video
    • Supported Media Types
    • The Audio Element
      • Audio Format
      • Multiple Sources
      • Audio Tag Attributes
      • Getting and Creating Audio Files
    • The Video Element
      • Video Tag Attributes
      • Creating and Converting Video Files
    • Accessibility
    • Scripting Media Elements
    • Dealing with Non-Supporting Browsers

 

  • HTML5 Forms
    • Modernizr
    • New Input Types
      • Search
      • Tel
      • URL and Email
      • Date/Time Input Types
      • Number
      • Range
      • Min, Max and Step Attributes
      • Color

 

  • HTML5 New Form Attributes
    • Autocomplete
    • Novalidate

 

  • HTML5 New Form Field Attributes
    • Required
    • Placeholder
    • Autofocus
    • Autocomplete
    • Form
    • Pattern

 

  • New Form Elements
    • Datalist
    • Progress and Meter

 

  • HTML5 Web Storage
    • Overview of HTML5 Web Storage
    • Web Storage
      • Browser Support
      • Local Storage
      • Session Storage
      • Prefixing Your Keys
    • Other Storage Methods
      • Web Database Storage
      • Indexed Database API

 

  • HTML5 Canvas
    • Getting Started with Canvas
    • Drawing Lines
      • Multiple Sub-Paths
      • The Path Drawing Process
      • The fill() Method
    • Color and Transparency
    • Rectangles
    • Circles and Arcs
    • Quadratic and Bezier Curves
    • Images
      • drawImage() – Basic
      • drawImage() – Sprites
    • Text

 

  • Integrated APIs
    • Offline Application API
      • Cache Manifest File
      • The HTML File
      • Managing ApplicationCache with JavaScript
      • A Sample Application
    • Drag and Drop API

 

  • Conclusion