This presentation will give you a general idea about the best web page designing language that is HTML5.

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