Scribd
Upload
33 views

Title of The Document

This document provides information on HTML5 including: 1. New tags such as <video>, <audio>, <canvas> and semantic elements like <header>, <footer>, <nav>. 2. The <canvas> element allows dynamic drawing via JavaScript. It is used to draw paths, boxes, circles, text and images. 3. HTML5 introduces new form elements like <datalist> and <output>. It also removes obsolete elements such as <center> and <font>.

Uploaded by

enjoylife0290
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
33 views

Title of The Document

This document provides information on HTML5 including: 1. New tags such as <video>, <audio>, <canvas> and semantic elements like <header>, <footer>, <nav>. 2. The <canvas> element allows dynamic drawing via JavaScript. It is used to draw paths, boxes, circles, text and images. 3. HTML5 introduces new form elements like <datalist> and <output>. It also removes obsolete elements such as <center> and <font>.

Uploaded by

enjoylife0290
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

Minimum HTML 5 Tags:-

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>

<body>
The content of the document......
</body>

</html>
New Features of HTML 5:-
1. The <canvas> element for 2D drawing.
2. The <video> and <audio> elements for media playback.
3. Support for local storage.
4. New content-specific elements, like <article>, <footer>, <header>, <nav>, <section>.
5. New form controls, like calendar, date, time, email, url, search.
Today, some elements in HTML 4.01 are obsolete, never used, or not used the way they were
intended. These elements are removed or re-written in HTML5.
New Semantics/Structural Elements:-
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
<hgroup> Groups a set of <h1> to <h6> elements when a heading has multiple levels
<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
New Media Elements:-
<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>
<canvas> Used to draw graphics, on the fly, via scripting (usually JavaScript)
New Form Elements:-
<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
Removed Elements:-
1. <acronym>
2. <applet>
3. <basefont>
4. <big>
5. <center>
6. <dir>
7. <font>
8. <frame>
9. <frameset>
10. <noframes>
11. <strike>
12. <tt>
HTML 5 CANVAS:-
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.

Create a Canvas
A canvas is a rectangular area on an HTML page, and it is specified with the <canvas> element.
By default, the <canvas> element has no border and no content.
The markup looks like this:
<canvas id="myCanvas" width="200" height="100"></canvas>
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.
You can have multiple <canvas> elements on one HTML page. To add a border, use the style
attribute:
Eg:- <canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>

All drawing on the canvas must be done inside a JavaScript
Eg:- <script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>
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);
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.
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().
Eg: var c=document.getElementById("myCanvas");
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().
Eg: var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
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)
Eg: Filltext:-
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);
Eg: Stroketext:-
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.strokeText("Hello World",10,50);
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.

HTML 5 Inline SVG:-
SVG stands for Scalable Vector Graphics
SVG is used to define vector-based graphics for the Web
SVG defines the graphics in XML format
SVG graphics do NOT lose any quality if they are zoomed or resized
Every element and every attribute in SVG files can be animated
SVG is a W3C recommendation
HTML 5 Drag and Drop:-
Drag and drop is a very common feature. It is when you "grab" an object and drag it to a different
location.In HTML5, drag and drop is part of the standard, and any element can be draggable.

You might also like