HTML5 -Sematics, Graphicsd - SVG, Canvas, Google Maps, HTML5 API - Geolocation, Drag and Drop, Local Storage, Web workers, SSE

1. Introduction to
HTML5

2. A Rough History of Web Standards
91-92 93-94 95-96 97-98 99-00 01-02 03-04 05-06 07-08 09-10 11-12 13-14
HTML 1 HTML 2 HTML 4 XHTML
1
HTML 5
CSS 1 CSS 2 T-less D Web 2.0 CSS3
JS ECMA,
DOM
DOM 2 Ajax DOM,
APIs
2004 WHATWG started
2008 W3C Working Draft
2012 (2010) W3C Candidate
Rec
2022 W3C Rec
1996 – CSS 1 W3C Rec
1998 – CSS 2 W3C Rec
1999 – CSS 3 Proposed
2005 – CSS 2.1 W3C Candidate Rec
2001 – CSS 3 W3C Working Draft
HTML 5 CSS

3. History of HTML
HTML first published1991
2012
2002 -2009
2000
HTML 2.0
HTML 3.2
HTML 4.01
XHTML 1.0
XHTML 2.0
HTML5
1995
1997
1999
HTML5 is much more tolerant and can
handle markup from all the prior versions.
Though HTML5 was published officially in 2012, it
has been in development since 2004.
After HTML 4.01 was released, focus
shifted to XHTML and its stricter standards.
XHTML 2.0 had even stricter standards
than 1.0, rejecting web pages that did not
comply. It fell out of favor gradually and
was abandoned completely in 2009.

4. What is HTML5
HTML5 is the new standard for HTML. Only recently gaining partial
support by the makers of web browsers.
The previous version of HTML was – HTML 4.01, came in 1999.
HTML5 is designed to deliver almost everything you want to do online
without requiring additional plugins. It does everything from animation
to apps, music to movies, and can also be used to build complicated
applications that run in your browser.
HTML5 is also cross-platform (it does not care whether you are using
a tablet or a smartphone, a notebook, notebook or a Smart TV).

5. What is HTML5?
 It incorporates all features from earlier versions of HTML,
including the stricter XHTML.
 It adds a diverse set of new tools for the web developer
to use.
 It is still a work in progress. No browsers have full
HTML5 support. It will be many years – perhaps not
until 2018 or later - before being fully defined and
supported.

6. HTML5: Origins
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.

7. History of HTML5
• From 1991 to 1999, HTML developed from version 1 to version 4.
• In year 2000, the World Wide Web Consortium (W3C) recommended XHTML 1.0. The
XHTML syntax was strict, and the developers were forced to write valid and "well-formed"
code.
• In 2004, W3C's decided to close down the development of HTML, in favor of XHTML.
• In 2004, WHATWG (Web Hypertext Application Technology Working Group) was formed.
The WHATWG wanted to develop HTML, consistent with how the web was used, while
being backward compatible with older versions of HTML.
• In 2004 - 2006, the WHATWG gained support by the major browser vendors.
• In 2006, W3C announced that they would support WHATWG.
• In 2008, the first HTML5 public draft was released.
• In 2012, WHATWG and W3C decided on a separation:
• WHATWG wanted to develop HTML as a "Living Standard". A living standard is always
updated and improved. New features can be added, but old functionality cannot be
removed.
• The WHATWG HTML5 Living Standard was published in 2012, and is continuously
updated.
• W3C wanted to develop a definitive HTML5 and XHTML standard.
• The W3C HTML5 recommendation was released 28 October 2014.
• W3C also published an HTML 5.1 Candidate Recommendation on 21 June 2016.

8. Goals of HTML5
 Support all existing web pages. With HTML5, there is no
requirement to go back and revise older websites.
 Reduce the need for external plugins and scripts to show
website content.
 Improve the semantic definition (i.e. meaning and
purpose) of page elements.
 Make the rendering of web content universal and
independent of the device being used.
 Handle web documents errors in a better and more
consistent fashion.

9. Differences Between HTML4 &
HTML5
1. HTML5 is a work in progress
2. Simplified Syntax
3. The New <canvas> Element for 2D drawings
4. New content-specific elements, like <article>, <header>, <footer>,
<nav>, <section>
5. New <menu> and <figure> Elements
6. New <audio> and <video> Elements
7. New form controls, like calendar, date, time, email, url, search
8. No More <frame>, <center>, <big>, and <b>, <font>
9. Support for local storage

10. Removed Elements
The following HTML 4.01 elements are removed from HTML5:
<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<noframes>
<strike>
<tt>

11. New Elements in HTML5
<figcaption>
<footer>
<header>
<hgroup>
<mark>
<nav>
<progress>
<section>
<source>
<svg>
<time>
<video>
These are just some of the new elements introduced in HTML5. We
will be exploring each of these during this course.
<article>
<aside>
<audio>
<canvas>
<datalist>
<figure>

12. Other New Features in HTML5
 Built-in audio and video support (without plugins)
 Enhanced form controls and attributes
 The Canvas (a way to draw directly on a web page)
 Drag and Drop functionality
 Support for CSS3 (the newer and more powerful version
of CSS)
 More advanced features for web developers, such as
data storage and offline applications.

13. First Look at HTML5
Remember the DOCTYPE declaration from XHTML?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
In HTML5, there is just one possible DOCTYPE declaration and it is simpler:
<!DOCTYPE html>
Just 15 characters!
The DOCTYPE tells the browser which type and version of document to
expect. This should be the last time the DOCTYPE is ever changed. From
now on, all future versions of HTML will use this same simplified declaration.

14. The <html> Element
This is what the <html> element looked like in XHTML:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
lang="en">
Again, HTML5 simplifies this line:
<html lang="en">
Each of the world’s major languages has a two-character code, e.g. Spanish = "es",
French = "fr", German = "de", Chinese = "zh", Arabic = "ar".
The lang attribute in the <html> element declares which language the page
content is in. Though not strictly required, it should always be specified, as it
can assist search engines and screen readers.

15. The <head> Section
Here is a typical XHTML <head> section:
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title>My First XHTML Page</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
And the HTML5 version:
Notice the simplified character set declaration, the shorter CSS stylesheet link
text, and the removal of the trailing slashes for these two lines.
<head>
<meta charset="utf-8">
<title>My First HTML5 Page</title>
<link rel="stylesheet" href="style.css">
</head>

16. Basic HTML5 Web Page
Putting the prior sections together, and now adding the <body> section and
closing tags, we have our first complete web page in HTML5:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My First HTML5 Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>HTML5 is fun!</p>
</body>
</html>
Let's open this page in a web browser to see how it looks…

17. Viewing the HTML5 Web Page
Even though we used HTML5, the page looks exactly the same in a web
browser as it would in XHTML. Without looking at the source code, web
visitors will not know which version of HTML the page was created with.

18. Semantics
 Semantic elements = elements with a
meaning.
 What are Semantic Elements?
A semantic element clearly describes its
meaning to both the browser and the
developer.

19. HTML5: What's New
HTML5 offers new semantic elements to define different
parts of a web page

20. <section> element
 The <section> element defines a section
in a document.
 According to W3C's HTML5
documentation: "A section is a thematic
grouping of content, typically with a
heading."

21. <article> element
 The <article> element specifies independent,
self-contained content.
 An article should make sense on its own, and it
should be possible to read it independently from
the rest of the web site.
 Examples of where an <article> element can be
used:
 Forum post
 Blog post
 Newspaper article

22. <header> element
 The <header> element specifies a header
for a document or section.
 The <header> element should be used as
a container for introductory content.
 You can have several <header> elements
in one document.

23. <footer> element
 The <footer> element specifies a footer for
a document or section.
 A <footer> element should contain
information about its containing element.
 A footer typically contains the author of the
document, copyright information, links to
terms of use, contact information, etc.

24. <nav> Element
 The <nav> element defines a set of
navigation links.
 Notice that NOT all links of a document
should be inside a <nav> element. The
<nav> element is intended only for major
block of navigation links.

25. <aside> element
 The <aside> element defines some
content aside from the content it is placed
in (like a sidebar).

26. <figure> & <figcaption> elements
 The purpose of a figure caption is to add a
visual explanation to an image.
 In HTML5, an image and a caption can be
grouped together in a <figure> element
 The <img> element defines the image, the
<figcaption> element defines the caption.

27. Tag Description
<article> Defines an article
<aside> Defines content aside from the page content
<details> Defines additional details that the user can view or hide
<figcaption> Defines a caption for a <figure> element
<figure>
Specifies self-contained content, like illustrations,
diagrams, photos, code listings, etc.
<footer> Defines a footer for a document or section
<header> Specifies a header for a document or section
<main> Specifies the main content of a document
<mark> Defines marked/highlighted text
<nav> Defines navigation links
<section> Defines a section in a document
<summary> Defines a visible heading for a <details> element
<time> Defines a date/time

28. <article> <section> and <div>
 In the HTML5 standard, the <section>
element is defined as a block of related
elements.
 The <article> element is defined as a
complete, self-contained block of related
elements.
 The <div> element is defined as a block of
children elements.

29. HTML5: Input types
HTML5 has several new input types for forms.
> email
> url
> number
> range
> date pickers (date, month, week, time,
datetime, datetime-local)
> search
> color

30. HTML5: Input types
Note: Opera has the best support for the new input types.
However, you can already start using them in all major browsers. If
they are not supported, they will behave as regular text fields.

31. HTML5: Input - e-mail
The email type is used for input fields that should
contain an e-mail address.
The value of the email field is automatically validated
when the form is submitted.
E-mail: <input type="email" name="user_email" />
Tip: Safari on the iPhone recognizes the email input
type, and changes the on-screen keyboard to match
it (adds @ and .com options).

32. HTML5: Input - url
The url type is used for input fields that should
contain a URL address.
The value of the url field is automatically validated
when the form is submitted.
Homepage: <input type="url" name="user_url" />
Tip: Safari on the iPhone recognizes the url input
type, and changes the on-screen keyboard to match
it (adds .com option).

33. HTML5: Input - number
The number type is used for input fields that should
contain a numeric value.
Set restrictions on what numbers are accepted:
Points: <input type="number" name="points" min="1"
max="10" />

34. HTML5: Input - range
The range type is used for input fields that should
contain a value from a range of numbers.
The range type is displayed as a slider bar.
You can also set restrictions on what numbers are
accepted:
<input type="range" name="points" min="1"
max="10" />

35. HTML5: Input – date pickers
HTML5 has several new input types for selecting
date and time:
> date - Selects date, month and year
> month - Selects month and year
> week - Selects week and year
> time - Selects time (hour and minute)
> datetime - Selects time, date, month and year
> datetime-local - Selects time, date, month and
year (local time)

36. HTML5: Input - search
The search type is used for search fields
like a site search or Google search.
The search field behaves like a regular
text field.

37. HTML5: Input – color picker
The color type is used for input fields that
should contain a color.
This input type will allow you to select a
color from a color picker:
Color: <input type="color" name="user_color" />

38. HTML5 Form Elements
HTML5 has the following new form elements:
<datalist>
<keygen>
<output>

39. 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.

40. 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.
 /^[789]d{9}$/

41. HTML5: Output element
The output element is used for different types
of output, like calculations or script output

42. HTML5: Form attributes

43. HTML5 Multimedia

44. What is Multimedia?
 Multimedia on the web is sound, music, videos,
movies, and animations.
 Multimedia comes in many different formats. It
can be almost anything you can hear or see.
 Examples: Images, music, sound, videos, records,
films, animations, and more.
 Web pages often contain multimedia elements
of different types and formats.

45. Multimedia Formats
 Multimedia elements (like audio or video) are
stored in media files.
 The most common way to discover the type of a
file, is to look at the file extension.
 Multimedia files have formats and different
extensions like: .swf, .wav, .mp3, .mp4, .mpg,
.wmv, and .avi.

46. Format File Description
MPEG
.mpg
.mpeg
MPEG. Developed by the Moving Pictures Expert Group. The first
popular video format on the web. Used to be supported by all
browsers, but it is not supported in HTML5 (See MP4).
AVI .avi
AVI (Audio Video Interleave). Developed by Microsoft. Commonly
used in video cameras and TV hardware. Plays well on Windows
computers, but not in web browsers.
WMV .wmv
WMV (Windows Media Video). Developed by Microsoft. Commonly
used in video cameras and TV hardware. Plays well on Windows
computers, but not in web browsers.
QuickTime .mov
QuickTime. Developed by Apple. Commonly used in video cameras
and TV hardware. Plays well on Apple computers, but not in web
browsers. (See MP4)
RealVideo
.rm
.ram
RealVideo. Developed by Real Media to allow video streaming with
low bandwidths. It is still used for online video and Internet TV, but
does not play in web browsers.
Flash
.swf
.flv
Flash. Developed by Macromedia. Often requires an extra
component (plug-in) to play in web browsers.
Ogg .ogg
Theora Ogg. Developed by the Xiph.Org Foundation. Supported by
HTML5.
WebM .webm
WebM. Developed by the web giants, Mozilla, Opera, Adobe, and
Google. Supported by HTML5.
MPEG-4
or MP4
.mp4
MP4. Developed by the Moving Pictures Expert Group. Based on
QuickTime. Commonly used in newer video cameras and TV
hardware. Supported by all HTML5 browsers. Recommended by
YouTube.

47. HTML5: Audio
Until now, there has never been a standard for
playing audio on a web page.
Today, most audio is played through a plugin (like
Flash). However, not all browsers have the same
plugins.
HTML5 specifies a standard way to include audio,
with the audio element. The audio element can play
sound files, or an audio stream.

48. <audio> element
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
The controls attribute adds audio controls, like play, pause, and volume.
The <source> element allows you to specify alternative audio files which the
browser may choose from. The browser will use the first recognized format.
The text between the <audio> and </audio> tags will only be displayed in
browsers that do not support the <audio> element.

49. HTML5: Audio
<!DOCTYPE HTML>
<html>
<body>
<audio src="song.ogg" controls="controls">
Your browser does not support the audio element.
</audio>
</body>
</html>

50. HTML5: Audio
Currently, there are 3 supported formats
for the audio element:

51. HTML5: Audio
An Ogg file will work in Firefox, Opera
and Chrome.
To make the audio work in Safari, the
audio file must be of type MP3 or Wav.
The audio element allows multiple source
elements. Source elements can link to
different audio files. The browser will use
the first recognized format.

52. HTML5: Audio
Another fact: Internet Explorer 8 does not
support the audio element. In IE 9, there
will be support for audio element.

53. HTML5: Audio

54. HTML5: Video
Until now, there hasn't been a standard
for showing video on a web page.
Today, most videos are shown through a
plugin (like Flash). However, not all
browsers have the same plugins.
HTML5 specifies a standard way to
include video with the video element.

55. HTML5: Video
Currently, there are 3 supported video
formats for the video element:

56. HTML5: Video
<!DOCTYPE HTML>
<html>
<body>
<video src="movie.ogg" width="320" height="240"
controls="controls">
Your browser does not support the video tag.
</video>
</body>
</html>

57. HTML5: Video
<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg" />
<source src="movie.mp4" type="video/mp4" />
<source src="movie.webm" type="video/webm" />
Your browser does not support the video tag.
</video>

58. How it Works
 The controls attribute adds video controls, like
play, pause, and volume.
 It is a good idea to always include width and
height attributes. If height and width are not set,
the page might flicker while the video loads.
 The <source> element allows you to specify
alternative video files which the browser may
choose from. The browser will use the first
recognized format.

59. HTML5: Video
An Ogg file will work in Firefox, Opera and Chrome.
To make the video work in Safari and future versions
of Chrome, we must add an MPEG4 and WebM file.
The video element allows multiple source elements.
Source elements can link to different video files. The
browser will use the first recognized format:

60. <track> Tag
 The <track> tag specifies text tracks for
media elements (<audio> and <video>).
 This element is used to specify subtitles,
caption files or other files containing text,
that should be visible when the media is
playing.

61. Syntax
<video width="320" height="240" controls>
<source src="forrest_gump.mp4" type="video/mp4">
<source src="forrest_gump.ogg" type="video/ogg">
<track src="subtitles_en.vtt" kind="subtitles" srclang="en"
label="English">
<track src="subtitles_no.vtt" kind="subtitles" srclang="no"
label="Norwegian">
</video>

62. Attribute Value Description
default default
Specifies that the track is to be
enabled if the user's preferences do
not indicate that another track would
be more appropriate
kind
captions
chapters
descriptions
metadata
subtitles
Specifies the kind of text track
label text Specifies the title of the text track
src URL
Required. Specifies the URL of the
track file
srclang language_code
Specifies the language of the track
text data (required if kind="subtitles")

63. HTML5: Video
<sarcasm>Surprising fact...</sarcasm>
Internet Explorer 8 does not support the
video element. In IE 9, there will be
support for video element using MPEG4.

64. HTML5: Video

65. HTML Plug-ins(Helpers)
 The purpose of a plug-in is to extend the functionality of
a web browser.
 Helper applications (plug-ins) are computer programs
that extend the standard functionality of a web browser.
 Examples of well-known plug-ins are Java applets.
 Plug-ins can be added to web pages with the <object>
tag or the <embed> tag.
 Plug-ins can be used for many purposes: display maps,
scan for viruses, verify your bank id, etc.

66. The <object> Element
 The <object> element is supported by all
browsers.
 The <object> element defines an embedded
object within an HTML document.
 It is used to embed plug-ins (like Java applets,
PDF readers, Flash Players) in web pages

67. Syntax
 <object width="400" height="50“ data="bookmark.swf"></object>
 The <object> element can also be used to include HTML in HTML:
 <object width="100%" height="500px" data="snippet.html"></object>
 Or images if you like:
 <object data="audi.jpeg"></object>

68. The <embed> Element
 The <embed> element is supported in all major
browsers.
 The <embed> element also defines an embedded object
within an HTML document.
 Web browsers have supported the <embed> element for
a long time. However, it has not been a part of the HTML
specification before HTML5.

69. Syntax
 <embed width="400" height="50" src="bookmark.swf">
 The <embed> element can also be used to include
HTML in HTML:
 <embed width="100%" height="500px" src="snippet.html">
 Or images if you like:
 <embed src="audi.jpeg">

70. HTML YouTube
 To convert your videos to different formats
to make them play in all browsers.
 Converting videos to different formats can
be difficult and time-consuming.

71. Syntax
 <iframe width="420" height="315"
src="https://www.youtube.com/embed/XGSy3_C
zz8k">
</iframe>

72. Playing a YouTube Video in HTML
 To play your video on a web page, do the following:
 Upload the video to YouTube
 Take a note of the video id
 Define an <iframe> element in your web page
 Let the src attribute point to the video URL
 Use the width and height attributes to specify the
dimension of the player
 Add any other parameters to the URL

73. YouTube Autoplay
 You can have your video start playing automatically when a user
visits that page by adding a simple parameter to your YouTube
URL.
 Value 0 (default): The video will not play automatically when the
player loads.
 Value 1: The video will play automatically when the player loads.
 <iframe width="420" height="315"
src="https://www.youtube.com/embed/XGSy3_Czz8k?autoplay=1">
</iframe>

74. YouTube Playlist & Loop
 A comma separated list of videos to play .
 Loop
 Value 0 (default): The video will play only once.
 Value 1: The video will loop (forever).
<iframe width="420" height="315"
src="https://www.youtube.com/embed/XGSy3_Czz8k?
playlist=XGSy3_Czz8k&loop=1">
</iframe>

75. YouTube Controls
 Value 0: Player controls does not display.
 Value 1 (default): Player controls display.
 <iframe width="420" height="315"
src="https://www.youtube.com/embed/XGSy3_Czz8k?controls=0">
</iframe>

76. YouTube - Using <object> or <embed>
 YouTube <object> and <embed> were deprecated from
January 2015. You should migrate your videos to use
<iframe> instead.
 <object width="420" height="315"
data="https://www.youtube.com/embed/XGSy3_Czz8k">
</object>
 Or
 <embed width="420" height="315"
src="https://www.youtube.com/embed/XGSy3_Czz8k">

77. HTML5 Canvas

78. HTML5: Canvas
The HTML5 canvas element uses
JavaScript to draw graphics on a web
page.
A canvas is a rectangular area, and you
control every pixel of it.
The canvas element has several
methods for drawing paths, boxes,
circles, characters, and adding images.

79. HTML5: Canvas
Adding a canvas element to the HTML5
page.
Specify the id, width, height of the
element:
<canvas id="myCanvas" width="200"
height="100"></canvas>

80. HTML5: Canvas
 The canvas element has a DOM method called
getContext, used to obtain the rendering context and its
drawing functions.
 This function takes one parameter, the type of context
2d.

81. HTML5: Canvas
The canvas element has no drawing abilities of its
own. All drawing must be done inside a JavaScript:
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>

82. HTML5 Canvas - Drawing Rectangles
Sr.No. Method and Description
1
fillRect(x,y,width,height)
This method draws a filled rectangle.
2
strokeRect(x,y,width,height)
This method draws a rectangular outline.
3
clearRect(x,y,width,height)
This method clears the specified area and makes it fully
transparent

83. HTML5 Canvas - Drawing Paths
Sr.No. Method and Description
1 beginPath() This method resets the current path.
2 moveTo(x, y) This method creates a new subpath with the given point.
3
closePath() This method marks the current subpath as closed, and starts a
new subpath with a point the same as the start and end of the newly closed
subpath.
4 fill() This method fills the subpaths with the current fill style.
5 stroke() This method strokes the subpaths with the current stroke style.
6
arc(x, y, radius, startAngle, endAngle, anticlockwise) Adds points to the
subpath such that the arc described by the circumference of the circle
described by the arguments, starting at the given start angle and ending at
the given end angle, going in the given direction, is added to the path,
connected to the previous point by a straight line.

84. HTML5 Canvas - Drawing Lines
Sr.No. Method and Description
1 beginPath() This method resets the current path.
2 moveTo(x, y) This method creates a new subpath with the given point.
3
closePath() This method marks the current subpath as closed, and starts
a new subpath with a point the same as the start and end of the newly
closed subpath.
4 fill() This method fills the subpaths with the current fill style.
5 stroke() This method strokes the subpaths with the current stroke style.
6
lineTo(x, y) This method adds the given point to the current subpath,
connected to the previous one by a straight line.

85. Line Properties
Sr.No. Property and Description
1
lineWidth [ = value ] This property returns the current line width and can be set, to
change the line width.
2
lineCap [ = value ] This property returns the current line cap style and can be set, to
change the line cap style. The possible line cap styles are butt, round, and square
3
lineJoin [ = value ] This property returns the current line join style and can be set, to
change the line join style. The possible line join styles are bevel, round, and miter.
4
miterLimit [ = value ] This property returns the current miter limit ratio and can be set, to
change the miter limit ratio.

86. HTML5 Canvas - Drawing Bezier Curves
 bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
 This method adds the given point to the current
path, connected to the previous one by a cubic
Bezier curve with the given control points.

87. HTML5 Canvas - Drawing Quadratic Curves
 quadraticCurveTo(cpx, cpy, x, y)
 This method adds the given point to the
current path, connected to the previous
one by a quadratic Bezier curve with the
given control point.

88. HTML5 Canvas - Using Image
 drawImage(image, dx, dy)
This method draws the given image onto the
canvas. Here image is a reference to an
image or canvas object. x and y form the
coordinate on the target canvas where our
image should be placed.

89. HTML5 Canvas - Create Gradients
Sr.No. Method and Description
1
addColorStop(offset, color) This method adds a color stop with the given
color to the gradient at the given offset. Here 0.0 is the offset at one end of
the gradient, 1.0 is the offset at the other end.
2
createLinearGradient(x0, y0, x1, y1) This method returns a
CanvasGradient object that represents a linear gradient that paints along
the line given by the coordinates represented by the arguments. The four
arguments represent the starting point (x1,y1) and end point (x2,y2) of the
gradient.
3
createRadialGradient(x0, y0, r0, x1, y1, r1) This method returns a
CanvasGradient object that represents a radial gradient that paints along
the cone given by the circles represented by the arguments. The first three
arguments define a circle with coordinates (x1,y1) and radius r1 and the
second a circle with coordinates (x2,y2) and radius r2.

90. Styles and Colors Learn how to apply styles and colors using HTML5 <canvas> element
Text and Fonts Learn how to draw amazing text using different fonts and their size.
Pattern and
Shadow
Learn how to draw different patterns and drop shadows.
Canvas States
Learn how to save and restore canvas states while doing complex drawings
on a canvas.
Canvas Translation
This method is used to move the canvas and its origin to a different point in
the grid.
Canvas Rotation This method is used to rotate the canvas around the current origin.
Canvas Scaling This method is used to increase or decrease the units in a canvas grid.
Canvas Transform These methods allow modifications directly to the transformation matrix.
Canvas
Composition
This method is used to mask off certain areas or clear sections from the
canvas.
Canvas Animation Learn how to create basic animation using HTML5 canvas and Javascript.

91. HTML5 SVG

92. SVG
 SVG stands for Scalable Vector Graphics
 SVG is used to define graphics for the
web page.
 The element <svg> is the container for
SVG graphics.

93. Difference between SVG and Canvas
 SVG is a language for describing 2D
graphics in XML.
 Canvas draws 2D graphics, with
JavaScript.

94. Difference between SVG and Canvas
 SVG is XML based (means every element
is available within the SVG DOM). In SVG,
each drawn shape is remembered as an
object.
 Canvas is rendered pixel by pixel. In
Canvas, once graphic is drawn, it is
forgotten by the browser.

95. Comparison of Canvas and SVG
Canvas SVG
•Resolution dependent
•No support for event handlers
•Poor text rendering capabilities
•You can save the resulting image
as .png or .jpg
•Well suited for graphic-intensive
games
•Resolution independent
•Support for event handlers
•Best suited for applications with large
rendering areas (Google Maps)
•Slow rendering if complex (anything
that uses the DOM a lot will be slow)
•Not suited for game applications

96. SVG Advantages
 Advantages of using SVG over other image formats (like JPEG and
GIF) are:
 SVG images can be created and edited with any text editor
 SVG images can be searched, indexed, scripted, and
compressed
 SVG images are scalable
 SVG images can be printed with high quality at any resolution
 SVG images are zoomable (and the image can be zoomed
without degradation)
 SVG is an open standard
 SVG files are pure XML

97. SVG Shapes
 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>

98. Rectangle
 <svg width="400" height="110"><rect width="300" height="100"
style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" /></svg>
 <svg width="400" height="110"><rect x="50" y="20" width="150"
height="150“ style="fill:blue;stroke:pink;stroke-width:5;fill-
opacity:0.1;stroke-opacity:0.9" /></svg>
 <svg width="400" height="110"><rect x="50" y="20" rx="20"
ry="20" width="150" height="150“ style="fill:red;stroke:black;stroke-
width:5;opacity:0.5" /></svg>

99. Explanation
 Stroke-width property defines the width of the border of the rectangle
 Stroke property defines the color of the border of the rectangle
 The x attribute defines the left position of the rectangle (e.g. x="50" places
the rectangle 50 px from the left margin)
 The y attribute defines the top position of the rectangle (e.g. y="20" places
the rectangle 20 px from the top margin)
 The CSS fill-opacity property defines the opacity of the fill color (legal
range: 0 to 1)
 The CSS stroke-opacity property defines the opacity of the stroke color
(legal range: 0 to 1)
 Opacity property defines the opacity value for the whole element (legal
range: 0 to 1)
 rx and the ry attributes rounds the corners of the rectangle

100. SVG Circle - <circle>
 <svg height="100" width="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3"
fill="red" />
</svg>
 The cx and cy attributes define the x and y coordinates of the center
of the circle. If cx and cy are omitted, the circle's center is set to
(0,0)
 The r attribute defines the radius of the circle

101. SVG <ellipse>
 <svg height="140" width="500">
<ellipse cx="200" cy="80" rx="100" ry="50"
style="fill:yellow;stroke:purple;stroke-width:2" />
</svg>
 The cx attribute defines the x coordinate of the center of the ellipse
 The cy attribute defines the y coordinate of the center of the ellipse
 The rx attribute defines the horizontal radius
 The ry attribute defines the vertical radius

102. SVG <line>
 <svg height="210" width="500">
<line x1="0" y1="0" x2="200" y2="200"
style="stroke:rgb(255,0,0);stroke-width:2" />
</svg>
 The x1 attribute defines the start of the line on the x-axis
 The y1 attribute defines the start of the line on the y-axis
 The x2 attribute defines the end of the line on the x-axis
 The y2 attribute defines the end of the line on the y-axis

103. SVG <polygon>
 <svg height="250" width="500">
<polygon points="220,10 300,210 170,250 123,234"
style="fill:lime;stroke:purple;stroke-width:1" />
</svg>
 The points attribute defines the x and y coordinates for each corner
of the polygon

104. SVG <polyline>
 <svg height="180" width="500">
<polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160"
style="fill:white;stroke:red;stroke-width:4" />
</svg>
 The points attribute defines the x and y coordinates for each corner
of the polygon

105. SVG Path - <path>
 The <path> element is used to define a path.
 The following commands are available for path data:
 M = moveto
 L = lineto
 H = horizontal lineto
 V = vertical lineto
 C = curveto
 S = smooth curveto
 Q = quadratic Bézier curve
 T = smooth quadratic Bézier curveto
 A = elliptical Arc
 Z = closepath

106. Example
 <svg height="210" width="400">
<path d="M150 0 L75 200 L225 200 Z" />
</svg>
 The example below defines a path that starts at position 150,0 with
a line to position 75,200 then from there, a line to 225,200 and
finally closing the path back to 150,0

107. SVG Text - <text>
 <svg height="30" width="200">
<text x="0" y="15" fill="red">I love SVG!</text>
</svg>
 <svg height="60" width="200">
<text x="0" y="15" fill="red" transform="rotate(30 20,40)">I love
SVG</text>
</svg>

108. Text on several lines
 The <text> element can be arranged in any number of
sub-groups with the <tspan> element. Each <tspan>
element can contain different formatting and position.
 <svg height="90" width="200">
<text x="10" y="20" style="fill:red;">Several lines:
<tspan x="10" y="45">First line.</tspan>
<tspan x="10" y="70">Second line.</tspan>
</text>
</svg>

109. SVG Stroking
 SVG Stroke Properties
 SVG offers a wide range of stroke properties. In this chapter we will
look at the following:
 Stroke - defines the color of a line, text or outline of an element.
 stroke-width - defines the thickness of a line, text or outline of an
element.
 stroke-linecap - defines different types of endings to an open
path.
 stroke-dasharray - used to create dashed lines.

110. SVG Filter

111. <defs> and <filter>
 All SVG filters are defined within a <defs> element. The
<defs> element is short for definitions and contains
definition of special elements (such as filters).
 The <filter> element is used to define an SVG filter. The
<filter> element has a required id attribute which
identifies the filter. The graphic then points to the filter to
use.

112. SVG Blur Effects
 <svg height="110" width="110">
<defs>
<filter id="f1" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="15" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3"
fill="yellow" filter="url(#f1)" />
</svg>

113. SVG Drop Shadows
 <svg height="140" width="140">
<defs>
<filter id="f2" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
<feGaussianBlur result="blurOut" in="offOut"
stdDeviation="10" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3"
fill="yellow" filter="url(#f2)" />
</svg>

114. SVG Linear Gradient - <linearGradient>
 The <linearGradient> element is used to define a linear gradient.
 The <linearGradient> element must be nested within a <defs> tag.
The <defs> tag is short for definitions and contains definition of
special elements (such as gradients).
 Linear gradients can be defined as horizontal, vertical or angular
gradients:
 Horizontal gradients are created when y1 and y2 are equal and x1 and
x2 differ
 Vertical gradients are created when x1 and x2 are equal and y1 and y2
differ
 Angular gradients are created when x1 and x2 differ and y1 and y2 differ

115. SVG Radial Gradient - <radialGradient>
 The <radialGradient> element is used to
define a radial gradient.
 The <radialGradient> element must be
nested within a <defs> tag. The <defs>
tag is short for definitions and contains
definition of special elements (such as
gradients).

116. HTML5 Google Maps

117. Google Maps
 Google Maps API (Application
Programming Interface).
 Google Maps API allows you to display
maps on your web site:

118. Create a Function to Set The Map Properties
 function myMap() {
var mapProp= {
center:new google.maps.LatLng(51.508742,-
0.120850),
zoom:5,
};
var map=new
google.maps.Map(document.getElementById("googleMa
p"),mapProp);
}

119.  The mapProp variable defines the properties for the
map.
 The center property specifies where to center the map
(using latitude and longitude coordinates).
 The zoom property specifies the zoom level for the map
(try to experiment with the zoom level).
 The line:
 var map=new
google.maps.Map(document.getElementById("googleMap"),
mapProp);
 creates a new map inside the <div> element with
id="googleMap", using the parameters that are passed
(mapProp).

120. Google Maps - Overlays
 Overlays are objects on the map that are bound to latitude/longitude
coordinates.
 Google Maps has several types of overlays:
 Marker - Single locations on a map. Markers can also display
custom icon images
 Polyline - Series of straight lines on a map
 Polygon - Series of straight lines on a map, and the shape is
"closed"
 Circle and Rectangle
 Info Windows - Displays content within a popup balloon on top of
a map
 Custom overlays

121. HTML5 Geolocation
 It is used to locate a user's position.
 The getCurrentPosition() method is used
to return the user's position.
Handling Errors and Rejections:
 The second parameter of the
getCurrentPosition() method is used to
handle errors.
 It specifies a function to run if it fails to get
the user's location:

122. Displaying the Result in a Map
 To display the result in a map, you need
access to a map service, like Google
Maps.
 The returned latitude and longitude is
used to show the location in a Google
Map.

123. Location-specific Information
 This page has demonstrated how to show
a user's position on a map.
 Geolocation is also very useful for
location-specific information, like:
 Up-to-date local information
 Showing Points-of-interest near the user
 Turn-by-turn navigation (GPS)

124. The getCurrentPosition() Method
Return Data:
The getCurrentPosition() method returns
an object on success.
The latitude, longitude and accuracy
properties are always returned.

126. Geolocation Object
Methods:It has other interesting methods
watchPosition() - Returns the current
position of the user and continues to return
updated position as the user moves (like the
GPS in a car).
clearWatch() - Stops the watchPosition()
method.

127. 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: Any element can be draggable.

128. Draggable Element
 To make an element draggable, set the
draggable attribute to true.

129. ondragstart and setData()
 Then, specify what should happen when
the element is dragged.
 The ondragstart attribute calls a function,
drag(event), that specifies what data to be
dragged.
 The dataTransfer.setData() method sets
the data type and the value of the dragged
data.

131. Ondragover:
The ondragover event specifies where the
dragged data can be dropped.
By default, data/elements cannot be
dropped in other elements. To allow a drop,
we must prevent the default handling of the
element.

132.  This is done by calling the
event.preventDefault() method for the
ondragover event:
Syntax:
event.preventDefault()

133. ondrop
 When the dragged data is dropped, a drop
event occurs.
 The ondrop attribute calls a function,
drop(event).

134. HTML5 Application Cache

135. 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

136. HTML5 Cache Manifest Example
The example below shows an HTML document with a
cache manifest (for offline browsing):
<!DOCTYPE HTML>
<html manifest="demo.appcache">
<body>
The content of the document......
</body>
</html>

137. Cache Manifest Basics
To enable application cache, include the manifest attribute in the
document's <html> tag.
<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>
Every page with the manifest attribute specified will be cached when
the user visits it. If the manifest attribute is not specified, the page will
not be cached (unless the page is specified directly in the manifest
file).
The recommended file extension for manifest files is: ".appcache”

138. The Manifest File
The manifest file is a simple text file, which tells the browser what to
cache (and what to never cache).
The manifest file has three sections:
CACHE MANIFEST - Files listed under this header will be cached
after they are downloaded for the first time
NETWORK - Files listed under this header require a connection to
the server, and will never be cached
FALLBACK - Files listed under this header specifies fallback pages
if a page is inaccessible

139. CACHE MANIFEST
The first line, CACHE MANIFEST, is required:
CACHE MANIFEST
/theme.css
/logo.gif
/main.js
The manifest file above lists three resources: a CSS file, a GIF image, and a
JavaScript file. When the manifest file is loaded, the browser will download the
three files from the root directory of the web site. Then, whenever the user is
not connected to the internet, the resources will still be available.

140. NETWORK
The NETWORK section below specifies that the file "login.asp" should
never be cached, and will not be available offline.
NETWORK:
login.asp
An asterisk can be used to indicate that all other resources/files
require an internet connection:
NETWORK:
*

141. FALLBACK
The FALLBACK section below specifies that "offline.html"
will be served in place of all files in the /html/ catalog, in
case an internet connection cannot be established:
FALLBACK:
/html/ /offline.html

142. Updating the Cache
Once an application is cached, it remains cached
until one of the following happens:
The user clears the browser's cache
The manifest file is modified (see tip below)
The application cache is programmatically
updated

143. HTML5 Geolocation

144. HTML5 Geolocation
 The HTML5 Geolocation API is used to
get the geographical position of a user.
 Since this can compromise user privacy,
the position is not available unless the
user approves it.

145. Information you get from
Geolocation API
Property Description
coords.latitude The latitude as a decimal number
coords.longitude The longitude as a decimal number
coords.accuracy The accuracy of position
coords.altitude
The altitude in meters above the
mean sea level
coords.altitudeAccuracy The altitude accuracy of position
coords.heading
The heading as degrees clockwise
from North
coords.speed The speed in meters per second
timestamp The date/time of the response

146. Drag and Drop
 The HTML5 drag and drop API allows support
for dragging and dropping items within and
between web sites.
 This also provides a simpler API for use by
extensions and Mozilla-based applications.
 Drag and Drop is supported by all the major
browsers like Chrome, Firefox 3.5 and Safari 4
etc.

147. ondragstart and setData():
The ondragstart attribute calls a function,
drag(event), that specifies what data to be
dragged.
The dataTransfer.setData() method sets
the data type and the value of the dragged
data.

148. Ondragover:
The ondragover event specifies where the
dragged data can be dropped.
By default, data/elements cannot be
dropped in other elements. To allow a drop,
we must prevent the default handling of the
element.
This is done by calling the
event.preventDefault() method for the
ondragover event.

149. Ondrop:
When the dragged data is dropped, a drop
event occurs.
The ondrop attribute calls a function,
drop(event).

150. Local Storage
 With local storage, web applications can
store data locally within the user's
browser.
 Before HTML5, application data had to be
stored in cookies, included in every server
request. Local storage is more secure,
and large amounts of data can be stored
locally, without affecting website
performance. access the same data.

151.  Unlike cookies, the storage limit is far
larger (at least 5MB) and information is
never transferred to the server.
 Local storage is per origin (per domain
and protocol). All pages, from one origin,
can store and

152. Local Storage Objects:
HTML local storage provides two objects
for storing data on the client:
window.localStorage - stores data with no
expiration date
window.sessionStorage - stores data for
one session (data is lost when the browser
tab is closed)

154. localStorage Object:
This 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.

155. 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 specific
browser tab.

156. SSE
Server-Sent Events:
A server-sent event is when a web page
automatically gets updates from a server.
This was also possible before, but the web
page would have to ask if any updates were
available. With server-sent events, the
updates come automatically.

157. Receive Server-Sent Event Notifications:
The EventSource object is used to receive
server-sent event notifications
Check Server-Sent Events Support:

158. The EventSource Object