BÀI 11 - CHÈN TỆP TIN ĐA PHƯƠNG TIỆN VÀ KHUNG NỘI TUYẾN VÀO TRANG WEB

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

• Ảnh giúp trang web sinh động, có thể chèn trực tiếp hoặc làm hình nền.
• Sử dụng thẻ <img> để chèn ảnh, đây là thẻ đơn, không cần thẻ đóng.

• Trình duyệt tải ảnh từ đường dẫn được chỉ trong thuộc tính src.

• Nên dùng định dạng ảnh phổ biến: PNG, JPEG, GIF, WebP…
• Cần tối ưu dung lượng ảnh để trang web tải nhanh.

• Thuộc tính quan trọng:

• src: đường dẫn đến ảnh (bắt buộc).
• alt: văn bản thay thế khi ảnh không hiển thị.
• width, height: xác định kích thước ảnh (pixel).
• Nên dùng đường dẫn tương đối thay vì tuyệt đối để tránh lỗi khi ảnh gốc thay đổi.

---

2. Chèn âm thanh và video vào trang web

• Dùng thẻ <audio> cho âm thanh, <video> cho video.

• Các định dạng phổ biến:

• Âm thanh: mp3, wav, ogg.
• Video: mp4, webm (mp4 phổ biến nhất).

• Cú pháp chèn đơn giản, ví dụ:
• <audio controls>
• <source src="amthanh.mp3" type="audio/mp3">
• </audio>

• Thuộc tính thường dùng:

• src: đường dẫn đến tệp.
• controls: hiển thị điều khiển (phát, dừng…).
• autoplay: tự động phát khi trang tải.
• poster: ảnh hiển thị khi video chưa phát (chỉ dùng cho video).
• muted: tắt tiếng (hay dùng kèm với autoplay).
• Có thể dùng nhiều thẻ <source> để hỗ trợ nhiều định dạng.

 Ví dụ:

---

3. Tạo khung nội tuyến (iframe) trong trang web

• Dùng thẻ <iframe> để nhúng nội dung từ trang khác (như YouTube, Google Maps…).
• Đây là một "cửa sổ nhỏ" trên trang hiện tại để hiển thị một tài nguyên khác.

• Thuộc tính phổ biến:

• src: đường dẫn đến trang nhúng.
• width, height: kích thước khung hiển thị (px).
• Có thể kết hợp với thẻ <a> và thuộc tính target để mở nội dung trong iframe thay vì trong tab mới.
• iframe cũng dùng để chèn quảng cáo hoặc dịch vụ nhúng.

Đoạn mã để thực hiện việc này trong tệp iframe.html là:

 Khi đó trình duyệt sẽ hiển thị trang web iframe.html như Hình 11.4.

 Lưu ý: Các phần tử iframe thường dùng kết hợp với thẻ <a> để tạo liên kết và hiển thị nội dung bằng cách thêm thuộc tính target cho thẻ <a> để chỉ định nơi mở tài liệu được liên kết.