What is HTML5?
HTML5 will be the new standard for HTML.
The previous version of HTML, HTML 4.01, came in 1999. The
web has changed a lot since then.
HTML5 is still a work in progress. However, the major
browsers support many of the new HTML5 elements and APIs.
How Did HTML5 Get Started?
HTML5 is a cooperation between the World Wide Web Consortium (W3C)
and the Web Hypertext Application Technology Working Group (WHATWG).
WHATWG was working with web forms and applications, and W3C was
working with XHTML 2.0. In 2006, they decided to cooperate and create a new
version of HTML.
Some rules for HTML5 were established:
- New features should be based on HTML, CSS, DOM, and JavaScript
- Reduce the need for external plugins (like Flash)
- Better error handling
- More markup to replace scripting
- HTML5 should be device independent
- The development process should be visible to the public
The HTML5 <!DOCTYPE>
In HTML5 there is only one <!doctype> declaration, and it is
very simple:
<!DOCTYPE html>
Minimum HTML5 Document
Below is a simple HTML5 document, with the minimum of required tags:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<body>
Content of the document......
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<body>
Content of the document......
</body>
</html>
HTML5 - New Features
Some of the most interesting new features in HTML5:
- The <canvas> element for 2D drawing
- The <video> and <audio> elements for media playback
- Support for local storage
- New content-specific elements, like <article>, <footer>, <header>, <nav>, <section>
- New form controls, like calendar, date, time, email, url, search
Browser Support for HTML5
HTML5 is not yet an official standard, and no browsers have full
HTML5 support.
But all major browsers (Safari, Chrome, Firefox, Opera, Internet
Explorer) continue to add new HTML5 features to their latest versions.
HTML5 References
At W3Schools you will find complete references about tags, global
attributes, standard events, and more.
HTML5 New Elements
New Elements in HTML5
The internet, and the use of the internet, has changed a lot since
HTML 4.01 became a standard in 1999.
Today, several elements in HTML 4.01 are obsolete, never used, or
not used the way they were intended. All those elements are removed or
re-written in HTML5.
To better handle today's internet use, HTML5 also includes new
elements for drawing graphics, adding media content, better page structure,
better form handling, and several APIs to drag/drop elements, find Geolocation,
include web storage, application cache, web workers, etc.
The New <canvas> Element
Tag
|
Description
|
<canvas>
|
Used to draw graphics, on the fly, via scripting (usually JavaScript)
|
New Media Elements
Tag
|
Description
|
<audio>
|
Defines sound content
|
<video>
|
Defines a video or movie
|
<source>
|
Defines multiple media resources for <video> and <audio>
|
<embed>
|
Defines a container for an external application or interactive content
(a plug-in)
|
<track>
|
Defines text tracks for <video> and <audio>
|
New Form Elements
Tag
|
Description
|
<datalist>
|
Specifies a list of pre-defined options for input controls
|
<keygen>
|
Defines a key-pair generator field (for forms)
|
<output>
|
Defines the result of a calculation
|
New Semantic/Structural Elements
HTML5 offers new elements for better structure:
Tag
|
Description
|
<article>
|
Defines an article
|
<aside>
|
Defines content aside from the page content
|
<bdi>
|
Isolates a part of text that might be formatted in a different
direction from other text outside it
|
<command>
|
Defines a command button that a user can invoke
|
<details>
|
Defines additional details that the user can view or hide
|
<dialog>
|
Defines a dialog box or window
|
<summary>
|
Defines a visible heading for a <details> element
|
<figure>
|
Specifies self-contained content, like illustrations, diagrams,
photos, code listings, etc.
|
<figcaption>
|
Defines a caption for a <figure> element
|
<footer>
|
Defines a footer for a document or section
|
<header>
|
Defines a header for a document or section
|
<mark>
|
Defines marked/highlighted text
|
<meter>
|
Defines a scalar measurement within a known range (a gauge)
|
<nav>
|
Defines navigation links
|
<progress>
|
Represents the progress of a task
|
<ruby>
|
Defines a ruby annotation (for East Asian typography)
|
<rt>
|
Defines an explanation/pronunciation of characters (for East Asian
typography)
|
<rp>
|
Defines what to show in browsers that do not support ruby annotations
|
<section>
|
Defines a section in a document
|
<time>
|
Defines a date/time
|
<wbr>
|
Defines a possible line-break
|
Removed Elements
The following HTML 4.01 elements are removed from HTML5:
- <acronym>
- <applet>
- <basefont>
- <big>
- <center>
- <dir>
- <font>
- <frame>
- <frameset>
- <noframes>
- <strike>
- <tt>
HTML5 Canvas
The <canvas> element is used to draw graphics, on
the fly, on a web page.
Draw a red rectangle, a gradient rectangle, a multicolor
rectangle, and some multicolor text onto the canvas:
What is Canvas?
The HTML5 <canvas> element is used to draw graphics, on the
fly, via scripting (usually JavaScript).
The <canvas> element is only a container for graphics. You
must use a script to actually draw the graphics.
Canvas has several methods for drawing paths, boxes, circles,
characters, and adding images.
Browser Support
Internet Explorer 9+, Firefox, Opera, Chrome, and Safari support the
<canvas> element.
Note: Internet Explorer 8 and earlier versions, do not
support the <canvas> element.
Create a Canvas
A canvas is a rectangular area on an HTML page, and it is specified
with the <canvas> element.
Note: By default, the <canvas> element has no border
and no content.
The markup looks like this:
<canvas id="myCanvas" width="200"
height="100"></canvas>
Note: Always specify an id attribute (to be referred to in a
script), and a width and height attribute to define the size of the canvas.
Tip: You can have multiple <canvas> elements on one
HTML page.
To add a border, use the style attribute:
Example
<canvas id="myCanvas" width="200"
height="100"
style="border:1px solid #000000;">
</canvas>
style="border:1px solid #000000;">
</canvas>
Draw Onto The Canvas With JavaScript
All drawing on the canvas must be done inside a JavaScript:
Example
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>
Example explained:
First, find the <canvas> element:
var c=document.getElementById("myCanvas");
Then, call its getContext() method (you must pass the string
"2d" to the getContext() method):
var ctx=c.getContext("2d");
The getContext("2d") object is a built-in HTML5 object,
with many properties and methods for drawing paths, boxes, circles, text,
images, and more.
The next two lines draw a red rectangle:
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
ctx.fillRect(0,0,150,75);
The fillStyle property can be a CSS color, a gradient, or a pattern.
The default fillStyle is #000000 (black).
The fillRect(x,y,width,height) method draws a rectangle
filled with the current fill style.
Canvas Coordinates
The canvas is a two-dimensional grid.
The upper-left corner of the canvas has coordinate (0,0)
So, the fillRect() method above had the parameters (0,0,150,75).
This means: Start at the upper-left corner (0,0) and draw a 150x75
pixels rectangle.
Coordinates Example
Mouse over the rectangle below to see its x and y coordinates:
Canvas - Paths
To draw straight lines on a canvas, we will use the following two
methods:
- moveTo(x,y) defines the starting point of the line
- lineTo(x,y) defines the ending point of the line
To actually draw the line, we must use one of the "ink"
methods, like stroke().
Example
Define a starting point in position (0,0), and an ending point in
position (200,100). Then use the stroke() method to actually draw the line:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
To draw a circle on a canvas, we will use the following method:
- arc(x,y,r,start,stop)
To actually draw the circle, we must use one of the "ink"
methods, like stroke() or fill().
Example
Create a circle with the arc() method:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
Canvas - Text
To draw text on a canvas, the most important property and methods
are:
- font - defines the font properties for text
- fillText(text,x,y) - Draws "filled" text on the canvas
- strokeText(text,x,y) - Draws text on the canvas (no fill)
Using fillText():
Example
Write a 30px high filled text on the canvas, using the font
"Arial":
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);
Using strokeText():
Example
Write a 30px high text (no fill) on the canvas, using the font
"Arial":
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.strokeText("Hello World",10,50);
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.strokeText("Hello World",10,50);
Canvas - Gradients
Gradients can be used to fill rectangles, circles, lines, text, etc.
Shapes on the canvas are not limited to solid colors.
There are two different types of gradients:
- createLinearGradient(x,y,x1,y1) - Creates a linear gradient
- createRadialGradient(x,y,r,x1,y1,r1) - Creates a radial/circular gradient
Once we have a gradient object, we must add two or more color stops.
The addColorStop() method specifies the color stops, and its
position along the gradient. Gradient positions can be anywhere between 0 to 1.
To use the gradient, set the fillStyle or strokeStyle property to
the gradient, and then draw the shape, like a rectangle, text, or a line.
Using createLinearGradient():
Example
Create a linear gradient. Fill rectangle with the gradient:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
var ctx=c.getContext("2d");
// Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
Using createRadialGradient():
Example
Create a radial/circular gradient. Fill rectangle with the gradient:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Create gradient
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
var ctx=c.getContext("2d");
// Create gradient
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
Canvas - Images
To draw an image on a canvas, we will use the following method:
- drawImage(image,x,y)
Image to use:
Example
Draw the image onto the canvas:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);
HTML Canvas Reference
For a complete reference of all the properties and methods that can
be used with the Canvas object (with try-it examples on every property and
method), go to our Canvas
Reference.
The HTML <canvas> Tag
Tag
|
Description
|
Used to draw graphics, on the fly, via scripting (usually JavaScript)
|
No comments:
Post a Comment