intTypePromotion=1
zunia.vn Tuyển sinh 2024 dành cho Gen-Z zunia.vn zunia.vn
ADSENSE
 » 
 » 

Bài giảng Thiết kế Website: Chương 5 - ThS. Dương Thành Phết

Chia sẻ: Ngocnga Ngocnga | Ngày: | Loại File: PDF | Số trang:61

Thêm vào BST
Báo xấu
123
lượt xem 18
download
 
  Download Vui lòng tải xuống để xem tài liệu đầy đủ

Bài giảng Thiết kế Website - Chương 5 giới thiệu các ngôn ngữ HTML5, CSS3 và JQUERY. Trong chương này người học sẽ lần lượt tìm hiểu các nội dung như: Ngôn ngữ HTML 5, ngôn ngữ CSS 3, ngôn ngữ Jquery. Mời các bạn cùng tham khảo để nắm bắt các nội dung chi tiết.

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Bài giảng Thiết kế Website: Chương 5 - ThS. Dương Thành Phết

  1. KHOA CAO ĐẲNG THỰC HÀNH THIẾT KẾ WEBSITE (Chuyên ngành: Quản Trị Mạng Máy Tính Chƣơng 5 NGÔN NGỮ HTML5, CSS3 VÀ JQUERY 1 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  2. 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 - phetcm@gmail.com
  3. 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 http://www.thayphet.net
  4. 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 http://www.thayphet.net
  5. 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 http://www.thayphet.net
  6. 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 http://www.thayphet.net
  7. 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 http://www.thayphet.net
  8. 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 http://www.thayphet.net
  9. 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 http://www.thayphet.net
  10. 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 http://www.thayphet.net
  11. 1.2. HTML 5 Tag Cấu trúc trang của HTML5 11 © Dương Thành Phết http://www.thayphet.net
  12. 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 http://www.thayphet.net
  13. 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 http://www.thayphet.net
  14. 1.3. HTML 5 Audio & HTML 5 Video Tag video
  15. 1.3. HTML 5 Audio & HTML 5 Video Tag Audio Thẻ 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 MP3 Wav Ogg Internet Explorer 9 Yes 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 Ví dụ:
  16. 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 http://www.thayphet.net
  17. 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 http://www.thayphet.net
  18. 1.4. HTML 5 Drag & Drop #div1 { width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;} 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(); } 18 © Dương Thành Phết http://www.thayphet.net
  19. 1.4. HTML 5 Drag & Drop Bạn hãy rê chuột kéo hình HTML5VN.NET vào khung bên trái: 19 © Dương Thành Phết http://www.thayphet.net
  20. 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 http://www.thayphet.net
ADSENSE

CÓ THỂ BẠN MUỐN DOWNLOAD

THÔNG TIN
TRỢ GIÚP
HỖ TRỢ KHÁCH HÀNG
Theo dõi chúng tôi

Chịu trách nhiệm nội dung:

Nguyễn Công Hà - Giám đốc Công ty TNHH TÀI LIỆU TRỰC TUYẾN VI NA

LIÊN HỆ

Địa chỉ: P402, 54A Nơ Trang Long, Phường 14, Q.Bình Thạnh, TP.HCM

Hotline: 093 303 0098

Email: support@tailieu.vn

Giấy phép Mạng Xã Hội số: 670/GP-BTTTT cấp ngày 30/11/2015 Copyright © 2022-2032 TaiLieu.VN. All rights reserved.

 

Đồng bộ tài khoản
5=>2