Video giảng 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

Tóm lược nội dung

BÀI 11: CHÈN TỆP TIN ĐA PHƯƠNG TIỆN  VÀ KHUNG NỘI TUYẾN VÀO TRANG WEB

Hân hạnh được đồng hành cùng các em trong bài học ngày hôm nay!

Thông qua video này, các em sẽ nắm được các kiến thức và kĩ năng như sau:

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

A. KHỞI ĐỘNG

Trước khi bắt đầu bài học, chúng ta hãy cùng nhau trả lời câu hỏi sau nhé:

https://vnexpress.net/tram-nam-doi-thay-cua-quang-truong-cho-ben-thanh4754365
.html

https://video.vnexpress.net/cau-day-vang-hinh-bup-sen-dau-tien-tai-nam-dinh-4752024.html

Ở 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ì?

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. HOẠT ĐỘNG HÌNH THÀNH KIẾN THỨC

Nội dung 1. Chèn tệp ảnh vào trang web

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?

Video trình bày nội dung:

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

Nội dung 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>?

Video trình bày nội dung:

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

Nội dung 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?

Video trình bày nội dung:

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

Nội dung 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?

Video trình bày nội dung:

- 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

...........

Nội dung video Bài 11: Chèn tệp tin đa phương tiện và khung nội tuyến vào trang web còn nhiều phần rất hấp dẫn và thú vị. Hãy cùng đăng kí để tham gia học bài và củng cố kiến thức thông qua hoạt động luyện tập và vận dụng trong video.