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

Huy động hiểu biết sẵn có về việc đưa ảnh, âm thanh vào trang web; nhận ra vì sao cần alt, width, height và quyền sử dụng tệp.

GV chiếu hai đoạn mã sau và đặt câu hỏi: (1) <img src='hat-dau.svg'> không có alt, người khiếm thị hoặc khi ảnh không tải được thì biết được gì? (2) Ảnh gốc 240 × 180, nếu viết width='120' height='180' thì ảnh trông thế nào và vì sao? (3) Nếu đưa lên trang một đoạn ghi âm giọng người khác mà chưa xin phép thì có vấn đề gì?
HS trả lời cá nhân trong 2 phút, sau đó nêu nhanh cho cả lớp.

Các câu trả lời dự kiến để GV ghi lên bảng:

• Không có alt: người dùng không biết ảnh chứa gì, trang kém dễ tiếp cận.
• Width 120 nhưng height 180: tỉ lệ đổi từ 240 : 180 sang 120 : 180, ảnh bị kéo dọc, méo hình.
• Đưa giọng người khác khi chưa được phép: vi phạm quyền riêng tư và quyền tác giả, cần xin phép hoặc dùng tệp tự tạo.
  GV nêu tên bài học: Chèn tệp đa phương tiện và khung nội tuyến vào trang web.

Nêu được vai trò của img, src, alt, width, height; giải thích được cách giữ tỉ lệ để ảnh không bị méo.

Cặp đôi làm việc với Phiếu học tập số 1. Mỗi cặp đọc đoạn mã mẫu:

Kết quả HS rút ra và ghi vào phiếu:

• img dùng để nhúng ảnh vào trang; src chỉ nguồn của tệp ảnh.
• alt mô tả thay thế, phải nói đúng nội dung ảnh ('Cây đậu minh họa có hai lá'), không dùng tên tệp vô nghĩa.
• width và height là kích thước hiển thị; muốn không méo phải giữ đúng tỉ lệ rộng : cao = 240 : 180 = 4 : 3.
• Với width=120: chiều cao $180 \times 0{,}5 = 90$ pixel, nên viết height='90'.
• figcaption ghi nguồn hoặc quyền dùng ảnh, thể hiện tính trung thực và ứng xử đúng trên môi trường số.

Nêu được vai trò của audio, video với controls; giải thích được điều kiện định dạng và quyền sử dụng khi đưa media lên trang.

Lớp chia nhóm 3 đến 4 HS theo kĩ thuật mảnh ghép. Nhóm gốc có 3 thành viên đánh số 1, 2, 3; mỗi người nhận một mảnh tìm hiểu:

• Mảnh 1 (audio): đọc dòng <audio controls src='gieo-hat.wav'>Trình duyệt không hỗ trợ âm thanh.</audio>. Controls làm gì? Nội dung dự phòng để làm gì?
• Mảnh 2 (video): đọc <video controls width='320' src='gieo-hat.mp4'>...</video>. Vì sao video cần định dạng được trình duyệt hỗ trợ? Width 320 có cần height không?
• Mảnh 3 (quyền sử dụng): Tự ghi âm 3 giây đọc 'Gieo hạt' và quay 3 giây thao tác đặt hạt có được không? Có được đưa hình, giọng người khác lên mạng khi chưa xin phép không?
  Sau đó các thành viên cùng mảnh họp nhóm chuyên gia 3 phút, rồi quay về nhóm gốc chia sẻ.

Kiến thức HS rút ra, ghi vào Phiếu học tập số 2:

• controls cho phép người học chủ động phát, dừng, điều chỉnh âm lượng; nếu không có controls thì người học không điều khiển được (tùy trình duyệt hiển thị).
• Nội dung trong thẻ là phần thay thế khi trình duyệt không hỗ trợ; media chỉ phát được khi tệp đầu vào tồn tại và đúng định dạng trình duyệt hỗ trợ.
• Có thể tự ghi âm, quay video để làm tư liệu; không đưa hình ảnh, giọng nói người khác khi chưa được phép; cần ghi nguồn và quyền dùng.
• Không có máy chủ ghi nhận tự động: thẻ chỉ tạo khung phát, không tự ghi lại ai đã xem hay nghe.

Giải thích được vai trò của iframe, title và srcdoc; nêu được rằng không phải trang ngoài nào cũng được nhúng và cần kiểm tra quyền nhúng.

Cặp đôi đọc dòng mã mẫu:

Kết quả thảo luận ghi vào phiếu số 2:

• iframe tạo một khung đặt nội dung tài liệu khác bên trong trang hiện tại.
• title mô tả mục đích của khung ('Ghi chú'), giúp người dùng và công cụ hỗ trợ biết khung chứa gì; title không thay thế việc kiểm tra quyền.
• srcdoc trong ví dụ chứa đoạn HTML '<p>Giữ ẩm vừa.</p>', tức là nội dung trực tiếp của khung.
• Không nên nhúng mọi trang ngoài: cần kiểm tra trang đó có cho phép nhúng và có quyền sử dụng nội dung hay không; tránh để khung che nội dung hoặc gây phiền.
• iframe không phải thẻ ảnh; không dùng iframe để thay cho img.

Vận dụng kiến thức về thuộc tính img, controls, title và quyền sử dụng để chọn đáp án đúng, tính toán và sửa mã lỗi.

HS làm Phiếu học tập số 3 theo cặp đôi, sau đó đối chiếu với đáp án. Các câu gồm: (1) Thuộc tính nào nêu văn bản thay thế của img? A. href; B. alt; C. method; D. rowspan. (2) Để người dùng chủ động điều khiển audio cần thuộc tính nào? A. controls; B. colspan; C. scope; D. charset. (3) Nhúng video đồng nghĩa được quyền công khai hình ảnh mọi người có trong video. Đúng hay sai? (4) Ghép: img – Hình ảnh; audio – Âm thanh; iframe – Ngữ cảnh trang nhúng. (5) Ảnh gốc 240 × 180, giữ tỉ lệ và đặt rộng 120 thì cao bao nhiêu pixel? (6) Vì sao iframe nên có title rõ? A. Để thay mọi kiểm tra nguồn; B. Để tự nhận quyền xuất bản; C. Để người dùng/công cụ hỗ trợ biết khung chứa gì; D. Để luôn bỏ chặn nhúng trang ngoài. (7) Ảnh hiện méo vì width='120' height='180' từ nguồn 240 × 180. Hãy sửa mã, giải thích, và nêu cách xử lí nếu tệp ảnh không tải.
GV có thể sử dụng bài tập tương tác trên trang NeoEdu để HS tự kiểm tra thêm sau giờ.

Đáp án và đề bài:

• Câu 1: B (alt mô tả nội dung ảnh, không chỉ lặp tên tệp).
• Câu 2: A (controls cung cấp điều khiển phát, dừng).
• Câu 3: Sai. Nhúng video còn cần quyền riêng tư, sự cho phép và quyền tác giả phù hợp.
• Câu 4: img – Hình ảnh; audio – Âm thanh; iframe – Ngữ cảnh trang nhúng.
• Câu 5: $180 \times \dfrac{120}{240} = 90$ pixel.
• Câu 6: C (title mô tả mục đích khung, không vượt chính sách nhúng).
• Câu 7: Đặt width='120' height='90' (cùng tỉ lệ 4 : 3), hoặc đặt width='120' và dùng CSS để chiều cao tự động theo tỉ lệ. Nếu ảnh không tải: kiểm tra lại đường dẫn, tên tệp phân biệt chữ hoa thường, định dạng và quyền truy cập; alt vẫn giữ 'Cây đậu minh họa có hai lá'. Không dùng alt để che đường dẫn hỏng rồi tuyên bố ảnh đã hiển thị.

Tạo được một trang HTML có ảnh, âm thanh, video và khung ghi chú đúng yêu cầu; kiểm tra và báo cáo kết quả bằng bằng chứng thực tế.

Nhiệm vụ: Tạo trang media cho dự án 'Gieo hạt'. Đầu vào: sao chép tệp hat-dau.svg do GV cung cấp (ảnh cây đậu có hai lá); 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) bằng công cụ GV đã duyệt, lưu thành gieo-hat.wav và gieo-hat.mp4. Viết đoạn HTML gồm: ảnh có alt và tỉ lệ đúng; audio và video có controls; iframe có title và srcdoc chứa một ghi chú ngắn. Ghi nguồn và quyền dùng trong figcaption. Lưu tệp UTF-8 với tên trang-hat-dau.html. Sau khi mở trang, lập bảng kiểm gồm: ảnh hiển thị đúng tỉ lệ, alt đúng nội dung, audio và video có thanh điều khiển, khung iframe có title; nêu rõ giới hạn minh chứng (ví dụ: chỉ kiểm tra trên một trình duyệt).

Sản phẩm: tệp trang-hat-dau.html cùng các tệp đầu vào trong một thư mục và bảng kiểm có ghi kết quả thực tế. Ví dụ đoạn body HS có thể viết: