This two-day instructor-led course provides students with the knowledge and skills to work with HTML5. Students will start by 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.
Target Audience:
This course is intended for students who have experience with HTML 4, basic CSS, and basic Java Script.
Pre-requisites:
Before attending this course, students must have experience in:
HTML 4
Basic CSS
Basic Java Script
Experience in JSON, DOM and Ajax is also beneficial
At Course Completion:
After completing 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
This lesson begins with a quick review of a basic HTML 4 page and then dives right in to HTML5 code. We are not going to spend time reviewing history or discussing the hows and whys here, but we will come back to that later (see Lesson 2). First, we want to get you looking at some code.
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.
After completing this module, students will be able to:
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
In this lesson, we will discuss the differences between HTML 4 and HTML5 (aside from the space and the number).
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
After completing this module, students will be able to:
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
In HTML 4, we use the DIV tag to separate HTML pages into parts. Sometimes those parts were structurally meaningful. For example, a page describing a course might include an overview, goals, prerequisites, and an outline. Each of those parts might be enclosed in a DIV tag with meaningful ids to provide meaningful structure to the page. However, DIV tags are also used to separate parts of a page for styling purposes, for example, to create a column layout. In this case, the areas encompassed in DIV tags might not be structurally different. Browsers cannot distinguish between structurally meaningful and meaningless divs, so they do not attribute any special significance to either kind.
This lesson explains the purpose of and difference between SECTION and ARTICLE tags, how they differ from DIV tags, and how they affect a page's "outline."
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.
After completing this module, students will be able to:
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
In this lesson, you will learn how to use the new HTML5 audio and video elements. As different browsers currently support different types of media, you will learn how to provide the necessary options to make your media work across browsers. You will also learn how to gracefully degrade your audio and video code.
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.
After completing this module, students will be able to:
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
The promise of HTML5 forms is great - richer, more meaningful, and backward-compatible forms that are consistent across browsers and include built-in client-side validation (read, no need for JavaScript for form validation). The current reality is far from great - only Opera does a half-way decent job of implementing most of the new form fields. That said there are some things you can do now to take advantage of Opera's implementation and be ready for other browsers without causing any harm in the non-supporting browsers.
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.
After completing this module, students will be able to:
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
In this unit, you will learn about local storage and session storage and the use cases for each. You will also learn about some other client-side storage methods, one defunct and one up and coming.
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.
After completing this module, students will be able to:
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
Canvas is one of the more talked-about new features of HTML5. It makes it possible to create drawings (e.g., for graphs or games) natively in the browser. If you know JavaScript, it is relatively easy to start using Canvas, which allows you to build intricate visual applications without the need of a plugin like Flash or Silverlight.
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.
After completing this module, students will be able to:
Get started with canvas
Draw lines
Draw rectangles and circles
Reposition and rotate the canvas
Create animations
Module 8: Integrated APIs
HTML5 includes a bunch of integrated and associated (e.g., not specifically part of HTML5) APIs. In this lesson, we'll look at the Offline Application API and the Drag and Drop API.
Lessons
Offline Application API
Drag and Drop API
After completing this module, students will be able to:
