HTML5 Overview

The HTML5 specification, although not yet complete and not fully supported by all browsers, does provide enough detail for web designers and web developers to start using it. This course's primary focus is on the current implementation of the W3C and WHATWG standards and what we can start to use to future proof our web projects.

The benefits that HTML5 already bring can be seen by how quickly the web development community has adopted the standard and how they've already implemented workaround solutions for browsers without HTML5 support.

Course Outcomes

By the end of the HTML5 course students will understand how to deploy HTML5 based content and be able to use the new tags, methods and features to do the following :

author accessible valid HTML5 documents

provide workarouond solutions for non-HTML5 browsers

create enhanced forms with mobile support

playback video and audio content via HTML5

manipulate graphics via the canvas

understand what HTML5 will be capable of in the future

Course Requirements

To attend this course, you should already be able to build websites by hand. This is not an introduction to web design course, but a course to upgrade those that can already build websites to the HTML5 specification. It is recommended that if you do not already hand code websites, that you look at our HTML & CSS Web Design course.

The HTML5 training course covers everything that is needed to build valid HTML5 compliant web pages. As a basic requirement, students should already have some experience hand-coding HTML v4.0 or XHTML web pages and understand CSS layout. Knowledge of JavaScript would be a distinct advantage although is not required.

A course primer document will be sent to all students attending this course. This will provide you with some basic knowledge of JavaScript to help you get the most from the HTML5 course.

Course Description

This HTML5 training course starts with an overview of the standard and existing support with the major mobile and desktop browsers - Firefox, Safari, Chrome and Internet Explorer. There is often confusion defining what is and what is not HTML5. We will explain why it is important to understand which technologies are covered by the HTML5 standard and which are parts of other standards such as the CSS3 specification or libraries such as jQuery.

As part of simplifying the HTML5 document structure and making it more semantic, certain existing HTML tags have be modified and others deprecated from the new specification. The course clarifies what is no longer allowed and how to modify existing web pages to comply with validation engines. Thankfully a lot of the changes do help improve development speed and workflow.

A major attraction of HTML5 is the new semantic outlining model. For the first time it is possible to create documents with structure and association beyond that of simply nesting headings. The header, nav, section, article, aside, footer tags all bring meaning to the content which can be appreciated by search engines (for search engine optimisation) as well as accessibility agents such as screen readers. The focus in this section of the course is to get you comfortable building semantic structured content that will improve the performance of your pages and validate against the HTML5 specification.

While implementing HTML5 today is an attractive proposition, we still need to consider those browsers with no HTML5 support. These are typically browsers that are still in mainstream deployment such as Microsoft's Internet Explorer 6 - 8 and older versions of other browsers. Through libraries such as HTML5Shiv and Modernizr we will look at providing some backward compatibility so that we can start benefitting from HTML5 right now. We will also look at the implementation of the HTML5 Boilerplate project and how this may help improve our workflow.

Next, we will look at enhancing web based forms using the plethora of new input types and functionality available in HTML5. There are now form controls for a number of common data entry fields such as email addresses, telephone numbers and dates as well as built-in form validation as part of the specification. Using these new features we will create forms with fallback mechanisms through the webforms2.js and jQuery UI libraries so that they can be used in any of today's browsers.

One of reasons that HTML5 has become so important in modern web development is it's native support for video and audio playback. This has long been an issue for Apple iPhones, iPods and iPads who have not supported the Adobe Flash player. HTML5 browsers no longer require the Adobe Flash player to stream video and audio content. As part of the training course we will look at the H.264, Ogg and WebM supported media formats, encoding these files and playing them back natively within supported browsers. Of course, for those browsers without native support, we will look at how to fallback to Flash for playback support. We will also cover building your own simple custom media controls with jQuery (or JavaScript).

For those who are looking for an early replacement to Adobe Flash or just looking to get into creating dynamic graphical content, HTML5 has the new canvas tag. The HTML5 canvas provides mechanisms for drawing and manipulating shapes, lines, text , patterns and even video. With the ability to apply shadows and gradients it is possible to create dynamic interactive content and animation through the canvas with a little help from jQuery (or JavaScript). Although working with the canvas does require good knowledge of JavaScript, it will be presented in such a way that even those without any programming experience will feel comfortable.

Finally, the training course takes an overview look at some of the other APIs often related to the HTML5 specification. Although some of these have not been fully finalised yet, the course plans to share with you what these APIs are capable of and what support exists for them. Most interestingly is the GeoLocation API which allows supported browsers to identify the global location of the user via mobile GPS or IP address and use this information as part of the page. We also overview the Web Storage, and Drag and Drop APIs.

Course Highlights

The course covers the following areas :

HTML5 Standards

Moving to HTML5

Current Browser Support

Technology Support

W3C and WHATWG Specs

HTML5 Specification Overview

What HTML5 is not

HTML5 Document Structure

The new DOCTYPE, charset and metatags

Attributes in HTML5

Deprecated tags and attributes

HTML5 Content

The HTML5 outline model

New Structural Tags (header, nav, section, article, aside, footer)

Headings and Content (hgroup)

New Semantic Tags

Link Relationships

Working with HTML5 Outliner

HTML5 Validation

Browser Compatibility

Block level behaviours

HTML5Shiv

HTML5 Boilerplate

Detecting Browser Support

Modernizr

HTML5 Forms

New input types

Form validation

Required fields

Placeholder Data

Fallback with WebForms2 & jQuery

Building practical HTML5 Forms

HTML5 and WAI-Aria

Understanding Accessibility

Using the role Attribute

Using the aria- Attribute

Form Accessibility

Video and Audio Tags

Browser Compatibility

Media formats - H.264, Ogg, WebM

Encoding video and audio

Preloading and Poster Frames

Fallback content with Flash

Creating simple custom controls

HTML5 Canvas Tag

Canvas methods and properties

Drawing context

Drawing lines and shapes

Saving and Restoring States

Colour, Patterns and Gradients

Applying Shadows

Clipping Content

Setting Alpha Transparency

Transformations

Creating simple animation

HTML5 Related APIs

Overview of the GeoLocation API

Overview of the Web Storage API

Overview of the Drag & Drop API

<

Course Feedback

"The trainer was very knowledgeable - he really knew is subject. There was a lot of content and information to deliver but the course managed to cover a wide range of aspects in a short time." - James @ NHS

"This course was exactly what I was looking for – a refresh and update of my existing HTML and web development skills to begin developing in HTML5. Excellent content and delivery. Also accessibility and validation were covered very well" - Andy @ Linney Design

"The way that the course was delivered and the open environment that allowed for questions to be asked. Also the ability of the trainer to demonstrate things on the spot" - Matt @ Warners Group

Course Trainer

Bjorn has been involved in CSS based web design for nearly 10 years and has experience developing web applications in both small and large teams of developers. Having insights into both the design and development worlds, he is able to understand the capabilities of design packages such as Illustrator, Flash and Photoshop as well as develop with server side platforms such as PHP. Combing these two worlds through the use of hand written markup and CSS is something he excels in and has been teaching these skills to other developers for over 10 years.

Over the past few years he has closely followed the evolving standards for web development and has spent countless hours discussing appropriate markup with web designers in the industry. He has also run training courses on web standards and accessibility which stems from his vast experience with CSS web design.

Course Location

This HTML5 training course is run from our rooms on Jubilee Campus in Nottingham, which is part of the University of Nottingham's Innovation Park. These are serviced by a state-of-the-art tram system allowing easy access to the city centre as well as direct hourly rail services from London, Liverpool, Manchester, Birmingham, Derby and Leicester.

Support Days

I have now been on 5 courses with Web Studio Training (Photoshop, Illustrator, InDesign, WordPress and Premier Pro) and I found every course to be really well organised and executed. I was a complete beginner in all topics but found every course covered lots of information whilst giving plenty of time for hands of experience to cement the learning. Bjorn (and Greta) create a very relaxed, informal atmosphere making it comfortable to ask questions, repeat sections or ask for additional help. I would highly recommend Web Studio Training.