BÀI 4: MULTIMEDIA (ĐA PHƯƠNG TIỆN) VÀ NHÚNG NỘI DUNG

4.1. Chèn hình ảnh (<img>)

4.1.1. Cấu trúc thẻ và các thuộc tính

• Thẻ: <img> (Image). Đây là thẻ đơn (không có thẻ đóng).

• Cú pháp:

  HTML

  <img src="duong-dan-anh.jpg" alt="Mo ta buc anh" width="300">
  

• Giải thích chức năng:

  • src (Source): Đường dẫn tới file ảnh. (Bắt buộc phải có).

  • alt (Alternative Text): Văn bản thay thế.

    • Chức năng: Hiện ra khi ảnh bị lỗi (không tải được) và giúp Google hiểu nội dung bức ảnh (SEO).

  • width / height: Chiều rộng/chiều cao của ảnh (đơn vị pixel). Lưu ý: Chỉ nên set 1 trong 2 chiều để ảnh tự co giãn đúng tỷ lệ, tránh bị méo.

4.1.2. Đường dẫn Tuyệt đối và Tương đối (Rất quan trọng) Học sinh thường xuyên bị lỗi “ảnh không hiện” do sai đường dẫn.

• Đường dẫn tuyệt đối (Absolute Path):

  • Là gì: Đường dẫn đầy đủ, bắt đầu bằng https://. Thường dùng cho ảnh lấy từ website khác.

  • Ví dụ: <img src="https://vnexpress.net/logo.png">

• Đường dẫn tương đối (Relative Path):

  • Là gì: Đường dẫn tính từ file HTML đang viết đến file ảnh trong máy tính.

  • Trường hợp 1 (Cùng cấp): File ảnh nằm cạnh file HTML.

    • src="hinh.jpg"

  • Trường hợp 2 (Trong thư mục con): Ảnh nằm trong thư mục images.

    • src="images/hinh.jpg"

  • Trường hợp 3 (Thư mục cha): File HTML nằm trong thư mục con, ảnh nằm ngoài.

    • src="../hinh.jpg" (Dấu ../ nghĩa là lùi ra ngoài 1 cấp).

4.2. Âm thanh và Video (HTML5 Multimedia) Trước đây web dùng Adobe Flash (đã khai tử), nay dùng HTML5 chuẩn.

4.2.1. Thẻ Âm thanh (<audio>)

• Cú pháp:

  HTML

  <audio controls autoplay muted loop>
      <source src="nhac-tre.mp3" type="audio/mpeg">
      Trình duyệt của bạn không hỗ trợ phát nhạc.
  </audio>
  

• Giải thích chức năng các thuộc tính:

  • controls: Hiển thị thanh điều khiển (Play, Pause, Volume). Bắt buộc phải có nếu không nhạc sẽ không hiện.

  • autoplay: Tự động phát khi vào trang (Lưu ý: Chrome thường chặn cái này để tránh làm phiền người dùng).

  • loop: Tự động phát lại khi hết bài.

  • muted: Tự động tắt tiếng (thường dùng kết hợp autoplay).

4.2.2. Thẻ Video (<video>)

• Cú pháp:

  HTML

  <video width="500" controls poster="hinh-bia.jpg">
      <source src="phim-hoat-hinh.mp4" type="video/mp4">
  </video>
  

• Giải thích:

  • poster: Hình ảnh bìa hiển thị khi video chưa chạy (giống thumbnail Youtube).

  • Hỗ trợ tốt nhất định dạng .mp4.

4.3. Nhúng nội dung (<iframe>)

• Khái niệm: <iframe> giống như một cái cửa sổ trên trang web của mình, nhưng nhìn sang trang web của người khác.

• Ứng dụng phổ biến:

  1. Nhúng Youtube:

     • Vào Youtube -> Chọn Video -> Bấm “Chia sẻ” (Share) -> Chọn “Nhúng” (Embed) -> Copy đoạn code HTML.

  2. Nhúng Google Maps:

     • Vào Google Maps -> Tìm địa điểm -> Bấm “Chia sẻ” -> “Nhúng bản đồ” -> Copy đoạn code HTML.

• Ví dụ:

  HTML

  <iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID"