Bài 3: Hình ảnh (img), Video (video) và Media

Một trang web chỉ có chữ sẽ rất nhàm chán. Để làm trang web thực sự hấp dẫn, bạn cần chèn hình ảnh, video, và các đa phương tiện khác. Bài này sẽ dạy bạn cách sử dụng các thẻ <img>, <video>, <audio>, và <iframe> để làm trang web của mình sống động.

Sau bài này, bạn sẽ có thể tạo một trang web với hình ảnh, video nhúng, nhạc nền, và các nội dung đa phương tiện khác.

Thẻ Hình ảnh (img)

Thẻ <img> dùng để chèn hình ảnh vào trang web. Đây là thẻ tự đóng (self-closing) nên không cần </img>.

Cấu trúc cơ bản

<!-- Hình ảnh từ thư mục cùng website -->
<img src="anh-toi.jpg" alt="Ảnh đại diện của tôi">

<!-- Hình ảnh từ URL internet -->
<img src="https://example.com/images/logo.png" alt="Logo">

<!-- Hình ảnh trong thư mục con -->
<img src="images/avatar.jpg" alt="Avatar người dùng">

Các thuộc tính quan trọng của img

Ví dụ sử dụng img

<!-- Hình ảnh đơn giản -->
<img src="avatar.jpg" alt="Ảnh đại diện">

<!-- Hình ảnh với kích thước -->
<img src="logo.png" alt="Logo công ty" width="200" height="100">

<!-- Hình ảnh với title (mô tả tooltip) -->
<img src="cat.jpg" alt="Chú mèo" title="Mèo tên Miu">

<!-- Hình ảnh từ thư mục cha (../) -->
<img src="../images/poster.jpg" alt="Poster phim">

<!-- Hình ảnh responsive (chiều rộng 100%, cao tự động) -->
<img src="banner.jpg" alt="Banner trang web" width="100%" height="auto">

💡 Mẹo: Luôn viết thuộc tính alt có ý nghĩa. Nó giúp:

• Người dùng khiếm thị biết ảnh là gì (trình đọc màn hình sẽ đọc alt text)
• Công cụ tìm kiếm Google hiểu nội dung ảnh
• Hiển thị mô tả nếu ảnh tải không được

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

Thẻ Video (video)

Thẻ <video> dùng để nhúng video trực tiếp vào trang web mà không cần plugin bên ngoài.

Cấu trúc cơ bản

<!-- Video đơn giản -->
<video controls width="500" height="300">
  <source src="video.mp4" type="video/mp4">
  Trình duyệt của bạn không hỗ trợ video HTML5.
</video>

<!-- Video với tải sẵn hình preview -->
<video controls width="100%" poster="preview.jpg">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  Video không được hỗ trợ.
</video>

Các thuộc tính của video

Ví dụ sử dụng video

<!-- Video đơn giản -->
<h2>Hướng dẫn sử dụng</h2>
<video controls width="100%">
  <source src="huong-dan.mp4" type="video/mp4">
  Trình duyệt của bạn không hỗ trợ video HTML5.
</video>

<!-- Video tự động phát với hình preview -->
<video 
  width="600" 
  height="400" 
  poster="thumbnail.jpg" 
  autoplay 
  muted 
  loop
>
  <source src="intro.mp4" type="video/mp4">
  <source src="intro.webm" type="video/webm">
</video>

<!-- Video với nhiều định dạng (fallback) -->
<video controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <source src="video.ogv" type="video/ogg">
  Trình duyệt của bạn không hỗ trợ thẻ video.
</video>

Định dạng video phổ biến

⚠️ Cảnh báo: Một số trình duyệt không hỗ trợ tất cả định dạng video. Luôn cung cấp nhiều định dạng (fallback) bằng cách thêm nhiều thẻ <source>.

Thẻ Audio (audio)

Thẻ <audio> dùng để nhúng âm thanh/nhạc vào trang web. Cách sử dụng tương tự video.

Ví dụ sử dụng audio

<!-- Audio đơn giản -->
<h3>Nhạc nền</h3>
<audio controls>
  <source src="nhac-nen.mp3" type="audio/mpeg">
  Trình duyệt không hỗ trợ audio.
</audio>

<!-- Audio tự động phát -->
<audio autoplay muted>
  <source src="welcome.mp3" type="audio/mpeg">
</audio>

<!-- Audio lặp lại liên tục -->
<audio controls loop>
  <source src="background.mp3" type="audio/mpeg">
  <source src="background.ogg" type="audio/ogg">
</audio>

Thẻ Embed (iframe) – Nhúng từ nguồn bên ngoài

Thẻ <iframe> dùng để nhúng nội dung từ website khác vào trang web của bạn. Ví dụ: YouTube, Google Maps, Facebook…

Ví dụ nhúng video YouTube

<!-- Nhúng video YouTube -->
<h2>Video hướng dẫn</h2>
<iframe 
  width="560" 
  height="315" 
  src="https://www.youtube.com/embed/dQw4w9WgXcQ"
  title="Video YouTube"
  frameborder="0" 
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
  allowfullscreen>
</iframe>

Cách lấy mã nhúng YouTube:

1. Mở video trên YouTube
2. Nhấp nút “Share” (Chia sẻ)
3. Chọn “Embed” (Nhúng)
4. Copy mã HTML được hiển thị

Ví dụ nhúng Google Maps

<!-- Nhúng bản đồ Google Maps -->
<h2>Địa điểm của chúng tôi</h2>
<iframe 
  width="600" 
  height="400" 
  src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3723.456...&z=15&output=embed"
  style="border:0;" 
  allowfullscreen="" 
  loading="lazy">
</iframe>

Ví dụ nhúng Facebook

<!-- Nhúng bài viết Facebook -->
<iframe 
  src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2Fpage%2Fpost%2F123456789&width=500"
  width="500" 
  height="600" 
  style="border:none;overflow:hidden" 
  scrolling="no" 
  frameborder="0" 
  allowfullscreen="true">
</iframe>

Ví dụ trang web hoàn chỉnh với media

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bài học Lập trình - Với hình ảnh và video</title>
</head>
<body>

  <!-- Tiêu đề -->
  <h1>Hướng dẫn học HTML với ví dụ thực tế</h1>

  <!-- Hình ảnh -->
  <h2>Sơ đồ kiến trúc web</h2>
  <img 
    src="web-architecture.png" 
    alt="Sơ đồ kiến trúc web bao gồm frontend, backend, database" 
    width="100%"
    title="Cấu trúc website hiện đại"
  >

  <!-- Video hướng dẫn -->
  <h2>Video hướng dẫn chi tiết</h2>
  <video controls width="100%" height="400">
    <source src="html-tutorial.mp4" type="video/mp4">
    <source src="html-tutorial.webm" type="video/webm">
    Trình duyệt không hỗ trợ video HTML5.
  </video>

  <!-- Hình ảnh kích thước nhỏ -->
  <h2>Các bước học lập trình</h2>
  <p>Bước 1: Học HTML</p>
  <img src="step1-html.jpg" alt="Hình ảnh HTML" width="200" height="150">

  <p>Bước 2: Học CSS</p>
  <img src="step2-css.jpg" alt="Hình ảnh CSS" width="200" height="150">

  <p>Bước 3: Học JavaScript</p>
  <img src="step3-js.jpg" alt="Hình ảnh JavaScript" width="200" height="150">

  <!-- Nhạc nền -->
  <h2>Nhạc nền lựa chọn</h2>
  <audio controls>
    <source src="background-music.mp3" type="audio/mpeg">
    <source src="background-music.ogg" type="audio/ogg">
    Trình duyệt không hỗ trợ audio.
  </audio>

  <!-- Video YouTube -->
  <h2>Video tham khảo từ YouTube</h2>
  <iframe 
    width="560" 
    height="315" 
    src="https://www.youtube.com/embed/dQw4w9WgXcQ"
    title="Video YouTube"
    frameborder="0" 
    allowfullscreen>
  </iframe>

</body>
</html>

Best practices khi sử dụng media

💡 Mẹo:

• Luôn cung cấp alt cho hình ảnh để hỗ trợ người khiếm thị
• Tối ưu hóa kích thước hình ảnh trước khi tải lên (dùng công cụ như Compressor.io)
• Sử dụng width="100%" để hình ảnh responsive (tự động co dãn)
• Cung cấp nhiều định dạng video/audio để tương thích với mọi trình duyệt
• Dùng poster cho video để hiển thị hình ảnh đẹp trước khi bấm play

⚠️ Cảnh báo:

• Không sử dụng autoplay mà không có muted – nó gây khó chịu cho người dùng
• Kiểm tra quyền sử dụng hình ảnh, video từ internet trước khi nhúng
• Không nhúng quá nhiều media trên một trang (trang sẽ chậm)

Tóm tắt

• ✅ Thẻ <img>: Chèn hình ảnh, luôn dùng alt
• ✅ Thuộc tính img: src, alt, width, height, title
• ✅ Thẻ <video>: Nhúng video trực tiếp, dùng controls và poster
• ✅ Thẻ <audio>: Nhúng âm thanh, có các thuộc tính tương tự video
• ✅ Thẻ <iframe>: Nhúng nội dung từ website khác (YouTube, Maps, Facebook…)
• ✅ Cung cấp fallback: Dùng nhiều <source> cho video/audio để tương thích
• ✅ Responsive: Dùng width="100%" để media tự điều chỉnh kích thước

🎯 Bài tập thực hành

Bài tập 1: Tạo trang web về một địa điểm yêu thích với:

• h1 là tên địa điểm
• Ít nhất 2 hình ảnh của địa điểm đó (từ Google Images)
• h2 “Vị trí” và nhúng bản đồ Google Maps của địa điểm
• Mô tả hấp dẫn kèm hình ảnh responsive

Bài tập 2: Tạo trang “Album ảnh cá nhân” với:

• h1 là “Album ảnh của tôi”
• Tối thiểu 6 hình ảnh được sắp xếp (có thể là ảnh chủ đề, ảnh từ trip, etc.)
• Mỗi ảnh có alt text mô tả chi tiết
• Tất cả ảnh có width=”100%” hoặc width=”300px” để đồng nhất

Bài tập 3: Tạo trang “Hướng dẫn nấu ăn” với:

• h1 là tên món ăn
• h2 “Hình ảnh tham khảo” với 2-3 ảnh của món ăn
• h2 “Video hướng dẫn” với video nhúng từ YouTube (tìm video dạy nấu ăn)
• h2 “Danh sách nhạc nền” với thẻ audio phát nhạc

Chúc bạn thành công! 🚀