The document outlines the advancements and features of HTML5, emphasizing its capabilities like multimedia support, cross-platform compatibility, and integration with JavaScript for dynamic content. It describes improvements over previous versions, including new tags, APIs, and better error handling, while also promoting backward compatibility and ease of use for developers. Ultimately, it highlights HTML5's role in modern web applications and its capacity to handle complex functionality without requiring specialized software.

1. Name :-Mohit Rana
Branch :- CSE(N1)
Roll no. :- 115306
Submitted To:- Mr. Jagdeep Singh

2. Add all new web technology into a box labeled
HTML 5
SVG (Scalable Vector Graphics) 6 years old.
Web Forms 2.0 XMLHttp-Request (XHR)
HTML5

3.  <audio> and <video> tags
 <canvas> element
 SVG
 WebGL
 Touch API
Flash has been replaced

4.  W3C has been adding features to HTML
 Major browsers support the standards
 Latest version is HTML5
 Has all of the power of native applications
 Plus more!

5. ?
The Web Hypertext Application Technology Working Group

6.  Document real-world browser behaviour
 Document and standardise useful extensions
 Develop practical new features
 Ensure backwards compatibility
 Define robust error handling

7.  Foundation of Design and Development
 Organised into 3 Categories
 Compatibility
 Utility
 Interoperability

8.  Support Existing Content
 Degrade Gracefully
 Don't Reinvent the Wheel
 Pave the Cowpaths
 Evolution, not Revolution

9.  Solve Real Problems
 Priority of Constituencies
 Media Independence
 Universal Access
 Support World Languages
 Secure By Design
 Separation of Concerns

10.  Well-Defined Behaviour
 Avoid Needless Complexity
 Handle Errors

11. HTML XHTML
5 5
text/html application/xhtml+xml
Document
DOM

12.  Backwards compatible with legacy UAs
 Author familiarity
 Lenient and forgiving syntax
 No User-Hostile Yellow Screen of Death!
 Convenient shorthand syntax
 Can omit some tags and attribute values

13.  Strict XML Syntax
 Integrate directly with other XML vocabularies
 SVG, MathML
 Use XML Processing

15.  No need for software updates
 Everyone sees the latest version
 Development can be done anywhere
 No need for special software
 Just a terminal and Firefox/Firebug

16.  HTML5 and javascript are interpreted
 No compilation
 Can test UI changes with a console window
Firebug extension for
Firefox

17.  Cross-platform
 Most browsers (read: not IE) conform to the W3C
standards
 The same code works on PC, Mac, Linux

18.  Mobile device support

19.  <header>
 <hgroup> : groups a set of h1-h6 elements when the heading has
multiple levels
 <nav>
 <section>
 <article>
 <header>
 <aside>
 <footer>
 <time>
 <mark>

20.  Structure and Semantics
 Embedded Content and Multimedia
 DOM APIs
 Forms
 Repetition Model

22. <div <header>
id="header">
<div class="article">
<article>
<div <div
<nav> <div <section>
id="content"> <aside>
id="nav"> id="right">
<div <footer>
id="footer">

23.  Microformats datetime-design-pattern
 <abbr class="datetime"
title="2007-08-02T23:30Z">
Fri, Aug 03 2007 at 09:30
</abbr>
 Misusing the abbr element
 Accessibility Issues

24.  The time Element
 <timedatetime="2007-08-02T23:30Z">
Fri, Aug 03 2007 at 09:30
</time>
 Solves Accessibility Issue
 Can be used in Microformats like
hCalendar

25.  Representing scalar measurements or
fractional values
 Useful for:
 User Ratings (e.g. YouTube Videos)
 Seach Result Relevance
 Disk Quota Usage

26.  <meter>60%</meter>
 <meter>3/5</meter>
 <meter>6 blocks used
(out of 10 total)</meter>
 <meter value="0.6">Medium</meter>

27.  Show completion progress of a task
 Progress bars are widely used in other
applications
 Works with scripted applications
 Useful for:
 Indicateloading progress of an AJAX application
 Show user progress through a series of forms
 Making impatient users wait

28.  <progress>Step 3 of 6</progress>
 <progress>50% Complete</progress>
 <progress value="0.5">
Half way!
</progress>

29.  Interactive tree, list or tabular data
 Extensive DOM API
 Allows User Input
 Editing
 Sorting
 Useful for:
 File
or folder lists
 Web mail applications

30.  <datagrid>
<table>
<!-- Insert tabular data here... -->
</table>
</datagrid>

32.  Dynamic and interactive graphics
 Draw images using 2D drawing API
 Lines, curves, shapes, fills, etc.
 Useful for:
 Graphs
 Applications
 Games and Puzzles
 And more…

33.  PlotKit
 http://www.liquidx.net/plotkit/
 JavaScript library
 Draws graphs from any
data source, such as a
table

34.  Yahoo! Pipes
 http://pipes.yahoo.com/
 Interactive, drag and
drop interface

35.  CanvasPaint
 http://canvaspaint.org/
 Clone of MS Paint built
with Canvas
 Could be used to build a
Shared Whiteboard
application

36.  Canvex
 http://canvex.lazyilluminati.com/
 Experimental First-
Person Shooter Game
 3D Graphics

37.  Videos have become
very popular
 Currently difficult to
embed videos in HTML
 Flash has become the de
facto standard
 Adding native support to
browsers

38.  <video src="movie.ogg"
id="video">...</video>
 <button onclick="video.play();">
Play
</button>

40.  Allows immediate update notification from
server to client
 Send any arbitrary data to the client, intended
to be processed by a script
 Update content without reloading page
 Useful for:
 Real-time chat or gaming
 Stock ticker updates

43.  HTML 4 controls are too limited
 Several new types added

44.  <input type="datetime">
 <input type="date">
 <input type="time">
 And more…

45.  <input type="number">
 <input type="range">

46.  <input type="email">
 <input type="url">

47.  <input list="title-list">
<datalist id="title-list">
<option value="...">
</datalist>

48.  New attributes to describe validity constraints
for the expected input
 required, pattern, min, max, etc.
 New DOM APIs allow scripts to detect and deal
with user input errors more easily

50.  Allows client side processing to repeat sections
based on templates
 Traditionally required scripts or server side
interaction to add additional sections
 Useful for:
 Adding multiple players to a game
 Adding multiple, alternative contact details (e.g.
home phone, work phone, mobile phone, etc.)

51. Team Members
<tr repeat-template="member" repeat="0">
id="member" repeat="template" repeat-start="2">
<td><input type="text" name="member0.rank"></td>
name="member[member].rank"></td>
Rank Name
<td><input type="text" name="member0.name"></td>
name="member[member].name"></td>
<td><button type="remove">Remove</button></td>
Colonel
</tr> Jack O'Neill Remove
<tr repeat-template="member" repeat="1">
<td><input type="text" name="member1.rank"></td>
Major Sam Carter Remove
<td><input type="text" name="member1.name"></td>
<td><button type="remove">Remove</button></td>
Civilian
</tr> Daniel Jackson Remove
Remove
<tr id="member" repeat="template" repeat-start="2">
Alien Team Member Teal’c
Add Continue
Remove
<td><input type="text" name="member[member].rank"></td>
<td><input type="text" name="member[member].name"></td>
<td><button type="remove">Remove</button></td>
</tr>
<button type="add" template="member">Add Team
Member</button>

52.  Native 3D rendering in the browser
 Makes use of the same <canvas> element
 Syntax is like OpenGL

53.  Works with iPad/iPhone/iPod and Windows
7 with Chrome & Firefox

54.  Can store relational
data locally in the
browser
 Especially useful for
offline apps (more later)

55.  Using Files in Web Applications

56.  Lots of stuff that HTML5 leaves out for us:
 Font metrics
 Bitmap manipulation
 Audio manipulation
 More flexible security model (cross-domain). However new browsers
support some of this in XmlHttpRequest
 3D support – hardware acceleration
 Actionscript language
 Desktop client support (AIR)
 Totally cross-browser/cross-platform. With HTML5

57.  Let the web browser developers do all the hard
work
 Applications have never been more easy with
HTML5
 Great features at a great price
 Develop without the need for bulky IDEs