HTML5
Upcoming SlideShare
Loading in...5
×
 

HTML5

on

  • 930 views

presentation prepared for my academic seminar

presentation prepared for my academic seminar

Statistics

Views

Total Views
930
Views on SlideShare
929
Embed Views
1

Actions

Likes
1
Downloads
26
Comments
0

1 Embed 1

http://a0.twimg.com 1

Accessibility

Categories

Upload Details

Uploaded via as OpenOffice

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

HTML5 HTML5 Presentation Transcript

  • HTML 5 Presented By: Anees P Guided By: Mr. Aneesh M. Haneef
  • CONTENTS
    • Introduction
    • Comparison between HTML 4 and HTML 5 View slide
    • New Features View slide
    • New Tags
    • Media Playback
    • The Canvas Element
    • Web Storage
  • INTRODUCTION
    • Developed by WHATWG and W3C
    • Successor to HTML 4
    • Working draft came in 2008
    • Still a work in progress
    • New Elements
    • Full CSS3 support
    • More markup to reduce scripting
  • INTRODUCTION
    • New input types
    • Form validation
    • Geolocation
  • HTML5 vs HTML4
    • <! DOCTYPE HTML PUBLIC “-//W3C//DTD// HTML 4.01//EN” “ http://w3.org/TR/html4/strict.dtd ”>
    • <!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot; &quot; http://www.w3.org/TR/html4/loose.dtd &quot;>
    • <!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Frameset//EN&quot; &quot; http://www.w3.org/TR/html4/frameset.dtd &quot;>
    • There's Even more
  • HTML5 vs HTML4
    • <!DOCTYPE HTML>
  • NEW FEATURES
    • Canvas element for drawing
    • Video and audio elements for media playback
    • Local offline storage
    • Content specific elements
    • Form validation is no longer painful
  • NEW TAGS
    • <video>
    • <audio>
    • <canvas>
    • <header>
    • <footer>
    • <nav>
    • <article>
    • <time>
  • MEDIA PLAYBACK
    • Embed video or audio without a plugin
    • <video src = “file.ogg”>
    • <audio src = “file.mp3”>
    • <embed src=&quot;helloworld.swf&quot; >
  • MEDIA PLAYBACK
    • Video formats ogg mp4 WebM
    • Audio Formats ogg mp3 wav
  • MEDIA PLAYBACK
      <video src=&quot;file.mp4&quot; controls=&quot;controls&quot;> Your browser does not support the video element. </video>
  • THE CANVAS ELEMENT
    • A rectangular area
    • You control every pixel of it
    • no drawing abilities of its own
    • Uses javascript to draw on a webpage
    • <canvas id=”mycanvas” width=&quot;200&quot; height=&quot;100&quot;> </canvas>
  • THE CANVAS ELEMENT
      <script type=&quot;text/javascript&quot;> var c=document.getElementById(&quot;myCanvas&quot;); var cxt=c.getContext(&quot;2d&quot;); cxt.fillStyle=&quot;#FF0000&quot;; cxt.fillRect(0,0,150,75); </script>
  • HTML5 STORAGE
    • two new objects for storing data on the client
      • LocalStorage
      • SessionStorage
    • Uses JavaScript to store and access the data
  • LOCAL STORAGE
      <script type=&quot;text/javascript&quot;> localStorage.firstname=&quot;Anees&quot;; document.write(localStorage.firstname); </script>
  • SESSION STORAGE
      <script type=&quot;text/javascript&quot;> sessionStorage.firstname=&quot;Anees&quot;; document.write(sessionStorage.firstname); </script>
  • NEW INPUT TYPES
    • email
    • url
    • number
    • range
    • Date pickers (date, month, week, time, datetime, datetime-local)
    • search
    • color
  • FORM VALIDATION
    • <input type = &quot;name&quot; required/>
    • <input type = &quot;email&quot;/>
  • GEOLOCATION API
    • Share your location with trusted web sites
    • support is opt-in
    • getCurrentPosition()
  • CONCLUSION
  • REFERENCE
    • 'Will HTML5 re-standardize the Web?' - Paper
    • W3C Working Draft dev.w3c.org/html5
    • W3schools.com
    • Dive Into HTML5 – Mark Pilgrim
    • shwetankdixit.com