Câu hỏi tự luận mức độ thông hiểu Tin học ứng dụng 12 ctst bài F4: Thêm dữ liệu đa phương tiện vào trang web

Câu 1: 

Thẻ <img> (image) được sử dụng để nhúng hình ảnh vào trang web. Đây là một thẻ rỗng (empty tag), nghĩa là nó không có thẻ đóng.

Cú pháp cơ bản:

+ src (source): Thuộc tính bắt buộc, chỉ định đường dẫn đến tệp hình ảnh. Đường dẫn có thể là:

+  Đường dẫn tương đối: Đường dẫn so với vị trí của tệp HTML hiện tại. Ví dụ: images/logo.png (nếu hình ảnh nằm trong thư mục "images" cùng cấp với tệp HTML).

+ Đường dẫn tuyệt đối: Đường dẫn đầy đủ đến hình ảnh, bao gồm cả giao thức (ví dụ: https://www.example.com/images/logo.png).

+ alt (alternative text): Thuộc tính bắt buộc, cung cấp văn bản thay thế cho hình ảnh.

- Văn bản này sẽ được hiển thị trong các trường hợp:

+ Hình ảnh không tải được.

+ Người dùng tắt hiển thị hình ảnh trong trình duyệt.

+ Người dùng sử dụng trình đọc màn hình (screen reader) cho người khiếm thị.

alt rất quan trọng cho khả năng tiếp cận (accessibility) và SEO (Search Engine Optimization). Hãy luôn cung cấp mô tả ngắn gọn và chính xác về nội dung của hình ảnh trong thuộc tính alt.

- Các thuộc tính tùy chọn khác:

+ width: Chiều rộng của hình ảnh (tính bằng pixel hoặc phần trăm).

+ height: Chiều cao của hình ảnh (tính bằng pixel hoặc phần trăm).

=> Lưu ý: Nên sử dụng CSS để kiểm soát kích thước hình ảnh thay vì thuộc tính width và height để có khả năng tùy chỉnh và quản lý tốt hơn.

Câu 2: 

=> Ghi chú:

- Cả hai thẻ đều hỗ trợ các thuộc tính như controls để hiển thị điều khiển cho người dùng.

- Thẻ <video> có thêm thuộc tính poster để hiển thị hình ảnh trước khi video được phát.

Câu 3:

- Tối ưu hóa hình ảnh là quá trình giảm kích thước tệp hình ảnh mà không làm giảm chất lượng một cách đáng kể. Việc này rất quan trọng vì:

+ Tăng tốc độ tải trang: Hình ảnh nặng có thể làm chậm tốc độ tải trang, ảnh hưởng đến trải nghiệm người dùng và SEO.

+ Giảm băng thông: Hình ảnh tối ưu sẽ tiêu tốn ít băng thông hơn, giúp tiết kiệm chi phí cho các trang web có lượng truy cập cao.

+ Cải thiện SEO: Tốc độ tải trang là một yếu tố quan trọng trong xếp hạng tìm kiếm, do đó, tối ưu hóa hình ảnh có thể giúp cải thiện vị trí của trang web trên các công cụ tìm kiếm.

+ Tương thích với nhiều thiết bị: Hình ảnh nhỏ hơn dễ dàng hiển thị trên các thiết bị di động và màn hình có độ phân giải thấp hơn.

- Một số phương pháp tối ưu hóa hình ảnh:

+ Chọn định dạng phù hợp: Sử dụng định dạng hình ảnh tối ưu như JPEG cho hình ảnh với nhiều màu sắc, PNG cho hình ảnh có độ trong suốt, và SVG cho đồ họa vector.

+ Nén hình ảnh: Sử dụng công cụ nén hình ảnh để giảm kích thước tệp mà không làm giảm chất lượng (ví dụ: TinyPNG, ImageOptim).

+ Thay đổi kích thước: Điều chỉnh kích thước hình ảnh cho phù hợp với bố cục trang web, tránh sử dụng hình ảnh có kích thước lớn hơn cần thiết.

+ Sử dụng lazy loading: Chỉ tải hình ảnh khi chúng sắp xuất hiện trên màn hình, giúp cải thiện tốc độ tải trang ban đầu.

+ Tối ưu hóa thuộc tính alt: Sử dụng thuộc tính alt để cải thiện SEO và cung cấp thông tin cho người dùng khi hình ảnh không tải được.

Câu 4: 

- Để thêm video vào trang web, bạn có thể sử dụng thẻ <video>. Dưới đây là quy trình cụ thể:

+ Chuẩn bị video: Đảm bảo video của bạn ở định dạng phù hợp (thường là MP4, WebM, hoặc Ogg).

+ Sử dụng thẻ <video>: Thêm thẻ <video> vào mã HTML của bạn, cùng với các thuộc tính cần thiết.

- Thêm các thuộc tính:

+ src: Đường dẫn đến tệp video.

+ controls: Hiển thị các điều khiển như play, pause cho người dùng.

+ autoplay: Video sẽ tự động phát khi tải (nên sử dụng cẩn thận).

+ loop: Video sẽ phát lại liên tục.

+ muted: Video sẽ phát mà không có âm thanh.