Bài 11: Chèn tệp tin đa phương tiện và khung nội tuyến vào trang web

1. Kiến thức trọng tâm

Trang web trở nên sinh động hơn khi có hình ảnh, âm thanh, video và nội dung nhúng từ nguồn khác. Hình ảnh được chèn bằng thẻ <img> với thuộc tính src chỉ đường dẫn tệp ảnh và thuộc tính alt mô tả nội dung ảnh; thuộc tính alt rất quan trọng vì nó hiển thị khi ảnh không tải được và hỗ trợ người dùng trình đọc màn hình. Âm thanh dùng thẻ <audio controls>, video dùng thẻ <video controls>, trong đó thuộc tính controls hiển thị nút phát, tạm dừng và điều chỉnh âm lượng. Khung nội tuyến dùng thẻ <iframe>, cho phép nhúng một trang web khác, bản đồ hoặc video vào trong trang hiện tại. Khi chèn đa phương tiện, cần chú ý bản quyền của tệp, dung lượng tệp để trang tải nhanh và luôn đặt thuộc tính mô tả để trang web thân thiện với mọi người dùng.

2. Ví dụ minh họa

Yêu cầu: chèn ảnh "truong.jpg" có mô tả "Cổng trường em", một video "gioi-thieu.mp4" có nút điều khiển và nhúng một bản đồ bằng khung nội tuyến.

Lời giải:

<img src="truong.jpg" alt="Cổng trường em">
<video src="gioi-thieu.mp4" controls></video>
<iframe src="https://example.com/ban-do"></iframe>

Giải thích: thẻ <img> hiển thị ảnh, nếu ảnh lỗi sẽ hiện dòng "Cổng trường em"; thẻ <video> có controls nên người xem tự phát và tạm dừng; thẻ <iframe> nhúng bản đồ từ địa chỉ khác vào trong trang, người xem tương tác với bản đồ mà không cần rời trang.

3. Ghi nhớ

• Ảnh dùng <img src="..." alt="...">, luôn viết thuộc tính alt.
• Âm thanh dùng <audio controls>, video dùng <video controls>.
• Khung nội tuyến dùng <iframe> để nhúng trang web, bản đồ, video từ nguồn khác.
• Chú ý bản quyền, dung lượng tệp và tính thân thiện khi chèn đa phương tiện.