View Cart

HTML5 Introduction – 2 Days – $675

  • September 26, 2017 - September 27, 2017
    10:00 am - 4:30 pm
  • October 16, 2017 - October 17, 2017
    10:00 am - 4:30 pm

Note: 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.

In this 2-day course, students start by getting their hands dirty and jumping right into HTML5 code. They’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. Students will also learn about the current state of browser support for HTML5 and the theory behind all the changes that have been made.

Audience: Experienced web developers who will be designing, creating and deploying HTML5 web applications.

Prerequisites: Students should have experience in HTML, basic CSS and basic JavaScript.

Course 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.
  • Learn to work with audio and video in HTML5.
  • Learn to work with HTML5’s new Canvas element to create code-based drawings.
  • Learn to use Web Storage for offline applications.
  • Learn to 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.

Course Length: 2 Days

 

  1. Laying out a Page with HTML5

Page Structure

Laying out a Page with HTML4 – the ‘old’ way

Laying out a Page with HTML5

Page Simplification

  1. HTML5 – How We Got Here

The Problems HTML 4 Addresses

The Problems XHTML Addresses

The New More Flexible Approach of HTML5

HTML5 and JavaScript

Additional Changes

Modernizr

The HTML5 Spec(s)

Current State of Browser Support

  1. Sections and Articles

The section Tag

The HTML4 Way

The HTML5 Way

Display of HTML5 Structual Elements

The article Tag

Outlining

  1. HTML5 Audio and Video

Supported Media Types

The audio Element

Audio Formats

Multiple Sources

audio Tag Attributes

Getting and Creating Audio Files

The Video Element

Accessibility

Scripting Media Elements

Dealing with non-supporting Browsers

Graceful Degradation

  1. HTML5 Forms

Modernizr

New Input Types

HTML5 New Form Attributes

autocomplete

novalidate

Some Other New Form Field Attributes

Required

Placeholder

Autofocus

Autocomplete

Form

Pattern

New Form Elements

Datalist

Progress and Meter

  1. 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

  1. HTML5 Canvas

Getting Started with Canvas

Context

Drawing Lines

Multiple Sub-Paths

The Path Drawing Process

The fill() Method

Color and Transparency

Rectangles

Circles and Arcs

Radians

Quadratic and Bézier Curves

Images – Basic / Sprites

Text

  1. Integrated APIs

Offline Application API

Cache Manifest File

The HTML File

Managing Application Cache with JavaScript

Drag and Drop API