Bài 11. Chèn tệp tin đa phương tiện và khung nội tuyến vào trang web – Tóm tắt Tin học 12

1. Nhúng đa phương tiện vào trang web

Định nghĩa

Nhúng là đưa một nội dung số (âm thanh, video, bản đồ,...) vào bên trong trang web để hiển thị và phát trực tiếp trên trình duyệt, thay vì chỉ đặt liên kết để tải về máy.
Tệp tin đa phương tiện gồm ảnh (jpg, png,...), âm thanh (mp3, wav,...) và video (mp4, webm,...).
Khung nội tuyến là vùng hình chữ nhật trong trang web, dùng để hiển thị nội dung lấy từ một trang web hoặc một tệp khác.

1.1 Chèn ảnh bằng thẻ img

Thẻ img là thẻ rỗng (không có thẻ đóng), dùng để chèn ảnh (jpg, png, gif, svg…):

<img src="anh/truong.jpg" alt="Anh truong em"
     width="400" height="300">

src: đường dẫn tới tệp ảnh; alt: văn bản thay thế, hiện ra khi ảnh không tải được và giúp trình đọc màn hình.
width, height: kích thước hiển thị (điểm ảnh). Chỉ ghi một trong hai thì ảnh giữ nguyên tỉ lệ.

1.2 Chèn tệp âm thanh bằng thẻ audio

Trong HTML5, để chèn âm thanh ta dùng thẻ audio. Cú pháp tối thiểu như sau:

<audio src="duong-dan/ten-tep.mp3" controls></audio>

Ý nghĩa các thành phần:

src: đường dẫn tới tệp âm thanh cần phát.
controls: hiển thị thanh điều khiển gồm nút phát, tạm dừng, chỉnh âm lượng.

Khi muốn cung cấp nhiều định dạng dự phòng, ta dùng thẻ source đặt bên trong audio:

<audio controls>
  <source src="nhac.mp3" type="audio/mpeg">
  <source src="nhac.ogg" type="audio/ogg">
  Trinh duyet khong ho tro the audio.
</audio>

Một số thuộc tính khác hay dùng: loop (phát lại từ đầu khi hết), autoplay (tự phát khi mở trang), muted (tắt tiếng khi bắt đầu).

1.3 Chèn tệp video bằng thẻ video

Tương tự, thẻ video giúp chèn video vào trang web:

<video width="480" height="320" controls poster="bia.jpg">
  <source src="video/ten-tep.mp4" type="video/mp4">
</video>

Các thuộc tính riêng cần nhớ:

width, height: đặt kích thước khung hiển thị.
poster: đường dẫn ảnh hiển thị trước khi video được phát.
Các thuộc tính controls, loop, autoplay, muted dùng giống như với âm thanh.

2. Khung nội tuyến

Định nghĩa

Thẻ iframe tạo khung nội tuyến: một vùng trong trang web hiển thị nội dung của một trang web khác hoặc một tệp khác.

Cú pháp cơ bản:

<iframe src="https://ten-trang.com"
        width="600" height="450"
        title="Mo ta noi dung">
</iframe>

Các thuộc tính chính:

src: địa chỉ trang web hoặc đường dẫn tệp cần nhúng.
width, height: kích thước khung.
title: mô tả nội dung, giúp trình đọc màn hình hỗ trợ người khiếm thị.
allow: phân quyền cho khung (toàn màn hình, tự phát,...).

3. Các bước chèn đa phương tiện và khung nội tuyến

Quy trình thực hiện

1.
Chuẩn bị tệp âm thanh, video và ảnh bìa; đặt vào thư mục dự án theo cấu trúc hợp lý.
2.
Mở tệp định dạng .html bằng trình soạn thảo (ví dụ Notepad++, Visual Studio Code).
3.
Xác định vị trí trong phần body của trang cần chèn nội dung.
4.
Chèn thẻ audio, video hoặc iframe kèm theo các thuộc tính phù hợp.
5.
Lưu tệp và mở bằng trình duyệt để kiểm tra.
6.
Điều chỉnh lại đường dẫn, kích thước nếu nội dung chưa hiển thị đúng.

4. Ví dụ minh hoạ

Ví dụ 1

Một trang giới thiệu du lịch cần có video ngắn, bản đồ chỉ đường và nhạc nền phát lại liên tục. Hãy viết đoạn mã HTML minh hoạ.

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <title>Gioi thieu du lich</title>
</head>
<body>
  <h1>Du lich Da Nang</h1>

  <h2>Phim gioi thieu</h2>
  <video width="480" height="270" controls poster="bia.jpg">
    <source src="video/danang.mp4" type="video/mp4">
  </video>

  <h2>Ban do</h2>
  <iframe src="https://www.google.com/maps/embed?pb=..."
          width="500" height="350" title="Ban do Da Nang">
  </iframe>

  <h2>Nhac nen</h2>
  <audio src="nhac/nhac-nen.mp3" controls loop></audio>
</body>
</html>

Lời giải

Video có controls để người dùng chủ động phát; poster giúp hiện ảnh bìa trước khi phim chạy.
Bản đồ được nhúng bằng iframe, trong đó src là liên kết nhúng (mục “Nhúng bản đồ”) lấy từ Google Maps; cần có title để tăng khả năng tiếp cận.
Nhạc nền dùng loop để phát lại và controls để người dùng điều khiển.

5. Lưu ý và lỗi hay gặp

Kiểm tra trước khi xuất bản

Đường dẫn sai: nếu src trỏ sai thư mục hoặc sai tên tệp, trình duyệt sẽ không tải được nội dung. Cần xác nhận tệp nằm đúng vị trí đã ghi trong mã.
Thiếu thuộc tính controls: sẽ không có nút điều khiển để người dùng phát. Nếu dùng autoplay, nhiều trình duyệt yêu cầu phải kèm muted.
Định dạng không phổ biến: nên ưu tiên mp3, mp4 hoặc cung cấp nhiều thẻ source để tăng khả năng tương thích trên các trình duyệt khác nhau.
Kích thước không linh hoạt: đặt width, height quá lớn dễ vượt khung màn hình điện thoại; nên chọn kích thước vừa hoặc đặt chiều rộng theo phần trăm bằng CSS, ví dụ style="width:100%" (thuộc tính width chỉ nhận số điểm ảnh).
Bỏ qua title của iframe: làm giảm khả năng tiếp cận; cần mô tả ngắn gọn nội dung bên trong khung.

6. Ôn tập

Câu hỏi 1

1.
Nêu điểm khác biệt giữa việc đặt một liên kết để tải tệp mp3 và việc chèn tệp mp3 bằng thẻ audio.
2.
Liệt kê các thuộc tính cần có để chèn một video có ảnh bìa, kích thước $600\times400$ , tự phát và tắt tiếng khi mở trang.
3.
Để hiển thị bản đồ chỉ đường đến trường học ngay trong trang web, nên dùng thành phần nào? Cần lưu ý những thuộc tính gì?

Gợi ý trả lời

1.
Liên kết tải buộc người dùng chủ động mở hoặc tải tệp về máy; còn chèn bằng thẻ audio cho phép nghe ngay trên trang mà không rời đi. Muốn người dùng điều khiển được thì phải có controls; nếu dùng làm nhạc nền có thể thêm loop, autoplay, muted.
2.
Cần dùng thẻ video với src hoặc source; các thuộc tính: width="600", height="400", controls, autoplay, muted, poster.
3.
Dùng iframe với src là liên kết nhúng bản đồ được cung cấp bởi dịch vụ bản đồ trực tuyến. Nên đặt title, chọn width, height phù hợp với bố cục trang.

Nhớ nhanh