›
›

Bài giảng Thiết kế Website - Chương 5: Ngôn ngữ HTML5, CSS3 và Jquery - Dương Thành Phết

pdf 61 trang ngocly 440
Download
Bạn đang xem 20 trang mẫu của tài liệu "Bài giảng Thiết kế Website - Chương 5: Ngôn ngữ HTML5, CSS3 và Jquery - Dương Thành Phết", để tải tài liệu gốc về máy bạn click vào nút DOWNLOAD ở trên

Tài liệu đính kèm:

  • pdfbai_giang_thiet_ke_website_chuong_5_ngon_ngu_html5_css3_va_j.pdf

Nội dung text: Bài giảng Thiết kế Website - Chương 5: Ngôn ngữ HTML5, CSS3 và Jquery - 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
  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
  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
  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
  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
  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
  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
  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
  11. 1.2. HTML 5 Tag Cấu trúc trang của HTML5 11 © Dương Thành Phết
  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
  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
  14. 1.3. HTML 5 Audio & HTML 5 Video Tag video Dòng thông báo Đoạn text nằm bên trong sẽ hiển thị khi trình duyệt không hỗ trợ tag Đ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
  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ụ: 15 © Dương Thành Phết
  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
  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
  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
  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
  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
  21. 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ẻ bao bọc các thẻ hình học như , , , . 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
  22. 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ẻ 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
  23. 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
  24. 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. 24 © Dương Thành Phết
  25. 1.6. HTML 5 FORM 25 © Dương Thành Phết
  26. 1.7. HTML 5 API API(Application Progamming Interfaces-giao diện lập trình ứng dụng): 26 © Dương Thành Phết
  27. 1.7. HTML 5 API HTML5 API Geolocation: Giúp xác định vị trí địa lý của trình duyệt. 27 © Dương Thành Phết
  28. 1. 8. HTML 5 TRONG TƢƠNG LAI  Nên sử dụng HTML 5 ngay từ bây giờ, đó chính là tương lai của công nghệ web.  Càng ngày sẽ càng có nhiều công ty, doanh nghiệp ứng dụng HTML5 vào công nghệ của mình và tương lai bạn sẽ tìm thấy thành công.  HTML5 về cơ bản chỉ là HTML, không khó. 28 © Dương Thành Phết
  29. 2. NGÔN NGỮ CSS 3 2.1. Giới thiệu CSS3 2. 2. Đường viền (border) 2.3. Hiệu ứng cho văn bản 2.4. Giao diện người dùng 2.5. Tạo multiple columns 2.6. Hình nền 29 © Dương Thành Phết
  30. 2.1. GIỚI THIỆU VỀ CSS3 2.1.1. KHÁI NIỆM CSS VÀ CSS3  CSS - Cascading Style Sheets  Định nghĩa cách hiển thị một tài liệu HTML.  Đặc biệt hữu ích trong việc thiết kế Web.  CSS3 là phiên bản mới nhất của CSS  Hoàn toàn tương thích với các phiên bản trước  CSS3 được chia thành module, các thành phần cũ được chia nhỏ và bổ sung các thành phần mới. 30 © Dương Thành Phết
  31. 2.1. GIỚI THIỆU VỀ CSS3 2.1.2. LỊCH SỬ RA ĐỜI  Phiên bản CSS đầu tiên được phát hành bởi W3c (1996)  CSS 2 được W3c phát hành vào 5/1998 sau đó là CSS 2.1 sửa lỗi cho CSS2  CSS3 lần đầu được công bố vào 6 – 1999 vẫn đang được tiếp tục phát triển, và hoàn thiện cho đến nay 31 © Dương Thành Phết
  32. 2.2. ĐƢỜNG VIỀN (BORDER)  Tạo ra đường viền được bo tròn ở 4 góc  Tạo bóng mờ như một chiếc hộp  Tạo viền của một bức ảnh Các thuộc tính: . border-radius . box-shadow . border-image 32 © Dương Thành Phết
  33. 2.2. ĐƢỜNG VIỀN (BORDER)  border-radius 33 © Dương Thành Phết
  34. 2.2. ĐƢỜNG VIỀN (BORDER)  Box-shadow 34 © Dương Thành Phết
  35. 2.2. ĐƢỜNG VIỀN (BORDER)  Border-image Sử dụng hình ảnh thay thề cho các kiểu đường viền bình thường border-image: source slide width outset repeat Slide: phần bù bên trong của hình border Outset: số lượng diện tích mà hình border mở rộng 35 © Dương Thành Phết
  36. 2.2. ĐƢỜNG VIỀN (BORDER)  Boder-image 36 © Dương Thành Phết
  37. 2.3. HIỆU ỨNG CHO VĂN BẢN- Text Effects Bổ sung thêm một số tính năng mới: . hanging-punctuation . punctuation-trim . text-align-last . text-emphasis . text-justify . text-outline . text-overflow . text-shadow . text-wrap . word-break . word-wrap Ví dụ về: text-shadow, word-wrap 37 © Dương Thành Phết
  38. 2.3. HIỆU ỨNG CHO VĂN BẢN- Text Effects  Text-shadow Thứ tự thuộc giá trị: Bóng ngang, bóng đứng, khoảng cách mờ và màu sắc 38 © Dương Thành Phết
  39. 2.3. HIỆU ỨNG CHO VĂN BẢN- Text Effects  word-wrap 39 © Dương Thành Phết
  40. 2.4. TRANSFORM – TRANSITION- ANIMATION 2.4.1. Transform Cho phép xoay, kéo dãn, kéo nghiên thành phần trên trang 40 © Dương Thành Phết
  41. 2.4. TRANSFORM – TRANSITION- ANIMATION 2.4.2. Transition Sử dụng link để thực hiện transition 41 © Dương Thành Phết
  42. 2.4. TRANSFORM – TRANSITION- ANIMATION 2.4.2. Transition 42 © Dương Thành Phết
  43. 2.4. TRANSFORM – TRANSITION- ANIMATION 2.4.2. Transition  Demo CSS3 xoay hình 43 © Dương Thành Phết
  44. 2.4. TRANSFORM – TRANSITION- ANIMATION 2.4.2. Transition 44 © Dương Thành Phết
  45. 2.4. TRANSFORM – TRANSITION- ANIMATION 2.4.3. Animation 45 © Dương Thành Phết
  46. 2.4. TRANSFORM – TRANSITION- ANIMATION 2.4.3. Animation 46 © Dương Thành Phết
  47. 2.5. TẠO MULTIPLE COLUMNS Có 4 tính năng để trình bày multiple column trong CSS3: số lượng cột, chiều rộng, khoảng cách từng cột và 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 ý là phải thêm định dạng browser trước các thuộc tính (-webkit-, -moz-, -o-, ) 47 © Dương Thành Phết
  48. 2.5. TẠO MULTIPLE COLUMNS Ví dụ: chia 3 cột, mỗi cột rộng 110px, khoảng cách giữa các cột 20px có đượng kẻ giữa các cột column-count:3; column-width:110px; column-gap: 20px; column-rule: 1px solid #d6d6d6; 48 © Dương Thành Phết
  49. 2.6. HÌNH NỀN  Thông thường ta chỉ sử dụng 1 màu hay 1 hình ảnh làm nền cho web hay 1 khung nào đó.  Multiple Background cho phép sử dụng nhiều hình ảnh cùng 1 lúc trên 1 nền. 49 © Dương Thành Phết
  50. 3. NGÔN NGỮ JQUERY 3.1. Giới thiệu về Jquery ? 3.2. Download và sử dụng Jquey 50 © Dương Thành Phết
  51. 3.1. GIỚI THIỆU VỀ JQUERY 3.1.1. JQuery là gì? John Resig  jQuery là 1 Javascript Framework, tạo ra các tương tác trên web một cách nhanh nhất.  jQuery được khởi xướng bởi John Resig (hiện là trưởng dự án của Mozzila) vào năm 2006.  jQuery có mã nguồn mở và hoàn toàn miễn phí, có một cộng đồng sử dụng đông, nhiều lập trình tham gia hoàn thiện, phát triển và viết Plugin. jQuery luôn là lựa chọn trước tiên trong công việc khi phát triển các dự án website. 51 © Dương Thành Phết
  52. 3.1. GIỚI THIỆU VỀ JQUERY 3.1.2. Tại sao dùng jQuery?  jQuery đơn giản hóa cách viết Javascript và tăng tốc độ xử lý các sự kiện trên trang web tiết kiệm thời gian và công sức.  Sử dụng jQuery giúp giải quyết tốt vấn đề xung đột giữa các trình duyệt web. Học jQuery rất đơn giản, nếu nắm vững CSS, bạn có thể tiếp cận và sử dụng jQuery nhanh chóng. 52 © Dương Thành Phết
  53. 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 các thư viện Javascript khác. Plugin phong phú. 53 © Dương Thành Phết
  54. 3.1. GIỚI THIỆU VỀ JQUERY 3.1.4. jQuery có thể làm đƣợc những gì? Hƣớng tới các thành phần trong HTML: jQuery cho phép bạn chọn bất cứ thành phần nào của tài liệu một cách dễ dàng dựa vào jQuery selector Thay đổi giao diện của một trang web: jQuery giúp trang web có thể hiển thị tốt trên hầu hết các trình duyệt.  Thay đổi nội dung của tài liệu: jQuery có thể thêm hoặc bớt nội dung trên trang, thậm chí cả cấu trúc HTML. 54 © Dương Thành Phết
  55. 3.1. GIỚI THIỆU VỀ JQUERY 3.1.4. JQuery có thể làm đƣợc những 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 và tối giản các mã Event trong code HTML. Tạo hiệu ứng động: jQuery cho phép sử dụng rất nhiều hiệu ứng động như mờ dần, slideUp, slideDown Hỗ trợ Ajax: Là công nghệ ngày càng trở nên phổ biến, nó giúp người thiết kế web tạo ra những trang web tương tác cực tốt và nhiều tính năng. 55 © Dương Thành Phết
  56. 3.2. DOWNLOAD VÀ SỬ DỤNG JQUERY 3.2.1. Download jQuery Truy cập vào để Download phiên bản mới nhất. Lưu lại với file: .js 56 © Dương Thành Phết
  57. 3.2. DOWNLOAD VÀ SỬ DỤNG JQUERY 3.2.2. Sử dụng Jquery Chuẩn bị 1 tài liệu HTML mẫu như sau: 57 © Dương Thành Phết
  58. 3.2. DOWNLOAD VÀ SỬ DỤNG JQUERY 3.2.2. Sử dụng Jquery Chèn trong cặp thẻ đoạn jQuery sau: 58 © Dương Thành Phết
  59. 3.2. DOWNLOAD VÀ SỬ DỤNG JQUERY 3.2.2. Sử dụng Jquery Kết quả của đoạn mã trên là khi bạn click vào button “click me” thì đoạn văn bản ở sau nó sẽ bị mờ dần và ẩn đi. 59 © Dương Thành Phết
  60. TÀI LIỆU THAM KHẢO 1. 2. 3. 4. 5. 60 © Dương Thành Phết
  61. 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