Getting Started with HTML 5

by M. Douglas Wray

PowerPoint version

Click here, Press key to advance.

M. Douglas Wray

HTML: A Brief History

  • 1989 – Tim Berners-Lee invents HTML basing it on SGML
  • 1992 – NCSA* creates Mosaic browser
  • 1993 – Lynx browser invented
  • 1994 – IETF** sets up HTML work group,
    HTML 2 spec released,
    WWW consortium forms
  • 1995 – HTML 3 spec released
  • 1996 – Scripting and standardization added
  • 1997 – HTML 3.2 released and endorsed by W3
  • More details here
  • *National Center for Supercomputing Applications
    ** Internet Engineering Task Force

HTML: What’s it for?

  • Used to create the basic elements of webpages:
    text, tables, images, etc.
  • The ‘Etc’ is what’s been growing:
    Audio
    Video
    Graphics

Existing Elements

What’s Missing?

  • Audio and Video!
  • Vector-based graphics
  • Standardization
    Dozens of ways currently
    EMBED is non-standard and awkward:
  • <embed alt="string" height=" { number | percentage } " hidden=" { true | false } " pluginspage="uri" src="uri" type="MIME type" width="number”> </embed>

New HTML5 Markup

The CANVAS Element

This is one of the really exciting parts!

Using the Canvas element, vector graphics (AI!)
can be rendered online.

Much like Flash but no proprietary software.

Graphics are created using JavaScript

More later on.

New Form Elements

TagDescription
<datalist>A list of input value options
<keygen>Generate authentication keys
<output>For different types of output,
such as output written by a script

New Input Type Attributes

  • Allows better control before sending it to the server
  • Better user interface cues for mobile devices
  • W3 Schools entry

NAV and FOOTER

Currently users are doing this:

<div id=“nav”> (user’s nav code) </div>

In HTML5 it’s simpler:

<nav> (user’s nav code) </nav>

Same for Footer

Typical NAV

<nav>
<a href="/html/">HTML</a> |
<a href="/html5/">HTML5</a> |
<a href="/css/">CSS</a> |
<a href="/css3/">CSS3</a> |
<a href="/js/">JavaScript</a>
</nav>

Video Before HTML5

  • No standard method
  • Required (different) plugin(s)
  • Various types of video: Ogg/MPEG 4 and WebM
  • Currently-used EMBED methods not valid HTML
  • Cranky

Video Embed Before HMTL5

Different method for embedding each of these:

  • Windows Media (WMV, WMA)
  • Flash (SWF)
  • Flash (FLV)
  • QuickTime (MOV)
  • Real (RM)

Video After HTML5

<video width="320" height="240"
controls="controls">
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
Your browser does not support the video tag. </video>

There’s also a TRACK tag for media players.

That’s IT.

Audio in HTML5

<audio controls="controls">
<source src="song.ogg" type="audio/ogg" />
<source src="song.mp3" type="audio/mpeg" />
Your browser does not support the audio element. </audio>

The CANVAS Element

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript”>
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>
</body>
</html>

See examples at W3schools

CANVAS Element plugins

There’s an add-on for Adobe Illustrator
so you can save directly into an HTML5 Canvas.

You can also get one for CS4.
AI2Canvas