Published on

Published in: Education, Technology
1 Comment
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide


  1. 1. Presented By:Prashant RathodSuraj Ratnaparkhi
  2. 2. CONTENTSWhat is HTML?HistoryHTML 5AimRulesNew FeaturesBrowser CompatibilityOS CompatibilityApplicationFutureConclusion
  3. 3. What is HTML?First available description of HTML was a document called "HTML Tags", firstmentioned on the Internet by Berners-Lee in late 1991.HyperText Markup Language (HTML) is the main markup language for webpages.HTML is written in the form of HTML elements consisting of tags enclosed inangle brackets (like <html>) which are basic building blocks for web pages.Browser does not display the HTML tags, but uses the tags to interpret the content of the page.HTML allows images and objects to be embedded and can be used to createinteractive forms.Web browsers can also refer to Cascading Style Sheets (CSS) to define theappearance and layout of text and other material.
  4. 4. What you need?You dont need any tools to learn HTML . You dont need an HTML editor. You dont need a web server. You dont need a web site.
  5. 5. HistoryHTML 2.0 (November 1995)HTML 3.2 was published as a W3C Recommendation(January 1997).HTML 4.0 was published as a W3C Recommendation(December 1997).HTML 4.01was published as an ISO/IEC international standard(May 2000).HTML 5(Still work in progress).
  6. 6. HTML 5HTML5 is a cooperation between the World Wide Web Consortium(W3C) and the Web Hypertext Application Technology WorkingGroup (WHATWG).In 2006, they started work on new version of HTML.HTML5 is still a work in progress.No browser currently fully support HTML5.Some of the browsers continue to add new features of HTML in theirnew versions.
  7. 7. AIMAim behind development of HTML5 was:Need for support for latest multimedia due continuously evolving Internet.Compatibility with latest OS and Browsers.
  8. 8. RULESNew features based on HTML, CSS, DOM, JavaScript.Reduce need for external plug-in(like Flash).Better Error Handling.More Mark-Up to replace Scripting.Device Independent.
  9. 9. NEW FEATURESNew Elements.New Attributes.Full CSS3 Support.Video and Audio.2D/3D support.Web Storage.Local SQL Database.Web Application.
  10. 10. New Elements: Some elements in HTML 4.01 are obsolete, never used, or not used the way they were intended to. These elements are removed or re-written in HTML5. New Semantic/Structural Elements: <article> <bdi> <command> <figure> <figcaption> <footer> <header> <hgroup> <meter> <progress> <section>
  11. 11. (b) New Media Elements: <audio> <video> <source> <embed> <track>(c) New Canvas Element: <canvas>
  12. 12. (d) New Form Elements: <datalist> <keygen> <output>
  13. 13. Removed ElementsThe following HTML 4.01 elements are removed from HTML5: <acronym> <applet> <basefont> <big> <center> <dir> <font> <frame> <frameset> <noframes> <strike> <tt> <u>
  14. 14. New Attributes(a) Global Attributes:contenteditablecontextmenudraggabledropzonehiddenspellcheck
  15. 15. (b) Event Attributes: onpagehide onpageshow onresize onstorage onforminput oninvalid onkeydown onkeypress onkeyup ondragleave onscroll onplay onvolumechange
  16. 16. New CSS SupportCascading Style Sheets (CSS) is a style sheet language used for describingthe presentation semantics (the look and formatting) of a document writtenin a markup language.The CSS specifications are maintained by the World Wide Web Consortium(W3C). Internet media type (MIME type) text/css is registered for use withCSS.HTML supports CSS3.CSS3 is supported by major browsers.CSS reduces presentation duty of an HTML page.Modification of looks is simple.
  17. 17. Video & Audio<video> - Allows to embed a video on a web page - width, height, controls are the attributes. - Very useful feature in todays web scenario.- <source>,<track> are the tags which can be used along with <video>.<audio>- Allows to embed a audio on a web page.- Text displayed between <audio> and </audio> will be shown as an error if browser does not support audio.- autoplay, controls, src, loop, preload ares some of its attributes.
  18. 18. 2D/3D Support<canvas> - The <canvas> tag is used to draw graphics, on the fly, via scripting (usually JavaScript). - The <canvas> tag is only a container for graphics, you must use a script to actually draw the graphics. - Height and Width are the attributes. - HTML5 has a built-in object for the canvas element, the getContext("2d") object. - Canvas object has API which includes methods for creating, formatting various shapes and figures. - API also includes methods for image and text manipulation as well as transformation.
  19. 19. Web StorageHTML5, web pages can store data locally within the users browser.Web Storage in HTML5 can be viewed as improvement over cookies.Provides 5-10 MB storage space compared to 4 KB in cookies.Web Storage is more secure and faster than cookies.Data is stored in key/value pairs, and a web page can only accessdata stored by itself.Web server can not access web storage data directly.Store large amounts of data, without affecting the websitesperformance.Two new objects for storing data on the client: (a) localStorage - stores data with no expiration date (b) sessionStorage - stores data for one session
  20. 20. localStorage and sessionStorageThe localStorage object stores the data with no expiration date. The datawill not be deleted when the browser is closed, and will be available thenext day, week, or year. localStorage.setItem(myKey, myValue); var myVar = localStorage.getItem(myKey);The sessionStorage object is equal to the localStorage object, exceptthat it stores the data for only one session. The data is deleted whenthe user closes the browser window. sessionStorage.setItem(myKey, myValue); var myVar = sessionStorage.getItem(myKey);
  21. 21. Application CacheWhen web application is cached, it can accessible without an internetconnection.Application cache gives an application three advantages:(1) Offline browsing - users can use the application when theyre offline.(2) Speed - cached resources load faster.(3) Reduced server load - the browser will only download updated/changed resources from the server.To enable application cache, include the manifest attribute in the documents <html> tag: <!DOCTYPE HTML> <html manifest="demo.appcache"> ... </html>
  22. 22. Manifest AttributePage with the manifest attribute specified will be cached when the user visits it.Recommended file extension for manifest files is: ".appcache"Manifest file is a simple text file, which tells the browser what to cache(and what to never cache).The manifest file has three sections: (a) CACHE MANIFEST - Files listed under this header will be cachedafter they are downloaded for the first time (b) NETWORK - Files listed under this header require a connection to the server, and will never be cached (c) FALLBACK - Files listed under this header specifies fallback pages if a page is inaccessible
  23. 23. Geo-locationHTML5 Geo-location API is used to get the geographical position ofa web site user.getCurrentPosition() method to get the users position.If the getCurrentPosition() method is successful, it returns acoordinates object to the function specified in the parameter(showPosition)showPosition() function gets the displays the Latitude and Longitude.watchPosition() - Returns the current position of the user andcontinues to return updated position as the user moves.Since this can compromise user privacy, the position is not availableunless the user approves it.
  24. 24. Web WorkerWhat is a Web Worker? -When executing scripts in an HTML page, the page becomesunresponsive until the script is finished. -For concurrent execution of the browser threads and one or moreJavaScript threads running in the background. Supposed to run without affecting the performance of the web page.Communication between page & worker is done via message passing.Steps for creating a web worker.(1) Create a Web Worker file. This is a JavaScript file which is used by web worker object.(2) Create a Web Worker Object. Worker w=new Worker("demo_workers.js");(3) Terminate Web Worker Object. w.close();
  25. 25. Drag & DropDrag and drop is a very common feature.In HTML5 any element is draggable .To make an element draggable, set the draggable attribute to true< img draggable=”true”/>What to drag?-ondragstart attribute calls a function, drag(event) which has a method dataTransfer.setData() method sets the data type and the value of the dragged data.Where to drag?-ondragover event tells about where to drop dragged element.-To prevent default drop handling we use event.preventDefault() method.Do the drop:When the dragged data is dropped, a drop event occurs.drop(event) function we implement things which will occur on release ofdrag operation.
  26. 26. Inline SVGSVG stands for Scalable Vector Graphics used to define vector-based graphics for the Web.SVG graphics do NOT lose any quality if they are zoomed orresized.SVG is a W3C recommendation.SVG images can be searched, indexed, scripted, and compressed.SVG images are scalable. <html> <body> <svg xmlns="" version="1.1" height="190"> <polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill- rule:evenodd;" /> </svg> </body> <html>
  27. 27. Browser Compatibility All major browser support HTML5. Though no browser fully supports HTML5, most of the browsers keep releasing their new version to support various new features of HTML5. Following Browsers supports HTML5.We can check how much our browser supports HTML5 by visiting tofollowing link through our browser.
  28. 28. Operating Systems CompatibilityHTML5 is supported by many computer Operating Systems like Windows,Macetc.HTML 5 is also supported by many mobile and tablet OS like iOS, BlackberryTablet OS, Windows Mobile etc.
  29. 29. ApplicationsMost powerful aspect of HTML5 is the HTML5 canvas.HTML5 Canvas is used extensively for graphical webapplications.E.g. SketchpadMusic visualization.Business friendly applications like to make graph, chartsetc.Game development.Mobile Web Application development.
  30. 30. FutureHTML5 and CSS3 are clearly the future of the webHTML5 as an alternative to Flash.HTML5 Multimedia is currently the only way to deliver web-based videocontent on iOS devices.HTML5’s dynamic nature will provide broader cross platformcompatibility benefits.Online Game development.Future OS using HTML5 already in their native applications.HTML5 Local Storage allows to store data in your browser and makethat data available when you return.
  31. 31. ConclusionHTML5 is still a work in progressOnly a handful of major brands, including Mozilla Firefox and GoogleChrome currently support HTML5 elements.Microsoft’s Internet Explorer is the most widely used browser andcurrently has the least amount of support for HTML5.To redesign or not to redesign web-sites.HTML5 will replace the majority of native apps over the next 3 to 5years.HTML5 allows online software and content to be much moreinteractive and richer.HTML5 provides powerful browser-based applications.
  32. 32. Thank You