HTML5

Views:
 
Category: Education
     
 

Presentation Description

HTML5 is the next major version of HTML, fixing a lot of issues with HTML4 and making the HTML language better suited for Web Applications

Comments

By: pradeepsod (21 month(s) ago)

Sir could u pls email me this ppt.......sir pls help me.....my mail id pradeepsod@gmail.com

By: bolbachchan (29 month(s) ago)

hey the contents of ppt is really nice and useful could you email me at siddhishah93@yahoo.com please do email

By: iamprashantraut (30 month(s) ago)

Very useful and informative introduction of HTML 5 Thanks!

Presentation Transcript

Presented By GAURAV VASHISTH:

Presented By GAURAV VASHISTH

About Html5::

About Html5 : Web is the commonly used medium to share and network nowadays. But for more advanced features companies are building their own softwares . One of such example is HTML5 . HTML5 is the next major version of HTML, fixing a lot of issues with HTML4 and making the HTML language better suited for Web Applications. It is developing by world wide web consortium W3C.

About HTML5::

About HTML5 : Html5 is originally designed as a language to mark up documents, Web developers have since started using it for purposes including Web forums, photo sites and advanced mapping applications Aim of the HTML5 is to make a common platform for web with more advanced features like audio, video etc. HTML5 is an effort, started in 2004 by Opera, Apple, and Mozilla, to study contemporary HTML implementations and deployed content.

About HTML5::

About HTML5 : Based on those studies, the HTML5 draft defines parsing HTML on the Web, and introduces new features for Web applications so far, that is made possible through plug-ins, e.g. displaying video or manipulating graphics. Hence it reduces the openness and platform independence of the web technology.

PowerPoint Presentation:

Innovations Browsers Languages 1994 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 HTML 2.0 Specifications HTML 3.2 W3C Rec. HTML 4.0 W3C Rec. HTML 4.01 W3C Rec. HTML 5 Draft HTML 5 working group XHTML 1.0 W3C Rec. XHTML 1.1 W3C Rec. XHTML 2 Draft IE 4 IE 5 IE 6 IE 7 IE 8 NS 1 NS 2 NS 4 NS 4.7 NS 6 NS 7 FF 1 FF 2 FF 3 IE 2 Facebook podcasting youtube iTunes CSS 1.0 W3C Rec. CSS 2.0 W3C Rec. CSS 3.0 Draft MySpace AJAX SAF 1 SAF 2 SAF 3 SAF 4 IE 3 NS 3 twitter blogging W3C RSS Web Commerce Web Conferencing

Difference with HTML4:

Difference with HTML4 HTML5 introduces new elements and its attributes like <audio> ,<video>. The new content model concepts (replacing HTML4's block and inline concepts) HTML 5 allows MathML and SVG elements to be inside a document. New elements are introduced for a better structure. For eg : section,article,aside,Hggroup etc

Difference with HTML4:

Difference with HTML4 Other new elements in HTML5 are embed, mark, progress, meter, time, ruby, canvas, command, details, datalist etc There are several new global attributes. They are contentedittable , contextmenu , draggable , hidden, spell check etc

Difference with HTML4:

Difference with HTML4 Some attributes are not allowed in HTML5:- Most of the styling attributes are removed from HTML5 . Align attribute on caption, iframe , img , input,object , table, hr , div, h1, h2, h3, h4, h5, h6, p, col, colgroup , thead and tr. B ackground attribute on body. Bgcolor attribute on table, tr , td, th and body. Cellpadding and cellspacing attributes on table

Sample HTML5 Code:

Sample HTML5 Code <!DOCTYPE html> <html> <head> <title>HTML 5 Sample</title> </head> <body> <p> A sample HTML 5 document <img src="sample.jpg“> </p> </body> </html>

PowerPoint Presentation:

New Features: Tags GeoLocation Graphics - Canvas & SVG Video/Audio Storage

PowerPoint Presentation:

Tags: HTML5 contains a rich set of proposed tags. The goal of these new tags is to bring richer semantic meaning to content.

PowerPoint Presentation:

Tags - <header>: “A group of introductory or navigational aids. A header element typically contains the section’s heading (an h1–h6 element or an hgroup element), but can also contain other content, such as a table of contents, a search form, or any relevant logos." <header> <h1>Main Header</h1> <p class="tagline">Tagline</p> </header>

PowerPoint Presentation:

Tags - <nav>: " Not all groups of links on a page need to be in a nav element only sections that consist of major navigation blocks are appropriate for the nav element." <nav role="navigation"> <ul> <li> <a href="#" title="link">link</a> </li> </ul> </nav>

PowerPoint Presentation:

Tags - <article>: “ A composition that forms an independent part of a document, page, application, Or site. This could also be a forum post, a magazine or newspaper article or even a Web log entry ." <article> <h2>Item</h2> <p>Some content here.</p> </article>

PowerPoint Presentation:

Tags - <section>: "section is a blob of content that you could store as an individual record in a database." <section id="foo"> <h2>Foo</h2> <p> Content here </p> </section>

PowerPoint Presentation:

Tags - <article> vs. <section>: " Authors are encouraged to use the article element instead of the section element when it would make sense to syndicate the contents of the element." "Section is used when there is naturally a heading at the start of the section."

PowerPoint Presentation:

Tags - <footer>: The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents and the copyright data.

PowerPoint Presentation:

Tags - <footer>: <footer role="contentinfo"> <p> Footer </p> <nav> <h5>Quick Links</h5> <ul role="navigation"> <li> <a href="#">link</a> </li> </ul> </nav> </footer>

PowerPoint Presentation:

HTML5 - Doctype : <!DOCTYPE html> When browsers see this doctype , content is automatically switched into standards mode (as opposed to quirks mode). XHTML 1.0 Transitional <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http:// www.w3.org/ TR/xhtml1/DTD/xhtml1-transitional.dtd">

PowerPoint Presentation:

GeoLocation: navigator.geolocation.getCurrentPosition () – obtain the user's current location navigator.geolocation.watchPosition () – watches for changes in a user's location

PowerPoint Presentation:

GeoLocation - Usability: FF 3.5 Opera Chrome (via GoogleGears ) Safari on the Iphone IE8

PowerPoint Presentation:

GeoLocation: Examples: http://bitbucket.org/leveille/html5-presentation/src/tip/GeoLocation/

PowerPoint Presentation:

Graphics: Canvas & SVG: Canvas - is a new HTML element which can be used to draw graphics using scripting (usually JavaScript). 2D drawing platform within the browser ✽ Uses nothing more than JavaScript and HTML – no plugins ✽ Extensible through a JavaScript API ✽ Created by Apple for dashboard widgets ✽ Now openly developed as a W3C spec

PowerPoint Presentation:

Graphics: Canvas & SVG: " SVG - Scalable Vector Graphics (SVG) is a standard from the W3C which is built on top of XML. The SVG standard describes ways that graphics can be drawn for use on the web." (http://www.svgbasics.com/index.html)

PowerPoint Presentation:

Graphics: Canvas & SVG: Data Visualisation Animated Graphics Games Web Applications Examples: http://bitbucket.org/leveille/html5-presentation/src /tip/Graphics/

PowerPoint Presentation:

Graphics: Canvas & SVG: Usability: Mozilla 1.8+ based browsers such as Firefox 1.5+, Camino 1.0+ and SeaMonkey 1.0+ implement a large part of SVG Full 1.1. Opera Web BrowserS -Opera 8 + includes support for most of SVG Tiny 1.1 -Opera 9 includes support for SVG Basic 1.1, including declarative animation, scripting, and SVG Tiny Fonts

PowerPoint Presentation:

Audio / Video: Offers the ability to embed media into HTML documents Media playback can be controlled via JS and media events A flash fallback could be provided for browsers that don't support HTML5 media http://diveintohtml5.org/video.html Opera Safari Firefox Chrome IE Browsers With Video Control

<Video> Tag:

<Video> Tag The ‘old’ way < object classid ="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width=" 425“ height ="344"codebase="http:// download.macromedia.com/flash/version=6"> < param name=" allowFullScreen " value="true" /> < param Name =" src"value ="http:// www.youtube.com/v/oA0&hl=en&fs=1 &" /> < embed type=" application/x-shockwave- flash“width ="425"height=" 344“ src =" http:// www.youtube.com=" always" allowfullscreen ="true"> </ embed ></object> And as you know, you need Flash for this. Or it is often delivered via javascript as well so it is not perfect . The HTML 5 way < video width="640"  height="360"src="http://www.youtube.com/demo/google_main.mp4" controls autobuffer > <p> Try this page in Safari  4! Or you can <a href ="http://www.youtube.com/demo/google_main.mp4">download the  video</a> instead.</p> </video>

PowerPoint Presentation:

Storage: Session and Local Storage —provides a js interface to key-value storage. Web Databases —RDBMS support for storing structured data inside the browser. Application Cache —Local Cache

PowerPoint Presentation:

Storage: Usability: IE8, FF3.5, Safari 4

PowerPoint Presentation:

Web Forms: 1) Strongly-typed input fields 2) New attributes for defining constraints 3) New DOM interfaces

other features in HTML5 :

other features in HTML5 API's for multimedia by using video and audio tags API that exposes the history and allows pages to add to it to prevent breaking the back button API that allow offline web applications HTML Microdata Drag and drop API

other features in HTML5 :

other features in HTML5 An API that allows a Web application to register itself for certain protocols or media types Editing API in combination with a new global contenteditable attribute HTML canvas 2D context HTML5 web messaging

Websites that uses HTML5:

Websites that uses HTML5 YouTube uses HTML5, www.youtube.com/ html5 Google wave, a collaboration tool from Google uses several Html5 tags Only some of the browser supports HTML5 features currently.

References::

References: Will HTML 5 Restandardize the Web? http://dev.w3.org/html5/Overview.html#introduction http://www.w3.org/TR/html5/video.html#audio http://dev.w3.org/html5/html4-differences/ http://dev.w3.org/html5/postmsg/#introduction http://blog.whatwg.org/html-5-contenteditable

THANK YOU:

THANK YOU

ANY Queries...:

ANY Queries...