Giáo án tích hợp AI Tin học 12 KHMT 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

I. NỘI DUNG CHI TIẾT BÀI HỌC

1. Chèn tệp ảnh

• Thẻ : Là thẻ đơn dùng để thêm ảnh vào trang web. 

• Thuộc tính src: Chỉ định đường dẫn tới tệp ảnh (bắt buộc). 

• Thuộc tính alt: Văn bản thay thế khi ảnh không hiển thị. 

• Ví dụ: <img src="images/coffee.png" alt="BÀI 11: CHÈN TỆP TIN ĐA PHƯƠNG TIỆN VÀ KHUNG NỘI TUYẾN VÀO TRANG WEB">. 

1. Chèn âm thanh và video

• Thẻ và : Dùng để chèn tệp video và âm thanh.

• Thuộc tính cơ bản: src (đường dẫn), width, height (kích thước), controls (hiển thị trình điều khiển), autoplay (tự động phát).

• Ví dụ: <video src="movie.mp4" controls></video>.

1. Tạo khung nội tuyến

• Thẻ : Tạo một khung nhìn chứa tài nguyên web khác trong trang web hiện tại.

• Thuộc tính chính: src (đường dẫn nội dung), width, height (kích thước khung).

• Ví dụ: <iframe src="CLB.html" width="600" height="400"></iframe>.

II. KIẾN THỨC TRỌNG TÂM

1. Thẻ <img> dùng để chèn hình ảnh, nên đi kèm thuộc tính alt để hỗ trợ hiển thị khi lỗi. 

2. Thuộc tính width và height giúp điều chỉnh kích thước ảnh hoặc khung nội tuyến cho phù hợp. 

3. Video và âm thanh cần định dạng phù hợp (như mp4, webm, mp3) để trình duyệt có thể phát.

4. Thuộc tính controls rất quan trọng để người dùng tương tác (tạm dừng, âm lượng) với tệp đa phương tiện.

5. Thẻ <iframe> cho phép nhúng một trang web khác vào trong trang hiện tại, tạo bố cục linh hoạt.

6. Có thể kết hợp <iframe> với thẻ <a> (thuộc tính target) để hiển thị nội dung liên kết trong khung nội tuyến.

III. BỐ CỤC SLIDE PPTX

• Slide 1: Tiêu đề

  • Tiêu đề: BÀI 11: CHÈN TỆP TIN ĐA PHƯƠNG TIỆN VÀ KHUNG NỘI TUYẾN

  • Nội dung: Họ và tên, Năm học 2026 - 2027.

• Slide 2: Chèn hình ảnh

  • Tiêu đề: Sử dụng thẻ

  • Nội dung: Cách chèn ảnh, vai trò của src và alt, điều chỉnh kích thước ảnh.

• Slide 3: Âm thanh và Video

  • Tiêu đề: Chèn âm thanh và Video

  • Nội dung: Các thẻ <audio>, <video> và các thuộc tính hỗ trợ (controls, autoplay).

• Slide 4: Khung nội tuyến

  • Tiêu đề: Sử dụng thẻ

  • Nội dung: Khái niệm khung nội tuyến và cách nhúng trang web khác.

• Slide 5: Ứng dụng thực tế

  • Tiêu đề: Kết hợp liên kết và khung nhìn

  • Nội dung: Sử dụng target trong thẻ <a> để điều khiển nội dung hiển thị trong <iframe>.

• Slide 6: Tổng kết

  • Tiêu đề: Tóm tắt bài học

  • Nội dung: Vai trò của đa phương tiện trong việc tăng tương tác trên trang web.