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

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.
Nội dung trích xuất từ tài liệu:
Bài giảng Thiết kế Website: Chương 5 - ThS. Dương Thành Phết 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À JQUERY1 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com NỘI DUNG 1. Ngôn ngữ HTML 5 2. Ngôn ngữ CSS 3 3. Ngôn ngữ Jquery2 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com 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 lai3 © Dương Thành Phết http://www.thayphet.net 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ữ HTML4 © Dương Thành Phết http://www.thayphet.net 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 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ăng6 © Dương Thành Phết http://www.thayphet.net 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 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 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 web9 © Dương Thành Phết http://www.thayphet.net 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 1.2. HTML 5 TagCấu trúc trang của HTML511 © Dương Thành Phết http://www.thayphet.net 1.2. HTML 5 Tag Các thẻ mới của HTML5 so với HTML 412 © Dương Thành Phết http://www.thayphet.net 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 1.3. HTML 5 Audio & HTML 5 Video Tag video 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ụ: 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 audio16 © Dương Thành Phết ...