Scribd Logo
Carica

Benvenuto in Scribd!

  • Name: Indraj Sharma Branch: IT R.No: - : - Engineering College

    Caricato da

    PiyuSh Jain
    113 visualizzazioni23 pagine
    HTML5 PPt By Piyush Jain

    Titolo originale

    html5

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Formati disponibili

    PPT, PDF, TXT o leggi online da Scribd

    Hai trovato utile questo documento?

    Questo contenuto è inappropriato?

    Segnala questo documento
    HTML5 PPt By Piyush Jain

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Scarica in formato PPT, PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    113 visualizzazioni23 pagine

    Name: Indraj Sharma Branch: IT R.No: - : - Engineering College

    Caricato da

    PiyuSh Jain
    HTML5 PPt By Piyush Jain

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Scarica in formato PPT, PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    di 23

    HTML

    Name: Indraj Sharma Branch: IT R.No: -------------------------------- Engineering College, --------1

    How Did HTML5 Get Started?

    HTML5 is cooperation between the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG). WHATWG was working with web forms and applications, and W3C was working with XHTML 2.0. In 2006, they decided to cooperate and create a new version of HTML.

    Some rules for HTML5 were established: New features should be based on HTML, CSS, DOM, and JavaScript Reduce the need for external plugins (like Flash) Better error handling More markup to replace scripting

    HTML5 should be device independent


    The development process should be visible to the public
    3

    New in HTML5

    1. 2. 3. 4. 5. 6. 7.

    DOC Type Code Blocking Elements Form Elements Graphics Elements Web Storage Elements Application Cache Media Elements
    4

    1. DOC Type

    The first line of HTML in any web page identifies the version of HTML the page contains. This is called the DOCTYPE. The DOCTYPE has its roots tied to SGML. SGML requires a DTD (document type definition) reference to accurately render the web page. With XHTML three different DOCTYPEs were introduced. Ultimately, this was complex to manage. With HTML5 we have one, simple DOCTYPE, which is <!DOCTYPE html>. The new DOCTYPE will automatically inform the web browser that the page content is in HTML5. The DOCTYPE is not case sensitive.
    5

    DOC Type in HTML & HTML5

    In HTML:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-transitional.dtd">

    In HTML5:<!DOCTYPE html>
    6

    2. Code Blocking Elements

    There are few ways in HTML4 to define content. The most common is to use the P element to identify the start and end of a paragraph, or the DIV element to identify the start and end of a section of content. Both do not adequately describe the content. You can see blocking applied to most web pages. With HTML5 there are several elements that block contentsa. SECTION b. ARTICLE c. HEADER d. FOOTER e. DIALOG f. FIGURE g. NAV
    7

    Page View with HTML5

    <HEADER> Logo, text here. </HEADER> <NAV> <a></a> <a></a> </NAV> <SECTION>1 ARTICLE. FIGURE.. DIALOG.. </SECTION> <SECTION>2 ARTICLE. FIGURE.. DIALOG.. </SECTION>

    <FOOTER> copyright here. </FOOTER>


    8

    <SECTION>
    <ARTICLE> text here. </ARTICLE> <FIGURE> image here. </FIGURE>
    <DIALOG> <DT>Dialog Title</DT> <DD>Dialog Data</DD> </DIALOG>

    </SECTION>
    9

    3. FORM ELEMENTS
    If we have ever shopped online and purchased a book, CD, or gift, then you have used a form during the checkout process to enter your name, address, and credit card information. The form elements you are using are the same elements added to HTML2 in 1994 and they have not changed since. With HTML5 comes a well-needed update to web forms and data management. The W3C had already begun modernizing the FORM element, called Forms 2.0, before HTML5. However, it has now been rolled into HTML5. The new implementation of FORMS now includes support for features that previously had to be accomplished with clever JavaScript and Ajax tricks.
    10

    New value of TYPE attribute

    The biggest change with HTML5 Forms is the extension of the core INPUT element with new attribute types. The following is a list of the new types you can use in HTML5-

    <INPUT TYPE=./>
    SEARCH RANGE DATE EMAIL TIME MONTH
    11

    TEL URL WEEK

    NUMBER COLOR DATETIME

    New attributes of INPUT tag

    Autofocus Min Max Step Pattern Placeholder Required Form Formaction List
    12

    4.GRAPHICS

    HTML graphics demos have been showing up on the web, ranging from implementations of old 2D graphics algorithms, to brand new techniques created specifically for the modern web. Types of graphics

    i. Canvas ii. SVG


    13

    i. Canvas

    The HTML5 <canvas> element is used to draw graphics, on the fly, via scripting (usually JavaScript). The <canvas> element is only a container for graphics, you must use a script to actually draw the graphics. A canvas is a drawable region defined in HTML code with height and width attributes. Canvas has several methods for drawing paths, boxes, circles, characters, and adding images.
    <canvas id="myCanvas" width="200" height="100" ></canvas>
    14

    ii. SVG

    SVG stands for Scalable Vector Graphics SVG is used to define vector-based graphics for the Web SVG defines the graphics in XML format SVG graphics do NOT lose any quality if they are zoomed or resized Every element and every attribute in SVG files can be animated
    <svg xmlns=http://www.w3.org/2000/svg version=1.1 height=150> ..</svg>
    15

    5. Web Storage
    With HTML5, web pages can store data locally within the user's browser. Earlier, this was done with cookies. However, Web Storage is more secure and faster. The data is not included with every server request, but used ONLY when asked for. It is also possible to store large amounts of data, without affecting the website's performance. The data is stored in key/value pairs, and a web page can only access data stored by itself. There are two new objects for storing data on the client: i. localStorage ii. sessionStorage
    16

    i. localStorage

    The localStorage object stores the data with no expiration date. The data will not be deleted when the browser is closed, and will be available the next day, week, or year.
    Set the localStorage:localStorage.lastname="Smith";

    17

    ii. sessionStorage

    The sessionStorage object is equal to the localStorage


    object, except that it stores the data for only one session. The data is deleted when the user closes the browser window.

    Set the sessionStorage:sessionStorage.lastname="Smith";


    18

    6. Application Cache
    With HTML5 it is easy to make an offline version of a web application, by creating a cache manifest file. 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 <html manifest="demo.appcache">
    19

    7. Media Element

    HTML5 audio/video is an element introduced in the HTML5 draft specification for the purpose of playing videos or movies, partially replacing the object element. HTML5 audio/video is intended by its creators to become the new standard way to show video on the web without plugins, but has been hampered by lack of agreement as to which video formats should be supported in web browsers.

    20

    Audio & Video

    <video width="320" height="240 controls="controls"> <source src="movie.mp4" type="video/mp4" /> </video>

    <audio controls="controls"> <source src=song.mp3" type="video/mp3" /> </audio>


    21

    REFERENCES
    http://www.whatwg.org

    http://www.w3.org/standards/webdesign/htmlcss
    http://www.w3schools.com/html5/

    http://html5doctor.com/
    http://www.html5rocks.com/en/
    22

    Thank you Any Query..?


    23

    Potrebbero piacerti anche