3. • Web Hypertext 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.
5.
6.
7.
8.
9. HTML 5 New Structure 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
11. HTML 5 New Inline 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 element and 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.
15. DETAILS: NAME : S. Renu Karthick MAIL : [email_address] BLOG : renukartis.wordpress.com
