HTML 5
Introduction
HTML 5 is nothing different
than HTML, it is an advanced & modified version of HTML standers which most
of new browsers supports this standard. HTML 5 has introduced some new tags and
removed some unnecessary tags from the HTML standers.
The first web browser,
Mosaic, was introduced in 1993. A year later Netscape, based on Mosaic, was
introduced and the net began to become popular. HTML was used in both
browsers, but there was no "standard" HTML until the introduction of
HTML 2.0.
HTML 2.0 was first published
in 1995.* HTML 3.0 was published two years later and 4.01 two years
after that. HTML 4.01 has been the work horse of the net ever since.
The first "working
draft" of HTML5 came out in January of 2008 and it already has
surprisingly broad browser support. However HTML5 is not yet fully implemented
and won't be for some years yet.
Two groups, the W3C
and the WHATWG (Web Hypertext Application Technology Working Group), are
in charge of developing HTML5.
In many ways HTML5 is not
all that different that 4.01. Certain tags, such as the <font> tag that
were "deprecated" but worked in HTML 4.01 don't work in HTML5. There
are a number of other odds and ends that have been changed, but they tidy up
old messes rather than introduce fundamental changes.
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
doctype declaration
At
the very top of the page you will see the doctype declaration:
<!DOCTYPE
html>
Like
any language, HTML5 has a grammar and a vocabulary.
Grammar:
<!DOCTYPE
html> goes at the top of every HTML5 page.
Vocabulary:
The
HTML5 word <!DOCTYPE html> means "this page is written in
HTML5"
A
Sample HTML5 Document
<NAV>
tag
The
<nav> tag defines a set of navigation links.
A
Sample HTML5 Document
HTML5
Video
Many
modern websites show videos. HTML5 defines a new element which specifies a
standard way to embed a video/movie on the web page: the <video> element.
In HTML 4.01 or older version browsers shows the videos through a plug-ins
(like flash player).
Example:
·
You should also insert text content between
the <video> and </video> tags for browsers that do not support the <video>
element.
·
The <video> element allows multiple
<source> elements. <source> elements can link to different video
files. The browser will use the first recognized format.
·
The control attribute adds video controls,
like play, pause, and volume.
HTML
Video Tags:
<video>
: Defines a video or movie
<source>
: Defines multiple media resources for media elements, such as <video>
and <audio>
<track>
: Defines text tracks in mediaplayer.
Note:
The <track> tag is not supported in any of the major browsers.
HTML5
Audio
Similarly
to video before HTML5 standard browsers use the plug-ins to play the audio
file. HTML5 defines a new element which specifies a standard way to embed an
audio file on a web page: the <audio> element.
Example:
·
The control attribute adds audio controls,
like play, pause, and volume.
·
You should also insert text content between
the <audio> and </audio> tags for browsers that do not support the
<audio> element.
·
The <audio> element allows multiple
<source> elements. <source> elements can link to different audio
files. The browser will use the first recognized format.
HTML5
Canvas
The
canvas concept was originally introduced by Apple to be used in Mac OS X WebKit
to create dashboard widgets. Before the arrival of canvas, you could only use
drawing APIs in a browser through plug-ins such as Adobe plug-ins for Flash and
Scalable Vector Graphics (SVG), Vector Markup Language (VML) only in Internet
Explorer, or other clever JavaScript hacks.
When
you use a canvas element in your web page, it creates a rectangular area on the
page. By default, this rectangular area is 300 pixels wide and 150 pixels high,
but you can specify the exact size and set other attributes for your canvas
element.
A
Basic Canvas Element:
<canvas></canvas>
Once
you have added a canvas element to your page, you can use JavaScript to
manipulate it any way you want. You can add graphics, lines and text to it, you
can draw on it, and you can even add advanced animations to it.
The
canvas API supports the same two-dimensional drawing operations that most
modern operating systems and frameworks support.
To
programmatically use a canvas, you have to first get its context. You can then
perform actions on the context and finally apply those actions to the context.
You can then perform actions on the context and finally apply those actions to
the context.
Canvas
Coordinates
Canvas
coordinates start at x=0, y=0 in the upper-left corner, which we will refer to
as the origin and increase (in pixels) horizontally over the x-axis and
vertically over the y-axis.
Adding
a Canvas to a page
Adding
a canvas element in an HTML page is pretty straight-forward.
Example:
<canvas
id="diagonal" style="border: 1px solid;"
width="200" height="200"></canvas>
Note the addition of the
ID="diagonal" to make it easy to locate this canvas element
programmatically. An ID attribute is crucial to any canvas because all the
useful operations on this element must be done through scripting.
Script
code for Example canvas:
<script>
function
drawDiagonal(){
//Get the canvas element and its drawing
context
var canvas = document.getElementById('diagonal');
var context = canvas.getContext('2d');
//Create a path in absolute coordinates
context.beginPath();
context.moveTo(70,140);
context.lineTo(140,70);
//Stroke the line onto the canvas
context.stroke();
}
window.addEventListener("load",
drawDiagonal, true);
</script>
The drawing methods moveTo() and lineTo()
do not actually create the line; you finalize a canvas operation and draw the
line by calling the context.stroke() method.
Lets
examine the JavaScript code used to create the diagonal line. It is a simple
example, but it captures the essential flow of working with the Canvas API. You
should know the detail of Canvas API for further drawing advance at canvas.
HTML5
Scalable Vector Graphics (SVG)
Vector
graphics are quite different. Vector graphics represent images with
mathematical descriptions of geometry. A vector image contains all of the
information needed to draw an image from high-level geometric objects such as
lines and shapes.
As
you can tell by the name, SVG is an example of vector graphics.
When
you magnify, rotate, or otherwise transform SVG content, all of the lines
making up the image are crisply redrawn. SVG scales without losing quality.
Example:
Adding SVG to Page
<!doctype
html>
<svg
width="200" height="200">
</svg>
Adding
Simple Shapes to the SVG:
The
SVG language includes basic shape elements such as rectangles, circles, and
ellipses. The size and position of shape elements are defined with attributes.
For rectangles, these are width and height.
Exmaple:
<!doctype
html>
<svg
width="200" height="200">
<rect
x="10" y="20" width="100" height="80"
stroke="red" fill="#ccc" />
<circle
cx="120" cy="80" r="40" stroke="#00f"
fill="none" stroke-width="8" />
</svg>
Transforming
SVG Elements
There
are organizational elements in SVG intended to combine multiple elements so
that they can be transformed or linked to as units. The <g> element
stands for “group.” Groups can be used to combine multiple related elements. As
a group, they can be referred to by a common ID. A group can also be transformed
as a unit. If you add a transform attribute to a group, all of that group’s
contents are transformed. The transform attribute can include commands to
rotate, translate, scale, and skew.
Example:
<svg
width="200" height="200">
<g
transform="translate(60,0) rotate(30) scale(0.75)"
id="ShapeGroup">
<rect
x="10" y="20" width="100" height="80"
stroke="red" fill="#ccc" />
<circle
cx="120" cy="80" r="40" stroke="#00f"
fill="none" stroke-width="8" />
</g>
</svg>
Reusing
Content:
SVG has a <defs> element for defining
content for future use. It also has an element named <use> that you can
link to your definitions. This lets you reuse the same content multiple times
and eliminate redundancy. Figure below shows a group used three times at
different transformed positions and scales. The group has the id ShapeGroup,
and it contains a rectangle and a circle. The actual rectangle and circle shapes
are just defined the one time inside of the <defs> element. The defined
group is not, by itself, visible. Instead, there are three <use> elements
linked to the shape group, so three rectangles and three circles appear
rendered on the page.
Example:
<svg
width="200" height="200">
<defs>
<g
id="ShapeGroup">
<rect
x="10" y="20" width="100" height="80"
stroke="red" fill="#ccc" />
<circle
cx="120" cy="80" r="40" stroke="#00f"
fill="none" stroke-width="8" />
</g>
</defs>
<use
xlink:href="#ShapeGroup" transform="translate(60,0)
scale(0.5)"/>
<use
xlink:href="#ShapeGroup" transform="translate(120,80)
scale(0.4)"/>
<use
xlink:href="#ShapeGroup" transform="translate(20,60)
scale(0.25)"/>
</svg>
SVG
Text:
SVG also supports text. Text in SVG is
selectable within the browser (see Figure 3-11). Should they choose to, browsers
and search engines could also allow users to search for text inside of SVG text
elements. This has major usability and accessibility benefits.
SVG Text has attributes that are similar to
CSS style rules for HTML.
Example:
<svg
width="600" height="200">
<text
x="10" y="80"
font-family="Droid
Sans"
stroke="#00f"
fill="#0ff" font-size="40px"
font-weight="bold">
Select
this text!
</text>
</svg>
