BÀI 11. CHÈN TỆP TIN ĐA PHƯƠNG TIỆN VÀ KHUNG NỘI TUYẾN VÀO TRANG WEB
1. CHÈN TỆP ẢNH VÀO TRANG WEB
Hình ảnh giúp trang web sinh động và hấp dẫn hơn. Để chèn ảnh, chúng ta cần lưu ý các nội dung sau:
Định dạng tệp ảnh: Trình duyệt hỗ trợ các định dạng phổ biến như PNG, JPEG, GIF và các định dạng mới như WebP. Các định dạng khác như TIFF hay EPS cần được chuyển đổi trước khi sử dụng.
Thẻ <img>: Đây là thẻ đơn dùng để nhúng ảnh trực tiếp vào nội dung trang web.
Thuộc tính src và alt: src là đường dẫn bắt buộc tới tệp ảnh; alt là văn bản thay thế khi ảnh lỗi, giúp người đọc hình dung nội dung ảnh.
Thuộc tính kích thước (width, height): Dùng để thiết lập chiều rộng và chiều cao cho ảnh (đơn vị pixel). Nếu chỉ dùng một thuộc tính, chiều còn lại sẽ tự tính theo tỉ lệ gốc.
Lưu ý về đường dẫn: Nên sử dụng đường dẫn tương đối để tránh lỗi khi tài nguyên trên mạng thay đổi.
2. CHÈN ÂM THANH VÀ VIDEO VÀO TRANG WEB
Để chèn video và âm thanh, chúng ta sử dụng hai thẻ tương ứng là <video> và <audio>.
Định dạng phổ biến: Video thường dùng mp4, webm; âm thanh thường dùng mp3, wav, ogg.
Các thuộc tính quan trọng:
- controls: Hiển thị bộ điều khiển (phát, tạm dừng, âm lượng).
- autoplay: Tự động phát khi tải trang.
- poster: Hiển thị ảnh đại diện khi video chưa chạy (chỉ có ở thẻ <video>).
- src, width, height: Tương tự thẻ ảnh (thẻ <audio> không có width, height).
Thẻ <source>: Dùng bên trong <video> hoặc <audio> để cung cấp nhiều định dạng tệp khác nhau, giúp trình duyệt tự chọn tệp phù hợp nhất.
3. TẠO KHUNG NỘI TUYẾN TRONG TRANG WEB
Khung nội tuyến (iframe) cho phép nhúng một tài nguyên web khác (như trang web khác, bản đồ, video YouTube) vào ngay trong trang web hiện tại.
Thẻ <iframe>: Sử dụng thuộc tính src để trỏ tới trang web cần nhúng và width, height để định kích thước khung.
Kết hợp với thẻ liên kết <a>: Sử dụng thuộc tính target của thẻ <a> trùng với id (hoặc name) của iframe để hiển thị nội dung liên kết ngay trong khung đó.
