Customized Onsite Training

4
Days
  • Customized Content
  • For Groups of 5+
  • Online or On-location
  • Expert Instructors
Request Class or call 1-877-932-8228

Live Online Training

  • Live Online Training
  • Expert Instructors
  • Guaranteed to Run
  • 100% Free Re-take Option

For Online Training, See:

Overview

In this comprehensive HTML5 class, you will learn to learn to use HTML5 to develop modern websites.

Goals
  1. Learn how to start building HTML5 pages today.
  2. Learn the major benefits of HTML5.
  3. Understand the difference between HTML5 and HTML 4.
  4. Become familiar with HTML5's new elements and attributes.
  5. Learn to work with audio and video in HTML5.
  6. Learn to work with HTML5's new Canvas element to create code-based drawings.
  7. Learn to use Web Storage for offline applications.
  8. Learn to use all the cool new HTML5 form elements.
  9. Learn the current state of browser support for HTML5 and how to make your HTML5 sites degrade gracefully.
  10. Use the Battery Status API to report if a device is charging.
  11. Use the Battery Status API to report how much time it will take to fully charge a device.
  12. Use the Battery Status API to report how much life is left on a battery that is not charging.
  13. Describe the Vibration API.
  14. Use the Vibration API to make a device vibrate for a given number of seconds.
  15. Use the Vibration API to make a device vibration pattern.
  16. Describe the Notifications API.
  17. Use the Notifications API to create a visible notification outside the browser.
  18. Use the Notifications API to make multiple notifications that appear together.
  19. Group notification by type so that notifications of the same type override one another.
  20. Describe the DeviceOrientation Event API.
  21. Understand the difference between device orientation and device motion.
  22. Use the DeviceOrientation Event API to access both the orientation and the motion of a device.
  23. Describe the contentEditable HTML attribute.
  24. Create HTML elements that can be edited in a web browser by the end user.
  25. Allow the user to edit entire HTML documents.
  26. Describe the Fullscreen API.
  27. Understand and use the SpeechUtterance object.
  28. Understand and use the SpeechRecognition object.
Outline
  1. Laying out a Page with HTML5
    1. Page Structure
      1. Laying out a Page with HTML 4 - the "old" way
      2. 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
      1. HTML5 and JavaScript
      2. Additional Changes
      3. Modernizr
    5. The HTML5 Spec(s)
    6. Current State of Browser Support
  3. Sections and Articles
    1. The section Tag
      1. The HTML 4 Way
      2. The HTML5 Way
      3. Display of HTML5 Structural Elements
    2. The article Tag
    3. Outlining
      1. Sectioning
    4. Accessibility
  4. HTML5 Audio and Video
    1. Supported Media Types
    2. The audio Element
      1. Audio Formats
      2. Multiple Sources
      3. Audio Tag Attributes
      4. Getting and Creating Audio Files
    3. The video Element
      1. Video Tag Attributes
      2. Creating and Converting Video Files
    4. Accessibility
    5. Scripting Media Elements
    6. Dealing with Non-Supporting Browsers
      1. Graceful Degradation
  5. HTML5 Forms
    1. Modernizr
    2. New Input Types
      1. search
      2. tel
      3. url and email
      4. date/time input types
      5. number
      6. range
      7. min, max, and step attributes
      8. color
    3. HTML5 New Form Attributes
      1. autocomplete
      2. novalidate
    4. Some Other New Form Field Attributes
      1. required
      2. placeholder
      3. autofocus
      4. autocomplete
      5. form
      6. pattern
    5. New Form Elements
      1. datalist
      2. progress and meter
  6. HTML5 Web Storage
    1. Overview of HTML5 Web Storage
    2. Web Storage
      1. Browser Support
      2. Local Storage
      3. Session Storage
      4. Prefixing your Keys
    3. Other Storage Methods
      1. Web Database Storage
      2. Indexed Database API
  7. HTML5 Canvas
    1. Getting Started with Canvas
      1. Context
    2. Drawing Lines
      1. Multiple Sub-Paths
      2. The Path Drawing Process
      3. The fill() Method
    3. Color and Transparency
    4. Rectangles
    5. Circles and Arcs
      1. Radians
    6. Quadratic and Bezier Curves
      1. Practice
    7. Images
      1. drawImage() - Basic
      2. drawImage() - Sprites
    8. Text
      1. Text Properties
  8. Integrated APIs
    1. Offline Application API
      1. Cache Manifest File
      2. The HTML File
      3. Managing ApplicationCache with JavaScript
      4. A Sample Application
    2. Drag and Drop API
  9. BatteryStatus API
    1. Objectives
    2. Introduction
      1. Why use the BatteryStatus API?
      2. How does the BatteryStatus API work?
    3. The BatteryStatus API
      1. BatteryStatus API methods
      2. BatteryManager properties
      3. BatteryManager events
    4. Browser support
    5. Resources
    6. Exercise 1.1: Testing for Battery Status API support
      1. Objectives
      2. Code explanation
      3. Exercise summary
    7. Exercise 1.2: Obtaining battery status
    8. Objectives
      1. battery-API/battery-api.htm
      2. Scalable Vector Graphics markup language
      3. Cascading Style Sheet language and CSS shapes
      4. Exercise Finished file
      5. Exercise Summary
    9. Chapter summary
  10. Vibration API
    1. Objectives
    2. Introduction
      1. Why use the Vibration API?
      2. How does the Vibration API work?
      3. Vibration methods
    3. Resources
    4. Exercise 2.1: Test for Vibration API support and vibrate the device
      1. Objectives
      2. Exercise finished file
      3. Exercise summary
    5. Exercise 2.2: Vibrate the device with a pattern
      1. Objectives
      2. Exercise finished file
      3. Exercise summary
    6. Chapter summary
  11. Notifications API
    1. Objectives
    2. Introduction
    3. Why use the Notifications API?
    4. How does the Notifications API work?
    5. Notifications API
      1. Notification object attributes
      2. Notification events
      3. Notification API methods
    6. Resources
    7. Demo 3.1: Notification permissions
      1. notification-permissions.html
      2. Code explanation
    8. Demo 3.2: Notification events
    9. notification-API/notification-events.html
      1. Code explanation
      2. Exercise 3.1: Create a notification and set notification options
      3. Objectives
      4. Exercise summary
    10. Chapter summary
  12. DeviceOrientation Event API
    1. Objectives
    2. Introduction
    3. Why use the DeviceOrientation API?
    4. DeviceOrientation Event API
      1. DeviceOrientation events
      2. How does the DeviceOrientation Event API work?
      3. DeviceOrientation
      4. DeviceMotion
      5. DeviceOrientation Event API
    5. Exercise 4.1: Understanding device orientation
      1. Objectives
      2. Exercise summary
      3. deviceMotion
    6. Exercise 4.2: Understanding device motion
    7. Objectives
      1. Acceleration and accelerationIncludingGravity
      2. RotationRate
      3. Exercise summary
    8. Chapter summary
  13. ContentEditable API
    1. Objectives
    2. Introduction
    3. ContentEditable API
    4. Resources
    5. Exercise 5.1: Using the ContentEditable API
      1. Objectives
      2. Exercise summary
    6. Making entire documents editable
      1. designMode
      2. designMode (as getter)
    7. Resources
    8. Exercise 5.2: Making an entire document editable
      1. Objectives
      2. Exercise summary
    9. Chapter summary
  14. Fullscreen API
    1. Objectives
    2. Introduction
    3. Why use the Fullscreen API?
    4. The Fullscreen API
      1. Fullscreen API methods
      2. Fullscreen API properties
      3. Fullscreen API events
    5. Notes on the fullscreen view
    6. Exercise 6.1: Using the Fullscreen API
      1. Objectives
      2. Exercise summary
    7. Chapter summary
  15. Speech APIs
    1. Introduction
    2. Speech Recognition and Speech Synthesis
    3. Speech Synthesis
      1. Speech Utterance object
      2. SpeechUtterance object properties
      3. SpeechUtterance object events
      4. Exercise 7.1: Using Speech Synthesis
      5. Exercise Summary
    4. Speech Recognition
      1. Exercise 7.2: Using Speech Recognition
      2. Exercise summary
    5. Chapter summary
  16. HTML5 Media elements and API
    1. Objectives
    2. Introduction
    3. Audio and Video
      1. The media elements
      2. What are the new elements used for?
      3. Browser support for the new media elements
      4. <audio> element attributes
      5. <video> element attributes
      6. Browser support <video>
      7. Browser support Ogg/Theora video format*
      8. Browser support WebM/VP8 video format*
      9. Browser support MPEG-4/H.264video format*
      10. Browser support audio codec
      11. When do I use these new elements?
    4. Exercise 8.1 Detecting browser support for video
      1. Objectives
      2. Exercise outcome
      3. Exercise summary
    5. Exercise 8.2 Detecting browser support for audio
      1. Objectives
      2. Exercise outcome
      3. Exercise summary
    6. Exercise 8.3 Using Modernizr to detect video
      1. Objectives
      2. Exercise outcome
      3. Exercise summary
    7. Exercise 8.4: Playing audio with the <audio> element
      1. Objectives
      2. Audio/Video support quick summary*
      3. Exercise outcome
      4. Exercise summary
    8. Exercise 8.5: Playing video with the <video> element
      1. Objectives
      2. Exercise summary
    9. Demo 8.1?Using the <video> element with a fallback
      1. Demo outcome
      2. Demo summary
    10. Video and Audio APIs
      1. Video/audio methods
      2. Video/audio object properties
      3. Video/audio object events
    11. Exercise 8.6?Using the <video> element's attributes
      1. Objectives
      2. Exercise outcome
    12. Exercise 8.7: Controlling video
      1. Objectives
      2. Exercise outcome
    13. Exercise 8.8: Using multiple audio formats
      1. Objectives
      2. Exercise outcome
    14. Demo 8.2: Video tracks
      1. Demo outcome
      2. Demo summary
    15. Chapter summary
  17. Forms/Constraint Validation API
    1. Objectives
    2. New form input types
    3. What are the new input types?
      1. New attributes for input elements
      2. New form elements
    4. When do I use the new elements?
    5. Exercise 9.1:?Using the new input attributes
      1. Objectives
      2. Exercise summary
    6. Exercise 9.2: Using the new form attributes
      1. Objectives
      2. The placeholder attribute
      3. The autocomplete attribute
      4. The autofocus attribute
      5. The list attribute and the datalist element
      6. The spellcheck attribute
      7. Exercise summary
    7. HTML5 form validation
    8. Preventing default validation from occurring
    9. Constraint Validation API
      1. Form properties
      2. Form control methods
      3. Form controls validity and validityState
    10. Exercise 9.3: Form validation
      1. Objectives
      2. Exercise outcome
      3. Exercise summary
    11. Resources
    12. Chapter summary
  18. WebStorage API
    1. Objectives
    2. Introduction
    3. Browser support for WebStorage API
    4. WebStorage API
      1. The Storage Object
    5. When not to use the WebStorage API
    6. Cookies vs. session storage vs. local storage
    7. Exercise 10.1?Detecting browser support for the WebStorage API
      1. Objectives
      2. Exercise outcome
      3. Exercise summary
    8. Exercise 10.2 Storing and retrieving data
      1. Objectives
      2. Exercise outcome
      3. Exercise summary
      4. Accessing storage with JavaScript expandos and arrays
      5. Exercise summary
    9. Exercise 10.3 Using sessionStorage
      1. Objectives
      2. Exercise outcome
      3. Exercise summary
    10. Exercise 10.4 Responding to the storage event
      1. Objectives
      2. Exercise outcome
      3. Exercise summary
    11. Challenge Exercise 10.5: Storage Event
      1. Objectives
      2. Exercise summary
    12. Chapter summary
  19. Web Messaging API
    1. Objectives
    2. Introduction
    3. Web messaging's postMessage() method
      1. Establishing trust between domains
      2. The origin
    4. What is cross-origin resource sharing?
    5. CORS support and the server
    6. Ports and channel messaging
      1. MessagePort methods
      2. The Message event object properties
    7. Exercise 11.1?Browser support
      1. Objectives
      2. Exercise outcome
    8. Exercise 11.2:?Send cross-document messages
      1. Objectives
      2. Exercise outcome
      3. Additional security checks
      4. Exercise summary
    9. Chapter summary
  20. Dataset API
    1. Introduction
    2. data-* syntax rules
    3. The dataset API
    4. Exercise 12.1: Setting dataset attributes
    5. Exercise 12.2: Getting dataset attributes
    6. Exercise summary
    7. Resources
    8. Chapter summary
  21. Drag and Drop API
    1. Objectives
    2. Introduction
    3. What is drag and drop?
      1. What is drag and drop used for?
      2. Browser support for drag and drop
      3. Understanding drag and drop
      4. The draggable attribute
      5. Drag and drop with a data "payload"
    4. Exercise 13.1: Checking drag and drop support
      1. Objectives
      2. Exercise outcome
      3. Exercise summary
    5. Drag events
      1. Drag events
    6. Exercise 13.2: Respond to drag events
      1. Objectives
      2. Exercise summary
    7. Drop events
    8. Drop events
    9. Exercise 13.3: Respond to drop events
      1. Objectives
      2. Exercise summary
    10. Demo 13.1: Drag and drop with jQuery
    11. Chapter summary
  22. Offline Applications API
    1. Objectives
    2. Introduction
    3. What is an offline application?
      1. Why do we need offline applications
    4. Browser support for offline applications
    5. Understanding the browser cache
    6. Emptying the browser cache
    7. Exercise 14.1:?Understanding browser cache
      1. Objectives
    8. Understanding applicationCache
    9. Exercise 14.2:?Checking browser support
      1. Objectives
      2. Exercise summary
    10. The navigator.online property
    11. Exercise 14.3:?Determining offline status
      1. Objectives
      2. Exercise outcome
      3. Exercise summary
    12. Understanding the cache manifest file
      1. What is the cache manifest file and when is it used?
    13. Exercise 14.4:?The cache manifest file
      1. Objectives
      2. Associating the cache manifest with a web page.
      3. Exercise summary
    14. Understanding cache events
    15. Exercise 14.5: Understanding cache events
      1. Objectives
      2. Exercise summary
    16. Chapter summary
  23. XMLHttpRequest Level 2 API
    1. Objectives
    2. The XMLHTTPRequest object
    3. XHR API
      1. What is XHR used for?
      2. Benefits of XHR level 2
      3. The XHR object: readyState property
    4. The XHR object
      1. The XHR object: Events
      2. The XHR Object: Methods
      3. The XHR object: Properties
    5. Exercise 15.1: Checking for browser support
      1. Objectives
      2. Exercise outcome
      3. Exercise summary
    6. Exercise 15.2: Understanding the progress event
      1. Objectives
      2. Exercise outcome
      3. Exercise summary
    7. Exercise 15.3: Understanding the onload event
      1. Objectives
      2. Exercise outcome
      3. Exercise summary
    8. Exercise 15.4: Displaying XML returned from XHR request
      1. Objectives
      2. The finished file
      3. Exercise outcome
      4. Exercise summary
    9. Chapter summary
  24. Web Sockets API
    1. Objectives
    2. Introduction
    3. HTTP
      1. WebSocket properties
      2. WebSocket event handlers
      3. WebSocket methods
    4. Using a WebSocket server with the WebSocket API
    5. Exercise 16.1?WebSocket browser support
      1. Objectives
      2. Exercise outcome
      3. Exercise summary
    6. Exercise 16.2?Using the WebSocket handshake
      1. Objectives
      2. Exercise summary
    7. Exercise 16.2 Using the WebSocket specification
      1. Objectives
      2. Exercise summary
    8. Chapter summary
  25. Server-sent Events API
    1. [h1]Objectives
    2. Introduction
    3. The server messages
    4. Creating an EventSource
      1. The EventSource properties
      2. The EventSource events
      3. The advantages of server-sent events
      4. The disadvantages of server-sent events
      5. Server-sent events summary
    5. Exercise 17.1 Using server sent events
      1. Objectives
      2. Exercise summary
    6. Chapter summary
  26. Canvas API
    1. Introduction
    2. What are the new elements?
    3. Why use the Canvas API?
    4. Canvas quick summary
    5. Uses for the new Canvas API
    6. Exercise 18.1: Detecting browser support for canvas
    7. Exercise 18.2: Using the canvas element
    8. Exercise 18.3: Resizing the canvas
    9. Exercise 18.4: Drawing rectangles on the canvas
    10. Exercise 18.5: Drawing arcs on the canvas
    11. Exercise 18.6: Drawing quadratic curves on the canvas
    12. Exercise 18.7: Drawing Bezier curves on the canvas
    13. Exercise 18.8: Creating a linear gradient
    14. Exercise 18.9: Creating a pattern on the canvas
    15. Canvas Demos
    16. Challenge exercise
    17. Chapter summary
  27. Geolocation API
    1. Introduction
    2. What is the Geolocation API used for?
    3. Browser support for Geolocation
    4. The Geolocation API
      1. Geolocation object methods
      2. Position object properties
      3. Position interface attributes
    5. Exercise: 19.1: Checking for geolocation support
    6. Exercise 19.2: Finding the user's location
    7. Optional Exercise: Unobtrusive JavaScript and jQuery
    8. Exercise 19.3: Display location with Google Maps
    9. Exercise 19.4: Obtaining position information
    10. Chapter summary
  28. Web Workers API
    1. Introduction
    2. Features available to Web Workers
    3. Why use Web Workers?
    4. When should Web Workers be used?
    5. How do Web Workers work?
    6. The Web Worker API
      1. The abstractWorkerk interface properties
      2. The WorkerGlobalScope object
      3. The WorkerGlobalScope object properties
      4. The WorkerGlobalScope object mthods
      5. The WorkerGlobalScope events
    7. Browser support for Web Workers
    8. Types of Web Workers
      1. Dedicated Worker
      2. Shared Worker
    9. Exercise 20.1: Checking for web worker support
    10. Exercise 20.2: Creating a Web Worker
    11. Exercise 20.3: The Web Worker JavaScript
    12. Exercise 20.4: Terminating a Web Worker
    13. Exercise 20.4-a: Web Worker error event
    14. Creating Shared Workers
    15. Exercise 20.5: Creating a shared Web Worker
    16. Chapter summary
Class Materials

Each student in our Live Online and our Onsite classes receives a comprehensive set of materials, including course notes and all the class examples.

Class Prerequisites

Experience in the following is required for this HTML class:

  • HTML 4
  • Basic CSS
  • Basic JavaScript

Experience in the following would be useful for this HTML class:

  • JSON
  • DOM
  • Ajax
Preparing for Class

No cancelation for low enrollment

Certified Microsoft Partner

Registered Education Provider (R.E.P.)

GSA schedule pricing

72,346

Students who have taken Live Online Training

15,155

Organization who trust Webucator for their training needs

100%

Satisfaction guarantee and retake option

8.52

Students rated our Comprehensive HTML5 Training trainers 8.52 out of 10 based on 3 reviews

Contact Us or call 1-877-932-8228