50564 : Introduction to HTML5 (2 Days)
About this Course
This two-day instructor-ledcourse provides students with the knowledge and skills to work with HTML5.
Audience Profile
Prerequisites
- HTML 4
- Basic CSS
- Basic Java Script
- JSON
- DOM
- Ajax
At Course Completion
- 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.
Course Outline
Module 1: Laying out a Page with HTML5
Lessons
- Page Structure
- New HTML5 Structural Tags
- Page Simplification
Lab : Converting an HTML 4 Page to an HTML5 Page
- In this exercise, you will convert a basic HTML 4 page to an HTML5 page. The CSS documents have already been created for you, such that, when you're finished, your HTML5 page should render exactly like the HTML 4 page.
- Lay out a page with HTML 4 (the "old" way).
- Lay out a page with HTML5.
- Understand the differences between the HTML5 and HTML 4 structures.
- Understand the new HTML5 Doctype.
- Understand the simpler script and style tags used in HTML5.
Module 2: HTML5 - How We Got Here
Lessons
- The Problems HTML 4 Addresses
- The Problems XHTML Addresses
- The New, More Flexible Approach of HTML5 - Paving the Cowpaths
- New Features of HTML5
- The HTML5 Spec(s)
- Current State of Browser Support
- Understand what problems HTML 4 addresses.
- Understand what problems XHTML addresses.
- Understand how HTML5 addresses these problems.
- Understand the new features of HTML5.
- Know what is in the HTML5 Spec.
- Understand browser support for HTML5.
Module 3: Sections and Articles
Lessons
- The section Tag
- The article Tag
- Outlining
Lab : Using section and article Elements
- In this exercise, you will modify an HTML page we worked on earlier in the course to replace meaningless div elements with meaningful section and article elements.
Lab : Determining the Outline
- In this exercise, you will try to determine the outline of an HTML page.
- Understand how to use SECTION and ARTICLE tags to eliminate inherent HTML 4 structure problems.
- Understand what outlining is and how it is determined.
- Understand how heading tags H1, H2, etc.) affect a document's structure/outline.
Module 4: HTML5 Audio and Video
Lessons
- Supported Media Types
- The audio Element
- The video Element
- Accessibility
- Scripting Media Elements
- Dealing with Non-Supporting Browsers
Lab : Video - Multiple Sources
- In this exercise, you will create an HTML5 file from scratch that plays video files.
Lab : Media API
- In this exercise, you will add a feature to the preceding demo that allows the user to jump to the beginning to a stanza.
- Use the AUDIO tag.
- Use the VIDEO tag.
- Detect audio and video failure.
- Code for browsers that do not support the AUDIO and VIDEO tags.
Module 5: HTML5 Forms
Lessons
- Modernizr
- New Input Types
- HTML5 New Form Attributes
- Some Other New Form Field Attributes
- New Form Elements
Lab : An HTML5 Quiz
- In this exercise, you will create an HTML5 quiz that validates form entries and reports the percentage of both the valid (but not necessarily correct) answers and the percentage of correct answers.
- Understand Modernizr, the JavaScript library for testing for HTML5 support.
- Understand HTML5's new form fields and attributes.
- Understand new types of inputs in HTML5.
- Understand built-in HTML5 form validation.
- Understand the new HTML5 output, progress, and meter elements.
Module 6: HTML5 Web Storage
Lessons
- Overview of HTML5 Web Storage
- Web Storage
- Other Storage Methods
Lab : Creating a Quiz Application
- In this exercise, you will create a quiz application that allows the user to save and resume later. It also protects the user from losing data if he/she accidentally refreshes.
- How to use the two client-side storage methods in the W3C's Web storage specification.
- About the past and future of client-side storage.
Module 7: HTML5 Canvas
Lessons
- Getting Started with Canvas
- Drawing Lines
- Color and Transparency
- Rectangles
- Circles and Arcs
- Quadratic and Bzier Curves
- Images
- Text
Lab : Drawing a Sailboat
- In this exercise, you will use HTML5 canvas to draw a simple sailboat.
Lab : Drawing a Snowman
- In this exercise, you will use circles and squares to create a snowman.
Lab : Images and Text
- In this exercise, you will create a drawing of a map of South America using image files of a map and country flag graphics supplied.
- Get started with canvas.
- Draw lines.
- Draw rectangles and circles.
- Reposition and rotate the canvas.
- Create animations.
Module 8: Integrated APIs
Lessons
- Offline Application API
- Drag and Drop API
- Understand the new HTML5 APIs.