Scribd Logo
Upload

Welcome to Scribd!

  • The Beginner Training Session: Ganesan

    Uploaded by

    கணேசன் சந்திரசேகரன்
    6 views19 pages

    Original Title

    HTML5_D1.pptx

    Copyright

    © © All Rights Reserved

    Available Formats

    PPTX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    6 views19 pages

    The Beginner Training Session: Ganesan

    Uploaded by

    கணேசன் சந்திரசேகரன்

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 19

    HTML 5

    The Beginner Training Session

    GANESAN CHANDRASEKARAN
    Sap Id: 51450717
    WWW – THE BIG WORLD

    • HTML – Hyper Text Markup Language


    • HTML 5 – The latest Standard of HTML
    • This replaces HTML 4, XHTML and HTML DOM L2
    • HTML 5 is Cross Platform – Works in PC, Tablet, Smart phones.
    • It reduces the requirement of External Plugins like Flash
    • Error handling is much better
    • Device Independent
    THE NEW DEVELOPMENTS

    • New Elements
    • New Attributes
    • Full CSS3 Support
    • Video and Audio
    • 2D/3D Graphics
    • Local Storage
    • Local SQL Database
    • Web Applications
    BROWSER SUPPORT FOR HTML5

    • Chrome

    • Firefox

    • Internet Explorer

    • Safari

    • Opéra
    <!DOCTYPE>

    HTML 5 provides a very simple declaration for <!doctype> as follows


    <!DOCTYPE html>
    The minimum HTML Document is,

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>The Page Title</title>
    </head>

    <body>
    HTML Page Content
    </body>

    </html>
    NEW FEATURES

    • The <canvas> element for 2D drawing


    • The <video> and <audio> elements for media playback
    • Support for local storage
    • New content-specific elements, like <article>, <footer>,
    <header>, <nav>, <section>
    • New form controls, like calendar, date, time, email, url, search
    HTML5 NEW ELEMENTS

    • HTML5 has included new elements for drawing graphics, displaying media
    content, for better page structure and better form handling, and several
    new APIs, such as drag and drop, get the geographical position of a user,
    store local data, and more.
    • Media Elements
    • Form Elements
    • Structure Elements
    • And Some of the elements are removed
    NEW MEDIA ELEMENTS

    • <canvas> Defines graphic drawing using JavaScript


    • <audio> Defines sound or music content
    • <embed> Defines containers for external applications (like plug-ins)
    • <source> Defines sources for <video> and <audio>
    • <track> Defines tracks for <video> and <audio>
    • <video> Defines video or movie content
    NEW FORM ELEMENTS

    • <datalist> Defines pre-defined options for input controls


    • <keygen> Defines a key-pair generator field (for forms)
    • <output> Defines the result of a calculation
    NEW SEMANTIC/STRUCTURAL ELEMENTS

    • <article> Defines an article in the document


    • <aside> Defines content aside from the page content
    • <bdi> Defines a part of text that might be formatted in a different
    direction from other text outside it
    • <details> Defines additional details that the user can view or hide
    • <dialog> Defines a dialog box or window
    • <figcaption> Defines a caption for a <figure> element
    • <figure> Defines self-contained content, like illustrations, diagrams,
    photos, code listings, etc.
    • <footer> Defines a footer for the document or a section
    CONT.

    • <header> Defines a header for the document or a section


    • <main> Defines the main content of a document
    • <mark> Defines marked or highlighted text
    • <menuitem> Defines a command/menu item that the user can invoke
    from a popup menu
    • <meter> Defines a scalar measurement within a known range (a
    gauge)
    • <nav> Defines navigation links in the document
    • <progress> Defines the progress of a task
    • <rp> Defines what to show in browsers that do not support ruby
    annotations
    CONT.

    • <rt> Defines an explanation/pronunciation of characters (for East Asian


    typography)
    • <ruby> Defines a ruby annotation (for East Asian typography)
    • <section> Defines a section in the document
    • <summary> Defines a visible heading for a <details> element
    • <time> Defines a date/time
    • <wbr> Defines a possible line-break
    REMOVED ELEMENTS

    • Some of HTML 4.01 Elements are removed from HTML 5 and they are,
    • <acronym>
    • <applet>
    • <basefont>
    • <big>
    • <center>
    • <dir>
    • <font>
    • <frame>
    • <frameset>
    • <noframes>
    • <strike>
    • <tt>
    HTML5 SEMANTIC/STRUCTURE ELEMENTS

    • The Structure Elements are the elements are the element which give
    meaning about the content to the browser. We can not identify the
    meaning without the browser help.
    • Example: <div> <span>
    • The Semantic Elements are able to give meaning to both the user and
    browser. To the user, It tells about the content.
    • Example: <form> <table> <img>
    NEW SEMANTIC ELEMENTS IN HTML 5

    • <header> • <figcaption>
    • <nav> • <footer>
    • <section> • <details>
    • <article> • <summary>
    • <aside> • <mark>
    • <figure> • <time>
    SAMPLE STRUCTURE

    <header>

    <nav>

    <section>

    <aside>

    <article>

    <footer>
    HTML5 <SECTION> ELEMENT

    • The <section> element defines a section in a document. Each defined


    section will be separated by a redefined space
    • As per the definition from W3C Documentation, usage of section tag with
    Header tag will give proper effect in the design.
    • The Sample code to use <section> element is

    <section>
    <h1>Title for the Section</h1>
    <p>The Section Contents.</p>
    </section>
    HTML5 <ARTICLE> ELEMENT

    • The <article> element specifies independent, self-contained content. The


    article should be ready to distribute without other content of website.
    • The Article can be used with the following types of contents.
    • Forum post
    • Blog post
    • News story
    • Comments
    <article>
    <h1>Ganesh Says: </h1>
    <p> The Usage of HTML 5 is great…</p>
    </article>
    HTML5 <NAV> ELEMENT

    • The <nav> element defines a set of navigation links.


    • This is to have large block of navigation links, but not all the links

    You might also like