Giáo án và PPT Khoa học máy tính 12 kết nố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À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)

A. KHỞI ĐỘNG

- HS dựa vào hiểu biết để trả lời các câu hỏi.

B. HOẠT ĐỘNG HÌNH THÀNH KIẾN THỨC

1. Chèn tệp ảnh vào trang web

GV tổ chức cho HS tìm hiểu hoạt động 1 và trình bày các định dạng tệp ảnh được trình duyệt hỗ trợ để hiển thị trên trang web?

Kết luận:

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

2. Chèn âm thanh và video vào trang web

Trình bày những thuộc tính của thẻ <video> và <audio>?

Kết luận:

- Thuộc tính thẻ: 

+ Thẻ <video>: 

• src.

• width.

• height. 

• controls: là thuộc tính boolean, không cần có giá trị, để trình duyệt hiển thị các thành phần điều khiển như nút phát/tạm dừng, điều khiển âm lượng..... Thuộc tính này nên được sử dụng để có thể điều khiển trong quá trình phát tệp tin đa phương tiện.

• autoplay: là thuộc tính boolean, không cần có giá trị, cho phép trình duyệt chạy video ngay khi hiển thị. Tuy nhiên, một số trình duyệt như Google Chrome thường không cho video chạy ngay khi hiển thị hoặc có thể chạy ngay khi hiển thị nếu có thuộc tính muted – không phát tiếng.

• poster: cung cấp đường dẫn đến tệp ảnh, dùng để hiển thị khi chưa chạy video.

+ Thẻ <audio>:

• src.

• controls.

• autoplay.

• Không có thuộc tính width, height và poster.

* Trong trường hợp có nhiều video hoặc nhiều tệp âm thanh tương ứng với các định dạng khác nhau, có thể sử dụng thẻ <source> trong cặp thẻ <video> hay <audio> để chỉ định các loại định dạng khác nhau. Trình duyệt sẽ tự động tìm và hiển thị tệp tin với định dạng mà nó hỗ trợ.

3. Tạo khung nội tuyến trong trang web

Trình bày khái niệm về khung nội tuyến?

Kết luận:

- Khung nội tuyến là một khung nhìn chứa tài nguyên web khác trong trang web hiện tại. 

- HTML sử dụng thẻ <iframe> để tạo khung nội tuyến. 

4. Thực hành chèn tệp đa phương tiện và khung nội tuyến

Trình bày các nhiệm vụ để chèn tệp đa phương tiện và khung nội tuyến?

Kết luận:

- Nhiệm vụ 1: Chèn tập ảnh

- Nhiệm vụ 2: Chèn tập âm thanh

- Nhiệm vụ 3: Chèn khung nội tuyến

C. HOẠT ĐỘNG LUYỆN TẬP

- GV giao nhiệm vụ cho HS, HS hoàn thành phiếu bài tập.

Đáp án gợi ý:

D. HOẠT ĐỘNG VẬN DỤNG

GV hướng dẫn HS hoàn thành bài tập phần Vận dụng SGK tr.66 ở nhà và nộp bài làm qua Gmail.