Downloaded 28 times
![DETAILS: NAME : S. Renu Karthick MAIL : [email_address] BLOG : renukartis.wordpress.com](https://image.slidesharecdn.com/sek-100616070547-phpapp02/85/HTML-5-15-320.jpg)
HTML 5
- 1. HTML 5 By,S. RENU KARTHICK
- 2.
- 3. • WebHypertext Application Technology Working Group (WHATWG) Founded in 2004 (by individuals working for browser vendors Apple, Mozilla, Google, and Opera) Develops HTML and APIs for web application development Unofficial and open collaboration of browser vendors and interested parties • World Wide Web Consortium (W3C) Created draft of HTML5 in 2008 STANDARDS
- 4. OBJECTIVES HTML 5was poineered in the year 2004 by Web Hypertext Application Technology User Group (WHATWG). The working group includes Google, Mozilla, Opera, Apple, AOL, Nokia and many others. The specification is ongoing working and expected to remain so for many years.
- 5. Provide good supportfor modern documents and web applications -Web 2.0; social sites; online shops; ... Support legacy web content. Optimise backward compatibility -HTML4, XHTML 1 Cover common browser functionality. Make web content authoring more uniform.
- 6. PARADIGM HTML 5is a content model, not a syntax. Emphasises what web contents consists of, not how it is represented. Definition of Document Object Model. In HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " http://www.w3.org/TR/html4/loose.dtd "> In HTML 5 <!DOCTYPE html>
- 7. Simplified Character SetIn HTML <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> In HTML 5 <meta charset="utf-8">
- 8. WHAT IS NEWIN HTML 5 ??? Structure of textual documents section, article, header, footer, ... Multimedia audio, video, embed, ... Graphics canvas, figure, ... Forms Input, ... Editing drag-and-drop, copy-and-paste, undo, ... etc...
- 9. HTML 5 NewStructure HTML 5 recognizes that Web pages have a structure, just like books have a structure or other XML documents. In general, Web pages have navigation, body content, and sidebar content plus headers, footers, and other features. And HTML 5 has created tags to support those elements of the page. <section> - to define sections of pages <header> - defines the header of a page <footer> - defines the footer of a page <nav> - defines the navigation on a page <article> - defines the article or primary content on a page <aside> - defines extra content like a sidebar on a page <figure> - defines images that annotate an article
- 10. USAGE OF NEWELEMENTS IN A WEBPAGE
- 11. HTML 5 NewInline Elements These inline elements define some basic concepts and keep them semantically marked up, mostly to do with time: <mark> - to indicate content that is marked in some fashion <time> - to indicate content that is a time or date <meter> - to indicate content that is a fraction of a known range - such as disk usage <progress> - to indicate the progress of a task towards completion HTML 5 New Elements There are a few exciting new elements in HTML 5: <canvas> - an element to give you a drawing space in JavaScript on your Web pages. It can let you add images or graphs to tool tips or just create dyanmic graphs on your Web pages, built on the fly. <video> - add video to your Web pages with this simple tag. <audio> - add sound to your Web pages with this simple tag.
- 12. CANVAS HTML5 elementand plugin-free 2D drawing API that enables you to dynamically generate and render: Graphics Charts Images Animation Canvas was originally introduced by Apple to be used in Mac OS X WebKit to create dashboard widgets. Canvas is a scriptable bitmap canvas (images that are drawn are final and cannot be resized). Can be manipulated with JavaScript and styled with CSS 2D Context and 3D Context (Web GL). SYNTAX: Example: <canvas id="myCanvas" width="200" height="100"></canvas>
- 13. Sample Program verified:<!DOCTYPE HTML> <html> <body> <canvas id="myCanvas" width="700" height="500" style="border:5px solid #000000;"> Your browser does not support the canvas element. </canvas> <script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); var img=new Image() img.src="/home/fp053/Desktop/html5structure.png" cxt.drawImage(img,0,0); </script> </body> </html> Here, an image is embedded in the canvas.
- 14. AUDIO 'n' VIDEO: New HTML5 media elements <audio> <video> Control using Audio/Video API Native support in the browser (embedded codecs) Originally, the HTML5 specification was going to require codec support... Audio and Video containers: H264 and Ogg Audio and video codecs (algorithms used to encode and decode an audio or video stream): Audio: AAC, MP3, Vorbis Video: H264, MP4, Theora You can add multiple formats per (audio/video) element to fallback.
- 15. DETAILS: NAME : S. Renu Karthick MAIL : [email_address] BLOG : renukartis.wordpress.com