HTML5 Essentials Course

1-day HTML5 training course providing a basic foundation for modern web design — H5E

HTML5 Web Design Training Course Overview

This HTML5 Essentials Course is no longer available for sale or delivery on any platform. This page will be removed at the next site re-design. The following description is published solely for archive reference purposes.

This HTML5 training course introduces the purpose, syntax and usage of HTML5's core features, i.e. the essential bits which all web professionals need to know. The course focuses on these HTML5 fundamentals:

HTML5's aims, components, status and browser support
Use, syntax, and fallbacks for:
- New HTML5 semantic and structural markup
- New HTML5 video and HTML audio elements
- New HTML5 form controls
- The canvas element, other new graphic features, e.g. SVG

Above all, this HTML5 course emphasises pragmatic methods of exploiting the new technology within current constraints e.g. legacy browsers, media, accessibility, business practices, technical infrastructure, etc. It also distinguishes between stable and evolving parts of the HTML5 standard; offering best practice advice on whether, when and how to implement particular components.

This HTML5 training course provides a brief overview of the key HTML5 programming interfaces and some hands-on practice with features like HTML5 video, canvas and simple JavaScript-based interactivity.

Course contents — 1 HTML5 Overview

Background
- The limits of HTML4 and XHTML, WHATWG and W3C standards
The aims and scope of HTML5, i.e. standardized:
- Cross-platform html-based applications, multimedia, rich graphics, semantic text
Overview of markup changes
Overview of the new APIs
HTML5 vs. related technologies, e.g. JavaScript, Flash, SVG, multimedia codecs, CSS
Browser strategies — Microsoft, Google, Apple, Mozilla, Opera, etc
Current status of various components
Using HTML5 now — and preparing for the near future
- Current and coming software support
- Detecting client support
- Progressive enhancement and graceful degredation
- Retro-fitting browsers with JavaScript
- Supporting IE6-8

Course contents — 2 New Markup in HTML5

New introductory metadata:
- DOCTYPE, media type, character encoding, root element, link relations
New semantic elements
- header, hgroup, nav, article, aside, footer, time, mark
- section — incl. how nested sections change the semantics of h1–h6
Supporting the new HTML5 elements in IE
Styling the new HTML5 elements in CSS
Deprecated elements
Microdata
- Comparison with microformats and RDFa
- Defining your own microdata vocabulary
- Examples: defining people, organizations, events, reviews, etc

Course contents — 3 HTML5 Audio and Video

Essential background — understanding and creating multimedia content
- containers vs. codecs
- MIME types / media types
- Key video containers and codecs — h.264, VP8, Theora — WebM/MKV, Ogg, MPEG-4, Flash, AVI
- Key audio codecs and containers — MP3, AAC, Vorbis
- Encoding tools and methods — Handbrake, Fireogg, FFmpeg, FFmpeg2theora
The HTML5 video element
The HTML5 audio element
Media event attributes
Controlling multimedia events
Standard HTML5 multimedia fall-backs
Fall-backs for IE
Mobile multimedia — iPhone, iPad, Android, Meego

Course contents — 4 HTML5 Forms and Scripting

Problems with HTML/XHTML forms and XForms
New form elements and attributes
The datalist element and the input list attribute
Using form event attributes — and generic window, keyboard, mouse events
Using:
- Placeholder text
- Autofocus — with various fall-backs
- Email addresses
- Web addresses
- Numbers — using spinboxes
- Ranges — using sliders
- Telephone numbers
- Dates — and date pickers
- Search boxes
- Colour — and colour pickers
- Required fields
Form validation — and fall-backs

Course contents — 5 Animated & interactive graphics

Overview of HTML5 support for moving and interactive graphics
Using JavaScript and/or HTML5 to control the position, visibility and state of graphic objects
When to use which technique:
- Canvas drawing — bitmap, pixel-based
- Static and animated SVG — vector-based
- CSS3 transforms — time-based styling
Canvas basics — worked examples and hands-on practice
- Coordinates, paths, text, gradients, shadows, images,
- Compositing
- Transformations
- Basic Animation
- Managing events, state and context
- Applying styles
- Accessibility
- Supporting IE
SVG basics — worked examples and hands-on practice
CSS3 transforms — worked examples and hands-on practice

Course Objectives

On completion of this web design training course students will be able to:

Understand the overall scope and principal components of HTML5
Build HTML5-based pages and sites suitable for CSS3 styling
Convert HTML4.01 and XHTML-based web design to HTML5
Write W3C web standards-based HTML5
Use the following HTML features confidently:
- HTML5 semantic markup — elements and attributes
- HTML5 page strutures
- HTML5 form controls
- HTML5 audio and video tags
- HTML5 Canvas and embedded SVG images
Ensure that HTML5 features always gracefully degrade in non-HTML5 browsers
- Providing JavaScript polyfils where possible
- Ensuring that no essential features are lost when JavaScript is unavailable
Extend the knowledge and skills learned on this HTML5 course through self-study

Target Audience

Anybody building or planning to build websites or web applications using HTML5.

Web Designers
Web Developers and Programmers
Team leaders
Project managers

Training Pre-requisites

All of the following:

Successful completion of our basic HTML course — or equivalent experience
Successful completion of our CSS fundamentals course — or equivalent experience
Some exposure to JavaScript (e.g. using JQuery) — programming is not necessary

Training Style

Intensive, instructor-led training, with opportunities for hands-on practical work where appropriate.

There are plenty of practical exercises available, but this course tends to appeal to professional web developers who want an overview of the current state of HTML5, and only require brief hands-on experience to pick up the basics.