Html5

What is HTML5 ?
●

Html5 is the latest technology of the HTML standard(originally
created in 1990).

●

Html5 is an improvement of HTML4.0 and XHTML1.0.

●

Work started in 2003 by W3C and WHATWG.

●

●

●

A change from document markup language to web application
language.
An attempt to enhance the functionality and flexibility of the web.
Html5 is language for structuring and presenting content for the
World Wide Web.

New in HTML5 Features:
●
●

●
●

●

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

HTML5 Canvas
●

●

●

●

●

A canvas is a rectangular area on an HTML page, and it is
specified with the <canvas> element.
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,
text, and adding images.
The markup looks like this:
<canvas id="myCanvas" width="200" height="100"></canvas>

Note: By default, the <canvas> element has no border and no
content.

Canvas Coordinates
●

The canvas is a two-dimensional grid.

●

The upper-left corner of the canvas has coordinate (0,0) .

●

Example: Suppose we have parameters of a rectangle
as(0,0,150,75):
This means: Start at the upper-left corner (0,0) and draw a
150x75 pixels rectangle.

●
●

●

Example:
Result

Canvas – Paths
(straight line)
●

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().

Canvas – Paths
(straight line)
●

Example:
at (200,200).

Draw a straight line starting from (0,0) and ending

Canvas – Paths
(straight line)
●

Output:

Canvas – Paths
(circle)
●

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().

Canvas – Paths
(circle)
●

Example: To create a circle with the arc method.

Canvas – Paths
(circle)

●

Output:

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)

Canvas - Text
●

Example: Using filltext():

What is 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 re
sized

●

Every element and every attribute in SVG files can be animated

●

SVG is a W3C recommendation

SVG Advantages
●

Advantages of using SVG over other image formats (like
JPEG and GIF) are:

-These can be created and edited with any text editor
- Can be searched, indexed, scripted, and compressed
- Are scalable
- Can be printed with high quality at any resolution
- Are zoom able

SVG Shape Elements
●

SVG has some predefined shape elements that can be used by
developers:
- Rectangle <rect>
- Circle <circle>
- Ellipse <ellipse>
- Line <line>
- Polyline <polyline>
- Polygon <polygon>
- Path <path>

HTML5 Drag and Drop
●

●

In HTML5, drag and drop is part of the standard, and any
element can be drag gable.
Make an Element Drag gable
<img draggable="true">

●

The dataTransfer.setData() method sets the data type and the
value of the dragged data:
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

HTML5 Geolocation
●

●

●

●

The HTML5 Geolocation API is used to get the geographical
position of a user.
this can compromise user privacy, the position is not available
unless the user approves it.
In HTML5 the getCurrentPosition() method is used to get the
user's position.
Geolocation is mainly used for the following purposes:
1. Displaying the Result in a Map
2. Location-specific Information
3. Handling Errors and Rejections

HTML5 VIDEO
●

●

●

HTML5 defines a new element which specifies
a standard way to embed a video/movie on a
web page: the <video> element.
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.

HTML Sounds / Audio
●

The HTML5 <audio> tag defines sound, such as music or other
audio streams.

●

The <audio> element works in all modern browsers.

●

Example:

HTML5 Input Types
●

HTML5 has several new input types for forms.

●

Some of them are:
- color
- date
- email
- number
- range
- time

●

These new features allow better input control and validation.

HTML5 Form Elements
●

HTML5 has the following new form elements:
- <datalist>
- <keygen>
- <output>

HTML5 <datalist> Element
●

●

●

●

●

The <datalist> element specifies a list of pre-defined options for
an <input> element.
The <datalist> element is used to provide an "autocomplete"
feature on <input> elements.
Users will see a drop-down list of pre-defined options as they
input data.
Use the <input> element's list attribute to bind it together with a
<datalist> element.
Example: <input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
</datalist>

HTML5 <keygen> Element
●

●

●

●

●

●

The purpose of the <keygen> element is to provide a secure
way to authenticate users.
The <keygen> tag specifies a key-pair generator field in a form.
When the form is submitted, two keys are generated, one
private and one public.
The private key is stored locally, and the public key is sent to
the server.
The public key could be used to generate a client certificate to
authenticate the user in the future.
Example:

<form action="demo_keygen.asp" method="get">
Username: <input type="text" name="usr_name">
Encryption: <keygen name="security">
<input type="submit">
</form>

HTML5 <output> Element
●

●

The <output> element represents the result of a calculation (like
one performed by a script).
Example:
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100 +
<input type="number" id="b" value="50">=
<output name="x" for="a b"></output>
</form>

HTML5 Form Attributes
●

HTML5 has several new attributes for <form> and <input>.

●

New attributes for <form>:
- autocomplete
- novalidate

●

New attributes for <input>:
- autocomplete

- height and width

- autofocus

- list

- form

- min and max

- formaction

- multiple

- formmethod

- pattern

- formnovalidate

- step

HTML5 Semantic Elements
●

●

A semantic element clearly describes its meaning to both the
browser and the developer.
HTML5 offers new semantic elements to clearly define different
parts of a web page:
- <header>
- <nav>
- <section>
- <article>
- <aside>
- <figcaption>
- <figure>
- <footer>

HTML5 Web Storage
●

●

●

●

●

●

With HTML5, web pages can store data locally within the user's
browser.
Web Storage is more secure and faster.
The data is not included with every server request, but used
ONLY when asked for.
It is also possible to store large amounts of data, without
affecting the website's performance.
It is also possible to store large amounts of data, without
affecting the website's performance.
There are two new objects for storing data on the client:
- localStorage - stores data with no expiration date
- sessionStorage - stores data for one session

The localStorage Object
●

●

●

The localStorage object stores the data with no
expiration date.
The data will not be deleted when the browser
is closed, and will be available the next day,
week, or year.
Example:

localStorage.lastname="Smith";
document.getElementById("result").innerHTML="Last name: "+
localStorage.lastname

The sessionStorage Object
●

●

The sessionStorage object is equal to the localStorage object,
except that it stores the data for only one session. The data is
deleted when the user closes the browser window.
Example:
if (sessionStorage.clickcount)
sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
else
sessionStorage.clickcount=1;
document.getElementById("result").innerHTML="You have clicked the button
" + sessionStorage.clickcount + " time(s) in this session.";

HTML5 Application Cache
●

●

●

●

●

HTML5 introduces application cache, which means that a web
application is cached, and accessible without an internet
connection.
Application cache gives an application three advantages:
Offline browsing - users can use the application when they're
offline
Speed - cached resources load faster
Reduced server load - the browser will only download
updated/changed resources from the server

HTML5 Web Workers
●

●

●

A web worker is a JavaScript running in the background,
without affecting the performance of the page.
You can continue to do whatever you want: clicking, selecting
things, etc., while the web worker runs in the background.
Since web workers are in external files, they do not have
access to the following JavaScript objects:
- The window object
- The document object
- The parent object

Html5

More Related Content

What's hot (20)

Viewers also liked (15)

Similar to Html5 (20)

Recently uploaded (20)

Html5