Overview
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 HTML4, basic CCS and basic JavaScript
Course duration
2 Days
Course outline
1. Laying out a Page with HTML5
- Page Structure
- Laying out a Page with HTML4 - the ‘old’ way
- Laying out a Page with HTML5
- New HTML Structural Tags
- Page Simplification
2. HTML5 - How We Got Here
- The Problems HTML4 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
3. Sections and Articles
- The section Tag
- The HTML4 Way
- The HTML5 Way
- Display of HTML5 Structual Elements
- The article Tag
- Outlining
- Sectioning
- Accessibility
4. 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
5. HTML5 Forms
- Modernizr
- New Input Types
- HTML5 New Form Attributes
- autocomplete
- novalidate
- Some Other New Form Field Attributes
- Required
- Placeholder
- Autocomplete
- Form
- Pattern
- New Form Elements
6. 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
7. 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
8. Integrated APIs
- Offline Application API
- Cache Manifest File
- The HTML File
- Managing Application Cache with JavaScript
- Drag and Drop API
