# HTML အလုပ်ပေးမှု: ဘလော့ဂ် Mockup တစ်ခုတည်ဆောက်ပါ

## သင်ယူရမည့်ရည်ရွယ်ချက်များ

သင်၏ HTML အသိပညာကို အသုံးချပြီး ဘလော့ဂ်ပင်မစာမျက်နှာတစ်ခု၏ဖွဲ့စည်းမှုကို ဒီဇိုင်းဆွဲခြင်းနှင့် ကုဒ်ရေးခြင်းဖြင့် လက်တွေ့ကျကျ လေ့ကျင့်ပါ။ ဒီလက်တွေ့ကျကျ အလုပ်ပေးမှုသည် သင်၏ဝက်ဘ်ဆိုင်တိုးတက်မှုခရီးလမ်းတစ်လျှောက်တွင် အသုံးပြုမည့် semantic HTML အယူအဆများ၊ လွယ်ကူစွာအသုံးပြုနိုင်မှုအကောင်းဆုံးအလေ့အကျင့်များနှင့် ပရော်ဖက်ရှင်နယ်ကုဒ်စီစဉ်မှုကျွမ်းကျင်မှုများကို အတည်ပြုပေးပါမည်။

**ဒီအလုပ်ပေးမှုကို ပြီးမြောက်ခြင်းဖြင့် သင်သည်:**
- ဝက်ဘ်ဆိုဒ် layout များကို ကုဒ်ရေးမတိုင်မီ စီစဉ်ခြင်းကို လေ့ကျင့်ပါ
- semantic HTML element များကို သင့်တော်စွာ အသုံးချပါ
- လွယ်ကူစွာအသုံးပြုနိုင်သော၊ ဖွဲ့စည်းမှုကောင်းမွန်သော markup တစ်ခုကို ဖန်တီးပါ
- မှတ်ချက်များနှင့် စီစဉ်မှုများဖြင့် ပရော်ဖက်ရှင်နယ်ကုဒ်ရေးအလေ့အကျင့်များကို တိုးတက်စေပါ

## ပရောဂျက်လိုအပ်ချက်များ

### အပိုင်း ၁: ဒီဇိုင်းစီစဉ်ခြင်း (Visual Mockup)

**သင့်ဘလော့ဂ်ပင်မစာမျက်နှာ၏ Visual Mockup တစ်ခုကို ဖန်တီးပါ၊ အောက်ပါအရာများပါဝင်ရမည်:**
- ဝက်ဘ်ဆိုဒ်ခေါင်းစီးနှင့် navigation ပါဝင်သော header
- အနည်းဆုံး ဘလော့ဂ်ပို့စ် preview ၂-၃ ခုပါဝင်သော ပင်မအကြောင်းအရာဧရိယာ
- အပိုဆောင်းအချက်အလက်များ (အကြောင်းအရာပိုင်း၊ နောက်ဆုံးပို့စ်များ၊ အမျိုးအစားများ) ပါဝင်သော sidebar
- ဆက်သွယ်ရန်အချက်အလက်များ သို့မဟုတ် လင့်ခ်များပါဝင်သော footer

**Mockup ဖန်တီးရန်ရွေးချယ်မှုများ:**
- **လက်ဖြင့်ရေးဆွဲခြင်း**: စက္ကူနှင့်ခဲတံကို အသုံးပြု၍ ဒီဇိုင်းကို ရေးဆွဲပြီး ဓာတ်ပုံရိုက်ခြင်း သို့မဟုတ် scan လုပ်ပါ
- **ဒစ်ဂျစ်တယ် tools**: Figma, Adobe XD, Canva, PowerPoint သို့မဟုတ် မည်သည့် drawing application မဆို
- **Wireframe tools**: Balsamiq, MockFlow သို့မဟုတ် အခြား wireframing software

**သင့် mockup အပိုင်းများကို** သင်အသုံးပြုရန်စီစဉ်ထားသော HTML element များဖြင့် label လုပ်ပါ (ဥပမာ - "Header - `<header>`", "Blog Posts - `<article>`")။

### အပိုင်း ၂: HTML Element စီစဉ်ခြင်း

**သင့် mockup ၏ အပိုင်းတစ်ခုချင်းစီကို သတ်မှတ်ထားသော HTML element များနှင့် mapping လုပ်ထားသော စာရင်းတစ်ခုကို ဖန်တီးပါ:**

```
Example:
- Site Header → <header>
- Main Navigation → <nav> with <ul> and <li>
- Blog Post → <article> with <h2>, <p>, <time>
- Sidebar → <aside> with <section> elements
- Page Footer → <footer>
```

**ပါဝင်ရန်လိုအပ်သော Element များ:**
သင့် HTML တွင် အောက်ပါစာရင်းမှ semantic element များ ၁၀ ခုအနည်းဆုံး ပါဝင်ရမည်:
- `<header>`, `<nav>`, `<main>`, `<article>`, `<section>`, `<aside>`, `<footer>`
- `<h1>`, `<h2>`, `<h3>`, `<p>`, `<ul>`, `<li>`, `<a>`
- `<img>`, `<time>`, `<blockquote>`, `<strong>`, `<em>`

### အပိုင်း ၃: HTML အကောင်အထည်ဖော်ခြင်း

**အောက်ပါစံနှုန်းများကို လိုက်နာ၍ သင့်ဘလော့ဂ်ပင်မစာမျက်နှာကို ကုဒ်ရေးပါ:**

1. **စာရွက်စဉ်ဖွဲ့စည်းမှု**: DOCTYPE, html, head, နှင့် body element များကို သင့်တော်စွာ ထည့်သွင်းပါ
2. **Semantic Markup**: HTML element များကို ရည်ရွယ်ချက်အတိုင်း အသုံးပြုပါ
3. **လွယ်ကူစွာအသုံးပြုနိုင်မှု**: ပုံများအတွက် alt text ကို သင့်တော်စွာ ထည့်သွင်းပါ၊ အဓိကရှိသော link text ကို အသုံးပြုပါ
4. **ကုဒ်အရည်အသွေး**: အဆင့်တန်းကျသော indentation နှင့် အဓိကရှိသော မှတ်ချက်များကို အသုံးပြုပါ
5. **အကြောင်းအရာ**: အမှန်တကယ်ရှိသော ဘလော့ဂ်အကြောင်းအရာများကို ထည့်သွင်းပါ (placeholder text ကို အသုံးပြုနိုင်သည်)

**HTML ဖွဲ့စည်းမှုနမူနာ:**
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Personal Blog</title>
</head>
<body>
    <!-- Main site header -->
    <header>
        <h1>My Blog Title</h1>
        <nav>
            <!-- Navigation menu -->
        </nav>
    </header>
    
    <!-- Main content area -->
    <main>
        <!-- Blog posts go here -->
    </main>
    
    <!-- Sidebar content -->
    <aside>
        <!-- Additional information -->
    </aside>
    
    <!-- Site footer -->
    <footer>
        <!-- Footer content -->
    </footer>
</body>
</html>
```

### အပိုင်း ၄: အတွေးအမြင်

**အောက်ပါအချက်များကို ၃-၅ စာကြောင်းအတိုင်း အတွေးအမြင်ရေးပါ:**
- သင်အတော်ဆုံးအသုံးပြုနိုင်သော HTML element များက ဘာတွေလဲ?
- စီစဉ်ခြင်း သို့မဟုတ် ကုဒ်ရေးခြင်းတွင် ဘယ်အခက်အခဲတွေ ရှိခဲ့လဲ?
- semantic HTML က သင့်အကြောင်းအရာကို စီစဉ်ရာတွင် ဘယ်လိုအကျိုးရှိခဲ့လဲ?
- သင့်နောက်ထပ် HTML ပရောဂျက်တွင် ဘာတွေကို ကွဲပြားစွာလုပ်ဆောင်မည်လဲ?

## တင်သွင်းရန်စာရင်း

**တင်သွင်းမတိုင်မီ အောက်ပါအချက်များကို စစ်ဆေးပါ:**
- [ ] HTML element များကို label လုပ်ထားသော Visual Mockup
- [ ] စနစ်တကျ ဖွဲ့စည်းထားသော HTML ဖိုင်
- [ ] သင့်တော်စွာ အသုံးပြုထားသော semantic HTML element ၁၀ ခုအနည်းဆုံး
- [ ] သင့်ကုဒ်ဖွဲ့စည်းမှုကို ရှင်းလင်းဖော်ပြထားသော မှတ်ချက်များ
- [ ] HTML syntax မှန်ကန်မှု (browser တွင် စမ်းသပ်ပါ)
- [ ] အတွေးအမြင်ရေးထားသောစာ

## အကဲဖြတ်မှု Rubric

| အချက်အလက် | အထူးကောင်းမွန် (4) | ကောင်းမွန် (3) | တိုးတက်နေဆဲ (2) | အခြေခံ (1) |
|------------|--------------------|----------------|------------------|------------|
| **စီစဉ်မှုနှင့် ဒီဇိုင်း** | layout နှင့် HTML semantic ဖွဲ့စည်းမှုကို နားလည်မှုကောင်းစွာပြသထားသော label လုပ်ထားသော mockup | အပိုင်းများအား label လုပ်ထားသော mockup | label လုပ်ထားသော အခြေခံ mockup | မရှင်းလင်းသော mockup |
| **Semantic HTML အသုံးပြုမှု** | semantic element ၁၀ ခုနှင့်အထက်ကို သင့်တော်စွာ အသုံးပြုထားပြီး HTML ဖွဲ့စည်းမှုနှင့် လွယ်ကူစွာအသုံးပြုနိုင်မှုကို နားလည်မှုပြသထားသည် | semantic element ၈-၉ ခုကို သင့်တော်စွာ အသုံးပြုထားသည် | semantic element ၆-၇ ခုကို အသုံးပြုထားပြီး အချို့ element အသုံးပြုမှုတွင် အလွဲရှိသည် | semantic element ၆ ခုအောက် သို့မဟုတ် element များကို မသင့်တော်စွာ အသုံးပြုထားသည် |
| **ကုဒ်အရည်အသွေးနှင့် စီစဉ်မှု** | အလွန်ကောင်းမွန်သော စီစဉ်မှု၊ indentation မှန်ကန်မှုနှင့် မှတ်ချက်များပါဝင်ပြီး HTML syntax မှန်ကန်မှုရှိသည် | ကောင်းမွန်သော စီစဉ်မှု၊ indentation ကောင်းမွန်မှုနှင့် မှတ်ချက်များပါဝင်သည် | အခြေခံစီစဉ်မှု၊ မှတ်ချက်အနည်းငယ်ပါဝင်သည် | စီစဉ်မှုမကောင်း၊ မှတ်ချက်မပါဝင်၊ syntax အမှားများ |
| **လွယ်ကူစွာအသုံးပြုနိုင်မှုနှင့် အကောင်းဆုံးအလေ့အကျင့်များ** | လွယ်ကူစွာအသုံးပြုနိုင်မှုအတွက် အလွန်ကောင်းမွန်သောစဉ်ဆက်မှု၊ alt text သင့်တော်စွာ အသုံးပြုမှု၊ heading hierarchy မှန်ကန်မှု | လွယ်ကူစွာအသုံးပြုနိုင်မှုအတွက် heading နှင့် alt text ကို သင့်တော်စွာ အသုံးပြုထားသည် | အခြေခံ alt text နှင့် heading structure | လွယ်ကူစွာအသုံးပြုနိုင်မှုအနည်းငယ် |
| **အတွေးအမြင်နှင့် သင်ယူမှု** | HTML အယူအဆများကို နားလည်မှုနှင့် သင်ယူမှုလုပ်ငန်းစဉ်ကို အလွန်ရှင်းလင်းစွာ ဖော်ပြထားသည် | HTML အယူအဆများကို နားလည်မှုနှင့် သင်ယူမှုအပေါ် အတွေးအမြင်ရှိသည် | HTML အယူအဆများအပေါ် အတွေးအမြင်အနည်းငယ်ရှိသည် | အတွေးအမြင်မပါဝင် သို့မဟုတ် အနည်းငယ်သာ ရှိသည် |

## သင်ယူရန်အရင်းအမြစ်များ

**အရေးပါသောရင်းမြစ်များ:**
- [MDN HTML Elements Reference](https://developer.mozilla.org/docs/Web/HTML/Element) - HTML element အားလုံးအတွက် လမ်းညွှန်
- [HTML5 Semantic Elements](https://developer.mozilla.org/docs/Web/HTML/Element#content_sectioning) - semantic markup ကို နားလည်ခြင်း
- [Web Accessibility Guidelines](https://www.w3.org/WAI/WCAG21/quickref/) - လွယ်ကူစွာအသုံးပြုနိုင်သော ဝက်ဘ်အကြောင်းအရာ ဖန်တီးခြင်း
- [HTML Validator](https://validator.w3.org/) - သင့် HTML syntax ကို စစ်ဆေးပါ

**အောင်မြင်ရန်အကြံပေးချက်များ:**
- ကုဒ်ရေးမတိုင်မီ mockup ကို စတင်ပါ
- browser ၏ developer tools ကို အသုံးပြု၍ သင့် HTML ဖွဲ့စည်းမှုကို စစ်ဆေးပါ
- CSS မပါဘဲ screen size များကို စမ်းသပ်ပါ
- သင့် HTML ကို အသံထွက်ဖတ်ပြီး ဖွဲ့စည်းမှုမှန်ကန်မှုကို စစ်ဆေးပါ
- screen reader က သင့်စာမျက်နှာဖွဲ့စည်းမှုကို ဘယ်လိုနားလည်မလဲ စဉ်းစားပါ

> 💡 **သတိပြုပါ**: ဒီအလုပ်ပေးမှုသည် HTML ဖွဲ့စည်းမှုနှင့် semantic အပေါ် အာရုံစိုက်ထားသည်။ visual styling အပေါ် စိတ်မပူပါနှင့် – CSS သည် အဲဒီအတွက်ဖြစ်သည်! သင့်စာမျက်နှာသည် ရိုးရိုးလေးဖြစ်နိုင်သော်လည်း ဖွဲ့စည်းမှုကောင်းမွန်ပြီး အဓိပ္ပါယ်ရှိရမည်။

---

**အကြောင်းကြားချက်**:  
ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှုအတွက် ကြိုးစားနေသော်လည်း အလိုအလျောက် ဘာသာပြန်ခြင်းတွင် အမှားများ သို့မဟုတ် မမှန်ကန်မှုများ ပါဝင်နိုင်သည်ကို သတိပြုပါ။ မူရင်းဘာသာစကားဖြင့် ရေးသားထားသော စာရွက်စာတမ်းကို အာဏာတရားရှိသော အရင်းအမြစ်အဖြစ် သတ်မှတ်သင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူက ဘာသာပြန်ခြင်းကို အကြံပြုပါသည်။ ဤဘာသာပြန်ကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော အလွဲအမှားများ သို့မဟုတ် အနားလွဲမှုများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။