Lab#4

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

</body>

</html>

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>

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>

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

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

Example Canvas

//Circle

var c=document.getElementById("myCanvas");


ctx.beginPath();

ctx.arc(95,50,40,0,2*Math.PI);

ctx.stroke();

//Text



ctx.font="30px Arial";

ctx.fillText("Hello World",10,50);

Canvas – Gradients

Example



// 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);

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 img=document.getElementById("scream");

ctx.drawImage(img,10,10);

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.php/download/