Scribd Logo
Upload

Welcome to Scribd!

  • HTML5

    Uploaded by

    Arka Ghosh
    46 views23 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    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 PDF, TXT or read online from Scribd
    Flag for inappropriate content
    46 views23 pages

    HTML5

    Uploaded by

    Arka Ghosh

    Copyright:

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

    HTML 5

    History of HTML

    1991 HTML first published

    1995 HTML 2.0


    After HTML 4.01 was released, focus shifted to
    XHTML and its stricter standards.
    1997 HTML 3.2

    1999 HTML 4.01 XHTML 2.0 had even stricter standards than 1.0,
    rejecting web pages that did not comply. It fell out of
    2000 XHTML 1.0 favor gradually and was abandoned completely in
    2009.
    2002
    -2009
    HTML5 is much more tolerant and can handle
    XHTML 2.0
    markup from all the prior versions.

    Though HTML5 was published officially in 2012, it has been


    2012 HTML5
    in development since 2004.
     The DOCTYPE declaration for HTML5 is very simple:
    <!DOCTYPE html>
     The character encoding (charset) declaration is also very simple:
    <meta charset="UTF-8">
     HTML5 Example:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Title of the document</title>
    </head>
    <body>
    Content of the document......
    </body>
    </html>
     New HTML5 Elements
     The most interesting new elements are:
     New semantic elements like <header>, <footer>,
    <article>, and <section>.
     New form control attributes like number, date, time,
    calendar, and range.
     New graphic elements: <svg> and <canvas>.
     New multimedia elements: <audio> and <video>.
    New HTML5 API's (Application Programming
    Interfaces)

     HTML Geolocation
     HTML Drag and Drop
     HTML Local Storage
     HTML Application Cache
     HTML Web Workers
     HTML SSE
    attributes
     value
     Readonly
     Disabled
     Size
     Maxlength
    HTML5 Semantic Elements
     Semantics is the study of the meanings of words and phrases in
    a language.
     Semantic elements = elements with a meaning

     A semantic element clearly describes its meaning to both the


    browser and the developer.

     Examples of non-semantic elements: <div> and <span> - Tells


    nothing about its content.

     Examples of semantic elements: <form>, <table>, and


    <article> - Clearly defines its content.
     Many web sites contain HTML code like: <div id="nav"> <div class="header">
    <div id="footer">
    to indicate navigation, header, and footer.
     HTML5 offers new semantic elements to define different parts of a web
    page:
     <article>

     <aside>

     <figcaption>

     <figure>

     <footer>

     <header>

     <nav>

     <section>
     Developers used their own id/class names to style
    elements: header, top, bottom, footer, menu,
    navigation, main, container, content, article, sidebar in
    html 4
     This made it impossible for search engines to identify
    the correct web page content.
     better search engine ranking will possible.

     With the new HTML5 elements (<header> <footer>


    <nav> <section> <article>), this will become easier.
    HTML5 Canvas
     The HTML <canvas> element is used to draw graphics on a web

    page.

     The graphic is created with <canvas>.

     The HTML <canvas> element is used to draw graphics using

    JavaScript.

     The <canvas> element is only a container for graphics. You must

    use JavaScript to actually draw the graphics.

     Canvas has several methods for drawing paths, boxes, circles,

    text, and adding images.


    HTML5 SVG
     SVG stands for Scalable Vector Graphics

     SVG is used to define graphics for the Web

     SVG is a W3C recommendation

     The HTML <svg> element is a container for SVG

    graphics.

     SVG has several methods for drawing paths, boxes,

    circles, text, and graphic images.


    Media Element
     Multimedia comes in many different formats. It can be
    almost anything you can hear or see.
     Examples: Pictures, music, sound, videos, records, films,
    animations, and more.
     Web pages often contain multimedia elements of different
    types and formats.
     In this chapter you will learn about the different multimedia
    formats.
    Video
     Element : <video> and </video>
     The controls attribute adds video controls, like play, pause,
    and volume.
     It is a good idea to always
    include width and height attributes..
     Multiple <source> elements can link to different video
    files. The browser will use the first recognized format.
     To start a video automatically use the autoplay attribute.
    Audio
     Element <audio> and </audio>
     HTML5 provides a standard for playing audio files.
     The controls attribute adds audio controls, like play, pause,
    and volume.
     Multiple <source> elements can link to different audio
    files.
     Plug-ins can be added to web pages with the <object> tag or
    the <embed> tag.
     Plug-ins can be used for many purposes: display maps, scan
    for viruses, verify your bank id, etc.

     The <object> element defines an embedded object within an


    HTML document.
     It is used to embed plug-ins (like Java applets, PDF readers,
    Flash Players) in web pages.
    HTML5 Local Storage

     With local storage, web applications can store data locally within
    the user's browser.
     Before HTML5, application data had to be stored in cookies,
    included in every server request. Local storage is more secure,
    and large amounts of data can be stored locally, without
    affecting website performance.
     Unlike cookies, the storage limit is far larger (at least 5MB) and
    information is never transferred to the server.
     Local storage is per origin (per domain and protocol). All pages,
    from one origin, can store and access the same data.
     HTML local storage provides two objects for storing data
    on the client:
     window.localStorage - stores data with no expiration date

     window.sessionStorage - stores data for one session (data


    is lost when the browser tab is closed)
    HTML5 Application Cache

     HTML5 introduces application cache, which means that a


    web application is cached, and accessible without an
    internet connection.
     Application cache gives an application three advantages:

     Offline browsing - users can use the application when


    they're offline
     Speed - cached resources load faster

     Reduced server load - the browser will only download


    updated/changed resources from the server
    HTML5 Web Workers

     A web worker is a JavaScript running in the background,


    without affecting the performance of the page.
     When executing scripts in an HTML page, the page
    becomes unresponsive until the script is finished.
     A web worker is a JavaScript that runs in the background,
    independently of other scripts, without affecting the
    performance of the page. You can continue to do whatever
    you want: clicking, selecting things, etc., while the web
    worker runs in the background.
    HTML5 Server-Sent Events

     A server-sent event is when a web page automatically gets


    updates from a server.
     This was also possible before, but the web page would
    have to ask if any updates were available. With server-sent
    events, the updates come automatically.
     Examples: Facebook/Twitter updates, stock price updates,
    news feeds, sport results, etc.

    You might also like