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 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.

The Web Design Academy Contact us

By form

By Phone

+44 (0)113 234 4611

By email

enquiries@thewebdesign.academy

By snail mail

Suite 3 15 South Parade Leeds LS1 5PQ United Kingdom