🌐 HTML Lesson 03 — Links & Images

1. Links — <a> Tag

<!-- External link -->
<a href="https://google.com">Go to Google</a>

<!-- Open in new tab -->
<a href="https://google.com" target="_blank">Open New Tab</a>

<!-- Link to another page -->
<a href="about.html">About Page</a>

<!-- Link to section on same page (ID) -->
<a href="#section1">Jump to Section 1</a>
<h2 id="section1">Section 1</h2>

<!-- Email link -->
<a href="mailto:hello@example.com">Send Email</a>

<!-- Phone link (mobile) -->
<a href="tel:+959123456789">Call Us</a>

<!-- Download link -->
<a href="file.pdf" download>Download PDF</a>

2. Relative vs Absolute Paths

<!-- Absolute path — full URL -->
<a href="https://example.com/page.html">Absolute</a>

<!-- Relative paths — ကိုယ့် file ကနေ တွက်ချင်း -->
<a href="about.html">Same folder</a>
<a href="pages/about.html">Subfolder</a>
<a href="../index.html">Parent folder</a>
<a href="/">Root / Home</a>

📁 my-website/
   📄 index.html          ← href="about.html"
   📄 about.html
   📁 pages/
      📄 contact.html     ← href="../index.html" (parent တက်)
      📁 img/
         🖼️ logo.png      ← src="img/logo.png" (from pages/)

3. Images — <img> Tag

<!-- Basic image -->
<img src="photo.jpg" alt="A beautiful photo">

<!-- With size -->
<img src="logo.png" alt="Logo" width="200" height="100">

<!-- Responsive (CSS recommended) -->
<img src="banner.jpg" alt="Banner" style="max-width:100%; height:auto">

<!-- External image URL -->
<img src="https://via.placeholder.com/300x200" alt="Placeholder">

<!-- Lazy loading (performance) -->
<img src="heavy.jpg" alt="Big image" loading="lazy">

4. Image as Link

<!-- Image ကို click ရတဲ့ link ဖြစ်အောင် -->
<a href="https://google.com" target="_blank">
  <img src="logo.png" alt="Go to Google" width="150">
</a>

5. Figure & Figcaption (Caption ပါတဲ့ Image)

<figure>
  <img src="cat.jpg"
       alt="A cute cat"
       width="300">
  <figcaption>
    ကြောင်လေး အိပ်နေတာ
  </figcaption>
</figure>

6. Image Formats