HTML Lesson 01 - Structure

1. HTML ဆိုတာ ဘာလဲ?

HTML = HyperText Markup Language

Web page ရဲ့ အကျင်းပြ (skeleton) ။ Browser ကို "ဒါ heading, ဒါ paragraph, ဒါ image" ဆိုပြီး ပြောတဲ့ ဘာသာစကား။

🌐

HTML
Structure / Content

🎨

CSS
Style / Look

⚡

JavaScript
Behaviour / Logic

2. HTML Document ရဲ့ Structure

<!DOCTYPE html>                <!-- HTML5 ဆိုပြောတာ -->
<html lang="en">               <!-- Root element -->

  <head>                       <!-- Browser အတွက် info (ကြည့်မမြင်ရ) -->
    <meta charset="UTF-8">    <!-- မြန်မာ/ဆိုင်ရာ character support -->
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>My Page</title>    <!-- Tab မှာ မြင်ရတဲ့ title -->
    <link rel="stylesheet" href="style.css">
  </head>

  <body>                       <!-- Page မှာ မြင်ရတဲ့ content -->
    <h1>Hello World!</h1>
    <p>My first web page.</p>
  </body>

</html>

မှတ်ရမည့် Rule: Tag တိုင်း opening <tag> နဲ့ closing </tag> ရှိရမယ် (void elements မှ လွဲ)

3. Tags တွေ ဘာကိုကိုယ်စားပြုလဲ

Tag	အဓိပ္ပာယ်	Example
`<!DOCTYPE html>`	HTML5 version ကြေညာ	File ထိပ်ဆုံးမှာ ထားရမယ်
`<html>`	Document root	lang="my" = မြန်မာ
`<head>`	Page info (hidden)	title, meta, link, script
`<meta charset>`	Character encoding	UTF-8 = မြန်မာ font support
`<meta viewport>`	Mobile responsive	မပါရင် mobile မှာ ကောင်းမရဘူး
`<title>`	Tab/bookmark title	Browser tab ထိပ်မှာ ပြ
`<body>`	Visible content	User မြင်ရတဲ့ အရာအကုန်

4. Tags အမျိုးအစား

📦 Container Tags (pair)

<p>Content here</p>
<h1>Title</h1>
<div>Block</div>
<a href="#">Link</a>

Opening + closing tag နှစ်ခုလိုတယ်

🔷 Void/Self-closing Tags

<img src="photo.jpg" alt="pic">
<input type="text">
<br>  <hr>
<meta charset="UTF-8">

Closing tag မလိုဘူး (content မပါ)

5. Attributes (Tag ရဲ့ Properties)

<img  src="cat.jpg"   alt="A cute cat"   width="300">
         ↑               ↑                  ↑
     attribute         attribute          attribute
      name="value"    name="value"       name="value"

<a href="https://google.com" target="_blank">Google</a>
<input type="text" placeholder="Enter name" required>

Rule: Attribute တွေက opening tag ထဲမှာပဲ ထားရမယ်။ name="value" ပုံစံ သုံးရတယ်။

6. Live Example — ကိုယ်တိုင် ကြည့်ပါ

အောက်က code ကို copy ပြီး my_page.html ဆိုတဲ့ ဖိုင်မှာ save လုပ်ပြီး browser မှာ ဖွင့်ကြည့်ပါ:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>ကျွန်ုပ်ရဲ့ ပထမဆုံး Page</title>
</head>
<body>
  <h1>မင်္ဂလာပါ!</h1>
  <p>ဒါ ကျွန်ုပ်ရဲ့ ပထမဆုံး website ပါ။</p>
  <p>HTML ကို လေ့လာနေပါတယ်!</p>
</body>
</html>

✅ Browser မှာ ဖွင့်ရင် "မင်္ဂလာပါ!" ဆိုတာ ကြီးကြီး မြင်ရမယ်

7. အများဆုံး ကုတ်ရေးမှားတာတွေ

❌ Closing tag မမေ့ပါနဲ့: Hello → မှားတယ်

✅ မှန်ကန်: Hello

❌ Tag နာမည် အကြီးသုံး: Hello (works but bad practice)

✅ Lowercase သုံးပါ: Hello

❌ Attribute value ကို quotes မပါ: <a href=google.com>

✅ Quotes ထည့်ပါ: <a href="google.com">

8. HTML Structure ကြည့်ပါ

      <!DOCTYPE html>

      <html>

        <head>

          <title>My Page</title>

        </head>

        <body>

          <h1>Hello!</h1>

          <p>World</p>

        </body>

      </html>

👆 Red tag တွေပေါ် hover လုပ်ကြည့်ပါ

📌 Study Checklist

အပေါ်က concept ကို တစ်ကြောင်းချင်းဖတ်ပြီး example ကို ကိုယ်တိုင်ပြန်ရေးကြည့်ပါ။
Code/command ပါတဲ့ lesson ဆိုရင် value/name/path တစ်ခုခု ပြောင်းပြီး result ဘာကွာလဲ စမ်းပါ။
မမှတ်မိသေးတဲ့ keyword 3 ခုကို notebook ထဲရေးပြီး နောက် lesson မသွားခင် ပြန်ရှင်းကြည့်ပါ။
ပြီးရင် Home / Hub ကိုပြန်သွားပြီး next lesson ဆက်သင်ပါ။

🌐 HTML Lesson 01 — Document Structure