Director of Computer Center, DaYeh University Ku-Yaw Chang.
14
INTRODUCTION TO HTML 5 Director of Computer Center, DaYeh University Ku-Yaw Chang
-
Upload
nathan-harper -
Category
Documents
-
view
213 -
download
0
Transcript of Director of Computer Center, DaYeh University Ku-Yaw Chang.
INTRODUCTION TO HTML 5Director of Computer Center,DaYeh University
Ku-Yaw Chang
HTML 5 2
Outline Overview New Elements
2013/05/06
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
2013/05/06
HTML 5 4
MinimumHTML5 Document<!DOCTYPE html> <html> <head> <title>Title of the document</title> </head>
<body>The content of the document...... </body>
</html> 2013/05/06
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
2013/05/06
HTML 5 6
New Elements in HTML5
2013/05/06
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)
2013/05/06
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>
2013/05/06
HTML 5 9
Example 02 - Canvas:
<script>
var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");ctx.fillStyle="#FF0000";ctx.fillRect(0,0,150,75);
</script>
:2013/05/06
HTML 5 10
Example 03 - Canvas:
<script>
var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");ctx.moveTo(0,0);ctx.lineTo(200,100);ctx.stroke();
</script>
:
2013/05/06
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
2013/05/06
HTML 5 12
Example 04 - SVG<svg xmlns="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>
2013/05/06
HTML 5 13
Removed ElementsThe following HTML 4.01 elements are removed from HTML5:
<font> <frame> <frameset> <noframes> <strike> <tt>
2013/05/06
<acronym> <applet> <basefont> <big> <center> <dir>
HTML 5 14
The End
2013/05/06
