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 >
photographs:

Semblance Portrait Project
The Built World
Greece
Hungary/Czech Republic
Poland
Graffiti
Simple Truths
Israel


Paris
Puebla, Mexico
Spain
Along the Mississippi
Italy
Santa Fe
The Reliance Building
Providence
archive:

Webwork
The Web Page from Hell
The Portals Project
Transition
Insights
Internet Spelling Guide
Ape Silverback (Primate Ruminations)
Revenge of the Movie Poster
GIFs 4 Us
The Web Rules
Webpix
Backgrounds 4 Us
Webpaper
Digital Sketches
Fonts
Sounds
© Jay Boersma