1 Ngày soạn:…/…/… Ngày dạy:…/…/… BÀI 11: CHÈN TỆP TIN ĐA PHƯƠNG TIỆN VÀ KHUNG NỘI TUYẾN VÀO TRANG WEB (2 tiết) I. MỤC TIÊU 1. Kiến thức Sau bài học này, HS sẽ: - Sử dụng thẻ HTML chèn được các tệp tin đa phương tiện vào trang web và điều chỉnh kích thước cho phù hợp. 2. Năng lực Năng lực chung: - Năng lực học tập, tự học: HS biết tự tìm kiếm, chuẩn bị và lựa chọn tài liệu, phương tiện học tập trước giờ học, quá trình tự giác tham gia các và thực hiện các hoạt động học tập cá nhân trong giờ học ở trên lớp,… - Năng lực giao tiếp và hợp tác: Khả năng phân công và phối hợp thực hiện nhiệm vụ học tập. - Năng lực giải quyết vấn đề sáng tạo: HS đưa ra các phương án trả lời cho câu hỏi, bài tập xử lý tình huống, vận dụng kiến thức, kĩ năng của bài học để giải quyết vấn đề thường gặp. Năng lực Tin học: - Biết được các loại tệp tin đa phương tiện có thể chèn vào trang web. - Hiểu và áp dụng các thuộc tính của thẻ <img>, <video>, <audio>, <iframe> để tuỳ chỉnh hiển thị và chức năng của các phương tiện đa phương tiện trên trang web. - Hiểu được khái niệm khung nội tuyến và ý nghĩa của việc chèn khung nội tuyến trong trang web.
3 Ở bài học trước, các em đã được học về trang web là siêu văn bản, trong đó có các đối tượng đa phương tiện là văn bản, hình ảnh, âm thanh, video. Em hãy quan sát các trang web sau và cho biết mỗi trang web sử dụng những đối tượng đa phương tiện nào? Việc sử dụng các đối tượng đó trong trang web có ý nghĩa gì? Bước 2: HS thực hiện nhiệm vụ học tập: - Các nhóm HS thảo luận về những trang web mà GV cho xem. - GV quan sát quá trình các nhóm thảo luận, giải đáp thắc mắc nếu HS chưa rõ. Bước 3: Báo cáo kết quả hoạt động, thảo luận: - GV mời một số nhóm báo cáo kết quả thảo luận. Gợi ý trả lời: + Trang web về “Trăm năm đổi thay của quảng trường chợ Bến Thành” sử dụng đối tượng đa phương tiện là văn bản và hình ảnh. + Trang web về “Cầu dây văng hình búp sen đầu tiên tại Nam Định” sử dụng đối tượng đa phương tiện là văn bản và video. + Việc sử dụng các đối tượng đa phương tiện trong trang web giúp thu hút người xem, minh hoạ nội dung rõ ràng, dễ hiểu, sinh động. - Các nhóm khác lắng nghe và góp ý. Bước 4: Đánh giá kết quả thực hiện: GV đánh giá kết quả của HS, dẫn dắt HS vào bài học mới: Việc đưa các tệp tin đa phương tiện vào trang web sẽ giúp thể hiện thông tin tốt hơn và thu hút được sự chú ý của người xem. Vậy để giúp các em biết cách sử dụng thẻ HTML chèn được các tệp tin đa phương tiện vào trang web và điều chỉnh kích thước cho phù hợp, chúng ta sẽ cùng nhau đến với Bài 11: Chèn tệp tin đa phương tiện và khung nội tuyến vào trang web. B. HÌNH THÀNH KIẾN THỨC MỚI Hoạt động 1: Các định dạng tệp ảnh a) Mục tiêu:
4 - HS biết về các định dạng tệp ảnh, tệp ảnh nào được chèn vào trang web, tệp ảnh nào không chèn được vào trang web. - HS hiểu về cú pháp câu lệnh chèn tệp ảnh vào trang web. b) Nội dung: GV giao nhiệm vụ; HS tìm hiểu nội dung mục 1. CHÈN TỆP ẢNH VÀO TRANG WEB, thảo luận nhóm thực hiện nhiệm vụ. c) Sản phẩm: Các định dạng tệp ảnh, cú pháp chèn tệp ảnh vào trang web. d) Tổ chức thực hiện: HOẠT ĐỘNG CỦA GV VÀ HS SẢN PHẨM DỰ KIẾN Bước 1: GV chuyển giao nhiệm vụ: - GV yêu cầu HS hoạt động cá nhân, đọc Hoạt động 1 – Các định dạng tệp ảnh SGK tr.62 và trả lời câu hỏi: Hãy kể tên các định dạng tệp ảnh mà em biết. Phân loại chúng vào nhóm đồ hoạ vectơ hoặc đồ hoạ điểm ảnh. - GV chia lớp thành các nhóm 2 – 3 HS để thảo luận và đặt câu hỏi: + Những định dạng tệp ảnh nào hiển thị được và không hiển thị được trên web? + HTML cung cấp thẻ nào để chèn ảnh vào nội dung trang web? + Đoạn mã để chèn ảnh vào trang web có cú pháp như thế nào? + Có thể thiết lập kích thước cho ảnh bằng những thuộc tính nào? + Khi chèn ảnh, nên dùng đường dẫn tương đối hay đường dẫn tuyệt đối? Vì sao? - GV yêu cầu HS vận dụng kiến thức vừa tìm 1. CHÈN TỆP ẢNH VÀO TRANG WEB - Những định dạng tệp ảnh được trình duyệt hỗ trợ để hiển thị trên trang web: PNG, JPEG, GIF, JPEG-XR, WebP. - Những định dạng khác như TIFF, EPS,… cần được chuyển đổi sang định dạng được hỗ trợ ở trên để có thể hiển thị trên web. - HTML sử dụng thẻ đơn <img> để chèn ảnh vào nội dung trang web. a) Đoạn mã HTML b) Kết quả hiển thị trên trình duyệt
English