Thực hành trang web có media và khung

Giải nén ZIP rồi mở index.html bằng trình duyệt. Bộ mẫu có năm trang HTML: index.html, doc_sach.html, ve_tranh.html, hai_khung.html và nghe_am.html. Ba thư mục anh, am, phim giữ ảnh PNG, âm WAV và hai phiên bản MP4/WebM của cùng video. Nhiệm vụ là hoàn thiện trang giới thiệu hai nhóm: mỗi trang con có ảnh; trang cha có âm thanh, video và bảng chọn đổi nội dung trong iframe. Các tệp dùng nội dung giả định, hình tự tạo, âm đơn và video ngắn để tập trung kiểm mã.

1. Mở doc_sach.html bằng trình soạn thảo, xem img và đổi một câu giới thiệu. Lưu UTF-8, tải lại trang trong trình duyệt để thấy nội dung mới. Làm tương tự với ve_tranh.html, giữ src đúng tệp ảnh. 2. Trong index.html, đối chiếu audio có src và controls; video có controls, poster và hai source. Phát từng mẫu: âm kết thúc khoảng một giây; chấm tròn di chuyển khoảng hai giây, không có tiếng. 3. Đối chiếu hai a có target="khung" và iframe có name="khung". Chọn lần lượt Đọc sách, Vẽ tranh; ảnh và lời giới thiệu trong khung đổi đúng nhóm, bảng chọn trang cha vẫn còn. 4. Mở hai_khung.html để xem hai khung bằng nhau. Thu hẹp cửa sổ để quan sát khi vùng chứa không còn đủ chỗ cho cả hai. 5. Trên bản sao, thêm autoplay vào audio rồi tải lại để khảo sát điều kiện tự phát. Nếu bị chặn, dùng nút phát; sau đó bỏ autoplay để trở về mẫu ban đầu.

```html <iframe src="nghe_am.html" title="Nghe âm mẫu" width="320" height="180"></iframe> ``` Có thể thêm đoạn này vào bản sao index.html. Khung mới tải trang nghe_am.html, rồi trang đó tải tệp WAV. Đây là cách kiểm việc nhúng một trang chứa nội dung âm thanh bằng tài nguyên có sẵn. Khi dùng video hoặc bài hát trực tuyến được phép nhúng, lấy mã nhúng do nền tảng cung cấp và kiểm điều kiện hiển thị. Mẫu cục bộ không cần tài khoản hay thông tin cá nhân.

| Dấu hiệu | Cần kiểm | |---|---| | Ảnh không hiện |src, tên/thư mục ảnh, định dạng và tệp| | Âm/video không chạy |Nguồn, khả năng hỗ trợ, nút phát và điều kiện tự phát| | Thời gian âm chạy nhưng không nghe |Âm lượng, tắt tiếng, thiết bị phát và nội dung tệp| | Liên kết mở ra ngoài khung |target của a và name của iframe| | Trang con hiện nhưng thiếu media |Đường dẫn trong chính trang con và các tệp đi kèm| Khi chuyển bài sang máy khác, chuyển nguyên bộ. Chọn đúng câu trắc nghiệm giúp kiểm hiểu mã; sản phẩm thực hành vẫn cần được tạo và mở kiểm trên máy.