140 likes | 208 Views
Introduction to HTML 5. Director of Computer Center, DaYeh University Ku-Yaw Chang. Outline. Overview New Elements. What is HTML5 ?. the new standard for HTML HTML 4.01 came in 1999 The web has changed a lot since then HTML5 is still a work in progress
E N D
Introduction to HTML 5 Director of Computer Center, DaYeh University Ku-Yaw Chang
Outline • Overview • New Elements HTML 5
What is HTML5? • the new standard for HTML • HTML 4.01 came in 1999 • The web has changed a lot since then • HTML5 is still a work in progress • Major browsers support many of the new HTML5 elements and APIs • continue to add new HTML5 features to their latest versions HTML 5
MinimumHTML5 Document <!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> The content of the document...... </body> </html> HTML 5
New Features of HTML 5 • New Elements • New Attributes • Full CSS3 Support • Video and Audio • 2D/3D Graphics • Local Storage • Local SQL Database • Web Applications HTML 5
New Elements in HTML5 HTML 5
HTML 5 Canvas • Only a container for graphics • You must use a script to actually draw the graphics • Usually JavaScript • A rectangular area on an HTML page • Specified with the <canvas> element • A two-dimensional grid • Upper-left corner has coordinate (0,0) HTML 5
Example 01 - Canvas <!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"> Your browser does not support the HTML5 canvas tag. </canvas> </body> </html> HTML 5
Example 02 - Canvas : <script> var c=document.getElementById("myCanvas"); varctx=c.getContext("2d"); ctx.fillStyle="#FF0000"; ctx.fillRect(0,0,150,75); </script> : HTML 5
Example 03 - Canvas : <script> var c=document.getElementById("myCanvas"); varctx=c.getContext("2d"); ctx.moveTo(0,0); ctx.lineTo(200,100); ctx.stroke(); </script> : HTML 5
HTML 5 – Inline SVG • SVG stands for Scalable Vector Graphics • Used to define vector-based graphics for the Web • Defines the graphics in XML format • Do NOT lose any quality if they are zoomed or resized • Every element and every attribute can be animated • A W3C recommendation HTML 5
Example 04 - SVG <svgxmlns="http://www.w3.org/2000/svg" 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> HTML 5
Removed Elements The following HTML 4.01 elements are removed from HTML5: • <font> • <frame> • <frameset> • <noframes> • <strike> • <tt> • <acronym> • <applet> • <basefont> • <big> • <center> • <dir> HTML 5
The End HTML 5