05 chuong05moi
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (1.81 MB, 61 trang )
TRƯỜNG ĐẠI HỌC KINH TẾ KỸ THUẬT BÌNH DƯƠNG
KHOA KỸ THUẬT - CÔNG NGHỆ
THIẾT KẾ WEBSITE
Chương 5
NGÔN NGỮ HTML5, CSS3 VÀ JQUERY
1
© Dương Thành Phết
www.thayphet.net -
NỘI DUNG
1. Ngôn ngữ HTML 5
2. Ngôn ngữ CSS 3
3. Ngôn ngữ Jquery
2
© Dương Thành Phết
www.thayphet.net -
1. NGÔN NGỮ HTML 5
1.1. Giới thiệu về HTML 5
1.2. HTML 5 Tag
1.3. HTML 5 Audio & HTML 5 Video
1.4. HTML 5 Drag & Drop
1.5. HTML 5 Canvas & HTML 5 SVG
1.6. HTML 5 Form
1.7. HTML5 API
1.8. HTML 5 trong tương lai
3
© Dương Thành Phết
1.1. GIỚI THIÊÊU VỀ HTML 5
- HTML5 là phiên bản sửa đổi thứ 5 của ngôn ngữ HTML
4
© Dương Thành Phết
1.1. GIỚI THIÊÊU VỀ HTML 5
- Phát triển bởi nhóm Web Hypertext Application
Technology Working Group (WHATWG) từ 10/2009,
dưới dự án Web Applications 1.0, hoàn thiện năm 2002
- Về kỹ thuật dự kiến sẽ được hoàn thiện vào tận năm
2022.
5
© Dương Thành Phết
1.1. GIỚI THIÊÊU VỀ HTML 5
1.1.1. ƯU ĐIỂM
Lưu trữ
Kết nối
Thiết bị truy cập
Ngữ nghĩa
Đồ họa 3D,hiệu ứng
Css3
Đa phương tiện
Hiệu năng
6
© Dương Thành Phết
1.1. GIỚI THIÊÊU VỀ HTML 5
HTML5 giảm bớt sự phụ thuộc vào các công nghệ độc
quyền như Flash.
HTLM5 còn cho phép giao tiếp 2 chiều với máy chủ, vì
thế các nhà phát triển có thể thử nghiệm game, chat,
điều khiển từ xa….
7
© Dương Thành Phết
1.1. GIỚI THIÊÊU VỀ HTML 5
HTML5 – Mang đến sức sống mới cho Web
- Có khả năng hỗ trợ API (Application Programming
Interface) và DOM (Document Object Model) sẽ cho phép
dễ dàng mở rộng.
- Hỗ trợ tốt trên nhiều thiết bị nhờ các trình duyệt phổ
biến: Firefox, Chrome, Opera, Internet Explorer, Android.
8
© Dương Thành Phết
1.1. GIỚI THIÊÊU VỀ HTML 5
Sau đây là 9 tiện ích của HTML5:
HTML5 làm giảm tầm quan trọng của các plug-ins
HTML5 hỗ trợ đồ họa tương tác
HTML5 cho phép các ứng dụng kết nối tới khu vực lưu
trữ file
HTML5 sẽ đơn giản hóa chia nhỏ dữ liệu.
HTML5 giúp hợp nhất các địa chỉ
HTML5 làm video của Web đẹp hơn
HTML5 tạo ra wiget chat
HTML5 có thể tăng khả năng bảo mật
HTML5 đơn giản hóa việc phát triển web
9
© Dương Thành Phết
1.1. GIỚI THIÊÊU VỀ HTML 5
1.1.2 Nhược điểm HTML5:
Còn nhiều phiên bản cũ của trình duyệt, hệ điều hành
chưa hỗ trợ HTML5.
10
© Dương Thành Phết
1.2. HTML 5 Tag
Cấu trúc trang của HTML5
11
© Dương Thành Phết
1.2. HTML 5 Tag
Các thẻ mới của HTML5 so với HTML 4
12
© Dương Thành Phết
1.2. HTML 5 Tag
Các thẻ mới của HTML5 so với HTML 4(tt)
13
© Dương Thành Phết
1.3. HTML 5 Audio & HTML 5 Video
Tag video
<video src=”">Dòng thông báo</video>
Đoạn text nằm bên trong <video> … </video> sẽ hiển thị
khi trình duyệt không hỗ trợ tag <video>
<video src="demovideo.ogg" controls="controls">
</video>
Đoạn phim được hiển thị bằng thẻ video (không cần 1 plug-in nào)
14
© Dương Thành Phết
1.3. HTML 5 Audio & HTML 5 Video
Tag Audio
Thẻ <audio> hỗ trợ play 3 định dạng phổ biến như mp3,
wav, ogg và tùy thuộc vào trình duyệt:
Browser
Ví dụ:
MP3
Wav
Ogg
Internet Explorer Yes
9
No
No
Firefox 4.0
No
Yes
Yes
Google Chrome
6
Yes
Yes
Yes
Apple Safari 5
Yes
Yes
No
Opera 10.6
No
Yes
Yes
controls></audio>
15
© Dương Thành Phết
1.3. HTML 5 Audio & HTML 5 Video
Các thuộc tính
Attribute
Value
Description
autoplay autoplay
Tự động play khi file audio
đã sẵn sàng.
controls
controls
Hiện thanh điều khiển.
loop
loop
Lặp lại file audio tương tự
repeat .
preload
auto metadata none Tự động play khi load trang
src
URL
Đường dẫn file audio
16
© Dương Thành Phết
1.4. HTML 5 Drag & Drop
Là khả năng kéo và thả một đối tượng. Các trình duyệt hỗ
trợ tính
. năng này.
17
© Dương Thành Phết
1.4. HTML 5 Drag & Drop
18
<head>
<style type="text/css">
#div1 {
width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script type="text/javascript">
function allowDrop(ev)
{ ev.preventDefault(); }
function drag(ev)
{ ev.dataTransfer.setData("Text",ev.target.id); }
function drop(ev)
{
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
ev.preventDefault();
}
</script>
</head>
© Dương Thành Phết
1.4. HTML 5 Drag & Drop
<body style="text-align:center">
Bạn hãy rê chuột kéo hình HTML5VN.NET vào
khung bên trái:
ondragover="allowDrop(event)"></div>
ondragstart="drag(event)" width="336" height="69" /></body>
19
© Dương Thành Phết
1.4. HTML 5 Drag & Drop
Giải thích:
- Thuộc tính draggable=”true” sẽ cho phép đối tượng
có khả năng được kéo và thả.
- Khi sự kiện Drag xảy ra, chúng ta gọi
hàm drag(event) và hàm setData() để thiết lập giá trị
khi Drag.
- Trong khi chúng ta đang Drag thì mặc định chúng ta
không thể thả xuống một đối tượng khác trong WEB vì
thế ta phải gọi hàm event.preventDefault().
- Khi Drop đối tượng ta gọi hàm drop(event) để thực
hiện sự kiện.
20
© Dương Thành Phết
1.5. HTML 5 CANVAS & HTML 5 SVG
1.5.1 HTML 5 SVG (vẽ các hình học bằng vector)
Dùng thẻ <svg> </svg> bao bọc các thẻ hình học như
<circle>, <rect>, <text>,….
VD: Để vẽ một vòng tròn sử dụng phương thức arc() và
xác định góc bắt đầu từ 0 và góc kết thúc như 2 * PI.
ontext.arc(centerX,centerY,radius,0,2*Math.PI,false);
Hình tròn tạo bởi SVG
21
© Dương Thành Phết
1.5. HTML 5 CANVAS & HTML 5 SVG
1.5.1 HTML 5 SVG (vẽ các hình học bằng vector)
Thẻ
<rect>
<circle>
<ellipse>
<line>
<text>
Công dụng
Vẽ hình chữ nhật
Vẽ hình tròn
Vẽ hình ellipse
Vẽ đường thẳng
Vẽ đa giác
Vẽ chữ
22
© Dương Thành Phết
1.5. HTML 5 CANVAS & HTML 5 SVG
1.5.2 HTML 5 CANVAS (Vẽ đồ họa)
Có thể ứng dụng canvas trong rất nhiều lĩnh vực như:
đồ hoạ, game, trình chiếu,..
Một hình ảnh đươc vẽ trên canvas
Một game 3D sử dụng canvas
chạy trên nền web
23
© Dương Thành Phết
1.5. HTML 5 CANVAS & HTML 5 SVG
1.5.2 HTML 5 CANVAS (Vẽ đồ họa)
Thẻ canvas định nghĩa một vùng chữ nhật để làm việc.
Có thể vẽ lên canvas các hình như đường thẳng, hình
chữ nhật, hình tròn, văn bản,... bằng các hàm
Javascript.
Các trình duyệt các phiên bản sau này đểu hỗ trợ
Canvas.
Để tạo ra một đối tượng canvas.
<canvas id="myCanvas" width="200" height="100">
</canvas>
24
© Dương Thành Phết
1.6. HTML 5 FORM
25
© Dương Thành Phết
