Đáp án Khoa học máy tính 12 chân trời Bài F4: Thêm dữ liệu đa phương tiện vào trang web

Bài F4. THÊM DỮ LIỆU ĐA PHƯƠNG TIỆN VÀO TRANG WEB

KHỞI ĐỘNG

Theo em, một trang web có nội dung chỉ thuần văn bản sẽ có những hạn chế gì so với trang web có thêm hình ảnh và âm thanh?

Giải chi tiết:

Một trang web chỉ với văn bản thuần túy sẽ gặp một số hạn chế so với trang web kết hợp cả hình ảnh và âm thanh:

- Khả năng truyền đạt hạn chế: Văn bản không thể truyền đạt thông tin một cách trực quan như hình ảnh hoặc video. Người dùng phải đọc và hiểu văn bản, điều này có thể tốn thời gian và không phù hợp cho mọi người.

- Thiếu sự hấp dẫn: Trang web chỉ với văn bản có thể trở nên đơn điệu và ít hấp dẫn. Hình ảnh và âm thanh giúp tạo ra trải nghiệm đa dạng và thú vị hơn cho người dùng.

- Khó khăn trong việc diễn đạt: Một số khái niệm hoặc thông tin phức tạp có thể khó diễn đạt chỉ qua văn bản. Hình ảnh và âm thanh giúp minh họa và làm rõ hơn.

- Không thể hiện được chuyển động: Văn bản không thể truyền đạt chuyển động hoặc tương tác như video hoặc âm thanh. Điều này có thể ảnh hưởng đến trải nghiệm người dùng.

KHÁM PHÁ

1. Thêm tệp ảnh vào trang web

Làm

Em hãy bổ sung thuộc tính title cho thẻ <img> trong mã lệnh HTML ở Ví dụ 1.

Giải chi tiết:

Để bổ sung thuộc tính title cho thẻ <img> trong mã lệnh HTML của Ví dụ 1, em có thể sử dụng cú pháp sau:

Hiển thị:

Trong đó, bạn thay "Mô tả hình ảnh" bằng nội dung mô tả thích hợp cho hình ảnh. Thuộc tính title được sử dụng để hiển thị một thông báo nhảy pop-up khi người dùng di chuột qua hình ảnh, cung cấp thêm thông tin về hình ảnh đó.

2. Thêm tập video và âm thanh vào trang web

Làm

Em hãy bổ sung thuộc tính cho đoạn mã HTML ở Ví dụ 2 để kích thước hiển thị của video là 800 x 600 pixels và video tự động phát không có âm thanh.

Giải chi tiết:

Để bổ sung các thuộc tính cho đoạn mã HTML của Ví dụ 2, bạn có thể sử dụng các thuộc tính width, height, và muted của thẻ <video>. Dưới đây là cách bổ sung các thuộc tính đó vào mã lệnh:

LUYỆN TẬP

Câu 1: Chức năng các thuộc tính của thẻ <img> khi thêm tệp ảnh vào trang web là gì?

Giải chi tiết:

Thẻ <img> với các thuộc tính src, alt, width, height,... được dùng để thêm tệp ảnh vào trang web. Thẻ <img> chỉ có thẻ mở, không có thẻ đóng.

Câu 2: Em hãy liệt kê và nêu chức năng các thuộc tính của thẻ <audio> khi thêm tệp âm thanh vào trang web.

Giải chi tiết:

Khi thêm tệp âm thanh vào trang web, bạn có thể sử dụng thẻ <audio> để tạo trình nghe nhạc. Dưới đây là danh sách các thuộc tính của thẻ <audio> và chức năng của chúng:

- src: Đường dẫn đến tệp âm thanh mà bạn muốn phát. Thuộc tính này là bắt buộc.

- autoplay: Tự động phát âm thanh khi trang web được tải xong. Ví dụ: <audio controls autoplay>...</audio>.

- controls: Hiển thị các nút điều khiển cho phép người dùng tương tác, như play, pause, volume, etc.

- loop: Xác định liệu tệp âm thanh có phát lại liên tục hay không. Ví dụ: <audio controls loop>...</audio>.

- muted: Tắt âm thanh của tệp. Ví dụ: <audio controls muted>...</audio>.

Câu 3: Giả sử tệp portfolio.html nằm cùng nơi với thư mục Asset. Thư mục Sound, là thư mục con của thư mục Asset, có chứa tệp bai_hat.mp3. Theo em, đường dẫn cho thuộc tính src để thêm tệp bai_hat.mp3 này vào tệp portfolio.html là gì?

Giải chi tiết:

Để thêm tệp bai_hat.mp3 vào tệp portfolio.html, em có thể sử dụng đường dẫn sau cho thuộc tính src của thẻ <audio>:

<audio src="Asset/Sound/bai_hat.mp3"></audio>

Trong đó:

- Asset/Sound/bai_hat.mp3 là đường dẫn tới tệp âm thanh bai_hat.mp3 trong thư mục Sound, nằm trong thư mục con Asset.

- Thẻ <audio> dùng để tạo một điểm chứa cho âm thanh.

- Thuộc tính controls được thêm vào để hiển thị thanh điều khiển cho người dùng có thể điều khiển âm thanh (như phát, dừng...).

VẬN DỤNG

Em hãy bổ sung các nội dung sau vào trang web portfolio.html:

Câu 1: Một video clip và một bài hát mà em yêu thích với thẻ <video>, <audio>, <h1>, <h2> và các thẻ khác đã học.

Giải chi tiết:

Dưới đây là đoạn mã HTML để bổ sung video clip và bài hát yêu thích vào trang web portfolio.html:

Kết quả khi chạy mã HTML trên:

Câu 2: Thêm ảnh vào mục Nội dung yêu thích sao cho mỗi hàng của bảng hiển thị ba ảnh, sử dụng thẻ <img>, các thẻ tạo bảng và các thẻ khác đã học.

Hình 4 là một ví dụ kết quả sau khi hoàn thành chỉnh sửa.

Giải chi tiết:

Để thêm ảnh vào mục "Nội dung yêu thích" với mỗi hàng của bảng hiển thị ba ảnh, em có thể sử dụng thẻ <img>, các thẻ tạo bảng như <table>, <tr>, <td>, và các thẻ khác đã học. Dưới đây là đoạn mã HTML để thực hiện yêu cầu của câu hỏi:

Kết quả khi chạy:

Câu 3: Thêm ảnh đại diện vào bên phải của mục Giới thiệu chung để được kết quả như Hình 5.

Giải chi tiết:

Để thêm ảnh đại diện vào bên phải của mục Giới thiệu chung, em có thể sử dụng thẻ <img> để nhúng hình ảnh. Dưới đây là ví dụ về cách thêm ảnh đại diện: