1 / 14

Introduction to HTML 5

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

karen-flowers
Download Presentation

Introduction to HTML 5

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Introduction to HTML 5 Director of Computer Center, DaYeh University Ku-Yaw Chang

  2. Outline • Overview • New Elements HTML 5

  3. 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

  4. MinimumHTML5 Document <!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> The content of the document...... </body> </html> HTML 5

  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

  6. New Elements in HTML5 HTML 5

  7. 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

  8. 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

  9. 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

  10. 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

  11. 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

  12. 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

  13. 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

  14. The End HTML 5

More Related