HTML5
Hello HTML5
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Hello HTML5 World</title>
</head>
<body>
<h1>Hello HTML5</h1>
<p>Welcome to the future of markup!</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Hello Malformed HTML5 World</title>
</head>
<body>
<!-- note bad close tag below -->
<h1>Hello Malformed HTML5<h1>
<!-- unknown tag found here -->
<p>Welcome to the <danger>future</danger> of markup!</p>
<!-- missing </body> -->
</html>
Loose Syntax Returns
<!DOCTYPE html>
<!-- I have no html, head, or body as they are actually optional -->
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title>HTML5 Tag Soup Test</title>
<h1 title="more sloppy markup ahead!">HTML5</H1>
<p id=p1>Back to the future of loose markup!?
<p>Yes it looks that way
<ul>
<li>optional elements
<LI>case is no problem
<li id=noquotes>quotes optional in many cases
<li>inferred close tags
</UL>
<p>Oh my
<br>
<br />
<p>Intermixing markup styles!
<!-- ok that's enough let's stop now -->
XHTML5
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="[Link]
<head>
<title>Hello XHTML5 World</title>
<!-- Simple hello world in XHTML5 -->
</head>
<body>
<h1>Welcome to the World of XHTML5</h1>
<hr />
<p>XHTML5 <em>really</em> isn't so hard either!</p>
<p>HTML5 likes XML syntax too.</p>
<p>Make sure to serve it with the correct MIME type!</p>
<!-- IE users you will get a render error.
Please read on to learn why. -->
</body>
</html>
HTML5: Embracing the Reality of Web
Markup
Presentational Markup Removed and
Redefined
HTML 4 Elements Removed from HTML5
Out with the Old Elements
HTML 4 Elements Redefined in HTML5
HTML 4 Attributes Removed in HTML5
Elements Removed by HTML5
Sample of New Attributes for HTML5
HTML5 Document Structure Changes
<header>
<h1>Welcome to the Future World of HTML5.</h1>
<h2>Don't be scared it isn't that hard!</h2>
</header>
<footer>
<p>Content of this example is not under copyright</p>
</footer>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HTML5 header and footer example</title>
</head>
<body>
<header>
<h1>Welcome to the Future World of HTML5.</h1>
<h2>Don't be scared it isn't that hard!</h2>
</header>
<p>Some body content here.</p>
<p>Some more body content here.</p>
<footer>
<p>Content of this example is not under copyright.</p>
</footer>
</body>
</html>
<section>
<h1>Chapter 2</h1>
<p>New HTML5 elements.</p>
<section>
<h2>HTML5's section Element</h2>
<p>These elements are useful to create outlines.</p>
<section>
<h3>Nest Away!</h3>
<p>Nest your sections but as you nest you might want to indent.</p>
</section>
</section>
<p>Ok that's enough of that.</p>
</section>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HTML5 expanded section example</title>
</head>
<body>
<header>
<h1>Welcome to the Future World of HTML5</h1>
<h2>Don't be scared it isn't that hard!</h2>
</header>
<!-- assume chapter 1 before -->
<section id="chapter2">
<header>
<h1>Chapter 2</h1>
</header>
<p>Intro to chapter 2 here...</p>
<section id="newStrucreElements">
<header>
<h2>New Structural Elements</h2>
</header>
<h3>header Element</h3>
<p>Discussion of header element.</p>
<h3>footer Element</h3>
<p>Discussion of footer element.</p>
<h3>section Element</h3>
<p>Discussion of section element</p>
</section>
<section id="newFormElements">
<header>
<h2>New Form Elements</h2>
</header>
<h3>input type=date</h3>
<p>Discussion here...</p>
<footer>
<p>These ideas are from WebForms specification.</p>
</footer>
</section>
</section>
<section id="chapter3">
<header>
<h2>Chapter 3</h2>
</header>
<p>Massive element reference...</p>
</section>
<footer>
<p>Content of this example is not under copyright</p>
</footer>
</body>
</html>
Adding Semantics
Marking Text:
<p>Here comes <mark>marked text</mark> was it obvious?</p>
<p>The new HTML5 specification is in the works. While <mark
style="background-color: red;">many features are not currently
implemented or even well defined</mark> yet, <mark
style="background-color: green;">progress is being made</mark>.
Stay tuned to see more new HTML elements added to your Web documents
in the years to come.</p>
Indicating Dates and Time
<p>Today it is <time>2009-07-08</time> which is an interesting date.</p>
<p>An interesting date/time for SciFi buffs is <time>1999-09-13T[Link]
</time>!</p>
YYYY-MM-DDThh:mm:ssTZD
<p>My first son was born on <time datetime="2006-01-13">Friday the 13th</time>
so it is my new lucky day.</p>
Inserting Figures
Specifying Navigation
<!DOCTYPE html>
<html>
<head>
<body>
<nav>
<h2>Offsite Links</h2>
<a href="[Link]
<a href="[Link] site</a><br>
<a href="[Link] Firm</a><br>
</nav>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<body>
<nav id="mainNav">
<ul>
<li><a href="[Link]">About</a></li>
<li><a href="[Link]">Services</a></li>
<li><a href="[Link]">Contact</a></li>
<li><a href="[Link]">Home</a></li>
</ul>
</nav>
</body>
</html>
HTML5’s Open Media Effort
<video>:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HTML5 video example</title>
</head>
<body>
<h1>Simple Video Examples</h1>
<video src="[Link]
width="640" height="360" controls>
<strong>HTML5 video element not supported</strong>
</video>
<br><br><br>
<video width="640" height="360" controls poster="[Link]">
<source src="[Link] type="video/mp4">
<source src="[Link] type="video/ogg">
<strong>HTML5 video element not supported</strong>
</video>
</body>
</html>
• <audio>:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HTML5 video example</title>
</head>
<body>
<audio src="[Link] controls></audio>
</body>
</html>
<audio controls autobuffer autoplay>
<source src="[Link] type="audio/ogg">
<source src="[Link] type="audio/wav">
</audio>
Client-Side Graphics with <canvas>
• The canvas element is used to render simple graphics such as line art, graphs, and
other custom graphical elements on the client side.
• Initially introduced in the summer of 2004 by Apple in its Safari browser, the
canvas element is now supported in many browsers, including Firefox 1.5+, Opera
9+, and Safari 2+, and as such is included in the HTML5 specification.
<canvas id="canvas" width="300" height="300">
<strong>Canvas Supporting Browser Required</strong>
</canvas>
var canvas = [Link]("canvas");
var context = [Link]("2d");
strokeRect(x,y,width,height)
For e.g: [Link](10,10,150,50);
[Link] = "blue";
[Link](10,10,150,50);
fillRect(x,y,width,height)
[Link](150,30,75,75);
[Link] = "rgb(218,0,0)";
[Link] = "rgba(218,112,214,0.4)"; //opacity added 40%
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HTML5 canvas example</title>
<script type="text/javascript">
[Link] = function() {
var canvas = [Link]("canvas");
var context = [Link]("2d");
[Link] = "blue";
[Link](10,10,200,200);
[Link] = "rgba(218,0,0,0.4)";
[Link](150,30,75,75);
}
</script>
</head>
<body>
<h1>Simple Canvas Examples</h1>
<canvas id="canvas" width="300" height="300">
<strong>Canvas Supporting Browser Required</strong>
</canvas>
</body>
</html>
Internet Explorer up to version 8 will not be able to render the example
without a compatibility library
Drawing and Styling Lines and Shapes
[Link]();
[Link](20,100);
[Link](120,300);
[Link](220,100);
[Link]();
[Link] = "blue";
[Link] = "red";
[Link] = 10;
[Link]();
[Link](200,10);
[Link](200,50);
[Link](380,10);
[Link]();
[Link]();
[Link]();
• A gradient object can be created by using createLinearGradient() or
createRadialGradient().
var lg = [Link](10,150,200,200);
the gradient colors are added using the addColorStop() method.
[Link](0,"#B03060");
[Link](0.75,"#4169E1");
[Link](1,"#FFE4E1");
var lg = [Link](10,150,200,200);
[Link](0,"#B03060");
[Link](0.5,"#4169E1");
[Link](1,"#FFE4E1");
[Link] = lg;
[Link]();
[Link](10,150,200,200);
[Link]();
var rg = [Link](350,300,80,360,250,80);
[Link](0,"#A7D30C");
[Link](0.9,"#019F62");
[Link](1,"rgba(1,159,98,0) ");
[Link] = rg;
[Link]();
[Link](250,150,200,200);
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HTML5 canvas lines and shapes example</title>
<script type="text/javascript">
[Link] = function() {
var canvas = [Link]("canvas");
var context = [Link]("2d");
[Link] = "blue";
[Link] = "red";
[Link] = 10;
[Link]();
[Link](200,10);
[Link](200,50);
[Link](380,10);
[Link]();
[Link]();
[Link]();
var lg = [Link](10, 150, 200, 200);
[Link](0, "#B03060");
[Link](0.5, "#4169E1");
[Link](1, "#FFE4E1");
[Link] = lg;
[Link]();
[Link] (10, 150, 200, 200);
[Link]();
var rg = [Link](50,50,10,60,60,50);
[Link](0, "#A7D30C");
[Link](0.9, "#019F62");
[Link](1, "rgba(1,159,98,0)");
[Link] = rg;
[Link]();
[Link](0,0,130,230);
[Link]();
[Link](250,150);
[Link](330,240);
[Link](410,150);
[Link]();
}
</script>
</head>
<body>
<h1>Simple Shapes on canvas Example</h1>
<canvas id="canvas" width="500" height="500">
<strong>Canvas Supporting Browser Required</strong>
</canvas>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Canvas Cube Example</title>
<style type="text/css" media="screen">
body {background-color: #E67B34;}
</style>
<script type="text/javascript">
[Link] = function(){
var context = [Link]("canvas").getContext("2d");
[Link] = "#fff";
[Link] = "black";
[Link]();
[Link](188,38);
[Link](59,124);
[Link](212,197);
[Link](341,111);
[Link](188,38);
[Link]();
[Link]();
[Link]();
[Link] = "#ccc";
[Link] = "black";
[Link]();
[Link](341,111);
[Link](212,197);
[Link](212,362);
[Link](341,276);
[Link](341,111);
[Link]();
[Link]();
[Link]();
[Link] = "#999";
[Link] = "black";
[Link]();
[Link](59,289);
[Link](59,124);
[Link](212,197);
[Link](212,362);
[Link](59,289);
[Link]();
[Link]();
[Link]();
}
</script>
</head>
<body>
<h1>Canvas Perspective</h1>
<canvas id="canvas" width="400" height="400">
<strong>Canvas Supporting Browser Required</strong>
</canvas>
</body>
</html>
Drawing Arcs and Curves
• Drawing on canvas isn’t limited to simple lines; it is also possible to create curved lines using
arc(), arcTo(), quadraticCurveTo(), and bezierCurveTo().
arc(x,y,radius,startAngle,endAngle,counterclockwise)
[Link](150,150,100,0,[Link]*2,true);
quadraticCurveTo(cpx,cpy,x,y)
[Link](155,130);
[Link](130,145,155,155);
[Link](100,175);
[Link](150,250,200,175);
bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)
[Link](80,110);
[Link](95,85,115,85,130,110);
[Link](170,110);
[Link](185,85,205,85,220,110);
arcTo(x1,y1,x2,y2,radius)
[Link](50,20);
[Link](280,20,280,280,30);
[Link](280,280,20,280,30);
[Link](20,280,20,20,30);
[Link](20,20,280,20,30);
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Canvas Face Example</title>
<script type="text/javascript">
[Link] = function(){
var canvas = [Link]("canvas");
var context = [Link]("2d");
[Link] = "black";
[Link] = 5;
/* create a frame for our drawing */
[Link]();
[Link] = "blue";
[Link](50,20);
[Link](280,20,280,280,30);
[Link](280,280,20,280,30);
[Link](20,280,20,20,30);
[Link](20,20,280,20,30);
[Link]();
[Link]();
/* draw circle for head */
[Link]();
[Link] = "yellow";
[Link](150,150,100,0,[Link]*2,true);
[Link]();
/* draw the eyes, nose and mouth */
[Link]();
[Link](80,110);
[Link](95,85,115,85,130,110);
[Link](170,110);
[Link](185,85,205,85,220,110);
[Link](155,130);
[Link](130,145,155,155);
[Link](100,175);
[Link](150,250,200,175);
[Link](50,20);
[Link]();
}
</script>
</head>
<body>
<h1>Smile you're on canvas</h1>
<canvas id="canvas" width="300" height="300">
<strong>Canvas Supporting Browser Required</strong>
</canvas>
</body>
</html>
Scaling, Rotating, and Translating Drawings
scale(x,y)
/* scale tall and thin */
[Link](.5,1.5);
writeBoxes(context);
/* move short and wide */
[Link](1.75,.2);
writeBoxes(context);
rotate(angle)
/* rotate to the right */
[Link]([Link]/8);
writeBoxes(context);
/* rotate to the left */
[Link](-[Link]/8);
writeBoxes(context);
translate(x,y)
[Link](100,100);
[Link](0,0,100,100);
setTransform(m11,m12,m21,m22,dx,dy)
transform(m11,m12,m21,m22,dx,dy)
m11 m21 dx
m12 m22 dy
001
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>canvas transform() Example</title>
<style type="text/css">
canvas {border: 1px solid black;}
</style>
<script type="text/javascript">
[Link] = function(){
var canvas = [Link]("canvas");
var context = [Link]("2d");
[Link] = "rgba(255,0,0,.4)";
[Link](0,0,100,100);
[Link]();
[Link](1,1,1,0,0,0);
[Link]();
[Link] = "rgba(0,255,0,.4)";
[Link](75,75,100,100);
[Link]();
[Link](0,.5,1,.8,0,0);
[Link]();
[Link] = "rgba(0,0,255,.4)";
[Link](50,50,100,100);
[Link]();
}
</script>
</head>
<body>
<h1>Simple Transforms</h1>
<canvas id="canvas" width="400" height="300">
<strong>Canvas Supporting Browser Required</strong>
</canvas>
</body>
</html>
HTML5 Form Changes
New Form Field Types
• Traditionally, the HTML input element is used to define most form fields. The particular
type of form field of interest is defined with the type attribute, which is set to text,
password, hidden, checkbox, radio, submit, reset, image, or button.
<p><label>color:<input type="color" name="favColor"></label></p>
• A variety of date controls can now be directly created by setting the type attribute to
date, datetime, datetime-local, month, week, or time. Several of these controls are
demonstrated here:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>canvas Text Example</title>
</head>
<body>
<p><label>date:
<input type="date" name="date">
</label></p>
<p><label>datetime:
<input type="datetime" name="datetime">
</label></p>
<p><label>datetime-local:
<input type="datetime-local" name="datetime2">
</label></p>
<p><label>time:
<input type="time" name="time">
</label></p>
<p><label>month:
<input type="month" name="month">
</label></p>
<p><label>week:
<input type="week" name="week">
</label></p>
</body>
</html>
Setting type to number gives you a numeric spin box in conforming browsers:
<p><label>number:<input type="number" name="number"></label></p>
<p><label>number:<input type="number" name="number2" min="-5" max="25"
step="5"></label></p>
<p><label>number:<input type="range" name="range" max="100" min="1"
step="5"></label></p>
<p><label>range (1-100 step 5):
<input type="range" name="range" max="100" min="1" step="5">
Validating Data Entry
<input type="text" name="firstname" id="firstname" required>
<label for="phonenum" class="required">Phone Number:</label>
<input type="text" name="phonenum" id="phonenum" required
pattern="^\(\d{3}\) \d{3}-\d{4}$">
• Autocomplete Lists
<p><label>Favorite Dog: <input type="text" list="dogs"></label></p>
<datalist id="dogs">
<option>Angus</option>
<option>Tucker</option>
<option>Cisco</option>
<option>Sabrina</option>
</datalist>
Emerging Elements and Attributes to
Support Web Applications
• Menu Element Repurposed
<menu type="list" id="oldStyle">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</menu>
<menu type="toolbar" id="fileMenu" label="File">
<li><a href="javascript:newItem();">New</a></li>
<li><a href="javascript:openItem();">Open</a></li>
<li><a href="javascript:closeItem();">Close</a></li>
<hr>
<li><a href="javascript:saveItem();">Save</a></li>
<li><a href="javascript:saveAsItem();">Save as...</a></li>
<hr>
<li><a href="javascript:exitApp();">Exit</a></li>
</menu>
<menu type="context" id="simpleMenu">
<li><a href="javascript:add();">Add</a></li>
<li><a href="javascript:edit();">Edit</a></li>
<li><a href="javascript:delete();">Delete</a></li>
</menu>
command Element
<menu type="command" label="Main Menu">
<command type="command" label="Add" icon="[Link]">
<command type="command" label="Edit" icon="[Link]">
<command type="command" label="Delete" icon="[Link]">
<hr>
<menu type="command" label="Skin" id="skinMenu">
<command type="radio" radiogroup="skin" label="Classic">
<command type="radio" radiogroup="skin" label="Modern" checked>
<command type="radio" radiogroup="skin" label="Neo">
</menu>
<hr>
<command type="checkbox" label="Secure Mode">
</menu>
• Meter and progress Elements
<p>Warp Drive Output: <meter min="0" max="10" low="3"
optimum="7" high="9" value="9.5" title="Captain she can't take
much more of this!"></meter></p>
<p>Progress: <progress id="progressBar" max="100.00" value="33.1">
33.1%</progress></p>
• Details Element
<details onclick="[Link]='open'">
<dt>Help?</dt>
<dd>This could give you help with HTML5 but we need more
implementations to prove how things will work.</dd>
</details>
• Output Element
<form action="#" method="get" id="testform">
<p><input type="date" id="year">
<p>HTML5 released in the year
<output for="year"> </output></p>
</form>
