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
- 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
- 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
- Sections and Articles
The section Tag
The HTML4 Way
The HTML5 Way
Display of HTML5 Structual Elements
The article Tag
Outlining
- 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
- 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
- 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
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
- Integrated APIs
Offline Application API
Cache Manifest File
The HTML File
Managing Application Cache with JavaScript
Drag and Drop API
Venue: Virtual Live Instructor Led