Corporate Training By Zack Academy - Introduction to HTML5

Why Should You Take This Introduction to HTML5 Course?

This Introduction to HTML5 course will start with students getting their hands dirty and jumping right into HTML5 code. They will 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 to build applications that work offline. Along the way, they will learn about the current state of browser support for HTML5 and the theory behind all the changes that have been made.

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

• Start building HTML5 pages.
• Understand the major benefits of HTML5.
• Understand the difference between HTML5 and HTML 4.
• Be familiar with HTML5's new elements and attributes.
• Work with audio and video in HTML5.
• Work with HTML5's new Canvas element to create code-based drawings.
• Use Web Storage for offline applications.
• Use all the cool new HTML5 form elements.
• Understand the current state of browser support for HTML5 and how to make HTML5 sites degrade gracefully.

The Following Topics Will Be Covered:

1. Laying out a Page with HTML5: 

• Page Structure
• 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
• The HTML5 Spec(s)
• Current State of Browser Support 

3. Sections and Articles:

• The section Tag
• The article Tag
• Outlining
• Accessibility

4. HTML5 Audio and Video: 

• Supported Media Types
• The audio element
• The video element
• Accessibility
• Scripting Media Elements
• Dealing with Non-Supporting Browsers

5. HTML5 Forms:

• Modernizr
• New Input Types
• HTML5 New Form Attributes
• Some Other New Form Field Attributes
• New Form Elements

6. Overview of HTML5 Web Storage:

• Overview of HTML5 Web Storage
• Web Storage
• Other Storage Methods

7. HTML5 Canvas:

• Getting Started with Canvas
• Drawing Lines
• Color and Transparency
• Rectangles
• Circles and Arcs
• Quadratic and Bezier Curves
• Images
• Text

8. Integrated APIs:

• Offline Application API
• Drag and Drop API

Who Should Attend This Introduction to HTML5 Course?

This course is intended for students who have experience with:

• HTML 4
• Basic CSS
• Basic Java Script

Pre-Requisites Experience in the following areas is required:

• HTML 4
• Basic CSS

Experience in the following areas would be beneficial:

• Basic JavaScript
• JSON
• DOM
• Ajax

Syllabus

Lesson 1: Laying out a Page with HTML5:

• Topic 1A: Page Structure
• Topic 1B: New HTML5 Structural Tags
• Topic 1C: Page Simplification

Lesson 2: HTML5 - How We Got Here:

• Topic 2A: The Problems HTML 4 Addresses
• Topic 2B: The Problems XHTML Addresses
• Topic 2C: The New More Flexible Approach of HTML5
• Topic 2D: New Features of HTML5
• Topic 2E: The HTML5 Spec(s)
• Topic 2F: Current State of Browser Support

Lesson 3: Sections and Articles:

• Topic 3A: The section Tag
• Topic 3B: The article Tag
• Topic 3C: Outlining
• Topic 3D: Accessibility

Lesson 4: HTML5 Audio and Video:

• Topic 4A: Supported Media Types
• Topic 4B: The audio Element
• Topic 4C: The video Element
• Topic 4D: Accessibility
• Topic 4E: Scripting Media Elements
• Topic 4F: Dealing with Non-Supporting Browsers

Lesson 5: HTML5 Forms:

• Topic 5A: Modernizr
• Topic 5B: New Input Types
• Topic 5C: HTML5 New Form Attributes
• Topic 5D: Some Other New Form Field Attributes
• Topic 5E: New Form Elements

Lesson 6: Overview of HTML5 Web Storage:

• Topic 6A: Overview of HTML5 Web Storage
• Topic 6B: Web Storage
• Topic 6C: Other Storage Methods

Lesson 7: HTML5 Canvas:

• Topic 7A: Getting Started with Canvas
• Topic 7B: Drawing Lines
• Topic 7C: Color and Transparency
• Topic 7D: Rectangles
• Topic 7E: Circles and Arcs
• Topic 7F: Quadratic and Bezier Curves
• Topic 7G: Images
• Topic 7H: Text

Lesson 8: Integrated APIs:

• Topic 8A: Offline Application API
• Topic 8B: Drag and Drop API