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.
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 NGƠN NGỮ HTML5, CSS3 VÀ JQUERY © Dương Thành Phết www.thayphet.net - phetcm@gmail.com NỘI DUNG Ngôn ngữ HTML Ngôn ngữ CSS 3 Ngơn ngữ Jquery © Dương Thành Phết www.thayphet.net - phetcm@gmail.com NGÔN NGỮ HTML 1.1 Giới thiệu HTML 1.2 HTML Tag 1.3 HTML Audio & HTML Video 1.4 HTML Drag & Drop 1.5 HTML Canvas & HTML SVG 1.6 HTML Form 1.7 HTML5 API 1.8 HTML tương lai © Dương Thành Phết http://www.thayphet.net 1.1 GIỚI THIỆU VỀ HTML - HTML5 phiên sửa đổi thứ ngôn ngữ HTML © Dương Thành Phết http://www.thayphet.net 1.1 GIỚI THIỆU VỀ HTML - Phát triển nhóm Web Hypertext Application Technology Working Group (WHATWG) từ 10/2009, dự án Web Applications 1.0, hoàn thiện năm 2002 - Về kỹ thuật dự kiến hoàn thiện vào tận năm 2022 © Dương Thành Phết http://www.thayphet.net 1.1 GIỚI THIỆU VỀ HTML 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 © Dương Thành Phết http://www.thayphet.net 1.1 GIỚI THIỆU VỀ HTML HTML5 giảm bớt phụ thuộc vào công nghệ độc quyền Flash HTLM5 cho phép giao tiếp chiều với máy chủ, nhà phát triển thử nghiệm game, chat, điều khiển từ xa… © Dương Thành Phết http://www.thayphet.net 1.1 GIỚI THIỆU VỀ HTML HTML5 – Mang đến sức sống cho Web - Có khả hỗ trợ API (Application Programming Interface) DOM (Document Object Model) cho phép dễ dàng mở rộng - Hỗ trợ tốt nhiều thiết bị nhờ trình duyệt phổ biến: Firefox, Chrome, Opera, Internet Explorer, Android © Dương Thành Phết http://www.thayphet.net 1.1 GIỚI THIỆU VỀ HTML Sau tiện ích HTML5: HTML5 làm giảm tầm quan trọng plug-ins HTML5 hỗ trợ đồ họa tương tác HTML5 cho phép ứng dụng kết nối tới khu vực lưu trữ file HTML5 đơn giản hóa chia nhỏ liệu HTML5 giúp hợp địa HTML5 làm video Web đẹp HTML5 tạo wiget chat HTML5 tăng khả bảo mật HTML5 đơn giản hóa việc phát triển web © Dương Thành Phết http://www.thayphet.net 1.1 GIỚI THIỆU VỀ HTML 1.1.2 Nhược điểm HTML5: Còn nhiều phiên cũ 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 2.5 TẠO MULTIPLE COLUMNS Có tính để trình bày multiple column CSS3: số lượng cột, chiều rộng, khoảng cách cột khoảng cách đường viền column-count (số cột) column-width (chiều rộng cột) column-gap (khoảng cách so với viền) column-rule (viền) Lưu ý phải thêm định dạng browser trước thuộc tính (-webkit-, -moz-, -o-, …) 47 © Dương Thành Phết http://www.thayphet.net 2.5 TẠO MULTIPLE COLUMNS Ví dụ: chia cột, cột rộng 110px, khoảng cách cột 20px có đượng kẻ cột column-count:3; column-width:110px; column-gap: 20px; column-rule: 1px solid #d6d6d6; 48 © Dương Thành Phết http://www.thayphet.net 2.6 HÌNH NỀN Thơng thường ta sử dụng màu hay hình ảnh làm cho web hay khung Multiple Background cho phép sử dụng nhiều hình ảnh lúc 49 © Dương Thành Phết http://www.thayphet.net NGÔN NGỮ JQUERY 3.1 Giới thiệu Jquery ? 3.2 Download sử dụng Jquey 50 © Dương Thành Phết http://www.thayphet.net 3.1 GIỚI THIỆU VỀ JQUERY 3.1.1 JQuery gì? John Resig jQuery Javascript Framework, tạo tương tác web cách nhanh jQuery khởi xướng John Resig (hiện trưởng dự án Mozzila) vào năm 2006 jQuery có mã nguồn mở hồn tồn miễn phí, có cộng đồng sử dụng đơng, nhiều lập trình tham gia hồn thiện, phát triển viết Plugin jQuery ln lựa chọn trước tiên công việc phát triển dự án website 51 © Dương Thành Phết http://www.thayphet.net 3.1 GIỚI THIỆU VỀ JQUERY 3.1.2 Tại dùng jQuery? jQuery đơn giản hóa cách viết Javascript tăng tốc độ xử lý kiện trang web tiết kiệm thời gian công sức Sử dụng jQuery giúp giải tốt vấn đề xung đột trình duyệt web Học jQuery đơn giản, nắm vững CSS, bạn tiếp cận sử dụng jQuery nhanh chóng 52 © Dương Thành Phết http://www.thayphet.net 3.1 GIỚI THIỆU VỀ JQUERY 3.1.3 Ƣu điểm jQuery? Hỗ trợ tốt việc xử lý Dom, Ajax… Tương thích nhiều trình duyệt web phổ biến Nhỏ gọn, dễ dùng Ít xung khắc với thư viện Javascript khác Plugin phong phú 53 © Dương Thành Phết http://www.thayphet.net 3.1 GIỚI THIỆU VỀ JQUERY 3.1.4 jQuery làm đƣợc gì? Hƣớng tới thành phần HTML: jQuery cho phép bạn chọn thành phần tài liệu cách dễ dàng dựa vào jQuery selector Thay đổi giao diện trang web: jQuery giúp trang web hiển thị tốt hầu hết trình duyệt Thay đổi nội dung tài liệu: jQuery thêm bớt nội dung trang, chí cấu trúc HTML 54 © Dương Thành Phết http://www.thayphet.net 3.1 GIỚI THIỆU VỀ JQUERY 3.1.4 JQuery làm đƣợc gì? (tt) Tƣơng tác với ngƣời dùng: jQuery cho nhiều phương thức để tương tác với người dùng tối giản mã Event code HTML Tạo hiệu ứng động: jQuery cho phép sử dụng nhiều hiệu ứng slideDown… động mờ dần, slideUp, Hỗ trợ Ajax: Là công nghệ ngày trở nên phổ biến, giúp người thiết kế web tạo trang web tương tác cực tốt nhiều tính 55 © Dương Thành Phết http://www.thayphet.net 3.2 DOWNLOAD VÀ SỬ DỤNG JQUERY 3.2.1 Download jQuery Truy cập vào http://jquery.com để Download phiên Lưu lại với file: js 56 © Dương Thành Phết http://www.thayphet.net 3.2 DOWNLOAD VÀ SỬ DỤNG JQUERY 3.2.2 Sử dụng Jquery Chuẩn bị tài liệu HTML mẫu sau: 57 © Dương Thành Phết http://www.thayphet.net 3.2 DOWNLOAD VÀ SỬ DỤNG JQUERY 3.2.2 Sử dụng Jquery Chèn cặp thẻ đoạn jQuery sau: 58 © Dương Thành Phết http://www.thayphet.net 3.2 DOWNLOAD VÀ SỬ DỤNG JQUERY 3.2.2 Sử dụng Jquery Kết đoạn mã bạn click vào button “click me” đoạn văn sau bị mờ dần ẩn 59 © Dương Thành Phết http://www.thayphet.net TÀI LIỆU THAM KHẢO http://www.w3schools.com/ http://slides.html5rocks.com/ http://www.slideshare.net/ http://www.vn-zoom.com/ http://learn.jquery.com/ 60 © Dương Thành Phết http://www.thayphet.net KHOA CAO ĐẲNG THỰC HÀNH THIẾT KẾ WEBSITE (Chuyên ngành: Quản Trị Mạng Máy Tính THE END 61 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com ... 1.6 HTML Form 1.7 HTML5 API 1.8 HTML tương lai © Dương Thành Phết http://www.thayphet.net 1.1 GIỚI THIỆU VỀ HTML - HTML5 phiên sửa đổi thứ ngôn ngữ HTML © Dương Thành Phết http://www.thayphet.net... Android © Dương Thành Phết http://www.thayphet.net 1.1 GIỚI THIỆU VỀ HTML Sau tiện ích HTML5: HTML5 làm giảm tầm quan trọng plug-ins HTML5 hỗ trợ đồ họa tương tác HTML5 cho phép ứng dụng kết... HTML5 đơn giản hóa chia nhỏ liệu HTML5 giúp hợp địa HTML5 làm video Web đẹp HTML5 tạo wiget chat HTML5 tăng khả bảo mật HTML5 đơn giản hóa việc phát triển web © Dương Thành Phết http://www.thayphet.net