Giải Tin học 12 - Định hướng khoa học máy tính trang 66

Lời giải chi tiết SGK Lớp 12 · Môn Tin Học · Trang 66–67

Nguon: Tin Hoc 12 KHMT (trang 66 – 67)

⚠️ Lưu ý: Ảnh em gửi tương ứng với nội dung trang 64 – 65 của sách (góc dưới mỗi trang ghi số 64, 65). Thầy sẽ giải đúng theo nội dung trong ảnh nhé.

🔍 Kiến thức cần nhớ

1. Chèn âm thanh và video — thẻ

  • Để chèn video hoặc âm thanh vào trang web, dùng thẻ .
  • Định dạng video phổ biến: mp4, webm (mp4 chạy được trên hầu hết trình duyệt).
  • Định dạng âm thanh phổ biến: mp3, wav, ogg.

Cú pháp chung:

Các thuộc tính của thẻ :

Thuộc tínhÝ nghĩa
srcĐường dẫn tới tệp video
width, heightChiều rộng, chiều cao khung video
controls(boolean) Hiển thị thanh điều khiển: phát/tạm dừng, âm lượng…
autoplay(boolean) Cho phép tự động chạy video khi hiển thị
muted(boolean) Tắt tiếng (giúp autoplay chạy được trên Chrome)
posterĐường dẫn ảnh hiển thị khi video chưa chạy

→ Thẻ không có thuộc tính width, height, poster.

  • Khi có nhiều định dạng khác nhau, dùng thẻ bên trong / để trình duyệt tự chọn định dạng phù hợp.
💡 Mẹo nhớ: controls = nút điều khiển, autoplay = tự chạy, muted = tắt tiếng, poster = ảnh chờ. Đây đều là thuộc tính boolean (không cần ghi giá trị).

2. Khung nội tuyến — thẻ
💡 Mẹo nhớ: iframe = "một trang web nằm trong một trang web khác".

⚙️ Bài tập

Câu 1 (Hoạt động 2)

Đề bài: Quan sát đoạn mã sau và xác định xem đoạn mã này có chức năng gì?

Cách 1 — Phân tích từng thuộc tính

Ta đọc lần lượt từng thành phần của thẻ:

  • Thẻ : dùng để chèn một video vào trang web.
  • src="videos/war_is_over.mp4": chỉ ra đường dẫn tới tệp video là war_is_over.mp4 nằm trong thư mục videos.
  • width="300": chiều rộng khung video là 300 pixel.
  • height="250": chiều cao khung video là 250 pixel.
  • autoplay: cho phép video tự động phát ngay khi trang được hiển thị.

Kết luận: Đoạn mã chèn video war_is_over.mp4 vào trang web với khung kích thước 300 × 250 pixel và để video tự động chạy khi tải trang.

Cách 2 — Đọc nhanh theo "công thức"

Khi gặp thẻ video, đọc theo trật tự: chèn gì → từ đâu → kích thước → hành vi.

→ "Chèn video war_is_over.mp4 (trong thư mục videos), khung 300×250, tự chạy."

⚠️ Lưu ý thi: Đoạn mã trên không có thuộc tính controls nên người dùng sẽ không thấy thanh điều khiển (nút phát/tạm dừng, âm lượng). Ngoài ra, do không có muted nên trên Chrome video có thể không tự chạy dù đã khai báo autoplay. Đây là điểm hay bị hỏi để "bẫy" học sinh.

Câu 2 (Câu hỏi cuối trang 64)

Đề bài: Thuộc tính src có tác dụng gì với thẻ ?

Cách 1 — Trả lời theo định nghĩa

Thuộc tính src của thẻ dùng để chỉ ra đường dẫn (địa chỉ) tới tệp âm thanh cần phát trên trang web. Trình duyệt dựa vào giá trị của src để tìm và tải tệp âm thanh tương ứng.

Ví dụ:

→ Trang web sẽ tải và phát tệp nhac_nen.mp3 trong thư mục audio.

Cách 2 — Liên hệ so sánh

src trong có vai trò giống hệt src trong : đều chỉ định nguồn (source) tệp dữ liệu cần hiển thị/phát. Khác biệt chỉ là loại dữ liệu — là ảnh, là video, là âm thanh.

💡 Mẹo nhớ: src = source = "nguồn". Thẻ nào cần nạp dữ liệu bên ngoài đều dùng src để chỉ nguồn.

Câu 3 (Hoạt động 3)

Đề bài: Trong các bài đăng có đính kèm video, một số trang web sẽ hiển thị nội dung video trong một khung và cho phép tương tác bên trong khung đó. Em có nhận xét gì về giao diện của cả trang khi thực hiện các thao tác bên trong khung này?

Cách 1 — Phân tích hiện tượng

Khi ta thao tác (phát video, kéo thanh thời gian, chỉnh âm lượng, cuộn nội dung…) bên trong khung:

  • Các thao tác đó chỉ ảnh hưởng đến nội dung bên trong khung, không tác động tới phần còn lại của trang.
  • Giao diện chung của cả trang web vẫn giữ nguyên: tiêu đề, menu, các bài đăng khác… không bị thay đổi hay tải lại.
  • Người dùng có thể vừa xem/tương tác với video trong khung, vừa giữ nguyên ngữ cảnh đọc trang chính.

Kết luận: Khung nội tuyến (

→ Hai khung có kích thước 400 × 300 pixel bằng nhau, hiển thị song song theo phương ngang (cạnh nhau trên cùng một dòng), miễn là chiều rộng trang đủ chứa cả hai.

Cách 2 — Đặt trong khối có CSS để đảm bảo nằm ngang

Để chắc chắn hai khung luôn nằm cạnh nhau và đều nhau, có thể bọc trong một khối dùng display: flex:

→ Hai khung được căn ngang đều nhau, cách nhau 10px, không bị xuống dòng khi màn hình hẹp.

⚠️ Lưu ý thi: Điểm mấu chốt là hai thẻ