Practice: Structure, Text & Links

စိတ်လျှော့ပါ။ ဒီခန်းကို စာအုပ်လိုမဟုတ်ဘဲ စကားပြောသလိုပဲ၊ နားလည်လွယ်အောင် ရှင်းပါမယ်။

ခဏလေး ဒီလိုပဲ စဉ်းစားကြည့်

ဒီ lesson က အသစ်ဘာမှ မသင်ပါဘူး၊ Basic chapter မှာ လေ့လာခဲ့တဲ့ document structure, headings, paragraphs, text styling, links, images, lists ကို ပြန်လက်တွေ့ကျင့်ဖို့ ရည်ရွယ်ထားပါတယ်။ Concept တစ်ခုချင်းစီကို သီးခြားနားလည်ရုံနဲ့ မလုံလောက်ဘူး၊ တွဲသုံးကြည့်မှ tag structure တွေက ဘယ်လိုအလုပ်လုပ်လဲဆိုတာ ပီပီပြင်ပြင် သဘောပေါက်ပါတယ်။ Editor တစ်ခုဖွင့်ပြီး ဒီအောက်က task တွေကို တစ်ခုချင်းစီ ကိုယ်တိုင်ရေးကြည့်ဖို့ လိုပါတယ်။ Answer key မပါဘူး၊ browser ထဲမှာ ဖွင့်ကြည့်ပြီး ကိုယ့်ရလဒ်ကို ကိုယ်စစ်ဖို့ပါ။

လေ့ကျင့်ခန်းများ

Task 1: valid HTML5 document တစ်ခုကို doctype, html, head (title ပါ), body နဲ့ အစအဆုံး ရေးပါ။ Task 2: အဲဒီ body ထဲမှာ h1 ခေါင်းစဉ်တစ်ခု၊ paragraph နှစ်ပိုဒ်ကို strong နဲ့ em သုံးပြီး စာလုံးအချို့ကို emphasize လုပ်ပါ။ Task 3: ordered list တစ်ခုနဲ့ unordered list တစ်ခု ဆောက်ပါ၊ list item တစ်ခုအထဲမှာ nested list ထည့်ကြည့်ပါ။ Task 4: outbound link တစ်ခု (target="_blank" rel="noopener" ပါ) နဲ့ alt text ပါတဲ့ image tag တစ်ခုကို paragraph အောက်မှာ ထည့်ပါ။

Document structure (doctype, head, body) မှန်ကန်စွာ ရေးနိုင်သည်
Text formatting tags (strong, em) ကို အဓိပ္ပာယ်ရှိအောင် သုံးနိုင်သည်
Link နှင့် image ကို attribute အပြည့်အစုံနှင့် ရေးနိုင်သည်

Code နမူနာ

html

<!-- Starter skeleton — ဒီထဲမှာ task 1-4 ကို ဖြည့်ပါ -->
<!DOCTYPE html>
<html lang="my">
<head>
  <meta charset="UTF-8">
  <title><!-- title ထည့်ပါ --></title>
</head>
<body>
  <!-- Task 2: h1 + paragraphs (strong, em) -->

  <!-- Task 3: ordered list + unordered list (nested) -->

  <!-- Task 4: link (_blank, noopener) + image (alt) -->
</body>
</html>

You should see

Browser ထဲမှာ ဖွင့်လိုက်ရင် heading, formatted paragraph, list နှစ်မျိုး, link, image တို့ ပါဝင်တဲ့ page တစ်ခု မှန်ကန်စွာ ပေါ်လာမှာပါ။

၅ မိနစ် စမ်းကြည့်

Task 4 ခုလုံးကို 10 မိနစ်အတွင်း ကိုယ်တိုင်ရေးပြီး browser မှာ ဖွင့်ကြည့်ပါ၊ View Page Source နှိပ်ပြီး syntax ကိုယ့်ဟာနဲ့ ကိုယ် double check လုပ်ပါ။

သတိလေးတစ်ချက်

Copy-paste မလုပ်ဘဲ ကိုယ်တိုင်ရိုက်ကြည့်ပါ — tag တွေကို လက်နဲ့ ရိုက်မှသာ closing tag မေ့တာမျိုးကို သတိထားမိပါလိမ့်မယ်။