🔗 Bài 3: Links & Media

<!-- 1. Link đến trang web khác -->
<a href="https://google.com">Đến Google</a>

<!-- 2. Link đến trang khác trong website -->
<a href="about.html">Giới thiệu</a>
<a href="/contact/index.html">Liên hệ</a>

<!-- 3. Link đến section trong cùng trang -->
<a href="#section1">Đến mục 1</a>

<!-- 4. Link để gửi email -->
<a href="mailto:admin@example.com">Gửi email</a>

<!-- 5. Link để gọi điện thoại -->
<a href="tel:+84123456789">Gọi điện</a>

<!-- 6. Link download file -->
<a href="document.pdf" download>Tải file PDF</a>

<!-- target: Cách mở link -->
<a href="https://facebook.com" target="_blank">Mở tab mới</a>
<a href="page2.html" target="_self">Mở cùng tab (mặc định)</a>

<!-- title: Tooltip khi hover -->
<a href="https://github.com" title="Đến GitHub">GitHub</a>

<!-- rel: Mối quan hệ với link -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  Link an toàn (khuyến khích)
</a>

<!-- download: Tải file thay vì mở -->
<a href="images/photo.jpg" download="my-photo.jpg">
  Tải ảnh với tên mới
</a>

<!-- hreflang: Ngôn ngữ của trang đích -->
<a href="https://example.com/en" hreflang="en">English Version</a>

<!-- Cú pháp cơ bản -->
<img src="path/to/image.jpg" alt="Mô tả 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 từ internet -->
<img src="https://via.placeholder.com/300x200" alt="Placeholder image">

<!-- Hình ảnh responsive -->
<img src="photo.jpg" alt="Ảnh đẹp" style="max-width: 100%; height: auto;">

<!-- Hình ảnh với caption -->
<figure>
    <img src="https://via.placeholder.com/400x300" alt="Cảnh hoàng hôn trên biển">
    <figcaption>Hoàng hôn đẹp trên bãi biển Đà Nẵng</figcaption>
</figure>

<!-- Multiple images -->
<figure>
    <img src="photo1.jpg" alt="Ảnh 1" width="200">
    <img src="photo2.jpg" alt="Ảnh 2" width="200">
    <figcaption>Bộ sưu tập ảnh du lịch</figcaption>
</figure>

<!-- Video cơ bản -->
<video width="640" height="360" controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.webm" type="video/webm">
    Trình duyệt không hỗ trợ video HTML5.
</video>

<!-- Video với poster và các thuộc tính -->
<video 
    width="800" 
    height="450" 
    controls 
    poster="video-thumbnail.jpg"
    preload="metadata"
    autoplay 
    muted 
    loop
>
    <source src="demo.mp4" type="video/mp4">
    <source src="demo.webm" type="video/webm">
    <p>Trình duyệt của bạn không hỗ trợ video HTML5. 
       <a href="demo.mp4">Tải video</a>.</p>
</video>

<!-- Audio cơ bản -->
<audio controls>
    <source src="song.mp3" type="audio/mpeg">
    <source src="song.ogg" type="audio/ogg">
    Trình duyệt không hỗ trợ audio HTML5.
</audio>

<!-- Audio với các thuộc tính -->
<audio controls autoplay loop preload="auto">
    <source src="background-music.mp3" type="audio/mpeg">
    <source src="background-music.wav" type="audio/wav">
    <p>Trình duyệt của bạn không hỗ trợ audio. 
       <a href="background-music.mp3">Tải nhạc</a>.</p>
</audio>

<!-- YouTube video -->
<iframe 
    width="560" 
    height="315" 
    src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
    title="YouTube video player" 
    frameborder="0" 
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
    allowfullscreen
></iframe>

<!-- Google Maps -->
<iframe 
    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3919.4!2d106.6956!3d10.7769!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMTDCsDQ2JzM3LjAiTiAxMDbCsDQxJzQ0LjAiRQ!5e0!3m2!1sen!2s!4v1234567890"
    width="600" 
    height="450" 
    style="border:0;" 
    allowfullscreen="" 
    loading="lazy"
></iframe>

<!-- Embed another website -->
<iframe 
    src="https://example.com" 
    width="800" 
    height="600"
    title="External website"
    sandbox="allow-scripts allow-same-origin"
></iframe>