ETHTML5 – Learn HTML5

Enquire/Book this course

  • This field is for validation purposes and should be left unchanged.
Print this page
  • Code: ETHTML5
  • Duration: Days 2
  • Price per delegate: £575.00 +VAT

Trained over 60000 delegates

Course delivered by industry expert instructors

Highly competitive pricing

 

Course Description

Mastering a language like HTML5 can be intimidating. It doesn™t have to be!

The training course provides web designers with the knowledge and hands-on practice they need to be able to build and manage professional web sites.  The course focuses on understanding web terminology as well as the concepts required to create a web site that can evolve to meet a client™s requirements through HTML5

Target Student:

This course is for web designers and developers who are proficient at hand coding HTML and CSS.
 
The goal of the course is not to teach core HTML concepts or markup, but build on top of an existing solid understanding of semantic HTML and XHTML.

Prerequisites:

Those taking the course should understand:

  • HTML Syntax
  • The concept of semantic HTML markup, and separating markup, presentation and behavior

Delivery Method:

Instructor led, group-paced, classroom-delivery learning model with structured hands-on activities.

Performance-Based Objectives:

By the end of the course, students will have covered, in detail, the following:

  • How HTML5 is similar to, and differs from HTML 4 and XHTML 1
  • The various features of HTML5, which ones are ready for use now, and which are more experimental
  • New semantic and structural markup elements and attributes
  • Extending HTML5 accessibility and semantics using the ARIA role attribute
  • Native audio and video in HTML
  • Drawing with the canvas element
  • Dealing with shortcomings in browser support
  • Quality assurance techniques for HTML5

Course Content

Lesson 1: What Exactly is HTML5?
Step 1: HTML5 Live Overview
Step 2: Lesson 1 Outline
Step 3: What Exactly is HTML5?
Step 4: Can I Really Use HTML5 Right Now?
Step 5: HTML5 Showcase
Step 6: Join a Discussion: Introduce Yourself!

Lesson 2: Markup (Part I)
Step 1: Lesson 2 Outline
Step 2: The HTML5 doctype
Step 3: Declaring Character Encodings in HTML5
Step 4: Common Page Layout Patterns
Step 5: Exercise 1 - Marking up a Blog
Step 6: Plaintext to download and markup
Step 7: Solution to Exercise 1 (Part I)
Step 8: Solution to Exercise 1 (Part II)
Step 9: Join a Discussion: Introduce Yourself!

Lesson 3: Markup (Part II)
Step 1: Lesson 3 Outline
Step 2: Sectioning in HTML5
Step 3: Outline algorithms in HTML 4 and HTML5 (Part 1)
Step 4: Outline algorithms in HTML 4 and HTML5 (Part 2)
Step 5: Marking Up Dates and Times With HTML5
Step 6: Marking Up Captions for Figures in HTML5
Step 7: A short note on the two flavors of HTML5 - XHTML and HTML
Step 8: Exercise - Completing the HTML5 Document from Lesson 2
Step 9: Completed Exercise (Part I)
Step 10: Completed Exercise (Part II)
Step 11: Download my Worked Example

Lesson 4: ARIA
Step 1: Lesson 4 Outline
Step 2: WAI-ARIA and HTML5
Step 3: Using the Role Attribute
Step 4: Exercise 4.1 - Mark up a document using ARIA role attributes
Step 5: Marking up the aforementioned document
Step 6: Download my Finished Example
Step 7: HTML 5 Form Elements
Step 8: Exercise 4.2 - Creating Forms with HTML5
Step 9: Download the Associated File
Step 10: Answer to today's exercise
Step 11: Download my Finished Example

Lesson 5: Recorded Webinar/Q&A Session
Step 1: View Session A
Step 2: View Session B

Lesson 6: Native Audio and Video
Step 1: Lesson 6 Outline
Step 2: The Video Element
Step 3: The Audio Element
Step 4: Complete an exercise: marking up an audio element
Step 5: Download the ogg file
Step 6: Download the mp3 file
Step 7: Creating the Audio Element
Step 8: Download my Finished Version
Step 9: Backwards Compatibility
Step 10: Complete an exercise: marking up a video element, with fallback content
Step 11: Download the mp4 video file
Step 12: Download the ogv video file
Step 13: Download the swf video file
Step 14: Creating the Video Element
Step 15: Download my finished version of the video
Step 16: Video and Audio Codecs
Step 17: A Note on Accessibility

Lesson 7: Drawing With the Canvas Element
Step 1: Lesson 7 Outline
Step 2: canvas Console
Step 3: Intro to canvas Console
Step 4: Introducing the canvas element & Creating Fallback Content
Step 5: The canvas coordinate system and sizing the canvas
Step 6: Drawing with Canvas
Step 7: Drawing with canvas, including filling, stroking and erasing rectangles
Step 8: Drawing lines and other paths in canvas, including circles
Step 9: Drawing text with canvas
Step 10: Shadows and other Advanced canvas
Step 11: Exercise
Step 12: Download the 'No Parking' sign
Step 13: Download the 'Warning' sign

Lesson 8: Quality Assurance for HTML5
Step 1: Lesson 8 Outline
Step 2: Canvas Solutions (Part 1) - Solution to Lesson 7 Canvas Challenge
Step 3: Canvas Solutions (Part 2)
Step 4: Dealing with Browser Support (Part 1)
Step 5: Dealing with Browser Support (Part 2)
Step 6: Dealing with Browser Support (Part 3)
Step 7: Dealing with Browser Support (Part 4)
Step 8: Validating HTML5
Step 9: Preparing for Lesson 9

Lesson 9: Bringing it all Together
Step 1: Now it's your Turn
Step 2: Download a page from a site

Lesson 10: Recorded Webinar and Q&A Session
Step 1: View Session A
Step 2: View Session B

Lesson 11: Bonuses
Step 1: Bonuses