Re-vision - Photography and Graphics by J. Boersma - Webwork HTML Tutorial

HTML 5 is the newest version of HTML. It is still under development and browsers do not fully support it yet but this is rapidly changing.

HTML 5 is an attempt to update and clean up the hodgepodge of codes and conventions that have evolved over the years for delivery of content via the Web. It's authors are working to arrive at a single markup language that:

Is easily readable by humans
Is consistently understood by devices (computers, smart phones, browsers)
Supports the latest multimedia content
Includes APIApplication programming interface (API) - a specification used by software components to communicate with each other.s for more complex Web apps
Reduces the need for proprietary browser plug-ins such as Flash

A (very) short overview of some of the changes:

HTML 4 DOCTYPE Declaration:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"">

HTML 5 DOCTYPE Declaration:

<!DOCTYPE html>

HTML 4 Structural Elements:

HTML 5 Content-Specific Structural Elements:

HTML 4 Media Elements:

HTML 5 Media Elements:

HTML 4 Graphic Drawing Elements:

HTML 5 Graphic Drawing Elements:

Also part of the spec are a whole bunch of new forms elements, drag and drop capabilities, geolocation tools, off-line options and a lot more.

HTML 5 will make it possible to build Web apps that are as full-featured and fully functional as desktop apps.

And finally eliminated once and for all:

The HTML 5 Canvas Element

The <canvas> element is a container for graphics. The graphics themselves are drawn using JavaScript. Some examples:

Source:

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();

</script>

</body>
</html>

Web page:

Source:

<canvas id="myCanvas1" width="200" height="100">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>

var c=document.getElementById("myCanvas1");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.strokeStyle="#58c";
ctx.lineWidth=15;
ctx.stroke();
ctx.fillStyle="#f00";
ctx.fill();

</script>

Web page:

Source:

<canvas id="myCanvas2" width="200" height="100">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>

var c=document.getElementById("myCanvas2");
var ctx=c.getContext("2d");

// Create gradient
var grd=ctx.createRadialGradient(75,50,5,90,60,75);
grd.addColorStop(0,"#f00");
grd.addColorStop(1,"#000");

// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

</script>

Web page:

Source:

<canvas id="myCanvas3" width="250" height="170" ">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>

var c=document.getElementById("myCanvas3");
var ctx=c.getContext("2d");

ctx.font="30px Verdana";

// Create gradient
var gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","#f0f");
gradient.addColorStop("0.5","#00f");
gradient.addColorStop("1.0","#f00");

// Fill with gradient
ctx.fillStyle=gradient;
ctx.fillText("Gradient Text",10,90);

</script>

Web page:

A more complex example
from http://introducinghtml5.com:

Click to view source.

More info on the HTML 5 Canvas Element:

http://www.w3schools.com/html/html5_canvas.asp

https://firstsiteguide.com/html5-canvas-cheat-sheet/

HTML 5 Media Elements

Video

Adding video to Web pages has historically involved various kludges because HTML 4 was not designed to accommodate it. Fortunately, HTML 5 is but a certain amount of redundancy is still necessary in order to get video to work in all browsers and platforms.

The reason for this is that, of the three widely-used video formats, browser support is not uniform:

Browser	MP4	WebM	Ogg
Internet Explorer 9	YES	NO	NO
Firefox 4	NO	YES	YES
Google Chrome 6	YES	YES	YES
Apple Safari 5	YES	NO	NO

To address this issue, HTML 5 covers all the bases by allowing you to reference as many video types as you want and letting the browser play the first one it comes to that it supports.

Source:

<video width="320" height="240" controls="controls">

<source src="http://www.re-vision.com/webwork/p51embedding-media/PlayboyLeavesChicago.mp4" type="video/mp4">

<source src="http://www.re-vision.com/webwork/p51embedding-media/PlayboyLeavesChicago.ogg" type="video/ogg">

Your browser does not support the video tag.
</video>

Web page:

Audio

Because there was no standard for playing audio prior to HTML 5, adding audio to Web pages has often involved third-party plug-ins such as Flash. Fortunately, HTML 5 cleans that up similiarly to the way it does video.

As with video, the three widely-used video formats are not uniformly supported by browsers:

Browser	MP3	Wav	Ogg
Internet Explorer 9	YES	NO	NO
Firefox 4	NO	YES	YES
Google Chrome 6	YES	YES	YES
Apple Safari 5	YES	YES	NO

Using the same approach it does for video, HTML 5 allows you to reference as many audio types as you want and the browser plays the first one it comes to that it supports.

Source:

<audio controls="controls">

<source src="http://www.re-vision.com/webwork/p51embedding-media/galaxy-song.ogg" type="audio/ogg">

<source src="http://www.re-vision.com/webwork/p51embedding-media/galaxy-song.mp3" type="audio/mpeg">

Your browser does not support the audio element.
</audio>

Web page:

Note that modifying the opening audio tag like this:

creates an invisible audio player that plays on page load.

Scalable Vector Graphics

http://www.w3schools.com/svg/svg_intro.asp

In HTML5, you can embed Scalable Vector Graphics elements directly into HTML pages.

Source:

Web page: