HTML5 Training

Course Duration:

2 Days

What Students Receive:

Each student will receive:

• A printed courseware manual for use during and after class.
• A USB headset for communicating with your instructor and fellow students during your HTML5 Training Class
• A course completion certificate upon successful completion of your HTML5 Training course
• Six months of post-class email support from an HTML5 Instructor

Course Description:

This course is intended for students who have basic knowledge of HTML 4, CSS, and Java Script. Students will build on this knowledge by immersing themselves immediately in HTML5 coding. Course participants will learn about new HTML5 tags, new methods for storing data on the client-side, how to use the Canvas to create drawings directrly in a browser, how to utilize audio and video within HTML5 and how to create applications that operate offline. In addition, students will learn about current browser support for the enhancements in HTML5.

Course Objectives:

Upon successful completion of this course, students will be able to:

• Build simple to moderately complex HTML5 pages
• Describe the benefits of HTML5
• Describe the differences between HTML5 and HTML 4
• Understand the new HTML5 tags and attributes
• Utilize audio and video in HTML5
• Use the HMTL5 Canvas element to create drawings
• Create applications that can operate offline
• Use new HTML5 form attributes
• Understand current browser support for HTML5

Course Audience:

The target students for this course are individuals tasked with building and maintaining sophisticated websites that utilize current web technologies.

Course Prerequisites:

Students should have basic knowledge of HTML 4, CSS and Javascript prior to enrolling in this course.

Course Syllabus:

1. Laying out a Page with HTML5
• Page Structure
• Laying out a Page with HTML 4 – the “old” way
• Laying out a Page with HTML5
• New HTML5 Structural Tags
• Page Simplification
2. HTML5 – How We Got Here
• The Problems HTML 4 Addresses
• The Problems XHTML Addresses
• The New More Flexible Approach of HTML5
• New Features 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 HTML 4 Way
• The HTML5 Way
• Display of HTML5 Structural 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
• Video Tag Attributes
• Creating and Converting Video Files
• Accessibility
• Scripting Media Elements
• Dealing with Non-Supporting Browsers
• Graceful Degradation
5. HTML5 Forms
• Modernizr
• New Input Types
• search
• tel
• url and email
• date/time input types
• number
• range
• min, max, and step attributes
• color
• 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
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
• drawImage() – Basic
• drawImage() – Sprites
• Text
• Text Properties
8. Integrated APIs
• Offline Application API
• Cache Manifest File
• The HTML File
• Managing ApplicationCache with JavaScript
• A Sample Application
• Drag and Drop API