Câu hỏi tự luậ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

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

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

(15 CÂU)

1. NHẬN BIẾT (4 CÂU)

Câu 1: Thẻ nào được sử dụng để thêm hình ảnh vào trang web trong HTML?

Trả lời: 

Thẻ được sử dụng để thêm hình ảnh vào trang web trong HTML là thẻ <img>. Thẻ này không có thẻ đóng và thường được sử dụng với các thuộc tính để chỉ định nguồn hình ảnh và các thông tin khác.

Câu 2: Nêu một số thuộc tính cơ bản của thẻ <img>?

Trả lời: 

Câu 3: Thẻ nào được sử dụng để nhúng video vào trang web?

Trả lời: 

...........................................

Câu 4: Nêu tên thẻ HTML dùng để thêm âm thanh vào trang web?

Trả lời: 

...........................................

2. THÔNG HIỂU (4 CÂU)

Câu 1: Giải thích vai trò của thuộc tính src trong thẻ <img>?

Trả lời: 

+ Thuộc tính src trong thẻ <img> chỉ định đường dẫn đến tệp hình ảnh mà bạn muốn hiển thị trên trang web.

+ Nếu không có thuộc tính này, hình ảnh sẽ không được tải và hiển thị.

Câu 2: Mô tả cách sử dụng thuộc tính alt trong thẻ <img> và tại sao nó lại quan trọng?

Trả lời: 

- Thuộc tính alt cung cấp mô tả cho hình ảnh. Nội dung của thuộc tính này sẽ được hiển thị nếu hình ảnh không thể tải được hoặc cho người dùng sử dụng trình đọc màn hình.

=> Tại sao nó lại quan trọng: Nó cải thiện khả năng truy cập cho người dùng khiếm thị và hỗ trợ SEO (tối ưu hóa công cụ tìm kiếm) vì các công cụ tìm kiếm không thể "nhìn" hình ảnh nhưng có thể đọc được mô tả.

Câu 3: So sánh sự khác biệt giữa thẻ <video> và thẻ <audio> trong HTML?

Trả lời: 

...........................................

Câu 4: Giải thích cách thêm các điều khiển (controls) cho video và âm thanh trong HTML?

Trả lời: 

...........................................

3. VẬN DỤNG (4 CÂU)

Câu 1: Giải thích tác dụng của thuộc tính width và height trong thẻ <img> và cách chúng ảnh hưởng đến hiển thị hình ảnh trên trang web?

Trả lời: 

- Tác dụng của width và height: 

+ Các thuộc tính này xác định kích thước hiển thị của hình ảnh trên trang web. 

+ Width chỉ định chiều rộng và Height chỉ định chiều cao (có thể dùng pixel hoặc phần trăm).

- Ảnh hưởng đến hiển thị:

+ Nếu không chỉ định kích thước, trình duyệt sẽ tải hình ảnh với kích thước gốc, có thể làm chậm thời gian tải trang.

+ Nếu kích thước không tương ứng với tỷ lệ chiều cao và chiều rộng của hình ảnh, hình ảnh có thể bị kéo dãn hoặc biến dạng.

Câu 2: Mô tả cách mà các định dạng tệp hình ảnh (như JPEG, PNG, GIF) khác nhau và ảnh hưởng của chúng đến chất lượng và kích thước tệp?

Trả lời: 

Định dạng JPEG:

+ Thích hợp cho hình ảnh có nhiều màu sắc và chi tiết, như ảnh chụp.

+ Nén có mất dữ liệu, làm giảm chất lượng nhưng kích thước tệp nhỏ.

Định dạng PNG:

+ Hỗ trợ nền trong suốt và không mất dữ liệu, giữ nguyên chất lượng hình ảnh.

+ Kích thước tệp thường lớn hơn so với JPEG, phù hợp cho hình ảnh đồ họa và biểu tượng.

Định dạng GIF:

+ Hỗ trợ hình ảnh động và có giới hạn về màu sắc (256 màu).

+ Thích hợp cho đồ họa đơn giản và hoạt hình nhưng không tốt cho hình ảnh chi tiết.

Câu 3: Giải thích tại sao việc sử dụng video có định dạng HTML5 lại quan trọng trong phát triển web hiện đại?

Trả lời: 

...........................................

Câu 4: Nêu các thuộc tính bổ sung mà bạn có thể sử dụng với thẻ <video> để cải thiện trải nghiệm người dùng, chẳng hạn như autoplay, loop, và muted?

Trả lời: 

...........................................

4. VẬN DỤNG CAO (3 CÂU)

Câu 1: Nêu các tiêu chuẩn tốt nhất khi sử dụng hình ảnh, video và âm thanh trên trang web để đảm bảo tính khả dụng và tối ưu hóa hiệu suất?

Trả lời: 

- Chọn định dạng tệp phù hợp: Sử dụng JPEG cho hình ảnh có nhiều màu sắc, PNG cho hình ảnh cần nền trong suốt, và GIF cho hình ảnh động đơn giản.

- Tối ưu hóa kích thước tệp: Nén hình ảnh, video và âm thanh để giảm kích thước tệp mà không làm giảm chất lượng. Sử dụng các công cụ nén như TinyPNG, ImageOptim cho hình ảnh và HandBrake cho video.

- Sử dụng thuộc tính alt cho hình ảnh: Cung cấp mô tả cho hình ảnh giúp cải thiện khả năng truy cập và SEO.

- Tối ưu hóa thời gian tải: Sử dụng lazy loading cho hình ảnh và video để chỉ tải khi người dùng cuộn đến chúng. Đảm bảo rằng tài nguyên đa phương tiện được lưu trữ trên máy chủ nhanh và có CDN (Content Delivery Network).

- Thêm điều khiển cho video và âm thanh: Cung cấp các điều khiển như play, pause, volume để người dùng có thể tương tác dễ dàng.

- Kiểm tra trên nhiều thiết bị và trình duyệt: Đảm bảo rằng nội dung đa phương tiện hoạt động tốt trên mọi thiết bị và trình duyệt.

Câu 2: Giải thích khái niệm về “tối ưu hóa hình ảnh” và nêu các phương pháp để giảm kích thước tệp hình ảnh mà không làm giảm chất lượng?

Trả lời: 

...........................................

Câu 3: Mô tả cách mà việc sử dụng dữ liệu đa phương tiện có thể ảnh hưởng đến trải nghiệm người dùng trên trang web và cách cải thiện trải nghiệm đó.

Trả lời: 

...........................................

--------------- Còn tiếp ---------------