Webwork
/
HTML 5
HTML5_Logo_128

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:



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">

or

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

or

<!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:
<div>
<span>
HTML 5 Content-Specific Structural Elements:
<header>
<nav>
<article>
<figure>
<figcaption>
<section>
<footer>
<div>
<span>
HTML 4 Media Elements:
<object>
<embed>
HTML 5 Media Elements:
<audio>
<video>
<source>
<embed>
<track>
HTML 4 Graphic Drawing Elements:
-
HTML 5 Graphic Drawing Elements:
<canvas>

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:
<center>
<dir>
<font>
<frame>
<frameset>
<noframes>
<strike>
<tt>




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:
Your browser does not support the HTML5 canvas tag.
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:
Your browser does not support the HTML5 canvas tag.
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:
Your browser does not support the HTML5 canvas tag.
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:
Your browser does not support the HTML5 canvas tag.

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:

<audio controls="controls" autoplay style="display:none">

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:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
<polygon points="100,10 40,140 150,60 10,60"
style="fill:#f00;stroke:#000;stroke-width:5;">
</svg>
Web page:
< Previous     Webwork Table of Contents     Next >
Re-Vision.com

projects:
Simple Truths (and Complex Lies)

The Built World
Semblance Portrait Project
Back to Square One
Changing Chicago
Chicago's Reliance Building
US
Along the Mississippi River
The Work of Antoni Gaudí
Graffiti

places:
Morocco 2023
Beecher, Illinois
Iceland 2017
Cuba 2015
Providence, Rhode Island
Greece 2013
Eastern Europe 2013
Israel 2010
Paris, France
Puebla, Mexico 2009
Puerto Rico 2009
Barcelona 2007
Rome, Italy 2006

archive:
Graphics, sounds, and other ancient
items from the dawn of the Web.


FWIW:
Biography

©
Jay Boersma