Scribd Logo
Upload

Welcome to Scribd!

  • HTML 5

    Uploaded by

    Ankit Garg
    219 views31 pages

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PPT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PPT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    219 views31 pages

    HTML 5

    Uploaded by

    Ankit Garg

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PPT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 31

    HTML5

    Why HTML5?
    “HTML 5 will enable better cross-browser
    compatibility and better support for ‘Web 2.0-
    style’ Web applications in addition to
    documents.”

    Brendan Eich
    CTO, Mozilla
    Why Use HTML5 Today?

    • Pros
    – Better semantics
    – Less code
    – Improved user experience
    • Cons
    – Some work is needed to accommodate older
    browsers
    Doctype xHTML

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML


    1.0 Strict//EN" "
    http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.d
    td
    ">
    Doctype HTML5- “Look ! No
    DTD!”

    <!DOCTYPE HTML>
    Layout - HTML4, xHTML
    div=”header”
    div=”nav”
    div=”section”

    di
    div=”article” div=”sidebar”

    div=”footer”
    Layout - HTML5
    <header>
    <nav>
    <section>

    di
    <article> <aside>

    <footer>
    <header>
    <nav>
    <article>

    <aside>

    <footer>
    <time>

    <figure>

    <legend> <meter>
    Canvas Video Geolocation App Cache & Web
    Database Workers
    Until Recently, You Couldn’t Draw on the Web
    Canvas - 2d Drawing
    Canvas example
    Video is Complicated, and Outside Your Control
    Audio and Video

    • Native Audio Element


    <audio>
    <source src="music.oga" type="audio/ogg">
    <source src="music.mp3" type="audio/mpeg">
    </audio>

    • Native Video Element


    <video src="video.ogv" controls poster="poster.jpg" width="320"
    height="240">
    <a href="video.ogv">Download movie</a>
    </video>
    Geolocation
    geolocation on mobiles
    Storage
    • Session Storage
    – sessionStorage.setitem(key,value)
    – sessionStorage.getitem(key)
    • Local Storage
    – sessionStorage.setitem(key,value)
    – sessionStorage.getitem(key)
    • Database Storage
    Web worker
    Form Controls
    HTML Form Elements

    DataList input type=“number”


    HTML Form Elements

    input type=“range” input type=“date”


    Drag Drop
    Resources
    • http://www.labnol.org/internet/html5-prese
    ntations/10587/
    • http://www.whatwg.org
    /specs/web-apps/current-work
    • http://html5demos.com/
    • http://www.w3schools.com/html5/
    • http://www.html5doctor.com
    THANK
    YOU

    You might also like