Your SlideShare is downloading. ×
0
HTML5 NEW ELEMENT
322432 Web Design Technology
Syntax HTML5
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document...
www.kapook.com
www.teenee.com
HTML5 New Elements
TAG Description
Canvas
Example
<canvas id="myCanvas" width="200"
height="100" style="border:1px solid
#...
New media element
Tag Description
<audio>
<video>
<source>
<embed>
<track>
<video width="320" height="240" controls>
<sour...
New Form Element
Tag Description
<datalist> Specifies a list of pre-
defined options for input
controls
<keygen> Defines a...
Canvas
Draw Onto The Canvas With JavaScript
Example
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getConte...
Example Canvas
//Circle
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95...
Canvas – Gradients
Example
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Create gradient
var g...
Canvas - Images
Example
<p>Image to use:</p>
<img id="scream" src="img_the_scream.jpg" alt="The Scream"
width="220" height...
LAB#4 New Element HTML5
HTML5 Canvas
HTML5
10
========= ========================
Reference
http://www.w3schools.com/html/default.asp
http://www.808.dk/?code-html-5-video
http://www.bigbuckbunny.org/index...
Lab#4 html5new element
Upcoming SlideShare
Loading in...5
×

Lab#4 html5new element

284

Published on

html5 new element

Published in: Education, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
284
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Lab#4 html5new element"

  1. 1. HTML5 NEW ELEMENT 322432 Web Design Technology
  2. 2. Syntax HTML5 <!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> The content of the document...... </body> </html>
  3. 3. www.kapook.com
  4. 4. www.teenee.com
  5. 5. HTML5 New Elements TAG Description Canvas Example <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"> Your browser does not support the HTML5 canvas tag. </canvas>
  6. 6. New media element Tag Description <audio> <video> <source> <embed> <track> <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4”> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video>
  7. 7. New Form Element Tag Description <datalist> Specifies a list of pre- defined options for input controls <keygen> Defines a key-pair generator field (for forms) < output> Defines the result of a calculation
  8. 8. Canvas Draw Onto The Canvas With JavaScript Example <script> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.fillStyle="#FF0000"; ctx.fillRect(0,0,150,75); </script> First, find the <canvas> element: The fillRect(x,y,width,height) X Y
  9. 9. Example Canvas //Circle var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.beginPath(); ctx.arc(95,50,40,0,2*Math.PI); ctx.stroke(); //Text var c1=document.getElementById("myCanvas1"); var ctx1=c1.getContext("2d"); ctx1.font="30px Arial"; ctx1.fillText("Hello World",10,50);
  10. 10. Canvas – Gradients Example var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); // Create gradient var grd=ctx.createLinearGradient(0,0,200,0); grd.addColorStop(0,"red"); grd.addColorStop(1,"white"); // Fill with gradient ctx.fillStyle=grd; ctx.fillRect(10,10,150,80);
  11. 11. Canvas - Images Example <p>Image to use:</p> <img id="scream" src="img_the_scream.jpg" alt="The Scream" width="220" height="277"><p>Canvas:</p> <canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML5 canvas tag.</canvas> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); var img=document.getElementById("scream"); ctx.drawImage(img,10,10);
  12. 12. LAB#4 New Element HTML5 HTML5 Canvas HTML5 10 ========= ========================
  13. 13. Reference http://www.w3schools.com/html/default.asp http://www.808.dk/?code-html-5-video http://www.bigbuckbunny.org/index.php/download/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×