Skip Navigation Links

Course Length:
2 Days
Course Description:
Students will learn about HTML5 and how to incorporate its features in web pages and applications. They will learn the basics as well as advanced topics like layouts, forms, offline support, geolocation, audio and video, graphics, communication APIs, storage, and new JavaScript web-workers.
Who Should Attend:
This course is intended for experienced HTML developers with some JavaScript experience.
Benefits of Attendance:
Upon completion of this course, students will be able to:
  • 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
Prerequisites:
Students must be experienced with HTML and have experience with CSS and JavaScript. Prior knowledge of JSON, DOM, and Ajax is helpful, but not required.
Course Outline:
  • Introduction
  • Laying out a Page with HTML5
    1. Page Structure
    2. New HTML5 Structural Tags
    3. Page Simplification
  • 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
    5. The HTML5 Spec(s)
    6. Current State of Browser Support
  • Sections and Articles
    1. The section Tag
    2. The article Tag
    3. Outlining
    4. Accessibility
  • HTML5 Audio and Video
    1. Supported Media Types
    2. The audio Element
    3. The video Element
    4. Accessibility
    5. Scripting Media Elements
    6. Dealing with Non-Supporting Browsers
  • HTML5 Forms
    1. Modernizr
    2. New Input Types
  • HTML5 New Form Attributes
    1. autocomplete
    2. novalidate
  • HTML5 New Form Field Attributes
    1. required
    2. placeholder
    3. autofocus
    4. autocomplete
    5. form
    6. pattern
  • New Form Elements
    1. datalist
    2. progress and meter
  • HTML5 Web Storage
    1. Overview of HTML5 Web Storage
    2. Web Storage
    3. Other Storage Methods
  • HTML5 Canvas
    1. Getting Started with Canvas
    2. Drawing Lines
    3. Color and Transparency
    4. Rectangles
    5. Circles and Arcs
    6. Quadratic and Bezier Curves
    7. Images
    8. Text
  • Integrated APIs
    1. Offline Application API
    2. Drag and Drop API