Tin học 12 · Kết nối tri thức · Chung, Khoa học máy tính và Tin học ứng dụng

Tin họcLớp 12Phần 4. Chủ đề 4 · Giải quyết vấn đề với sự trợ giúp của máy tính · Chung

Bài 11. Chèn tệp tin đa phương tiện và khung nội tuyến vào trang web

Mục tiêu bài học

Giải thích và vận dụng nội dung chèn tệp tin đa phương tiện và khung nội tuyến vào trang web qua dữ kiện cụ thể.
Tạo hoặc đánh giá sản phẩm, nêu điều kiện đúng và kiểm tra kết quả bằng bằng chứng.

Bài giảng

Hiểu cách hoạt động

img nhúng ảnh, src chỉ nguồn, alt mô tả thay thế phù hợp mục đích; width/height cần giữ tỉ lệ để không kéo méo. audio/video có controls cho người học chủ động phát/dừng; định dạng phải được trình duyệt hỗ trợ. iframe đặt một ngữ cảnh tài liệu bên trong trang, cần title để nhận biết nội dung, không tự coi mọi trang ngoài cho nhúng. Tránh tự phát gây phiền, không đưa hình/giọng của người khác lên mạng khi chưa được phép; ghi nguồn và quyền dùng. Không mô tả ảnh thiếu alt bằng tên tệp vô nghĩa.

Làm và tự kiểm tra

Mã mẫu tự biên soạn; lưu UTF-8 theo tên tệp trong nhiệm vụ.

<figure>
 <img src="hat-dau.svg" alt="Cây đậu minh họa có hai lá" width="240" height="180">
 <figcaption>Hình tự vẽ của nhóm.</figcaption>
</figure>
<audio controls src="gieo-hat.wav">Trình duyệt không hỗ trợ âm thanh.</audio>
<video controls width="320" src="gieo-hat.mp4">Trình duyệt không hỗ trợ video.</video>
<iframe title="Ghi chú" srcdoc="<p>Giữ ẩm vừa.</p>"></iframe>

Kết quả suy ra từ cấu trúc mã: ảnh đậu có mô tả thay thế, hai bộ điều khiển media và khung ghi chú; âm thanh/video chỉ có nội dung phát sau khi người học tạo đúng tệp đầu vào như nhiệm vụ, không có máy chủ ghi nhận tự động. Không coi mô tả này là ảnh chụp hay kết quả đã thao tác trên máy người học.

Ghi nhớ

img nhúng ảnh, src chỉ nguồn, alt mô tả thay thế phù hợp mục đích; width/height cần giữ tỉ lệ để không kéo méo.

Bài tập

Đã đúng 0/6 câu

Câu 1Mức 2Trắc nghiệm 1 đáp án
Thuộc tính nào nêu văn bản thay thế của img?
Câu 2Mức 2Trắc nghiệm 1 đáp án
Để người dùng chủ động điều khiển audio cần thuộc tính nào?
Câu 3Mức 2Đúng / Sai
Nhúng video đồng nghĩa được quyền công khai hình ảnh mọi người có trong video.
Câu 4Mức 2Ghép nối
Ghép phần tử với tài nguyên/chức năng.
Chạm một ý bên trái rồi chạm ý tương ứng bên phải để ghép cặp.
Câu 5Mức 2Trả lời ngắn
Ảnh gốc 240 ×180. Nếu giữ tỉ lệ và đặt rộng 120, chiều cao là bao nhiêu pixel?
Câu 6Mức 2Trắc nghiệm 1 đáp án
Tại sao iframe nên có title rõ?
Câu 7Mức 3Tự luận
Tạo trang media cho dự án. Đầu vào: sao chép hình hat-dau.svg được cung cấp; tự ghi âm 3 giây đọc “Gieo hạt” và quay 3 giây thao tác đặt hạt (không có người nhận diện), lưu gieo-hat.wav/mp4 bằng công cụ được giáo viên duyệt. Viết HTML ảnh/âm thanh/video/khung ghi chú, nêu cách kiểm và giới hạn minh chứng.

0 từ
0/10 ảnh
Có thể chụp nhiều trang. Ảnh được lưu cùng bài làm và giáo viên sẽ chấm trên ảnh.
Vẽ bài làm
Ảnh bài làm
Cuộn chuột hoặc chụm hai ngón để phóng to · kéo để di chuyển · phím R để xoay
Câu 8Mức 3Tự luận
Ảnh hiện méo vì đặt width=120 và height=180 từ nguồn 240 ×180. Sửa mã và giải thích, đồng thời xử lí nếu tệp ảnh không tải.
0 từ
0/10 ảnh
Có thể chụp nhiều trang. Ảnh được lưu cùng bài làm và giáo viên sẽ chấm trên ảnh.
Vẽ bài làm
Ảnh bài làm
Cuộn chuột hoặc chụm hai ngón để phóng to · kéo để di chuyển · phím R để xoay