Chèn Tệp Đa Phương Tiện & Iframe

1. Chèn ảnh vào trang web

Thẻ & thuộc tính cần có

Thẻ <img> với src (đường dẫn ảnh) bắt buộc, nên có alt để hiển thị khi lỗi ảnh/trình đọc màn hình (Hình 11.1, trang 62).
width, height (px) quyết định kích thước hiển thị; đặt một chiều, chiều còn lại tự co theo tỉ lệ gốc (Hình 11.3, trang 63).

Định dạng ảnh

Phổ biến: PNG, JPEG, GIF.
Định dạng mới: WebP, JPEG-XR; định dạng khác (TIFF, EPS, ...) nên chuyển đổi trước khi dùng.

Lưu ý: Ưu tiên đường dẫn tương đối để tránh lỗi khi di chuyển tệp; tối ưu dung lượng ảnh vì file lớn làm chậm tải trang.

Ảnh trong liên kết

Có thể đặt <img> bên trong <a> để tạo nút/bìa tài liệu bằng hình (ví dụ liên kết tới tệp PDF, Hình 11.2, trang 63).

Ví dụ:

<a href="tai_lieu.pdf"> <img src="images/cover.png" alt="Bìa tài liệu" width="200"> </a>

img src alt width/height đường dẫn tương đối

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

Thẻ dùng: <audio>, <video>. Thuộc tính cơ bản: src; thêm width, height cho video.

Định dạng gợi ý

Video: mp4, webm (mp4 chạy trực tiếp trên hầu hết trình duyệt).
Âm thanh: mp3, wav, ogg.

Thuộc tính quan trọng

controls: hiển thị nút phát/tạm dừng, âm lượng… (nên dùng).
autoplay: tự phát khi tải trang; một số trình duyệt chỉ cho phép khi có muted.
poster (video): ảnh đại diện khi chưa phát.

Hỗ trợ nhiều định dạng

Đặt nhiều thẻ <source> bên trong để trình duyệt tự chọn định dạng phù hợp.

Ví dụ video:

<video controls width="480" poster="images/thumb.png"> <source src="video/bai_hat.mp4" type="video/mp4"> <source src="video/bai_hat.webm" type="video/webm"> Trình duyệt không hỗ trợ video. </video>

Mẹo: Chọn chế độ autoplay phù hợp trải nghiệm người dùng và kiểm tra bản quyền khi nhúng nội dung đa phương tiện.

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

Khung hiển thị một trang/tài nguyên web khác trong trang hiện tại; thường dùng nhúng YouTube, Google Maps, quảng cáo (Hình 11.4, trang 65).

Thẻ & thuộc tính chính

<iframe src="..." width="..." height="..."> để nhúng nội dung.

Kết hợp liên kết & target

Dùng thẻ <a> với target trỏ tới thuộc tính name của <iframe> để điều khiển nội dung hiển thị trong khung (Nhiệm vụ 3, Hình 11.5, trang 66).

Ví dụ:

<a href="the_thao.html" target="noi_dung">Thể thao</a> | <a href="nghe_thuat.html" target="noi_dung">Nghệ thuật</a> <iframe name="noi_dung" src="trang_mac_dinh.html" width="520" height="360"></iframe>

4. Thực hành - Luyện tập - Vận dụng

Nhiệm vụ 1: Chèn ảnh

Tạo trang the_thao.html, chèn ảnh CLB thể thao trong thư mục images/....

Nhiệm vụ 2: Chèn âm thanh/video

Chèn âm thanh/video "Quốc ca" với chế độ autoplay phù hợp; lưu ý bản quyền nội dung.

Nhiệm vụ 3: Iframe & liên kết target

Tạo trang chứa <iframe> và 2 liên kết (Thể thao / Nghệ thuật) để tải nội dung vào khung qua target (Hình 11.5).

Luyện tập

Tính kích thước ảnh khi đặt width cố định; chèn thêm ảnh vào trang giới thiệu bản thân.

Vận dụng

Nhúng bài hát yêu thích (YouTube) vào trang giới thiệu bằng <iframe>.

Kiểm tra: Sau khi hoàn thành, rà soát đường dẫn tương đối, thuộc tính controls/autoplay và kích thước iframe để tránh lỗi hiển thị.