giới thiệu html5, css3, jquery, boostrap

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ TP.HCM KHOA CÔNG NGHỆ THÔNG TIN GIỚI THIỆU HTML5, CSS3, JQUERY, BOOSTRAP Thành viên: Phạm Minh Hoàng Ngô Trung Hiếu Nội dung trình bày Tổng quan HTML5 Thành phần HTML5 Tổng quan CSS3 Thành phần CSS3 Giới thiệu Jquery Giới thiệu Bootstrap Tài liệu tham khảo Demo Tổng quan HTML5 Tổng quan HTML HTML2 1991 HTML3 1994 HTML5 2008 1997 HTML4 1998 Tổng quan HTML5 Thành phần Thành phần  : ◦Cho phép nhúng video file âm vào trang web ◦Không cần sử dụng tới plug-in trình duyệt Thành phần  : ◦ SVG(Scalable Vector Graphics) chuẩn đồ hoạ vector có khả mở rộng ◦ Vẽ ảnh vector HTML Thành phần Thành phần 10 Tổng quan CSS3 CSS CSS2 1996 1998 CSS3 1999 12 12 Thành phần Selector Box Model Text Effects Transformations 2D/3D Animations  13 JQuery 14 Giới thiệu JQuery JQuery JavaScript Framework, tạo tương tác web cách nhanh Jquery có mã nguồn mở hoàn toàn miễn phí 15 Giới thiệu JQuery jQuery được khởi xướng bởi John Resig (hiện trưởng dự án của Mozzila) vào năm 2006 jQuery có phiên 1.0 đời 19/8/2006,phiên gần 1.11.3 Thư viện jQuery tương thích với nhiều trình duyệt (Internet Explorer 6+, Firefox 2+, Opera 9+, Safari 2+ Chrome 16 Giới thiệu JQuery Tại sử dụng jquery ?  jQuery đơn giản hóa cách viết Javascript tăng tốc độ xử lý kiện trang web, giúp tiết kiệm thời gian công sức so với cách viết javascript thông thường   Sử dụng jQuery giúp giải tốt vấn đề xung đột trình duyệt web Học jQuery rất đơn giản, nắm vững CSS, bạn tiếp cận sử dụng jQuery nhanh chóng 17 Giới thiệu JQuery Download jQuery  Truy cập vào http://jquery.com để Download phiên Copy code lưu lại với file: js 18 Giới thiệu JQuery Jquery làm ?  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 động mờ dần, slideUp, slideDown…  Hỗ trợ Ajax: Là công nghệ ngày trở nên phổ biến, tương tác tốt nhiều tính 19 Giới thiệu JQuery Các thuộc tính lập trình jQuery    addClass() : thêm vào thuộc tính class cho tag html removeClass() :loại trừ thuộc tính class tag html attr() : nhận giá trị phần tử tập hợp thuộc tính tag htm  removeAttr() :loại trừ giá trị phần tử tập hợp thuộc tính tag html    html() :trả nội dung dạng html text() :trả nội dung dạng text val() :nhận lấy giá trị tag html 20 Giới thiệu JQuery Các hiệu ứng jquery  animate() :thực tùy biến chuyển động tập hợp thuộc tính CSS    fadeTo() :điều chỉnh độ mờ phần tử html show() :hiện phần tử html theo thời gian stop() :kết thúc hiệu ứng chuyển động 21 Giới thiệu Bootstrap 22 Giới thiệu Bootstrap • Bootstrap framework HTML, CSS, Javascript phổ biến cho người phát triển responsive hay phát triển website • Bootstrap sử dụng phổ biến đề phát triển front-end website Đây framework dễ học, dễ sử dụng, mềm mượt nhanh chóng dễ dàng để xây dựng giao diện website, có hỗ trợ responsive 23 Giới thiệu Bootstrap • Hỗ trợ trình duyệt: Bootstrap hỗ trợ tất trình duyệt phổ biến • Dễ: Rất dễ học sử dụng • Responsive Design: CSS Bootstrap tương thích với tất thiết bị Desktop, Mobile Máy tính bảng 24 Giới thiệu Bootstrap Cách Sử Dụng: Có cách : • Download Bootstrap từ getbootstrap.com • Gọi từ CDN( Content Delivery Network) 25 Tài liệu tham khảo Demo http://hocwebchuan.com/reference/tag/html5/ http://hocwebchuan.com/reference/cssSection/css3/ http://www.w3schools.com/html/ http://www.w3schools.com/js/ http://www.w3schools.com/jquery/ http://getbootstrap.com.vn/getting-started/ 26 ...Nội dung trình bày Tổng quan HTML5 Thành phần HTML5 Tổng quan CSS3 Thành phần CSS3 Giới thiệu Jquery Giới thiệu Bootstrap Tài liệu tham khảo Demo Tổng quan HTML5 Tổng quan HTML HTML2 1991 HTML3... Transformations 2D/3D Animations  13 JQuery 14 Giới thiệu JQuery JQuery JavaScript Framework, tạo tương tác web cách nhanh Jquery có mã nguồn mở hoàn toàn miễn phí 15 Giới thiệu JQuery jQuery được khởi xướng... cận sử dụng jQuery nhanh chóng 17 Giới thiệu JQuery Download jQuery  Truy cập vào http://jquery.com để Download phiên Copy code lưu lại với file: js 18 Giới thiệu JQuery Jquery làm ?  Tương