HTML 5: Introduction

M. Douglas Wray Macwebguru.com

M. Douglas Wray• Currently webmaster for CUAlum.org• Private consultant and trainer• Focus: CSS design and WordPress• Code geek• Loves Cheetos

HTML: A Brief History• 1989 – Tim Berners-Lee invents HTML basing it on SGML (good move Tim!)

• 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

*National Center for Supercomputing Applications** Internet Engineering Task Force

More details here: http://www.w3.org/People/Raggett/book4/ch02.html

HTML: What’s it for?• Used to create the basic elements of

webpages: text, tables, images, etc.• The ‘Etc’ is what’s been growing:

AudioVideoGraphics

Existing Elements• IMG for images• APPLET(for Java)• OBJECT (generic)A bit limited…Here’s a list of all of them: http://www.w3.org/TR/html4/index/elements.html

What’s Missing?• Audio and Video!• Vector-based graphics• Standardization

Dozens of ways currentlyEMBED 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 MarkupTag Description<article> Specifies independent, self-contained content, could be a news-article, blog post, forum post, or other

articles which can be distributed independently from the rest of the site. <aside> For content aside from the content it is placed in. The aside content should be related to the

surrounding content<bdi> For text that should not be bound to the text-direction of its parent elements<command> A button, or a radiobutton, or a checkbox<details> For describing details about a document, or parts of a document<summary> A caption, or summary, inside the details element<figure> For grouping a section of stand-alone content, could be a video<figcaption> The caption of the figure section<footer> For a footer of a document or section, could include the name of the author, the date of the document,

contact information, or copyright information<header> For an introduction of a document or section, could include navigation<hgroup> For a section of headings, using <h1> to <h6>, where the largest is the main heading of the section,

and the others are sub-headings <mark> For text that should be highlighted<meter> For a measurement, used only if the maximum and minimum values are known<nav> For a section of navigation<progress> The state of a work in progress<ruby> For ruby annotation (Chinese notes or characters)<rt> For explanation of the ruby annotation<rp> What to show browsers that do not support the ruby element<section> For a section in a document. Such as chapters, headers, footers, or any other sections of the

document<time> For defining a time or a date, or both<wbr> Word break. For defining a line-break opportunity.

New Media ElementsTag Description

<audio> For multimedia content, sounds, music or other audio streams

<video> For video content, such as a movie clip or other video streams

<source>For media resources for media elements, defined inside video or audio elements

<embed> For embedded content, such as a plug-in

<track> For text tracks used in mediaplayers

The CANVAS ElementThis is one of the really exciting parts!Using the Canvas element, vector based graphics can be rendered online.Much like Flash but without the need for proprietary software.Graphics are created using JavaScriptMore later on.

New Form Elements

Tag Description<datalist> A list of options for input values<keygen> Generate keys to authenticate users

<output> For different types of output, such as output written by a script

New Input Type AttributesType Descriptiontel The input value is of type telephone numbersearch The input field is a search fieldurl The input value is a URLemail The input value is one or more email addressesdatetime The input value is a date and/or timedate The input value is a datemonth The input value is a monthweek The input value is a weektime The input value is of type timedatetime-local The input value is a local date/timenumber The input value is a numberrange The input value is a number in a given rangecolor The input value is a hexadecimal color, like #FF8800placeholder Specifies a short hint that describes the expected value of an input field

NAV and FOOTERCurrently 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 and 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>

http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_canvas_first

The CANVAS Element<!DOCTYPE html><html><body> <canvas id="myCanvas" width="300" height="300" 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.moveTo(150,150); cxt.lineTo(150,50); cxt.lineTo(10,50); cxt.stroke(); </script></body></html>

http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_canvas_line

The CANVAS ElementThere’s an add-on for Adobe Illustrator so you can save directly into HTML5.http://labs.adobe.com/downloads/illustrator_html5.html

(you can also get it for CS4)

A Few CANVAS Examples• My personal logo (link)• Rendered type (link)• Interactive gradients (link)• classList manipulation (link)• HTML5 Form (link)

More CANVAS examples• Adjustable bar chart (link)• Entire HTML5 course/examples (link)• Incredible interactives (link)• Bar charts (link)• Particle System Generator (link)

Resources• The video element (link)• iPhone website (link)• HTML5 Visual Cheatsheet (link)• HTML5 Canvas Cheatsheet (link)• HTML5 & CSS3 Techniques (link)• Hype™ HTML5 Animation Editor (link)

More Resources• Audio Element Maker (link)• Video Element Maker (link)• SVG to HTML5 Canvas (link)• Purple – HTML5 Canvas Animation (

link)• Cut/Paste Examples (link)

Even More Resources• Video examples and browser

compatibility (link)• Build an HTML5 video player (link)• Audio and Video Processing (link)• Using Audio with HTML5 (link)

Q & A