CHƢƠNG 1: NGÔN NGỮ WEB (Chuyên đề 1: HTML5 & CSS3)

Size: px

Start display at page:

Download "CHƢƠNG 1: NGÔN NGỮ WEB (Chuyên đề 1: HTML5 & CSS3)"

Annabelle Park
6 years ago
Views:

1 Chuyên đề: CÔNG NGHỆ WEB NÂNG CAO CHƢƠNG 1: NGÔN NGỮ WEB (Chuyên đề 1: HTML5 & CSS3) Giảng Viên: ThS. Dƣơng Thành Phết Website: Tel:

2 MỤC TIÊU Kiến thức: - Trình bày được khái niệm về HTML5, CSS3 - Mô tả được các thẻ html 5, các thuộc tính của CSS3 Kỹ năng: - Ứng dụng HTML 5 và CSS 3 tạo cá tráng web có hiệu ứng đe p mắt Thái độ: -Nhận thức được tầm quan trọng của HTML 5 và CSS3 để ứng dụng phát triển các ứng dụng Web. 2

3 YÊU CẦU 1. Thời gian: Số tiết Lý thuyết : 6 tiết Số tiết Thực hành: 5 tiết Số tiết tự học: 18 giờ Điều kiện tiên quyết: Đã học qua HTML Đã học qua CSS 3. Phần mềm Macromedia Dreamweaver Microsoft Visual Studio 2005/2008/2010/2012 Microsoft SQLServer 2005/2008

4 4 NỘI DUNG 1. HTML Giới thiệu về HTML 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 2. CSS Giới thiệu CSS Đườ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

5 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 5

6 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 Về kỹ thuật dự kiến sẽ được hoàn thiện vào tận năm

7 1.1. GIỚI THIỆU VỀ HTML Ƣ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 7

8 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. 8

9 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. 9

10 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 đe 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 10

11 1.1. GIỚI THIỆU VỀ HTML 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. 11

12 1.2. HTML 5 Tag Cấu trúc trang của HTML5 12

13 1.2. HTML 5 Tag Các thẻ mới của HTML5 so với HTML 4 13

14 1.2. HTML 5 Tag Các thẻ mới của HTML5 so với HTML 4(tt) 14

15 1.3. HTML 5 Audio & HTML 5 Video Tag video <video src= ">Dòng thông báo</video> Đoạn text nằm bên trong <video> </video> sẽ hiển thị khi trình duyệt không hỗ trợ tag <video> <video src="demovideo.ogg" controls="controls"> </video> 15 Đoạn phim được hiển thị bằng thẻ video (không cần 1 plug-in nào)

16 1.3. HTML 5 Audio & HTML 5 Video Tag Audio Thẻ <audio> 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: Ví dụ: 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 <audio src= Cogaisaigonditaidan.mp3" autoplay controls></audio> 16

17 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 17

18 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.. 18

19 1.4. HTML 5 Drag & Drop 19 <head> <style type="text/css"> #div1 { width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;} </style> <script type="text/javascript"> 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(); } </script> </head>

20 1.4. HTML 5 Drag & Drop <body style="text-align:center"> <p>bạn hãy rê chuột kéo hình HTML5VN.NET vào khung bên trái:</p> <div id="div1" ondrop="drop(event)" ondragover="allowdrop(event)"></div> <br /> <img id="drag1" src="hinh.jpg" draggable="true" ondragstart="drag(event)" width="336" height="69" /> </body> 20

21 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. 21

22 1.5. HTML 5 CANVAS & HTML 5 SVG HTML 5 SVG (vẽ các hình học bằng vector) Dùng thẻ <svg> </svg> bao bọc các thẻ hình học như <circle>, <rect>, <text>,. 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 22

23 1.5. HTML 5 CANVAS & HTML 5 SVG HTML 5 SVG (vẽ các hình học bằng vector) Thẻ <rect> <circle> <ellipse> <line> <polygon> <text> 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ữ 23

1.5. HTML 5 CANVAS & HTML 5 SVG 1.5.2 HTML 5 CANVAS (Vẽ

24 1.5. HTML 5 CANVAS & HTML 5 SVG 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 24

25 1.5. HTML 5 CANVAS & HTML 5 SVG 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. <canvas id="mycanvas" width="200" height="100"> </canvas> 25

26 1.6. HTML 5 FORM 26

27 1.7. HTML 5 API API(Application Progamming Interfaces-giao diện lập trình ứng dụng): 27

28 1.7. HTML 5 API HTML5 API Geolocation: Giúp xác định vị trí địa lý của trình duyệt. 28

29 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. 29 HTML5 về cơ bản chỉ là HTML, không khó.

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.

30 2.1. GIỚI THIỆU VỀ CSS 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

2.1. GIỚI THIỆU VỀ CSS3 2.1.2. LỊCH SỬ RA ĐỜI Phiên bản CSS đầu

31 2.1. GIỚI THIỆU VỀ CSS 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 vẫn đang được tiếp tục phát triển, và hoàn thiện cho đến nay 31

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

33 2.2. ĐƢỜNG VIỀN (BORDER) border-radius 33

34 2.2. ĐƢỜNG VIỀN (BORDER) Box-shadow 34

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

36 2.2. ĐƢỜNG VIỀN (BORDER) Boder-image 36

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

38 2.3. HIỆU ỨNG CHO VĂN BẢN- Text Effects Text-shadow 38 Thứ tự thuộc giá trị: Bóng ngang, bóng đứng, khoảng cách mờ và màu sắc

39 2.3. HIỆU ỨNG CHO VĂN BẢN- Text Effects word-wrap 39

2.4. TRANSFORM TRANSITION- ANIMATION 2.4.1.

40 2.4. TRANSFORM TRANSITION- ANIMATION Transform Cho phép xoay, kéo dãn, kéo nghiên thành phần trên trang 40

41 2.4. TRANSFORM TRANSITION- ANIMATION Transition Sử dụng link để thực hiện transition 41

42 2.4. TRANSFORM TRANSITION- ANIMATION Transition 42

43 2.4. TRANSFORM TRANSITION- ANIMATION Transition Demo CSS3 xoay hình 43

44 2.4. TRANSFORM TRANSITION- ANIMATION Transition 44

45 2.4. TRANSFORM TRANSITION- ANIMATION Animation 45

46 2.4. TRANSFORM TRANSITION- ANIMATION Animation 46

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

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

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

50 TÀI LIỆU DẠY HỌC [1] Dương Thành Phết, Bài giảng chuyên đề Công nghệ Web nâng cao Khoa Công nghệ thông tin, Trường CĐ CNTT TP.HCM (2013). [2] Dương Thành Phết, Bài tập thực hành chuyên đề Công nghệ Web nâng cao Khoa Công nghệ thông tin, Trường CĐ CNTT TP.HCM (2013). 50

51 TÀI LIỆU THAM KHẢO

52 HẾT 52

BÀI 6 LÀM VIỆC VỚI THÀNH PHẦN MỞ RỘNG CỦA CSS3

BÀI 6 LÀM VIỆC VỚI THÀNH PHẦN MỞ RỘNG CỦA CSS3 NHẮC LẠI BÀI TRƯỚC Làm việc với các thuộc tính mới trong CSS3: Border-radius Border-image Gradient Transform, transition, animation Làm việc với font web