HTML5

You can begin your education about HTML5, like I did, by using the tutorials and references provided by W3 Schools. And then you can further your skills by using the tutorials found at HTML5 Canvas Tutorials.

New Features

Some of the most interesting new features in HTML5:

  • The canvas element for drawing
  • The video and audio elements for media playback
  • Better support for local offline storage
  • New content specific elements like article, footer, header, nav, section
  • New form controls like calendar, date, time, email, url, search

Canvas

Below is an implementation of the <canvas /> tag. The canvas element has no drawing abilities of its own, but provides context for the graphics to appear. All drawing is actually performed by JavaScript designed to interpret mouse movements and clicks:

 
ST
FR
SR
 
0
0
0
0
0
 
If you are seeing this message, your browser does not support the HTML5 tag, "canvas".  

To start, I defined my canvas with four attributes:

  • id="dynamicCanvas" (to manipulate it with javascript)
  • class="canvas" (for css)
  • width="640" (to give it a default width)
  • height="360" (to give it a default height)

I then created the color and tool palettes, and a set of canvas attribute indicators for the currently selected line width and cursor position on the x and y axes.

I then used jQuery to create the javascript to handle the selection of color and tool, setting of the line width, changing of the cursor coordinates, applying the stroke and fill effect, and clearing of the canvas.

Here is another implementation of the <canvas /> tag. Here you can see how a gauge can be dynamically rendered.

If you are seeing this message, your browser does not support the HTML5 tag, "canvas".

Range

Band 1

Band 2

Band 3

Video & Audio

Video

Below is an implementation of my use of the <video /> tag, and it's nested companion tag <source />.

  • wat.mov
  • Quality Sample.mp4

In the <video /> tag, I have the following attributes assigned.

  • id="video1" (to identify it for javascript)
  • autoplay="autoplay" (so that the video plays as soon as it is ready to)
  • controls="controls" (so that the video controls are available to use)

In the <source /> tag, I have the following attributes assigned:

  • type="video/mp4" (to enable the browser to initialize the clients defined plugin for that file type)

The selecting, loading and launching of the selected video is handled in javascript, as well as the resizing of the player area.

Audio

Below is an implementation of my use of the <audio /> tag, and it's nested companion tag <source />.

  • 01 - Will Smith - Just The Two Of Us (Radio Edit).mp3
  • Will Smith - Miami.mp3
  • Sean Paul - Deport Them.mp3
  • Bruno Mars - Just The Way You Are.mp3
  • Will Smith - Wild Wild West.mp3
  • 05 - Will Smith - Just The Two Of Us (Instrumental).mp3
  • Will Smith - Men In Black.mp3
  • Will Smith - Gettin Jiggy With It.mp3

In the <audio /> tag I have the following attributes assigned:

  • id="audio1" (to identify it for javascript)
  • autoplay="autoplay" (to play as soon as it is ready)
  • controls="controls" (so that the audio controls are available to use)

In the <source /> tag I have the following attributes assigned:

  • id="audio1-src" (to identify it for javascript)
  • type="audio/mp3" (to enable the browser to initialize the clients defined plugin for that file type)

The selecting, loading and launching of the selected songs is handled in javascript.