Bài giảng Phát triển ứng dụng Web. Web Programming - Chương 4: Introduction to HTML5

1HTML5/CSS3 Course
Introduction to HTML5
Presenter: Msc. Luong Tran Hy Hien, FIT of HCMUP.
2HTML5 = HTML + CSS + JS API
Contents
• HTML5 Structure
• HTML5 Audio/Video
• HTML5 Form
• HTML5 Canvas
3
New and Updated HTML5 Elements
HTML5 introduces 28 new elements:
, , , ,
,, ,
, , , ,
, , ,,
, , , , ,,
, , ,,
, and 
4
HTML5 Structure
5
Structure
6
Structure
7
Structure
HTML5 offers new semantic elements to define different parts of a 
web page: 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
8
• The section element represents a generic section 
of a document or application. A section, in this 
context, is a thematic grouping of content, 
typically with a heading
9
• A header element is intended to usually contain 
the section's heading (an h1–h6 element or an 
hgroup element), but this is not required. The 
header element can also be used to wrap a 
section's table of contents, a search form, or any 
relevant logos
10
• The hgroup element represents the heading of a 
section. The element is used to group a set of 
h1–h6 elements when the heading has multiple 
levels, such as subheadings, alternative titles, or 
taglines
11
• The footer element represents a footer for its 
nearest ancestor sectioning content or 
sectioning root element. A footer typically 
contains information about its section such as 
who wrote it, links to related documents, 
copyright data, and the like
12
• The article element represents a self-contained 
composition in a document, page, application, or site 
and that is, in principle, independently distributable or 
reusable, e.g. in syndication. This could be a forum post, 
a magazine or newspaper article, a blog entry, a user-
submitted comment, an interactive widget or gadget, or 
any other independent item of content..
13
• The nav element represents a section of a page 
that links to other pages or to parts within the 
page: a section with navigation links
14
Block semantic element
• 
• 
15
• The aside element represents a section of a page 
that consists of content that is tangentially 
related to the content around the aside element, 
and which could be considered separate from 
that content. Such sections are often 
represented as sidebars in printed typography.
16
• Specifies self-contained content, like illustrations, 
diagrams, photos, code listings, etc
17
Inline semantic element
• 
• 
• 
• 
18
• Defines marked/highlighted text
19
• Defines a date/time
20
• Defines a scalar measurement within a known 
range (a gauge)
21
• The progress element provides a simple and 
effective way for a web designer to notify a user 
of their progress regarding a specified task
22
Open new page in Dreamweaver
Lab: frames layers
23
1/3
100px
2/3
No need for ids here; use HTML5 tags
Older browsers need to know block elements
Lab: frames layers
24
calc() defines position of each layer
Space in command is important
New with CSS3; not universally supported yet
Lab: frames layers
25
33.33%
- 5px
66.67%
- 5px
calc(33.33% - 5px);
Finish out the lab
Lab: frames layers
26
33.33%
- 5px
66.67%
- 5px
header {
display: block;
position: absolute;
top: 10px;
right: 10px;
left: 10px;
height: 100px;
background-color: #EEEEFF;
}
nav {
20px;
calc(66.67% + 5px);
bot om: 10px;
l ft: 10px;
FFEE
s ction {
calc(33.33% + 5px);
FF
HTML Media
27
Content
• Introduction
• Audio tag
• Video tag
• Other multimedia
• Exercise & Online
28
Ebook for HTML5 Media
Audio/Video
29
HTML5 in Action on the Web
30
HTML4 == Plugins
• Silverlight™
• Quicktime™
• Flash™
31
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
codebase="
#version=9,0,16,0" 
width="320" height="400">
CODEC == COmpressor/DECompressor
Support for (and demo of) HTML5 
Audio
• 
• 
32
Format IE 9 Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0
Ogg Vorbis No Yes Yes Yes No
MP3 Yes No No Yes Yes
Wav No Yes Yes No Yes 33
Support for (and demo of) HTML5 
Video
• HTML5 Video
– 
– 
34
Format IE Firefox Opera Chrome Safari
Ogg No 3.5+ 10.5+ 5.0+ No
MPEG 4 9.0+ No No 5.0+ 3.0+
WebM No 4.0+ 10.6+ 6.0+ No
35
Audio/Video for Publishers
HTML5 lets you embed audio/video directly in your 
content without any plugins needed:
(Sorry, <audio> element not supported in your 
browser/ereader, so you will not be able to listen to this 
song.)
(Sorry, <video> element not supported in your 
browser/ereader, so you will not be able to watch this 
video.)
36
HTML5 Video
• Example:
<video src="foo.mp4" width="300" height="200" 
controls> Your browser does not support the 
 element. 
• Property: 
– src, autoplay, controls, height, width, 
– loop, autobuffer, preload, poster
37
HTML5 Audio
• Example:
Your browser does not support the 
element.
• Property: 
– src, autoplay, controls
– loop, autobuffer, preload
38
Handling Media Events
Event Description
abort This event is generated when playback is aborted.
canplay This event is generated when enough data is 
available that the media can be played.
ended This event is generated when playback completes.
error This event is generated when an error occurs.
loadeddataThis event is generated when the first frame of 
the media has finished loading.
loadstart This event is generated when loading of the media 
begins.
39
Handling Media Events
Event Description
pause This event is generated when playback is paused.
play This event is generated when playback starts or 
resumes.
progress This event is generated periodically to inform the 
progress of the downloading the media.
ratechange This event is generated when the playback speed 
changes.
seeked This event is generated when a seek operation 
completes.
40
Handling Media Events
Event Description
seeking This event is generated when a seek operation 
begins.
suspend This event is generated when loading of the 
media is suspended.
volumechange This event is generated when the audio 
volume changes.
waiting This event is generated when the requested 
operation (such as playback) is delayed 
pending the completion of another operation 
(such as a seek).
41
Example
var clip = document.getElementById('audio');
clip.muted = false; //câm
clip.play(); //phát
clip.pause(); //tạm dừng
42
Learning by example
• Prepare video and audio file
• 
43
44
HTML5/CSS3
HTML5 Forms
Giới thiệu
• Các thành phần mới trong HTML5 bổ sung 
thêm chức năng mà các nhà thiết kế/phát 
triển web thường kết hợp quan các 
phương tiện khác như javascript và Flash.
• HTML5 = HTML4 + một số thẻ thêm + 
validation
45
Một số thẻ trong Form
• (password)
• 
• 
• 
• (reset, button)
• . 
• 
 . 
• , 
■ button ■ checkbox ■ file ■ hidden ■ image ■ password ■ radio ■ reset ■ submit ■ text
46
13 New Input Types
47
Một số thuộc tính mới
• Của thẻ : autocomplete, novalidate
• Của thẻ : 
– autocomplete
– autofocus
– form
– formaction
– formenctype
– formmethod
– formnovalidate
– formtarget
48
– height and width
– list
– min and max
– multiple
– pattern (regexp)
– placeholder
– required
– step
Thẻ input có thuộc tính type mới
• search 
• email
• url
• tel
• datetime
• date
• month
• week
• time
• datetime-local
• number
• range
• color
49
Thành phần label
• Thành phần không bắt buộc, tăng khả 
năng truy cập cho form.
• Phone
• <input type="text" name="txtPhone" 
id="txtPhone">
50
Search
 search
Dùng để search hỗ trợ bởi Chrome, Opera, và 
Safari.
Search Google: 
`
51
Email
 email
Hỗ trợ bởi Chrome, Opera, firefox và safari.
E-mail: 
52
URL
 url
Dùng để nhập liệu địa chỉ web(URL address).
Field sẽ được tự động validate khi form 
submit.
Hỗ trợ bởi Chrome, Opera, firefox.
Add your homepage:
53
Range
 range
Hỗ trợ Opera và WebKit (Chrome). Gồm có các thuộc tính 
min, max, và step.
Dùng hỗ trợ validate nhập liệu số
On a scale of 1 to 10, my knowledge of 
HTML5 is:
<input type="range" min="1" max="10" 
name="rating“>
54
Sliders
<input type="range" min="0" max="20" step="2" 
value="2">
55
color
 color
The color input type (type="color") provides the 
user with a color picker Supported only in Opera, 
Chrome
Select your favorite color: 
56
Spin Boxes
<input type="number" min="0" max="20" step="2" 
value="2">
57
Date Pickers
58
Color Pickers
59
keygen
 keygen
The purpose of the element is to provide a secure 
way to authenticate users.
The tag specifies a key-pair generator field in a 
form. When the form is submitted, two keys are generated, 
one private and one public.
The private key is stored locally, and the public key is sent 
to the server. The public key could be used to generate a 
client certificate to authenticate the user in the future.
Username: 
Encryption: 
60
output
 output
The element represents the result of a calculation 
(like one performed by a script).
<form 
oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
100
+
=
61
Data Lists
62
list
63
• Các thuộc tính mới autofocus, required,
placeholder, maxlength, và pattern. Trong
đó required và placeholder sử dụng cho
textbox.
HTML5 Form Attribute Enhancements
64
Placeholder Text
65
Autofocus Fields
66
Validation
67
Validation Example
68
References
• “Web Forms – Dive into HTML 5” 
• “Dectecting HTML5 Features” 
• 
69
70
HTML5/CSS3
HTML5 Canvas
Msc. Luong Tran Hy Hien, FIT of HCMUP
Canvas dùng làm gì?
• Canvas có thể giúp hiển thị trực quan một 
số hình ảnh dễ dàng trên trình duyệt như:
– Các sơ đồ đơn giản
– Trang trí thêm cho giao diện người dùng
– Hình ảnh động
– Biểu đồ và đồ thị
– Có thể nhúng các ứng dụng vẽ
– Hoạt động tốt với những hạn chế của CSS
71
Canvas (tt)
• 
• Sử dụng Javascript để điều khiển:
var canvas = 
document.getElementById("myCanvas");
// Lấy ra vị trí canvas với bối cảnh 2D:
var context = canvas.getContext("2d");
• Tọa độ:
72
Canvas Lines: Vẽ đường thẳng
• context.moveTo(x,y);
• context.lineTo(x,y); 
• context.stroke();
• Có độ rộng: context.lineWidth = [value];
• Có màu: context.strokeStyle = "#ff0000";
73
Tùy chỉnh đường thẳng
• context.lineCap = "butt";
• context.lineCap = "round";
• context.lineCap = "square";
74
Vẽ đường (tập hợp)
• beginPath(): bắt đầu đường vẽ
• closePath(): kết thúc đường vẽ
• stroke(): vẽ đường biên
• fill(): tô màu
• context.beginPath();
• context.moveTo(50,150);
• context.lineTo(100,100);
• context.lineTo(150,150);
• context.lineTo(200,100);
• context.lineTo(250,150);
• context.stroke();
75
Rectange - Hình chữ nhật
• fillRect(x, y, width, height)
– Vẽ hình chữ nhật đặc
• clearRect(x, y, width, height)
– Xóa nội dung vùng vẽ
• strokeRect(x, y, width, height)
– Vẽ hình chữ nhật chỉ có biên
• fillStyle: CSS background color
• strokeStyle: CSS border color 76
Cung tròn
• arc(x, y, radius, angle_start, angle_end, 
anticlockwise)
77
Bài tập
• Vẽ hình chữ nhật có chiều dài 400px, rộng 
300px, 4 góc bo tròn với cung 20px.
• Hướng dẫn:
– Sử dụng lệnh vẽ đường thẳng, cung tròn
– Chú ý: Tính toán các góc
78
Bezier
• Mục đích: Xây dựng hình tùy ý
• context.bezierCurveTo(cp1x, cp1y, cp2x, 
cp2y, x, y);
context.beginPath(); // bắt đầu đường vẽ
context.moveTo(170, 80);
context.bezierCurveTo(130, 100, 130, 150, 230, 150);
context.bezierCurveTo(250, 180, 320, 180, 340, 150);
context.bezierCurveTo(420, 150, 420, 120, 390, 100);
context.bezierCurveTo(430, 40, 370, 30, 340, 50);
context.bezierCurveTo(320, 5, 250, 20, 250, 50);
context.bezierCurveTo(200, 5, 150, 20, 170, 80);
context.closePath(); // kết thúc đường vẽ
context.lineWidth = 5;
context.strokeStyle = "#0000ff";
context.stroke();
context.strokeStyle = "#8ed6ff";
79
Vẽ đường cong đơn giản
context.quadraticCurveTo(controlX, 
controlY, endX, endY);
80
Vẽ đường cong phức tạp
• bezierCurveTo(controlX1, controlY1, co
ntrolX2, controlY2, endX,endY);
81
Bóng đổ
• độ rộng bóng đỗ
– ctx.shadowBlur = 5;
• màu bóng đỗ
– ctx.shadowColor = "black";
• context.shadowOffsetX=[value]; 
context.shadowOffsetY=[value];
//ve trai tim trai
ctx.fillStyle= "#ff0000";
ctx.beginPath();
ctx.moveTo(200,50);
ctx.bezierCurveTo(270,10, 280, 80, 200,120);
ctx.bezierCurveTo(120,80, 130, 10, 
200,50);
ctx.shadowBlur = 5; // độ rộng bóng đỗ
ctx.shadowColor = "black"; // màu bóng đỗ
ctx.fill();
//ve trai tim phai
ctx.fillStyle= "#ffff00";
ctx.beginPath();
ctx.moveTo(280,60);
ctx.bezierCurveTo(350,20, 360, 90, 280,130);
ctx.bezierCurveTo(200,90, 210, 20, 280,60);
ctx.shadowBlur = 5; // độ rộng bóng đỗ
ctx.shadowColor = "black"; // màu bóng đỗ
ctx.fill();
82
Images
• context.drawImage(imageObj,destX,destY
, sizeWidth, sizeHeight, cropX, cropY, 
cropWidth, cropHeight);
• imageObj: đối tượng hình
• destX: tọa độ x của vị trí bắt đầu vẽ hình (góc top trái x)
• destY: tọa độ y của vị trí bắt đầu vẽ hình (góc top trái Y)
• sizeWidth: kích thước chiều rộng hình
• sizeHeight: kích thước chiều cao hình
• cropX: vị trí x điểm bắt đầu crop
• cropY: vị trí Y điểm bắt đầu crop
• cropWidth: kích thước chiều rộng hình sau khi crop
• cropHeight: Kích thước chiều cao hình sau khi crop
83
Images
• drawImage(image, dx, dy): vẽ hình với kích thước thực 
sự
• drawImage(image, dx, dy, dw, dh): vẽ hình resize với 
kích thước dw/dh
• drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)
• Draws selected region of image starting at sx/sy with 
width sw and a height sh. Starts drawing at the dx/dy 
coordinates with size defined by dw / dh.
84
Vẽ chuỗi
• context.font = 'italic 40px Calibri';
– normal, italic, bold,
• context.fillText(str, x, y);
– Màu: context.fillStyle = ;
• context.strokeText(str, x, y);
– Màu: context.strokeStyle = ;
• context.textAlign = ;
– start, end, left, right, and center.
85
Lấy kích thước vùng chữ
• var metrics = context.measureText(text);
• var width = metrics.width;
86
Pattern
• var pattern = 
context.createPattern(imageObj, 
repeatOption);
• context.fillStyle = pattern; 
• context.fill()
repeatOption có 4 giá trị: repeat, repeat-
x, repeat-y, hoặc no-repeat
87
Tô màu Linear Gradient
• var
grd=context.createLinearGradient(startX, 
startY, endX, endY);
• grd.addColorStop(offset, color);
– startX: tọa độ x của điểm bắt đầu
– startY: tọa độ y của điểm bắt đầu
– endX: tọa độ x của điểm kết thúc
– endY: tọa độ y của điểm kết thúc
88
Tô màu Gradient Radial
• var
grd=context.createRadialGradient(startX, 
startY, startRadius, endX, endY, 
endRadius);
• grd.addColorStop(offset, color);
89
Một số vấn đề khác
• Độ trong suốt
– context.globalAlpha=[value];
• Cắt một vùng chọn
– context.clip();
• Xoay:
– context.rotate(góc_xoay);
• Co giãn:
– context.scale(x, y);
90
Bài tập
• Tạo hình chạy ngẫu nhiên theo thời gian 
(trang 26/Chương 3 – Dynamic Graphics, 
Hello HTML5 & CSS3, version 2013
• corehtml5canvas.com/code-live/
91
Canvas vs SVG
• SVG can be made accessible, canvas can 
not
• SVG paints DOM elements. Canvas paints 
pixels
• SVG can drain memory b/c of DOM usage
• Canvas can drain CPU because of JS usage
• Canvas be saved as an image. SVG can be 
an image
• SVG scales better 92
HTML5 Canvas Advanced
93
Transform
• translate(x,y): di chuyển canvas tới tọa độ 
mới
• rotate(angle): quay góc angle (+: cùng 
chiều kim đồng hồ, -: ngược chiều)
• scale(x, y): phóng to/thu nhỏ x lần chiều 
rộng và y lần chiều dài.
• save(): lưu trạng thái
• restore(): quay lui trạng thái trước đó
94
Transform
• var centerX = 0, centerY = 0, radius = 50;
// save state
context.save();
// translate context
context.translate(canvas.width / 2, canvas.height / 2);
// scale context horizontally
context.scale(2, 1); 
// draw circle which will be stretched into an oval
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
// restore to original state
context.restore();
// apply styling
context.fillStyle = '#8ED6FF';
context.fill();
context.lineWidth = 5;
context.strokeStyle = 'black';
context.stroke();
95
Lấy tọa độ chuột
function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
x: evt.clientX - rect.left,
y: evt.clientY - rect.top
};
}
96
Animation – Hiệu ứng
• Xóa vùng vẽ: context.clearRect(x, y, w, h)
• Di chuyển: Kết hợp hàm thời gian
– setInterval(callback, time);
– setTimeout(callback, time);
97
Validating your HTML5
• https://validator.nu/
98
Ngoài ra, HTML5 còn có 
• HTML5 API's (Application Programming 
Interfaces)
– HTML Geolocation
– HTML Drag and Drop
– HTML Local Storage
– HTML Application Cache
– HTML Web Workers
– HTML SSE 
99
Tham khảo
• 
ro.asp
• 
• 
• 
4000001654/index.html
• 
• 
100
Q & A
101
THE END
102