|
|
<!--
|
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
|
{
|
|
|
"original_hash": "5a764667bbe82aa72ac0a67f4c97ff4a",
|
|
|
"translation_date": "2025-10-03T11:04:29+00:00",
|
|
|
"source_file": "3-terrarium/1-intro-to-html/assignment.md",
|
|
|
"language_code": "my"
|
|
|
}
|
|
|
-->
|
|
|
# HTML အလုပ်ပေးစာ: ဘလော့ဂ် Mockup တစ်ခု တည်ဆောက်ခြင်း
|
|
|
|
|
|
## ရည်ရွယ်ချက်
|
|
|
|
|
|
ပုဂ္ဂလိက ဘလော့ဂ် မူလစာမျက်နှာအတွက် HTML ဖွဲ့စည်းမှုကို ဒီဇိုင်းဆွဲပြီး ကိုယ်တိုင်ရေးသားပါ။ ဒီလေ့ကျင့်ခန်းက သင့်ကို semantic HTML, layout စီမံခြင်းနှင့် ကုဒ်စီစဉ်မှုအပေါ် ကျွမ်းကျင်မှုရရှိစေပါမည်။
|
|
|
|
|
|
## လုပ်ဆောင်ရန်
|
|
|
|
|
|
1. **ဘလော့ဂ် Mockup ကို ဒီဇိုင်းဆွဲပါ**
|
|
|
- ဘလော့ဂ် မူလစာမျက်နှာ၏ အမြင် Mockup ကို ဆွဲပါ။ header, navigation, main content, sidebar, footer စသည်တို့ကဲ့သို့သော အဓိကပိုင်းများကို ထည့်သွင်းပါ။
|
|
|
- စက္ကူကို အသုံးပြု၍ ဆွဲပြီး scan လုပ်ပါ၊ သို့မဟုတ် Figma, Adobe XD, Canva, PowerPoint ကဲ့သို့သော ဒစ်ဂျစ်တယ်ကိရိယာများကို အသုံးပြုပါ။
|
|
|
|
|
|
2. **HTML Element များကို သတ်မှတ်ပါ**
|
|
|
- အပိုင်းတစ်ခုစီအတွက် သင်အသုံးပြုမည့် HTML element များကို စာရင်းပြုစုပါ (ဥပမာ `<header>`, `<nav>`, `<main>`, `<article>`, `<aside>`, `<footer>`, `<section>`, `<h1>`–`<h6>`, `<p>`, `<img>`, `<ul>`, `<li>`, `<a>` စသည်တို့)။
|
|
|
|
|
|
3. **HTML Markup ကို ရေးပါ**
|
|
|
- Mockup အတွက် HTML ကို ကိုယ်တိုင်ရေးပါ။ semantic ဖွဲ့စည်းမှုနှင့် အကောင်းဆုံးအလေ့အကျင့်များကို အာရုံစိုက်ပါ။
|
|
|
- အနည်းဆုံး HTML element 10 ခုကို ထည့်သွင်းပါ။
|
|
|
- သင့်ရဲ့ ရွေးချယ်မှုများနှင့် ဖွဲ့စည်းမှုကို ရှင်းပြရန် comment များထည့်ပါ။
|
|
|
|
|
|
4. **အလုပ်ကို တင်သွင်းပါ**
|
|
|
- သင့် mockup/sketch နှင့် HTML ဖိုင်ကို upload လုပ်ပါ။
|
|
|
- အလွယ်တကူ သင့်ဒီဇိုင်းရွေးချယ်မှုများအပေါ် အတွေးအမြင် (2–3 စာကြောင်း) ရေးသားပါ။
|
|
|
|
|
|
## အဆင့်သတ်မှတ်ချက်
|
|
|
|
|
|
| အချက်အလက် | ထူးချွန် | လုံလောက် | တိုးတက်မှုလိုအပ် |
|
|
|
|------------------|--------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------|---------------------------------------------------------------------------------|
|
|
|
| Visual Mockup | အပိုင်းများကို အမှတ်အသားပြထားပြီး အလှပဆုံး layout ဖြင့် ရှင်းလင်းသော mockup | အခြေခံ mockup; အချို့သော အပိုင်းများကို အမှတ်အသားပြထားသည် | အနည်းငယ်သော mockup; အပိုင်းအမှတ်အသားမပါရှိ |
|
|
|
| HTML Elements | semantic HTML element 10+ ကို အသုံးပြုထားပြီး ဖွဲ့စည်းမှုနှင့် အကောင်းဆုံးအလေ့အကျင့်များကို ပြသထားသည် | HTML element 5–9 ကို အသုံးပြုထားပြီး semantic ဖွဲ့စည်းမှု အနည်းငယ်ရှိသည် | HTML element 5 ခုအောက်သာ အသုံးပြုထားပြီး semantic ဖွဲ့စည်းမှုမရှိ |
|
|
|
| Code Quality | ကောင်းမွန်စွာ စီစဉ်ထားသော ကုဒ်; comment များပါရှိပြီး HTML စံသတ်မှတ်ချက်များကို လိုက်နာထားသည် | အများအားဖြင့် စီစဉ်ထားသော ကုဒ်; comment အနည်းငယ်သာပါရှိသည် | စီစဉ်မှုမရှိသော ကုဒ်; comment မပါရှိ |
|
|
|
| Reflection | ဒီဇိုင်းရွေးချယ်မှုများနှင့် အခက်အခဲများအပေါ် အတွေးအမြင် ရှင်းလင်းစွာ ရေးသားထားသည် | အခြေခံ အတွေးအမြင် ရေးသားထားသည် | အတွေးအမြင်မပါရှိ သို့မဟုတ် သက်ဆိုင်မှုမရှိ |
|
|
|
|
|
|
## အကြံပြုချက်များ
|
|
|
|
|
|
- အနက်ရှိုင်းမှုနှင့် SEO အတွက် semantic HTML tag များကို အသုံးပြုပါ။
|
|
|
- ကုဒ်ကို အတန်းလိုက်စီစဉ်ပြီး comment များထည့်ပါ။
|
|
|
- [MDN HTML Elements Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) ကို ကိုးကားပါ။
|
|
|
- သင့် layout ကို အနာဂတ်အလုပ်ပေးစာများတွင် တိုးချဲ့သို့မဟုတ် အလှဆင်နိုင်မည့် နည်းလမ်းများကို စဉ်းစားပါ။
|
|
|
|
|
|
---
|
|
|
|
|
|
**အကြောင်းကြားချက်**:
|
|
|
ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှုအတွက် ကြိုးစားနေသော်လည်း အလိုအလျောက် ဘာသာပြန်မှုများတွင် အမှားများ သို့မဟုတ် မတိကျမှုများ ပါဝင်နိုင်သည်ကို သတိပြုပါ။ မူရင်းဘာသာစကားဖြင့် ရေးသားထားသော စာရွက်စာတမ်းကို အာဏာတရ အရင်းအမြစ်အဖြစ် သတ်မှတ်သင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူ့ဘာသာပြန်ပညာရှင်များမှ ဘာသာပြန်မှုကို အကြံပြုပါသည်။ ဤဘာသာပြန်မှုကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော အလွဲအလွဲအချော်များ သို့မဟုတ် အနားလွဲမှုများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။ |
