HTML5 Essentials

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

HTML5 Web Design TrainingCourse Overview

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.

HTML5 Web Design TrainingCourse Contents

HTML5 Overview

  • Background
  • 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

New and Modified 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

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

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

HTML5 Canvas and Other Interactive Graphic Techniques

  • 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

HTML5 Web Design TrainingCourse Schedule

HTML5 Web Design TrainingFurther Details

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.