Login / Register

Introduction to HTML5

This course is intended for students who have experience with HTML 4, basic CSS, and basic Java Script. Students will start by getting their hands dirty and jumping right into HTML5 code. They will learn about the new HT... Show More
Course Prerequisites:
Basic HTML4, CSS and Java Script experience.
Add to Cart Request a Quote

Instructor-Led Training (ILT)

Attend training in a classroom environment at a campus near you. Instructor-led training is still the number one delivery method of choice because it allows you to interact and discuss the training material, either individually or in a group setting, and you gain access to expert knowledge from certified instructors. This form of guided learning is impactful and produces positive learning outcomes. Day, evening and Saturday classes are offered.

Course Price (ILT)

* incl. VAT

2 Days

Course Content

Module 1: Laying out a Page with HTML5
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.

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

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

• 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

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 the differ from DIV tags, and how they affect a page’s “outline.”

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

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.

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

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.
So let’s dig in and learn how to use the new HTML5 form features.

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

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

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.

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

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.

• Offline Application API
• Drag and Drop API

CTU Training Solutions , Updated: July 10th, 2017

Share with friends

Request a Quote

Your Name

Your Surname

Contact Number

Your Email


Which campus would you like to study at?

Your job title

Will your training be sponsored?


The course information above is subject to change without notification due to market trends in the industry, legislation and/or programme version updates. Terms and Conditions

Join the CTU community

Join the CTU Community Portal and gain access to superior resources.

Join for Free

Thank you for printing this page.
0861 100 395
[email protected]


Call me Back

Leave your details and we'll contact you back!

Your Name:

Your Email:

Contact Number:

Choose a campus