html5
DESCRIPTION
I presented this as a seminar in the partial fulfillment of my B.Tech. degree program at College of Technology, G B Pant University of Agriculture & Technology, Pantnagar, India.TRANSCRIPT
![Page 1: HTML5](https://reader036.vdocuments.net/reader036/viewer/2022070321/558a2975d8b42a32028b45ed/html5/thumbnails/1.jpg)
TCT – 492: Seminar
<HTML>by:Tanay Mathpal Final YearComputer [email protected]://tanamania.wordpress.comhttp://twitter.com/tanamania
![Page 2: HTML5](https://reader036.vdocuments.net/reader036/viewer/2022070321/558a2975d8b42a32028b45ed/html5/thumbnails/2.jpg)
What is
![Page 3: HTML5](https://reader036.vdocuments.net/reader036/viewer/2022070321/558a2975d8b42a32028b45ed/html5/thumbnails/3.jpg)
…the next major revision of HTML (Hypertext Markup Language), the core markup language of the World Wide Web.
HTML 5 is…
![Page 4: HTML5](https://reader036.vdocuments.net/reader036/viewer/2022070321/558a2975d8b42a32028b45ed/html5/thumbnails/4.jpg)
So What???
What the whole fuss is about???
![Page 5: HTML5](https://reader036.vdocuments.net/reader036/viewer/2022070321/558a2975d8b42a32028b45ed/html5/thumbnails/5.jpg)
Why
![Page 6: HTML5](https://reader036.vdocuments.net/reader036/viewer/2022070321/558a2975d8b42a32028b45ed/html5/thumbnails/6.jpg)
W3C vs WHATWG
![Page 7: HTML5](https://reader036.vdocuments.net/reader036/viewer/2022070321/558a2975d8b42a32028b45ed/html5/thumbnails/7.jpg)
The World Wide Web Consortium is the main international standards organization for the World Wide Web.
W3C
![Page 8: HTML5](https://reader036.vdocuments.net/reader036/viewer/2022070321/558a2975d8b42a32028b45ed/html5/thumbnails/8.jpg)
Web Hypertext Application Technology Working Group is a growing community of people interested in evolving the Web. It focuses primarily on the development of HTML and APIs needed for Web applications.
WHATWG
![Page 9: HTML5](https://reader036.vdocuments.net/reader036/viewer/2022070321/558a2975d8b42a32028b45ed/html5/thumbnails/9.jpg)
The WHATWG was founded by individuals of Apple, the Mozilla Foundation, and Opera Software in 2004, after a W3C workshop.
It was formed in response to the slow development of web standards monitored by the W3C, and its decision to abandon HTML in favour of XML-based technologies.
WHATWG
![Page 10: HTML5](https://reader036.vdocuments.net/reader036/viewer/2022070321/558a2975d8b42a32028b45ed/html5/thumbnails/10.jpg)
?
WHATWG
Web Hypertext Application Technology Working Group
![Page 11: HTML5](https://reader036.vdocuments.net/reader036/viewer/2022070321/558a2975d8b42a32028b45ed/html5/thumbnails/11.jpg)
The WHATWG pioneered the development of Web Applications 1.0 which was later renamed HTML5.
On 10 April 2007, the Mozilla Foundation, Apple and Opera Software proposed that the new HTML working group of the W3C adopt the WHATWG’s HTML5 as the starting point of its work.
• On 9 May 2007, the new HTML working group of the W3C resolved to do that.
HTML5
![Page 12: HTML5](https://reader036.vdocuments.net/reader036/viewer/2022070321/558a2975d8b42a32028b45ed/html5/thumbnails/12.jpg)
HTML5 is the proposed next standard for HTML 4.01, XHTML 1.0 and DOM Level 2 HTML.
HTML5 is a revolution in Web application development, making plug-in-based RIA (Rich Internet Application) technologies as Adobe Flash, Microsoft Silverlight, and Sun JavaFX obsolete.
HTML5
![Page 13: HTML5](https://reader036.vdocuments.net/reader036/viewer/2022070321/558a2975d8b42a32028b45ed/html5/thumbnails/13.jpg)
Key Features:
Semantic Web Form Controls Embedded Content and Multimedia
HTML5
![Page 14: HTML5](https://reader036.vdocuments.net/reader036/viewer/2022070321/558a2975d8b42a32028b45ed/html5/thumbnails/14.jpg)
Semantic Web
![Page 15: HTML5](https://reader036.vdocuments.net/reader036/viewer/2022070321/558a2975d8b42a32028b45ed/html5/thumbnails/15.jpg)
HTML 5 has replaced generic block (<div>) and inline (<span>) elements with new tags which make web application designing a whole new; semantic experience.
Some of these tags will be discussed by me in the following slides.
Semantic Web
![Page 16: HTML5](https://reader036.vdocuments.net/reader036/viewer/2022070321/558a2975d8b42a32028b45ed/html5/thumbnails/16.jpg)
Semantic Web <article> tag
It is intended for semantically specifying the content section of the web page.
Prior to HTML 5, we had to use <div class=“article”> or <div class=“content”>
![Page 17: HTML5](https://reader036.vdocuments.net/reader036/viewer/2022070321/558a2975d8b42a32028b45ed/html5/thumbnails/17.jpg)
Semantic Web <header> and <footer> tags
These semantic tags can be used for placing headers and footers on the web page.
Prior to HTML 5, we had to use <div id=“header”> and <div id=“footer”>
![Page 18: HTML5](https://reader036.vdocuments.net/reader036/viewer/2022070321/558a2975d8b42a32028b45ed/html5/thumbnails/18.jpg)
Semantic Web <dialog> tag
This tag is specifically used for dialog contents. For instance, it can be used to include a dialog conversation between two people.
![Page 19: HTML5](https://reader036.vdocuments.net/reader036/viewer/2022070321/558a2975d8b42a32028b45ed/html5/thumbnails/19.jpg)
Semantic Web <aside> tag
Using the <aside> tag, content other than the primary content stream is specified. This can be a flyover or a sidebar.
![Page 20: HTML5](https://reader036.vdocuments.net/reader036/viewer/2022070321/558a2975d8b42a32028b45ed/html5/thumbnails/20.jpg)
Semantic Web <section> tag
This tag is for the semantic representation of section of the content. For instance, an <article> can contain a <header> and can be divided into several <section>s.
![Page 21: HTML5](https://reader036.vdocuments.net/reader036/viewer/2022070321/558a2975d8b42a32028b45ed/html5/thumbnails/21.jpg)
Semantic Web <meter> tag
It can be used in places where users are required to rate the web content or web application performance.
Usage of <meter> tag is shown in the following slide.
![Page 22: HTML5](https://reader036.vdocuments.net/reader036/viewer/2022070321/558a2975d8b42a32028b45ed/html5/thumbnails/22.jpg)
Semantic Web <meter> tag
• <meter>60%</meter>• <meter>3/5</meter>• <meter>6 blocks used (out of 10 total)</meter>
• <meter value="0.6">Medium</meter>
![Page 23: HTML5](https://reader036.vdocuments.net/reader036/viewer/2022070321/558a2975d8b42a32028b45ed/html5/thumbnails/23.jpg)
Semantic Web <progress> tag
This tag is useful in cases where the progress of a loading AJAX application, web form, et cetera needs to be shown.
![Page 24: HTML5](https://reader036.vdocuments.net/reader036/viewer/2022070321/558a2975d8b42a32028b45ed/html5/thumbnails/24.jpg)
Semantic Web <progress> tag
• <progress>Step 3 of 6</progress>• <progress>50% Complete</progress>• <progress value="0.5"> Half way!</progress>
![Page 25: HTML5](https://reader036.vdocuments.net/reader036/viewer/2022070321/558a2975d8b42a32028b45ed/html5/thumbnails/25.jpg)
Semantic Web <m> tag
The <m> stands for marked or highlighted text. This tag is used to indicate point of relevance in a page.eg: error notifications or search results within a page
![Page 26: HTML5](https://reader036.vdocuments.net/reader036/viewer/2022070321/558a2975d8b42a32028b45ed/html5/thumbnails/26.jpg)
Semantic Web <m> tag
<p>The highlighted part below is where the error lies:</p><pre><code>var i: Integer;begin i := <m>1.1</m>;end.</code></pre>
![Page 27: HTML5](https://reader036.vdocuments.net/reader036/viewer/2022070321/558a2975d8b42a32028b45ed/html5/thumbnails/27.jpg)
Form Controls
![Page 28: HTML5](https://reader036.vdocuments.net/reader036/viewer/2022070321/558a2975d8b42a32028b45ed/html5/thumbnails/28.jpg)
Form Controls
Forms controls in HTML 4 are too limited and difficult to implement. The developers at W3C and WHATWG identified these limitations and introduced several new features in HTML 5.
![Page 29: HTML5](https://reader036.vdocuments.net/reader036/viewer/2022070321/558a2975d8b42a32028b45ed/html5/thumbnails/29.jpg)
Form Controls
HTML 5 has superseded Web Forms 2.0, the other document of WHATWG. All features of Web Forms 2.0 have now been included in the HTML 5 document.
![Page 30: HTML5](https://reader036.vdocuments.net/reader036/viewer/2022070321/558a2975d8b42a32028b45ed/html5/thumbnails/30.jpg)
Form Controls Dates and Time
• <input type="datetime">• <input type="date">• <input type="time">
![Page 31: HTML5](https://reader036.vdocuments.net/reader036/viewer/2022070321/558a2975d8b42a32028b45ed/html5/thumbnails/31.jpg)
Form Controls Numbers
• <input type="number">• <input type="range">
![Page 32: HTML5](https://reader036.vdocuments.net/reader036/viewer/2022070321/558a2975d8b42a32028b45ed/html5/thumbnails/32.jpg)
Form Controls Email and URLs
• <input type=“email">• <input type=“url">
[email protected] http://tanamania.wordpress.comhttp://tanamania.wordpress.com/ Tanay’s Blog
http://twitter.com/tanamania/
![Page 33: HTML5](https://reader036.vdocuments.net/reader036/viewer/2022070321/558a2975d8b42a32028b45ed/html5/thumbnails/33.jpg)
Form Controls Combo Boxes
• <input list="title-list"><datalist id="title-list"> <option value="..."></datalist>
![Page 34: HTML5](https://reader036.vdocuments.net/reader036/viewer/2022070321/558a2975d8b42a32028b45ed/html5/thumbnails/34.jpg)
Form Controls Form Validation
• New attributes like required, pattern, min, max, etc. have been introduced to describe validity constraints for the expected input.
• New DOM APIs allow scripts to detect and deal with user input errors more easily.
![Page 35: HTML5](https://reader036.vdocuments.net/reader036/viewer/2022070321/558a2975d8b42a32028b45ed/html5/thumbnails/35.jpg)
Embedded Content and Multimedia
![Page 36: HTML5](https://reader036.vdocuments.net/reader036/viewer/2022070321/558a2975d8b42a32028b45ed/html5/thumbnails/36.jpg)
Embedded Content & Multimedia
Rich Internet Application (RIA) Tools:
With HTML 5, say goodbye to these tools! Let’s see how...
![Page 37: HTML5](https://reader036.vdocuments.net/reader036/viewer/2022070321/558a2975d8b42a32028b45ed/html5/thumbnails/37.jpg)
Embedded Content & Multimedia
Canvas
HTML 5 has introduced the <canvas> tag for adding dynamic and interactive graphics to our web page.
It is proving to be extremely useful for graphs, applications, games and puzzles and many more.
![Page 38: HTML5](https://reader036.vdocuments.net/reader036/viewer/2022070321/558a2975d8b42a32028b45ed/html5/thumbnails/38.jpg)
Embedded Content & Multimedia
Canvas
A practical example of the use of <canvas> is the Mozilla lab project – Bespin which is an Extensible Web Code Editor built using canvas.
The following image shows another small example of canvas.
![Page 39: HTML5](https://reader036.vdocuments.net/reader036/viewer/2022070321/558a2975d8b42a32028b45ed/html5/thumbnails/39.jpg)
Embedded Content & Multimedia
Canvas
![Page 40: HTML5](https://reader036.vdocuments.net/reader036/viewer/2022070321/558a2975d8b42a32028b45ed/html5/thumbnails/40.jpg)
Embedded Content & Multimedia
Geolocation
This HTML 5 API defines location information of the device hosting the API.
Sources of location information include Global Positioning System (GPS) and network elements such as IP address, RFID, WiFi and Bluetooth MAC addresses and GSM/CDMA cell IDs.
![Page 41: HTML5](https://reader036.vdocuments.net/reader036/viewer/2022070321/558a2975d8b42a32028b45ed/html5/thumbnails/41.jpg)
Embedded Content & Multimedia
Geolocation
![Page 42: HTML5](https://reader036.vdocuments.net/reader036/viewer/2022070321/558a2975d8b42a32028b45ed/html5/thumbnails/42.jpg)
Embedded Content & Multimedia
Application Caches
This HTML 5 feature enables the user to store web applications locally and access them without any external client.
Google Gears, which enables the users to access Gmail offline, is an implementation of this specification of HTML 5.
![Page 43: HTML5](https://reader036.vdocuments.net/reader036/viewer/2022070321/558a2975d8b42a32028b45ed/html5/thumbnails/43.jpg)
Embedded Content & Multimedia
<audio> and <video> tags
These are the most amazing feature of HTML 5.
At present Flash has become the de facto standard for adding video content to web sites.
This requires additional plug-ins to be installed on the browser.
![Page 44: HTML5](https://reader036.vdocuments.net/reader036/viewer/2022070321/558a2975d8b42a32028b45ed/html5/thumbnails/44.jpg)
Embedded Content & Multimedia
<audio> and <video> tags
With HTML 5, audios and videos can be embedded with the use of <audio> and <video> tags.
This is done by specifying a standard multimedia codec for all web browsers.
![Page 45: HTML5](https://reader036.vdocuments.net/reader036/viewer/2022070321/558a2975d8b42a32028b45ed/html5/thumbnails/45.jpg)
Embedded Content & Multimedia
<audio> and <video> tags
• <video src=“movie.ogg” id=“video”>...</video>
• <button onclick=“video.play();”> Play</button>
• <audio src=“audio.ogg” id=“audio”>...</audio>
• <button onclick=“audio.play();”> Play</button>
![Page 46: HTML5](https://reader036.vdocuments.net/reader036/viewer/2022070321/558a2975d8b42a32028b45ed/html5/thumbnails/46.jpg)
Embedded Content & Multimedia
<audio> and <video> tags
![Page 47: HTML5](https://reader036.vdocuments.net/reader036/viewer/2022070321/558a2975d8b42a32028b45ed/html5/thumbnails/47.jpg)
This is what the whole fuss is about!!!
![Page 48: HTML5](https://reader036.vdocuments.net/reader036/viewer/2022070321/558a2975d8b42a32028b45ed/html5/thumbnails/48.jpg)
HTML5 Concluding Notes
HTML5 is designed so that old browsers can safely ignore new HTML5 constructs.
It is estimated by Ian Hickson, the WHATWG editor, that HTML5 will reach the W3C Candidate Recommendation stage during 2012.
![Page 49: HTML5](https://reader036.vdocuments.net/reader036/viewer/2022070321/558a2975d8b42a32028b45ed/html5/thumbnails/49.jpg)
HTML5 Concluding Notes
It is estimated, again by Hickson, that HTML 5 will reach a W3C recommendation in the year 2022 or later.
This doesn’t mean that you and I can’t use these amazing features today.
![Page 50: HTML5](https://reader036.vdocuments.net/reader036/viewer/2022070321/558a2975d8b42a32028b45ed/html5/thumbnails/50.jpg)
HTML5 Concluding Notes
Currently the features are not supported by every browser. Most features work well with Firefox 3.5 or higher.
Safari 4, Opera 9 and Chrome also support many of the features.
![Page 51: HTML5](https://reader036.vdocuments.net/reader036/viewer/2022070321/558a2975d8b42a32028b45ed/html5/thumbnails/51.jpg)
HTML5 Further Reading
http://www.whatwg.org/
http://www.w3.org/html/wg/html5/
http://dev.w3.org/html5/html4-differences/
Mail to:
Join the mailing list:
http://whatwg.org/mailing-list/
![Page 52: HTML5](https://reader036.vdocuments.net/reader036/viewer/2022070321/558a2975d8b42a32028b45ed/html5/thumbnails/52.jpg)
HTML5
Images Courtesy
http://www.webmastersbydesign.com/2008/06/17/what-can-we-expect-from-html-5/
http://www.pinceladasdaweb.com.br/blog/uploads/html5.jpg
Referenceshttp://www.geektechnica.com/2009/06/5-amazing-html5-features-to-look-forward-to/
http://lachy.id.au/slides/developing-with-html5/
![Page 53: HTML5](https://reader036.vdocuments.net/reader036/viewer/2022070321/558a2975d8b42a32028b45ed/html5/thumbnails/53.jpg)
HTML 5 by Tanay Mathpal is licensed under a Creative Commons Attribution-Share Alike 2.5 India License
HTML5 Licensing
![Page 54: HTML5](https://reader036.vdocuments.net/reader036/viewer/2022070321/558a2975d8b42a32028b45ed/html5/thumbnails/54.jpg)
<thank you>
HTML5