BÀI F4 - THÊM DỮ LIỆU ĐA PHƯƠNG TIỆN VÀO TRANG WEB<br/>(CTST

BÀI F4 - THÊM DỮ LIỆU ĐA PHƯƠNG TIỆN VÀO TRANG WEB (CTST - CS & ICT)

Đây là bài soạn gợi ý trả lời SGK tin học 12 (bộ sách Chân trời sáng tạo). Bài này là kiến thức cốt lõi chung cho cả hai định hướng: Khoa học máy tính (CS) và Tin học ứng dụng (ICT). Các em truy cập vào để tham khảo nhé. Chúc các em có nhiều sức khỏe và chăm ngoan học giỏi.

(trang 122 sách ict, trang 89 sách cs)

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?

Gợi ý trả lời

Theo em, một trang web có nội dung chỉ thuần văn bản sẽ:
- Gây nhàm chán, kém sinh động.
- Khó thu hút người xem, nhất là với nội dung giải trí, giáo dục, quảng bá.
- Không truyền tải đầy đủ cảm xúc hoặc thông tin như hình ảnh và âm thanh mang lại.

(trang 123 sách ict, trang 90 sách cs)

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

Gợi ý trả lời

Giải thích: title="Chân dung của nhân vật". Khi người dùng di chuột lên ảnh, dòng chữ này sẽ hiện ra như một chú thích (tooltip).

(trang 124 sách ict, trang 91 sách cs)

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.

Gợi ý trả lời

Giải thích các thuộc tính được thêm:
width="800" và height="600": đặt kích thước video là 800 x 600 pixels.
autoplay: video sẽ tự động phát khi trang web được tải.
muted: tắt tiếng video (bắt buộc khi dùng autoplay trong nhiều trình duyệt).
controls: hiển thị các nút điều khiển video như play, pause,...

(trang 124 sách ict, trang 91 sách cs)

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ì?
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.
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ì?

Gợi ý trả lời

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:

2. 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:

3. 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à: src="Asset/Sound/bai_hat.mp3"

(trang 125+126 sách ict, trang 92+93 sách cs)

Em hãy bổ sung các nội dung sau vào trang web portfolio.html:
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.
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.

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.

Gợi ý trả lời

1. Thêm video clip và bài hát yêu thích vào portfolio.html:
Ví dụ:

2. Thêm ảnh vào mục “Nội dung yêu thích” với bố cục mỗi hàng 3 ảnh:

Giải thích:
- Sử dụng thẻ <table> để tạo bảng.
- Mỗi dòng dùng <tr>, mỗi cột chứa ảnh dùng <td>.
- Mỗi ảnh được chèn bằng thẻ <img>, có đặt kích thước (width, height) và văn bản thay thế (alt).
- Ảnh được lưu trong thư mục Images, em cần thay đổi tên file ảnh (hinh1.jpg, hinh2.jpg, ...) cho đúng với ảnh thực tế của mình.
3. Thêm ảnh đại diện vào bên phải mục “Giới thiệu chung”:

Giải thích:
- Dùng <table> để chia layout thành 2 phần ngang hàng.
- Ảnh đại diện nằm bên phải trong cột thứ 2.
- Có thể thay đổi width, height, hoặc căn giữa bằng CSS nếu muốn đẹp hơn.

---The end!---

CÙNG CHUYÊN MỤC:

CHỦ ĐỀ A. MÁY TÍNH VÀ XÃ HỘI TRI THỨC

Bài A1. Giới thiệu Trí tuệ nhân tạo
Bài A2. Trí tuệ nhân tạo và cuộc sống
Bài A3(ict). Thực hành kết nối thiết bị số với máy tính
Bài A4(ict). Thực hành kết nối thiết bị số với máy tính (tiếp theo)

CHỦ ĐỀ B. MẠNG MÁY TÍNH VÀ INTERNET

Bài B1. Thiết bị và giao thức mạng
Bài B2. Các chức năng mạng của hệ điều hành
Bài B3. Thực hành kết nối và sử dụng mạng trên thiết bị thông minh
Bài B4(cs). Vai trò của các thiết bị mạng
Bài B5(cs). Đường truyền hữu tuyến và vô tuyến
Bài B6(cs). Thiết kế mạng nội bộ
Bài B7(cs). Thực hành thiết kế mạng nội bộ

CHỦ ĐỀ D. ĐẠO ĐỨC, PHÁP LUẬT VÀ VĂN HÓA TRONG MÔI TRƯỜNG SỐ

Bài D1. Giao tiếp trong không gian mạng
Bài D2. Giữ gìn tính nhân văn trong không gian mạng

CHỦ ĐỀ E. ỨNG DỤNG TIN HỌC

Bài E1(ict). Tạo trang web, thiết lập giao diện và xem trước trang web
Bài E2(ict). Tạo, hiệu chỉnh trang web và thiết kế thanh điều hướng
Bài E3(ict). Tạo văn bản, chèn hình ảnh và tạo chân trang
Bài E4(ict). Sử dụng Content Blocks, Buttun, Divider
Bài E5(ict). Nhúng mã và tạo băng chuyền hình ảnh
Bài E6(ict). Chèn YouTube, Calendar, Drive và Collapsible group
Bài E7(ict). Sử dụng Map, Form và các thiết lập trang web
Bài E8(ict). Hoàn thiện và xuất bản trang web

CHỦ ĐỀ F. GIẢI QUYẾT VẤN ĐỀ VỚI SỰ TRỢ GIÚP CỦA MÁY TÍNH