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ẻ và
- Để chèn video hoặc âm thanh vào trang web, dùng thẻ
và. - Đị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, height | Chiề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ẻ
iframe(inline frame) là khung nhìn chứa tài nguyên web khác trong trang web hiện tại.- Dùng để nhúng video YouTube, bản đồ Google Maps, quảng cáo…
- Thuộc tính thường dùng:
src(đường dẫn nội dung),width,height.
💡 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ínhcontrolsnê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ómutednên trên Chrome video có thể không tự chạy dù đã khai báoautoplay. Đâ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 và : đề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ùngsrcđể 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 () hoạt động độc lập tương đối với trang chứa nó, giúp giao diện trang ổn định và trải nghiệm liền mạch.
Cách 2 — Liên hệ thực tế
Đây chính là cơ chế của : nó nhúng một "trang web con" vào trang web chính. Giống như xem video YouTube nhúng trong một bài viết — ta phát/tạm dừng video mà bài viết phía ngoài không hề bị tải lại.
Câu 4 (Câu hỏi cuối trang 65)
Đề bài: Viết các câu lệnh để tạo hai khung nội tuyến có kích thước bằng nhau, hiển thị song song (theo phương ngang) trên trang web.
Cách 1 — Dùng hai thẻ liền nhau
Do là phần tử inline (nằm trên cùng một dòng), chỉ cần đặt hai thẻ cạnh nhau với cùng width và height:
→ 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ẻphải cówidthvàheightgiống nhau để "kích thước bằng nhau". Cách 1 đủ đáp ứng yêu cầu sách giáo khoa; Cách 2 là nâng cao.
Câu 5 (Nhiệm vụ 1 — Thực hành: Chèn tệp ảnh)
Đề bài: Tạo hai trang the_thao.html và nghe_thuat.html và chèn hai loại ảnh minh hoạ.
Cách 1 — Làm theo hướng dẫn sách giáo khoa
Bước 1 — Chuẩn bị thư mục ảnh:
Tạo thư mục images trong thư mục chứa bài thực hành, sao chép ảnh hoạt động thể thao (ví dụ thethao.png) và ảnh nghệ thuật (ví dụ nghethuat.png) vào đó.
Bước 2 — Tạo trang the_thao.html:
Hoạt động thể thao
Câu lạc bộ thể thao
Bước 3 — Tạo trang nghe_thuat.html:
Hoạt động nghệ thuật
Câu lạc bộ nghệ thuật
→ Mở hai tệp bằng trình duyệt để kiểm tra ảnh đã hiển thị đúng.
Cách 2 — Mẹo gọn khi thực hành
Tạo trang the_thao.html trước cho hoàn chỉnh, sau đó sao chép (Save As) thành nghe_thuat.html rồi chỉ cần sửa lại:
- tiêu đề
và, - đường dẫn ảnh trong
src, - nội dung
alt.
Cách này tiết kiệm thời gian gõ lại toàn bộ cấu trúc HTML.
💡 Mẹo nhớ: Luôn ghi thuộc tínhaltcho— vừa giúp hiển thị mô tả khi ảnh lỗi, vừa hỗ trợ người dùng dùng trình đọc màn hình (tính truy cập web).
🎯 Ghi nhớ: - Dùngvàđể chèn video/âm thanh; tệp phải có định dạng được trình duyệt hỗ trợ (video: mp4, webm; audio: mp3, wav, ogg). - Thuộc tính boolean:controls,autoplay,muted; thẻkhông cówidth,height,poster. -srcluôn là đường dẫn tới nguồn tệp (ảnh, video, âm thanh). -để chèn một trang/tài nguyên web vào trang web khác; thao tác trong khung không làm tải lại trang chính. - Đặt nhiềucùng kích thước cạnh nhau để hiển thị song song theo phương ngang.
