Upload Photo to Blogger

ဒီပိုစ့်မှာတော့ Post တွေအတွက် Image တွေ ဘယ်လိုထည့်ရမယ်ဆိုတဲ့ နည်းတစ်ခုကို ပြောပြမှာဖြစ်ပါတယ်။

Blogspot တွေမှာ Image ထည့်ဖို့အတွက် <img src="photo_path"> Tag ကိုဘဲ အသုံးပြုပါတယ်။ ဒါကိုတော့ Writer တိုင်း သိပြီးသားဖြစ်မှာပါ။

အဓိကပြောချင်တဲ့ အပိုင်းက Photo Path ကို အလွယ်ကူဆုံး ရယူခြင်းနှင့် Hight Resolution ရယူနိုင်ဖို့ အလွယ်ကူဆုံးနည်းကို ပြောပြပေးမှာပါ။

Step - 1 : အရင်ဆုံး Blogger Login လုပ်လိုက်ပါ။ ပြီးရင် ကိုယ်တင်မယ့် Post အတွက် New Post ကိုနှိပ်လိုက်ပါ။

Step - 2 : ပြီးတဲ့အခါ Inset Image > Upload for Your Computer ကိုရွေးပေးပါ။

Step - 3 : ပြီးတဲ့အခါ Chose File ကိုနှိပ်ပြီး ကိုတင်လို့တဲ့ ပုံကို ရွေးပြီး Upload လုပ်လိုက်ပါ။ တစ်ပုံထဲတင်နိုင်သလို၊ ပုံများစွာလည်း တင်နိုင်ပါတယ်။ လိုအပ်သလို တင်လိုက်ပါ။

Step - 4 : ပြီးသွားတဲ့အခါ ဒီ Step မှာ Photo Path ယူလိုတဲ့ ပုံကို Right Click နှိပ်ပြီး Copy Image Address (or) Coppy Image Location (Firefox) ကိုနှိပ်လိုက်ပါ။ ပြီးရင် Browse အပိုင်းကို ဒီနေရာမှာ ခဏရပ်ထားလိုက်ပါ။ Select လည်း မလုပ်ပါနဲ့ Cancle လည်း မလုပ်ပါနဲ့။ ပိတ်လည်း မပိတ်ပစ်ပါနဲ့။ ဒါကအရေးကြီးပါတယ်။ မှားပြီးလုပ်မိရင်ဘယ်လို ဖြစ်တတ်တယ်။ ဘယ်လို ပြန်လုပ်ရမယ်ဆိုတာလည်း အောက်မှာ ပြောပြပေးပါမယ်။

ပြီးသွာရင် ကျွန်တော်တို့ ပုံထားချင်တဲ့ <img> Tag src=" " Attribute ထဲမှာ Paste လုပ်လိုက်ပါ။
လက်ရှိအတိုင်း Result ကိုကြည့်လိုက်မယ်ဆိုရင် ပုံက ဝါးနေတာကို တွေ့ရပါလိမ့်မယ်။ အဲဒါကို ကြည်သွားအောင် ဘယ်လိုလုပ်မလဲ။

Step - 5 : ကျွန်တော်တို့ရဲ့ Image Link ရဲ့ နောက်ဆုံးအပိုင်းမှာ h နဲ့စတဲ့ နံပတ်တစ်ချို့ကိုတွေ့ပါလိမ့်မယ်။ အဲဒီနံပတ်ရဲ့နောက်မှာ 0 (သုံည) တစ်လုံးထပ်ထည့်လိုက်ပါ။
ဥပမာ - မူရင်း = /h120/... ကို /h1200/.. လို့ပြင်လိုက်တာပါ။ 0 (သုံည) တစ်လုံးဘဲထည့်ရမှာနော်။ ကျန်တာတွေ သွားပြင်မိရင် Link မှားတာတွေ ဖြစ်နိုင်ပါတယ်။

ပြီးသွားတဲ့အခါမှာတော့ သင့်ရဲ့ Photo မှာ ကြည်တောက်ရှင်း HD ဖြစ်သွားပါပြီ။

ခုချိန်မှာ ပုံတွေ ထပ်တင်ချင်တယ်ဆိုလည်း Chose File ကိုနှိပ်ပြီး ထပ်ထည့်နိုင်ပါတယ်။ အားလုံးပြီးသွားပြီဆိုရင်တော့ Cancle ကိုနှိပ်ပြီး ပြန်ထွက်လိုက်ပါ။

ပြီးရင် တော့ ကိုယ့်ပိုစ့် Coding တွေရေးပြီးပြီဆိုရင်တော့ Post Title တွေရေး၊ Label တွေရွေးပြီး Publish လုပ်လိုက်ပါ။ Coding က မပြီးသေးဘူး ဆက်ရေးရဦးမယ် ဆိုရင်တော့ Publish မလုပ်ဘဲ Back နဲ့ ထွက်လိုက်ပါ။ ဒါပါဘဲ။

---

မှားခဲ့လျှင်

ကျွန်တော် Step - 4 မှာ Select လည်းမလုပ်နဲ့ Cancle လည်းမလုပ်နဲ့၊ ပိတ်လည်း မပိတ်ပစ်ပါနဲ့ လို့ သတိပေးထားတာက အောက်က အနီနဲ့ ဘောင်ခပ်ပေးထားတဲ့ Box ကြီးကို မပိတ်စေချင်လို့ပါ။ အဲဒီကောင် ပိတ်သွားပြီဆိုရင် Link ယူဖို့အတွက် က နဲနဲပိုရှုပ်ထွေးသွားပြီး၊ အဆင့်တွေ ပိုများသွားလို့ပါ။

တကယ်လို့ ပိတ်ခဲ့မိပြီးသွားတယ် ဆိုရင်တော့ Step -2 အတိုင်း Inset Image > Upload for Your Computer > Chose File ပုံပြန်‌ရွေး။ Link Copy ယူ တာက အလွယ်ဆုံးနည်းပါဘဲ။

တကယ်လုပ်ကြည့်လိုက်ရင် အဲလောက်မခက်ခဲပါဘူး။ စာတွေဖတ်နေရလို့ ရှုပ်နေတာပါ။

Github မှာ ပုံတွေတင်ပြီး အဲဒီက Link ကို ယူမယ်ဆိုရင်လည်း အဆင်ပြေပါတယ်။ ဒါကတော့ Blog ထဲတင် ပုံတင်ပြီး Link ယူတဲ့ နည်းတစ်ခုကို‌ ပြောပြတာ ဖြစ်ပါတယ်။

အားလုံး အဆင်ပြေကြလိမ့်မယ်လို့ ထင်ပါတယ်။ အဆင်မပြေတာရှိရင် အောက်က Comment မှာ ဆွေးနွေးခဲ့ပါ။

HTML Headings

HTML Headings

HTML headings ဆိုတာ web page တစ်ခုမှာ မိတ်ဆွေတို့ ဖော်ပြလိုသော ခေါင်းစဥ်ကြီး (သို့) ခေါင်းစဥ်ခွဲ တွေ ဖြစ်ပါတယ်။

Example

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Try it yourself

---

HTML Headings

HTML headings ကို <h1> ကနေ <h6> ထိကို အဓိပ္ပါယ် သတ်မှတ်ထားပါတယ်။

<h1> ကို အရေးကြီးဆုံး ၊အကြီးဆုံး ခေါင်းစဥ်တွေ အတွက် ဖြစ်ပြီး <h6> ကိုတော့ အငယ်ဆုံး ခေါင်းစဥ်တွေ အတွက် သတ်မှတ်ပါတယ်။

Example

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Try it yourself

Browser က heading တစ်ခုရဲ့ အရှေ့နဲ့ အနောက်ကို အလိုတလျှောက် space အချို့ ထည့်ပေးပါတယ်။

Heading တွေက အရေကြီးပါတယ်

Search engines တွေက မိတ်ဆွေတို့ web pageတွေရဲ့ အကြောင်းအရာ နဲ့ တည်ဆောက်ပုံ တွေကို ညွန်းရန်း အသုံးပြုပါတယ်။

<h1> headings ကို အဓိက ခေါင်းစဥ်တွေအတွက် အသုံးပြုသင့်ပြီး သူ့နောက်က <h2> headings လိုက်ပါတယ်။ ပြီးတော့ <h3> etc...

ခေါင်းစဥ်တွေအတွက်သာ HTML headings ကို သုံးပါတယ်။ စာလုံးကြီးဖို့ (သို့) စာလုံးမဲ ဖို့အတွက်ဆို Headings တွေကို မသုံးရပါဘူး။

---

Bigger Headings

HTML headingsတစ်ခုစီမှာ default sizeတွေ ရှိပါတယ်။ သို့သော် CSS ရဲ့ font-size property ကို အသုံးပြုပြီးတော့ style attribute နဲ့ ဘယ်headings ရဲ့ size ကိုမဆို ပြုပြင်နိုင်ပါတယ်။

Example

Heading 1

Try it yourself

How to add Your Domain Setup Free SSL

မိမိ Domain ကို SSL Free ထည့်မယ်။

SSL ဆိုတာဘာလဲ ?
SSL ဆိုတာ Secure Sockets Layer ဖြစ်ပါတယ်။ သူက ဘယ်လို အလုပ်လုပ်လဲဆိုတော့ မိမိတို့ရဲ့ ကိုယ်ပိုင်အချက်အလက်တွေနဲ့ အင်တာနက်မှာရှိတဲ့ သတင်းအချက်အလက်တွေကို တခြားသူတွေ မယူအောင် ထိန်းသိမ်းပေးနိုင်တဲ့ လုံခြုံမှု တစ်ခုဖြစ်ပါတယ်။

ဘယ်နေရာမှာ အသုံးပြုလဲ ?
မိမိတို့ရဲ့ Domain မှာ အသုံးပြုပါတယ်။ ဥပမာ- ပုံမှန် ဒိုမိန်းမှာဆိုရင် http://www-yourdomain.com ကို ကျနော် အသုံးပြုကြပါတယ်။ အဲဒီလို domain တွေက မလုံခြုံပါဘူး။ လုံခြုံအောင် ကျနော်တို့က SSL ခံပြီး အသုံးပြုကြရပါတယ်။ ဥပမာ - https://www.yourdomain.com or https://yourdomain.com ဆိုပြီး အသုံးပြုရမှာဖြစ်ပါတယ်။

SSL က ပိုက်ဆံပေးရမှာလား ?
ဟုတ်ကဲ့ ပေးရမှာပါ။ တကယ်လို့ စမ်းသုံးချင်ကြည့်ရင် Free သုံးလို့ရပါတယ်။ Free ကတော့ သူ limit ရှိပါတယ်။ ဝယ်ရင်တော့ ပိုကောင်းပါတယ်။ ဝယ်ပြီးသုံးဖို့ ပြောချင်ပါတယ်။ ဒီမှာတော့ စမ်းဖို့အတွက် SSL ကို ပြောပြမှာ ဖြစ်ပါတယ်။

SSL စမ်းဖို့အတွက်က ကိုယ်ပိုင် Domain Name or Hosting တစ်ခုရှိရင် အဆင်ပြေပါတယ်။ မရှိဘူးဆိုရင်လည်း ပြသာနာမရှိပါဘူး။ free domain and free hosting တွေမှာ စမ်းလို့ရပါတယ်။

စမ်းသပ်ဖို့အတွက် ဘယ်မှာရှာရမလဲ ?
စမ်းသပ်ဖို့နည်းတွေ အများကြီး ရှိပါတယ်။ အဲဒီထဲကမှ အဆင်ပြေနိုင်မယ့် နည်း ၂ နည်းရှိပါတယ်။

ပထမနည်း - cloudfare ကို အသုံးပြုရပါမယ်။ cloudfare ssl free ဆိုပြီး google မှာ ရှာပါ။ Google ကို ဘယ်လိုဖွင့်ရမလဲဆိုတာကတော့ မိမိစက်ထဲမှာ ဝက်ဘ်ဘရောင်ဇာ တစ်ခုခုရှိရင်ဖြစ်ပါတယ်။

ဥပမာ - firefox, chrome, edge, etc....., ရှာလို့တွေ့ပါက cloudfare မှာ အကောင့်ဆောက်ရပါမယ်။ ပြီးရင်တော့ cloudfare ရဲ့ nameserver ကို မိမိတို့ရဲ့ domain nameserver မှာ သွားထည့်ရမှာပါ။ cloudfare က free domain or sub domain ကို ရတာလား or မရတာလားဆိုတာကတော့ ကျနော်လည်း သေချာ မသိသေးပါဘူး။

ဒါကြောင့် ဒီနည်းကတော့ နည်းနည်းရှုပ်ပါတယ်။ လေ့လာချင်ရင်တော့ လေ့လာကြည့်ပါ။ လုပ်ကြည့်ပါ။ စမ်းကြည့်ပါ။

ဒုတိယနည်း - ဒီနည်းကတော့ ကိုယ်ပိုင် domain or hosting မရှိသေးရင်လည်း ရပါတယ်။ Free hosting and free domain တွေနဲ့ စမ်းကြည့်လို့ရပါတယ်။ Free hosting ကတော့ https://www.000webhost.com/ , https://www.freehosting.com/, https://www.freehostia.com/ တို့မှာ အကောင့်ဆောက်ပြီး ယူလို့ရပါတယ်။ Domain name လည်း အတူတူပါပဲ။ SSL Free ကတော့ https://letsencrypt.org/ , https://zerossl.com/ တို့မှာ စမ်းသပ်ကြည့်လို့ရပါတယ်။

Laravel Intro

Tags Laravel Intro

Laravel ဆို တာ က PHP သုံးပြီး MVC (Model-View- Controller) ကို အ ‌ခြေ ခံ ပြီး တည် ဆောက် ထား သော web framework ဖြစ် ပါ တယ်။Laravel ကို Taylor Otwell ဆို တာ လူ က စ ရေး ခဲ့ ပါတယ်။

---

Why We should choose laravel?

Laravel ဆို တာ က PHP သုံးပြီး MVC (Model-View- Controller) ကို အ ‌ခြေ ခံ ပြီး တည် ဆောက် ထား သော web framework ဖြစ် ပါ တယ်။Laravel ကို Taylor Otwell ဆို တာ လူ က စ ရေး ခဲ့ ပါ တယ်။

Why We should choose laravel?

Laravel ကို choose လုပ် ထား ခြင်း အာ ဖြင့် အောက် ပါ features and capabilities များ ကို အ သုံး ပြု နိုင် ပါ သည်။

1. AUTHORIZATION TECHNIQUE

Laravel ကို သုံး ခြင်း အာ ဖြင့် authentication ကို implement လုပ် တယ် အ ခါ အ ရမ်း လွယ် ကူ ရိုးရှင် လာ ပါ မယ်။

2. OBJECT-ORIENTED LIBRARIES ကြွယ် ဝ ခြင်း

OOB နှင့်အ ခြား PHP libraries မ တွေ့ ရ သော Pre-Install libraries များ စွာ ရှိ ပါ သည်။ Pre-install library အ သုံး များ သော တစ် ခု က တော့ Authentication Library ဖြစ် ပါ တယ်။၎င်း အ ပြင် active user check လုပ် ခြင်း၊ Bcrypt hasting ( password ကို hash လုပ် ပြီး သိမ်း ခြင်း) ၊ password reset ၊ CSRF (Crossed-site Request Forgery) protectionနှင့် encryption စ သော libraries များ စွာ ပါ ရှိ ပါ တယ်။

3. ARTISAN ဆို command-line interface ပါ ရှိ ခြင်း

Artisan ဆို တယ် command-line-interface ပါ ရှိ ခြင်း project ရေး တယ် အခါ ထပ် ခါ ထပ် ခါ manual လုပ် မယ် အ လုပ် ကို ငြီး ငွေ့ မ သွား အောင် artisan ကို သုံး ခြင်း လွယ် လာ ပါ တယ်။

4. Security

Security ဆို တာ က application ရေး သော အ ခါ အ ရမ်း အ ရေး ကြီး ပါ တယ်။Laravel က Bcrypt algorithm ကို သုံး ပြီး password ကို hash လုပ် ပြီး သိမ်း ခြင်း၊ PDO parameter binding ကို သုံး ခြင်း အာ ဖြင့် SQL injection မှာ ကာ ကွယ် ထား ခြင်း၊ Cross Side Request Forgery (csrf) protection ပါ ရှိ ခြင်း၊ Cross Side Script မှာ ကာ ကွယ် ထား ခြင်း ၊ MiddleWare and Auth guard ပါ ရှိ ခြင်း ၊API authentication စ သော protection တွေ့ ပါ ဝင် ပါ တယ်။

5. Database Migration

Database Migration ပါ ခြင်း အား ဖြင့် ကိုယ် development လုပ် နေ တာ app ကို အ ခြား သူ က database အ သစ် ဆောက် ဖို့ မ လို ပဲ ယူ သုံး လို ရ ပါ တယ်။

---

Laravel လေ့လာမယ်ဆို လုပ်အပ်မယ်အချက်ကတော့

HTML နဲ့ familiar ဖြစ် ထား ဖို့ လို ပါ ၊ Little bit Ajax (but optional)၊PHP pure ကို နာ လည်း ထား ခြင်း ၊ MVC က ဘယ် လို အ လုပ် လုပ် လဲ ဆို တာ သိ ထား ခြင်း အား ဖြင်း laravel လေ့ လာ တယ် အ ခါ ပို ပြီး လွယ် ကူ လျင် မြန် လာ ပါ မယ်။

Laravel basic တွေ့ ကိုကျွန် တော် cover လုပ် သွား မယ် outline တွေ့ က တော့ အောက် မှာ ဖော် ပြ ထား ပါ တယ်

• Installation
• Application Structure
• Configuration
• Routing
• Csrf protection
• Controller
• Middleware
• Http request
• Response
• Views
• Cookies
• Blade Templates
• Redirections
• Working with database
စ တာ တွေ့ ဖြစ် ပါ တယ် ။

Knowledge Post Guide

ဒီပိုစ့်မှာတော့ How to ပိုစ့်တွေ၊ Technology ပိုစ့်တွေ နှင့် Knowledge ပိုစ့်တွေ တင်ရာမှာ လိုက်နာရမယ့် စည်းကမ်းလေးတွေကို ပြေပြပေးမှာပါ။

How to post

How to ပိုစ့်တွေကို နှစ်မျိုးထပ်ခွဲပါမယ်။ ပထမ တစ်မျိုးက How to နှင့် ဒုတိယ တစ်မျိုးက How to Fix ပါ။

1. How To : က တော့ ရှင်းပါတယ်။ တစ်ခုခုပြုလုပ်နည်း တစ်ခုခု ဖန်တီးနည်းကို ပြောပြတဲ့ ပိုစ့်တွေပါ။
2. How to Fix : ကတော့ Error တစ်ခုခုကို ရှင်းပြတဲ့ ပိုစ့်တွေဖြစ်ပါတယ်။

How To Post တွေရေးတဲ့အခါ စည်းကမ်း နှစ်ခုဘဲရှိပါတယ်။

1. Labe ကို How To (or) How to Fix ထဲက တစ်ခုကို သေသေခြာခြာရွေးပေးပါ။ နောက်ထပ် သက်ဆိုင်ရာ Label များ ထပ်ပြီး ပေါင်းထည့်နိုင်ပါတယ်။ ဥပမာ - How to, HTML, CSS
2. Post Title ကို How To (or) How to Fix နှင့် စပြီးပေးပါ။ နောက်ကတော့ ကိုယ့်ပိုစ့်နဲ့ သက်ဆိုင်ရာ နာမည်ကိုပေးနိုင်ပါတယ်။ ဥပမာ - How to make Mega Meun with only CSS

---

Technology and Knowledge Post

ဒီပိုစ့်တွေကတော့ လွတ်လပ်ပါတယ်။ ကိုယ့် ရေးတဲ့အကြောင်းအရာကို Technology လို့ သတ်မှတ်ရင် Technology Label ထည့်လိုက်ပါ။ Knowledge Sharing လို့သတ်မှတ်ရင် Knowledge လို့ Label တတ်လိုက်ပါ။

နှစ်ခုလုံးလည်း တစ်ပြိုင်ထဲ တတ်နိုင်ါတယ်။ နောက်ထပ် သက်ဆိုင်ရာ Label များလည်း ထပ်ထည့်နိုင်ပါတယ်။ ကိုယ့် သဘောပါဘဲ။

အားလုံး အဆင်ပြေမယ်လို့ထင်ပါတယ်။ မရှင်းတာရှိရင် Comment ရေးခဲ့နိုင်ပါတယ်။

HTML Introduction

HTML Introduction

• HTML (HyperText Markup Language) ဆိုတာက Web pages တွေ တည်ဆောက်တဲ့ အခါ လိုက်နာရန်အတွက် W3C က သတ်မှတ်ထားတဲ့ standard ဖြစ်ပါတယ်။

HTML ဆိုတာ ဘာလဲ?

• HTML က Web page တစ်ခုရဲ့ တည်ဆောက်ပုံကို ဖော်ပြပါတယ်။
• HTML ၌ element တွေ အတွဲလိုက် ပါ၀င်ပါတယ်။
• HTML element တွေက browser ကို ဘယ်လို ပုံစံ ဖော်ပြမယ်ဆိုတာကို ပြောပါတယ်။
• ဒီ element တွေက content('this is heading', 'this is paragraph', etc...) အပိုင်းအစ တွေကို ပြန်ခွဲပါတယ်။

A Simple HTML Document

ပြည်စုံတဲ့ HTML document တစ်ခုက အနည်းဆုံးတော့ အောက်ပါအတိုင်း ပါ၀င် ပါတယ်။

Example

This is a Heading

This is a paragraph.

Try it yourself

Example Explained

• <!DOCTYPE html> ဆိုတာ ဒီ document ဟာ HTML document ဖြစ်ကြောင်း ကြေငြာခြင်း ဖြစ်ပါတယ်။
• <html> က HTML page တစ်ခုရဲ့ အဓိက element တစ်ခု ဖြစ်ပါတယ်။
• <head> က HTML page နဲ့ ဆိုင်သော meta infomation တွေ ကြေငြာဖို့ အတွက် ဖြစ်ပါတယ်။ အများအားဖြင့် < title > element က အမြဲပါ ပါတယ်။
• <title> က HTML page ရဲ့ ခေါင်းစဥ်ကို ဖော်ပြပါတယ်။ (သူက browser ရဲ့ title bar (သို့မဟုတ်) page ရဲ့ tab ၌ ဖော်ပြပါတယ်)
• <body> ကတော့ browser ၌ မြင်ရမယ့် content("headings","paragraphs"," images"," hyperlinks","tables"," lists", etc...) တွေကို ဖော်ပြပါတယ်။
• <h1> က အကြီးဆုံး ခေါင်းစဥ် ဖြစ်ပါတယ်။
• <p> ကတော့ စာပိုဒ်တွေ အတွက် ဖြစ်ပါတယ်။

HTML Element တစ်ခုက ဘာလဲ ?

tag အဖွင့် ၊ အကြောင်းအရာ ၊ tag အပိတ် ဆိုပြီး HTML element ကိုဖော်ပြပါတယ်။
< tagname > Content goes here...< /tagname >

tagအဖွင့် ကနေ စပြီး tagအပိတ် အထိက HTML element တွေဖြစ်ပါတယ်။ < h1 > My First Heading </h1 > < p > My first paragraph.< /p >

tag အဖွင့်	အကြောင်းအရာ	tag အပိတ်
< h1 >	My First Heading	< /h1 >
< p >	My first paragraph	< /p >
< br >	none	none

အချို့ HTML element တွေက အကြောင်းအရာတွေ မပါကြဘူး။(Like br element) အဲ့ဒီ element တွေကို Empty element တွေဖြစ်ပါတယ်။ သူတို့က tagအပိတ် လည်း မပါကြပါဘူး။

Web Browser

Web browser (Chrome, Edge, Firefox, Safari) တွေရဲ့ ရည်ရွယ်ချက်ကတော့ HTML document တွေကို ဖတ်ပြီး မှန်ကန်စွာ ဖော်ပြပေးခြင်း ဖြစ်ပါတယ်။

HTML tag တွေကိုတော့ browserက မဖော်ပြပါဘူး။ ဒါပေမယ် HTML element တွေကို သုံးပြီး document တွေကို ဘယ်လို ဖော်ပြမယ်ဆိုကို ဆုံးဖြတ်ပါတယ်။

HTML Page တည်ဆောက်ပုံ

<html>

<head>

<title>Page title</title>

</head>

<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

</body>

</html>

< body > section အတွင်းက အကြောင်းအရာသာ browser ထဲ၌ ဖော်ပြလိမ့်မယ်။

HTML History

World Wide Web ရဲ့ အစောပိုင်းကာလ တွေကတည်း HTML version အမျိုးမျိူး ပေါာခဲ့တယ်။

Year	Version
1989	Tim Berners-Lee invented www
1991	Tim Berners-Lee invented HTML
1993	Dave Raggett drafted HTML+
1995	HTML Working Group defined HTML 2.0
1997	W3C Recommendation: HTML 3.2
1999	W3C Recommendation: HTML 4.01
2000	W3C Recommendation: XHTML 1.0
2008	WHATWG HTML5 First Public Draft
2012	WHATWG HTML5 Living Standard
2014	W3C Recommendation: HTML5
2016	W3C Candidate Recommendation: HTML 5.1
2017	W3C Recommendation: HTML5.1 2nd Edition
2018	W3C Recommendation: HTML5.2

ဒီ tutorial က နောက်ဆုံး version HTML 5 standard နဲ့ ဖော်ပြထားပါတယ်။

Using Codepen

Codepan ဆိုတာကတော့ HTML, CSS, JavaScript Code တွေကို Websit ပေါ် မှာ Live Edited လုပ်နိုင်ပြီး Result ကိုလည်း Live ကြည့်နိုင်တဲ့ Website တစ်ခုဖြစ်ပါတယ်။

Codepen ကို ဘာကြောင့်သုံးရတာလဲ ဆိုတာ့ Try it Yourself! Button ကိုနှိပ် ပြီး Example Code နှင့် Result ကိုတွဲပြီးလေ့လာနိုင်ဖို့ အတွက် ဖြစ်ပါတယ်။

Account ဖွင့်ခြင်း၊ Login ဝင်ခြင်း

codepen.io Websit ကိုသွားလိုက်ပါ။

ကျွန်တော်တို့ အောက်ကပုံအတိုင်းမြင်ရတဲံအခါ ညာဘက်အပေါ်ဒေါင့်က Sing Up ဆိုတဲ့ Button ကိုနှိပ်လိုက်ပါ။

ပြီးရင် အကောင့်ဖွင့်ပုံဖွင့်နည်း၊ Varified လုပ်နည်းတွေတော့ အသေးစိတ်မရေးတော့ပါဘူး။ ပြီးရင်တော့ Login ဝင်လိုက်ပါ။

(အခက်အခဲရှိရင် Facebook Messenger မှာလာမေးနိုင်ပါတယ်။)

Login ဝင်ပြီးသွားရင်တော့ ညာဘက်အပေါ်ဒေါင့်က ခလုပ်လေးကိုနှိပ်ပြီး New pen ဆိုပြီး အသစ်တောင်းလိုက်ပါ။

ပြီးရင်တော့ ဘာ Code မှမရေးခင်မှာ အရင်ဆုံး Name ပေးပါမယ်။

Name ပေးတဲ့အခါမှာ ကျွန်တော်ကတော့ ကျွန်တော်တင်တဲ့ ပိုစ့် Name ပြီတော့ နောက်က ဂဏန်း ၂ လုံးနံပတ်ပေးပါတယ်။ ဂဏန်းနှစ်လုံးနံပတ်ကတော့ ပိုစ့်တစ်ခုမှာ Example Code က တစ်ခုထက်ပိုပါနိုင်တယ်လေ။ ပထမ Example Code အတွက်ဆို _01, ဒုတိယ အတွက်ဆို _02 စသည်ဖြင့်ပေးပါတယ်။ ဒီတော့ ဥပမာ - JS Where To _01, JS Whert to _02 စသည်ဖြင့် ပေးပါတယ်။

မိတ်ဆွေတို့ကတော့ အဆင်ပြေသလို ပေးနိုင်ပါတယ်။ အဓိက, က ရှင်းရှင်းလင်းလင်မြင်သာဖို့၊ နောက်ပိုင်း ပြင်ဆင်ရာမှာ လွယ်ကူစေဖို့ စဉ်းစားပြီးပေးပါ။

ပြီးသွားရင်တော့ လိုအပ်မယ့် Code တွေကို HTML, CSS, JavaScript တွေထဲမှာရေးထည့်နိုင်ပါပြီ။ လိုအပ်သလို ရေးပြီးသွားပြီဆိုရင်တော့ Save လုပ်လိုက်ပါ။

Save လိုက်တာနဲ့ URL ပြောင်းသွားတာကို သတိထားမိကြပါလိမ့်မယ်။

အဲဒိ URL ကို Copy ယူပြီး သက်ဆိုင်ရာ Try it yourself! Button ရဲ့ href="" Attribute မှာထည့်ပေးလိုက်ရုံပါဘဲ။

Try it Yourself! Button တွေမှာ target="_blank" ထားဖို့ကလည်း အရေးကြီးပါတယ်နော်။

ကျေးဇူးတင်ပါတယ် အဆင်ပြေမယ်လို့ မျှော်လင့်ပါတယ်။

အဆင်မပြေတာရှိရင် Comment ချန်ပြီးမေးခဲ့ နိုင်ပါတယ်။

Course Outline Guide

Course Outline ရေးသားသူများဟာ အဖွဲ့လိုက်ဆွေး‌နွေးဆုံးဖြတ်ထားတဲ့ Course Outline များအတိုင်း ရေးသားကြရမှာ ဖြစ်ပါတယ်။

ယခုလက်ရှိမှာတော့ w3school.com က Outline ကို 100% ယူပြီး ရေးသားနေကြပါတယ်။

ဘယ်သူတွေ အတွက်သင့်တော်သလဲ ?

• Webdesign ကို စတင်လေ့လာနေသူတွေအတွက် ပိုမိုသင့်တော် တယ်လို့ထင်ပါတယ်။
  ဘာကြောင့်လဲ ဆိုတော့ စတင်လေ့လာသူများ အတွက် Knowledge Sharing လို့ ပိုစ့်မျိုတွေ ဖန်တီးဖို့က အတွေ့အကြုံမရှိသေးပါဘူး။ ဒီတော့ Outline ရှိပြီးသား စာတွေကိုလေ့လာရင် Coding Skill ကို လေ့ကျင့်ရင်း ရေးသားလို့ ရနိုင်မှာ ဖြစ်ပါတယ်။
• Content Writhing လေ့ကျင်နေသူများ
  Course Outline တွေအား သူများနားလည်အောင် ရှင်းပြရတာ ဖြစ်တဲ့အတွက် အရေးအသား ပြေပြစ်ဖို့ အရေးကြီးပါတယ်။ ဒီတော့ ဒီအပိုင်းကို လေ့ကျင့်နေသူများဟာလည်း အကြောင်းအရာ ထွေထွေထူးထူး စဉ်းစားစရာ မလိုတဲ့ Outline ရှိပြီးသားကိုရေးသားရင်း အရေးအသား တိုးတက်အောင် လေ့ကျင့်သင့်ပါတယ်။
• Font-end ပိုင်းအတွက် လေ့ကျင့်နေသူများ
  မြန်မာစာနဲ့ ရေးသားထားတဲ့ Website တစ်ခုရဲ့ UI အတွက် ပုဒ်ဖြတ်၊ ပုဒ်ရပ်တွေဟာ အရမ်းအရေးကြီးပါတယ်။ နောက်ပိုင်းမှာ မြန်မာစာကို ပုဒ်ဖြတ်၊ပုဒ်ရပ် မှန်အောင်ရေးတဲ့သူတွေလည်း နည်းပါးနေပါတယ်။ Course Outline ကိုရေးသားရင်း လှပအောင် စာစီနည်းများ၊ ပုဒ်ဖြတ်၊ပုဒ်ရပ် များကို လေ့ကျင့်နိုင်ပါတယ်။
• HTML, CSS အတွက်လေ့ကျင့်လိုသူများ
  html မှာ <div>Hello World! </div> လို့ရေးတာနဲ့ <p>Hello World! </p> လို့ရေးတာဟာ Result အတူတူဘဲ ထွက်ပါတယ်။ ပုံစံကျတဲ့၊ မှန်ကန်တဲ့ HTML Document တစ်ခုဖြစ်ဖို့အတွက် ဆိုရင် ဒီလိုပုံစံတူတွေကို ဘယ်နေရာမှာ ဘာကိုသုံးရမယ်ဆိုတာ လေ့လာရင်း ရေးသားနိုင်ကြမှာ ဖြစ်ပါတယ်။

---

Content Outline တွေရေးသားဖို့ ဘာတွေလိုအပ်ပါသလဲ ?

• HTML, CSS သုံးတတ်ရပါမယ်။
• English Reading Skill နဲနဲရှိရပါမယ်။
• မြန်မာစာ အရေးအသား အနည်းငယ်ကျွမ်းကျင်ရပါမယ်။
• ဒီလောက်ဆို ရပါပြီ။

အားလုံး Skill Full ဖြစ်နေဖို့မလိုပါဘူး။ ဒီ Website ကလည်း Free လည်ပတ်နေတဲ့ Website တစ်ခုဖြစ်လို့ Quality မမှီဘူးတို့၊ အရေးအသား ညံတယ်တို့ ပြောမယ်သူ ဘယ်သူမှ မရှိပါဘူး။ ဒါပေမယ့် အတတ်နိုင်ဆုံးကြိုးစားပြီးရေးကြည့်ပါ။ စာတစ်ကြောင်းရေးပြီးတိုင်း Browser မှာဖွင့်ထားတဲ့ Html ဖိုင်ကိုကြည့်ပြီး ပြန်ဖတ်ကြည့်ပါ။ အရေးအသား တိုးတက်စေဖို့ အမြဲစဉ်းစားပြီး ရေးသားပါ။

နောက်တစ်ခုကတော့ မြန်မာစာ ပုဒ်ဖြတ်၊ ပုဒ်ရပ်လေးတွေမှန်အောင် ကြိုးစားပါ။ စာကြောင်းဆုံးရင် နှစ်ချောင်းပိုဒ်ချတဲ့ အလေ့အကျင့်လေးတွေကို လေ့ကျင့်ပါ။

ဒီလိုဆိုရင် ဒီဆိုဒ်မှာ ရေးနေသူတွေအတွက်လည်း အကျိုးရှိမယ်။ ဖတ်ရတဲ့သူတွေ အတွက်လည်း အကျိုးရှိပါလိမ့်မယ်။

---

Content တွေဘယ်လို ခွဲဝေယူပြီး ရေးသားနေသလဲ ?

အပေါ်မှာ ပြောခဲ့တဲ့အတိုင်း Content တွေအားလုံးက w3school.com ကို အပြည့်အဝမှီခိုထားပါတယ်။

ဘယ်ဘက်ဘေးက Menu ထဲမှာ Course List (Google.doc) ဆိုတဲ့ လင့်လေးရှိပါတယ်။ အဲဒိလင့်ကို ဝင်လိုက်ရင် Course Name နဲ့ Url ကိုစုစည်းပေးထားတဲ့ List တစ်ခုကို တွေ့ရပါလိမ့်မယ်။ (Myanmar Coder Guide Writer ဖြစ်ပြီးသူများသာ ဝင်ကြည့်လို့ရမှာပါ။) အဲဒိထဲမှာ မှ Author Name မှာ နာမည် ဖြည်ပြီးသားတွေက ရေးနေဆဲ (သို့) ရေးပြီးသွားတဲ့ ပိုစ့်တွေ အဖြစ်သိနိုင်ပါတယ်။ အဲဒီတော့ Author Name လွတ်နေတဲ့ Post တစ်ခုမှာ ကိုယ့် Name ကိုထည့်ပြီး စရေးရုံပါဘဲ။

ပိုစ်တွေကို အစဉ်အတိုင်း ရေးရမယ်လို့ မသတ်မှတ်ထားဘူး။ ကိုယ့်စိတ်ကြိုက် ခေါင်စီးကို ရွေးချယ်ရေးသားနိုင်ပါတယ်။

ကိုယ်ရေးသားမယ့် Post Title နောက် Author Name အကွတ်မှာ ကိုယ့် Facebook Name ကိုထည့်ပြီးမှသာ ပိုစ့် စတင်ရေးသားကြပါ။ ရေးတဲ့သူတွေ ထပ်နေမှာ စိုးလို့ပါ။

ပြီးရင် သူနောက်က Static အကွက်မှာ စရေးနေရင် Writing ၊ ရေးပြီးသွားပြီ Blogger မှာ ပိုစ်တင်ပြီးသွားပြီ ဆိုရင် Finish လို ရေးထည့်ခဲ့ပေးပါ။

အောက်က ပုံမှာ မြင်သာအောင် ကြည့်နိုင်ပါတယ်။

HTML Elements

HTML Elements

HTML elements ကိုရေးတဲ့ခါကျရင် အဖွင့် tag နဲ့စ ပြီးးရင်အကြောင်းအရာ(Content)ရေး ပြီးရင်အပိတ် tag အဆုံးသတ်ပေးရပါတယ်။

<tagname> Content... </tagname>

HTML Element တိုင်း အဖွင့် tag နဲ့စပြီး အပိတ် tag အဆုံးသတ်ပေးရတယ်။

<h1> My First Heading </h1>

<p> My first paragraph </p>

အဖွင့် tag	Content	အပိတ် tag
<h1>	My First Heading	</h1>
<p>	My first paragraph.	</p>
<br>	none	none

Note - တချို့ Element တွေက Content ထည့်လို့မရပါ။ ပြီးရင် သူတို့မှာ အပိတ် tag မရှိပါ။ သူတို့တွေကို empty elements လို့ခေါ်ပါတယ်။ ဥပမာ - <br>

---

Nested Element

HTML Element အတွင်း တခြား Element ထည့်လို့ရပါတယ်။

HTML documents တစ်ခုလုံးက nested HTML element များဖြင့်ဖွဲ့စည်းထားတယ်။

အောက်ပါဥပမာ တွေ elements ၄ ခုပါဝင်ပါတယ်။ (<html> <body> <h1> <p>)

Example

<!DOCTYPE html>

  <html>

   <body>

    <h1>My First Element</h1>

    <p>My First Paragraph<p>

   </body>

  </html>

Try it yourself

---

အထက်ပါ Example ကိုရှင်းပြထားပါတယ်

Document တစ်ခုလုံးကို <html> ဖြင့်ဖွဲ့စည်းထားပါတယ်။
<html> ပထမ Top level element ဖြစ်သောကြောင့် root element လို့ခေါ်ပါတယ်။

<html> နဲ့စပြီး </html> အဆုံးသတ်ပေးရပါတယ်။

ပြီးရင် <html> element ထဲ <body> element ရှိပါတယ်။

   <body>

    <h1>My First Element</h1>

    <p>My First Paragraph<p>;

   </body>

<body> element ကို document's body ဆိုပြီးသတ်မှတ်နှိင်ပါတယ်။

<body> နဲ့စပြီး </body> အဆုံးသတ်ပေးရပါတယ်။

<body> element အတွင်းမှာ <h1> နဲ့ <p> element ၂ခုရှိပါတယ်။

<h1>My First Element</h1>

<p>My First Paragraph</p>

<h1> element ကို heading လို့ခေါ်ပါတယ်။

<h1> နဲ့စပြီး </h1> အဆုံးသတ်ပေးရပါတယ်။

<h1>My First Element</h1>

<p> element ကို paragraph လို့ခေါ်ပါတယ်။

<p> နဲ့စပြီး </p> အဆုံးသတ်ပေးရပါတယ်။

<p>My first paragraph</p>

---

ဘယ်တော့မှ end tag ကို မချန်ထားခဲ့ပါနဲ့

တချို့ element တွေက eng tag ချန်ထားခဲ့ရင်တောင် broswers မှာအမှန်ပြပါတယ်

Example

  <html>

   <body>

    <h1>My First Element

    <p>My First Paragraph

   </body>

  </html>

Try it yourself

Note - end tag မပါဘဲရေးလို့ရပေမယ့် တခါတလေကျရင် မဖြစ်သင့် error ဖြစ်လို့ပါ။
အမြဲတမ်း end tag ထည့်ရေးပေးသင့်တဲ့ element တိုင်း end tag ထည့်ရေးပေးပါ။

---

Empty HTML Elements

HTML element ထဲ content ရေးပေးစရာမလိုတဲ့ element ကို mpty HTML Element ခေါ်ပါတယ်။

   <br> က empty elemets ဖြစ်ပါတယ်၊

   <br> က စာကြောင်းနောက်တစ်ကြောင်း ကျော် တဲ့ခါကျရင်သုံးပါတယ်။

Example

    <p> This is a <br> Paragraph with a line break;     </p>

Try it yourself

---

HTML is Not Case Sensitive

HTML tags တွေက ကြိုက်သလိုရေးလို့ရပါတယ် lowercase နဲ့ရေးနှိင်သလို uppercase နဲ့ရေးနှိင်ပါတယ်။
ဥပမာ    <P > က    <p> နဲ့တူတူပါဘဲ။၊
ကျနော်တို့ ကတော့ lowercase နဲ့ရေးပါလို့ recommend ပေးပါတယ်။

ကျနော်က အမြဲတမ်း lowercase သုံးပါတယ်။

---

HTML Tag Reference

Element tags သူတို့ ကိုယ်ပိုင် Description နဲ့ attributes ပါဝင်ကြတယ်။

Tag	Description
<html>	root element လို့သတ်မှတ်ပါသည်။
<body>	Document's body လို့သတ်မှတ်ပါသည်။
<h1> to <h6>	Headings လို့သတ်မှတ်ပါသည်။

Example Code

Example Feed မှာ မှနှစ်မျိုး ထပ်ခွဲထားပါသေးတယ်။ အဲဒါတွေကတော့ အောက်ပါအတိုင်းဖြစ်ပါတယ်။

1. Example Feed : ဒါက Result ကိုပြပေးတဲ့ Example ပါ။
2. Example Code : ဒါက Code တွေကိုပြတဲ့ Example ပါ။

မြင်သာအောင် အောက်က ဥပမာများကိုကြည့်ပါ။

Example Feed

Hello Writer !

Try it Yourself !

Example Code

1. <h1>Hello Writer !</h1>

Try it Yourself !

---

Example Feed ကိုတော့ ရှေ့ကပိုစ့် Start Coding မှာ လေ့လာပြီး ဖြစ်ပါတယ်။

Example Code

Example Code များရေးဖို့အတွက် အောက်ပါ Stracture အတိုင်းရေးနိုင်ပါတယ်။

Example Code

1. <div class="mcg-example">

2.      <h3>Example Title</h3>       //For Example Title

3.      <div class="mcg-example-code">

4.          <ol>

5.              <li><pre><code> { ... Code Line 1 ... }  <li><pre><code>

6.              <li><pre><code> { ... Code Line 2 ... }  <li><pre><code>

7.              <li><pre><code> { ... Code Line 3 ... }  <li><pre><code>

8.          </ol>

9.      </div>

10.      <a herf="#" class="mcg-primary-btn">Try it Yourself !</a>

11. </div>

<ol> tag သုံးရတာကတော့ Code Line တွေရဲ့ ရှေ့မှာ နံပတ်စဉ်ဖေါ်ပြစေချင်လို့ ဖြစ်ပါတယ်။

ပြီးတော့ <li> ရဲ့နောက်မှာ <pre> လာတယ်။ ဒါကတော့ withe Space တွေကို ဖေါ်ပြချင်လို့ပါ။ Tab ခုန်တာ၊ Sapce ခြားတာတွေကို ဖေါ်ပြချင်လို့ပါ။

အဲဒီရဲ့ နောက်က <code> tag ကတော့ Code တွေရဲ့ color နှင့် Style နဲနဲထည့်ချင်လို့ပါ။ Code tag ကို paragraph ထဲတွေမှာလဲ အသုံးပြုနိုင်ပါတယ်။
အောက်မှာတော့ <code> tag အတွင်းမှာ အမြန်သုံးလို့ရမယ့် Color နဲ့ Style လေးတွေကို ဖေါ်ပြပေးလိုက်ပါတယ်။

• <code> အနီရောင်ရိုးရိုး </code>
• <code> <b> မီးခိုးရောင် </b></code>
• <code> <em> ပြာနုရောင် </em></code>
• <code> <em class="mcg-class"> စိမ်းနုရောင် </em></code>
• <code> <em class="mcg-html"> စိမ်းပြာနုရောင် </em></code>

HTML Basic

ဒီ chapter မှာတော့ ကျနော် HTML အခြေခံ ပြောပြပါမယ်

မလေ့လာရသေးရင် ပြဿနာမရှိပါဘူး အောက်မှာ အကုန်ရှင်းပြပေးသွားပါမယ်

HTML Documents

HTML file စရေးရင် အရင်ဆုံး <!DOCTYPE html> ဆိုပြီးကြေငြာရပါမယ်

ပြီးရင် <html> နဲ့စပြီး </html> နဲ့ပိတ်ပေးရပါမယ်

<html> tag ၂ခု ကြားထဲ့မှာ <body> </body> ဆိုပြီးကြေငြာရပါမယ်

Example

<h1>My First Element</h1>

<p>My First Paragraph</p>

Try it yourself

The <!DOCTYPE html> Declaration

<!DOCTYPE html> ကြေငြာခြင်းဖြင့် browsers ကို ဘယ် file ဖွင့်လဲဆိုတာ ပိုပြီးအကူအညီဖြစ်စေတယ်

<!DOCTYPE html>ကို <html> tag မကြေငြာခင်ခေါ်ရပါမယ် </ !DOCTYPE html > ဆိုပြီး လုပ်စရာမလိုပါ

<!DOCTYPE html> ကို ကြိုက်သလိုရေးရပါတယ် ဥပမာ- <!DoCtYpE hTmL>

Example

<!DOCTYPE html>

HTML Headings

HTML Headings က <h1> ကနေ <h6> ထိရှိပါတယ်

<h1> က အကြီးဆုံးဖြစ်ပြီး <h6> က အငယ်ဆုံးဖြစ်ပါတယ်

Example

<h1>This is Heading 1</h1>

<h2>This is Heading 2 </h2>

<h3>This is Heading 3 </h3>

<h4>This is Heading 4 </h4>

<h5>This is Heading 5 </h5>

<h6>This is Heading 6 </h6>

Try it yourself

HTML Paragraphs

HTML Paragraphs tag ကို <p> ဆိုပြီးကြေငြာရပါမယ်

Example

<p>This is paragraph</p>

<p>This is another paragraph</p>

Try it yourself

HTML Links

HTML Link tag ကို <a> ဆိုပြီးကြေငြာရပါမယ်

Example

<a>Link to Facebook</a>

<a>Link to Youtube</a>

Try it yourself

<a> ထဲမှာ href ဆိုပြီးရေးရပါမယ်

href(atttibute) က ဘယ် website ကို သွားစေချင်လဲဆိုတာ ညွန်ပြစေခြင်းဖြစ်ပါတယ်

target="_blank" ကတော့ new tab ဖြင့် website ကိုသွားစေချင်ဖြစ်ပါတယ်

atttibute အကြောင်းကို နောက် chapter တွေမှာ ရှင်းပြပေး သွားမှာဖြစ်ပါတယ်

HTML Images

HTML Paragraphs tag ကို <img> ဆိုပြီးကြေငြာရပါမယ်

Note-သူက အခြား tag တွေလို အပိတ် ထည့်စရာမလိုပါ

<img> အတွင်းမှာ src width hieght ဆိုတဲ့ atttibute တွေကိုထည့်ပေးရပါမယ်

• src - ကတော့ ကိုယ့်ထည့်မယ့် image လမ်း‌ကြောင်းကို ထည့်ပေးရပါမယ်
• width - Image အကျယ် ကိုဆိုပါတယ်
• height - Image အမြင့် ကိုဆိုပါတယ်

Example

<img src ="/Your File path/photo.jpg" >

Try it yourself

How to View HTML Source?

တစ်ခါတလေကျရင် အခြားသူ web page ရဲ့ code တွေကိုကြည့်ချင်တယ်မလား?

HTML Source Code ကိုကြည့်နည်:

Right click ကိုနှိပ်ပြီး "View Page Source" ကိုထပ်နှိပ်ပါ အဲ့အချိန်ကျရင် web page တစ်ခုလုံးရဲ့ code တွေကို တွေ့မြင်ရမှာဖြစ်ပါတယ်

HTML Element ကိုကြည့်နည်:

Right click ကိုနှိပ်ပြီ: "Inspect" သို့မဟုတ် "Inspect Element" အဲ့အချိန်ကျရင် element တစ်ခုအသေးစိတ် (HTML, CSS)ကို ဘာနဲ့လုပ်ထားလဲဆိုတာကို တွေ့မြင်ရမှာဖြစ်ပါတယ်

အဲ့ Element ကို ကျနော်တို့ edit လို့ရပါတယ် ဒါပေမယ့် web page refersh လုပ်လိုက်တဲ့အချိန် element တွေ နဂိုမူလအတိုင်းပြန်ဖြစ်သွားပါလိမ့်မယ်

Element Edit ကျနော်တို့ အစမ်း လုပ်တဲ့အချိန်မှာသုံးပါတယ်

Post to Blogger

ဘာတွေ ဘယ်လိုရေးရမလဲ၊ ဘယ်ကစာတွေ ရေးရမလဲ မသိရင် ဘယ်ဘက် Decumentation Menu ထဲက ပိုစ့် အားလုံးကို အစကနေ အဆုံး သေသေခြာခြာ ပြန်ဖတ်ပေးပါ။

---

Post To Blogger

ကဲ့ ... ခုတော့ Post အတွက် Code တွေနဲ့ စိတ်တိုင်းကျရေးပြီးပြီ။ စိတ်တိုင်းကျ CSS Style တွေ ထည့်ပြီးပြီး... ဆိုပါစို။

‌<div class="mcg-article"> ... </div> ထဲက Code တွေအကုန်ကို Copy ကူးလိုက်ပါ။

Blogger.com ထဲကိုသွားပြီး Login ဝင်ထားပါ။

ဘယ်ဘက် Menu ဘား အပေါ်ဆုံးက Myanamr Coder Guide ဆိုတာကို ရွေးထားတာဖြစ်ပါစေ။

အဲဒီအောက်က New Post ဆိုတာကို နှိပ်လိုက်ပါ။

‌Title ထဲမှာ ကိုယ့်ပိုစ့်ရဲ Title ကိုရေးထည့်ပါ။

Title Bar ရဲ့ အောက်က Tools Bar ရဲ့ ရှေ့ဆုံး icon ကို နှိပ်ပြီး HTML View ဆိုတာကို ရွေးပါ။

အဲဒီအောက်က အဖြူကွက်ကြီးထဲမှာ ခုဏက Copy ထားတဲ့ Code တွေကို Past လုပ်ပါ။

ညာဘက်က Label မှာ HTML Course ကို ရွေးပေးပါ။ (လောလောဆယ် HTML Course ကို တစ်ပုဒ်စီလောက် စမ်းရေးကြဦးလေ နော)

ပြီးရင် Publish လုပ်ပါ။

မြင်သာအောင် အောက်က ပုံကို ကြည့်ပါ။

Quick Start Guide

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

1. Blogger Account ဖွင့်တဲ့အပိုင်း
2. ဒီ Blog ကို ဘယ်လိုရေးနေကြသလဲ ဆိုတဲ့အပိုင်း
3. Coding ရေးတဲ့အပိုင်း
4. Blogger အသုံးပြုနည်းအပိုင်း

---

1. Blogger Account ဖွင့်ခြင်း

ဒီအပိုင်းကတော့ Blogger သုံးဖူးပြီးတဲ့ လူတွေဆိုရင်တော့ ကျွန်တော်ဘာမှ ပြောစရာမလိုပါဘူး။ Blogger မသုံးဖူးတဲ့သူတွေ အတွက်ပါ။

Stap တွေက ရှင်းပါတယ်။ Form ဖြည့်ခဲ့စဉ်က E-mail ကို ကျွန်တော်တို့ Blog က Invitation Mail တစ်စောင် ပို့မယ်။ အဲဒီမေးကို လက်ခံပြီးတော့ အကောင့် အသစ်ဖွင့်မယ်။ ဒါပါဘဲ။

ပြုလုပ်နည်း အဆင့်ဆင့်ကို Access To Blogger Invitation မှာ အသေးစိတ်လေ့လာနိုင်ပါတယ်။

---

2. ဒီ Blog ကို ဘယ်လိုရေးနေကြသလဲ

ဒီအပိုင်းမှာ‌တော့ နောက်ထပ် အကြောင်းအရာ နှစ်ခုကွဲသွားမယ်။

• ဒီဆိုက်မှာ Category တွေ ဘယ်လိုခွဲထားတယ်။ ကိုယ့် ပိုစ့်ကို ဘယ် Category ထဲမှာ ထည့်ရမလဲ။ Category ထဲထည့်တဲ့အခါ ဘယ် Label တွေကို ရွေးချယ်ရမလဲ ဆိုတာကို သိဖို့ဖြစ်ပါတယ်။
• နောက်တစ်ခုကတော့ ဒီ Blog မှာ သင်ခန်းစာတွေကို ဘယ်လို ခွဲဝေယူပြီး ရေးသားနေကြသလဲ ဆိုတာကို သိဖို့ ဖြစ်ပါတယ်။

ဒီအပိုင်းနဲ့ သက်ဆိုင်တဲ့ ပိုစ်တွေကတော့ အောက်ကအတိုင်းပါ။

1. SiteMap and Category
2. Course Outline Guide
3. Knowledge Post Guides

---

3. Coding ရေးတဲ့အပိုင်း

ဒီအပိုင်းမှာ‌တော့ အဓိကက ကျွန်တော်တို့ Blog မှာ သင်ခန်းစာတွေ အတွက် ရေးထားတဲ့ CSS Code တွေကို နားလည်ပြီး အသုံးပြုတတ်ဖို့ပါ။

Article CSS လေးကို ဖတ်ကြည့်လိုက်ရင်တော့ တော်တော်များများ နားလည်နိုင်ပါလိမ့်မယ်။ လူသစ်လေးတွေ အနေနဲ့ Libary တွေ ဖတ်တတ်တဲ့ အကျင့်ကိုလည်း ရသွားမှာပေါ့‌ဗျာ။ ဘယ်လောက်မှ အများပါဘူး။ CSS အကြောင်းရေ ၂၀၀ လောက်ဘဲ ရှိတာပါ။ အကြောင်း ၂၀၀ ဆိုတာ တော်တော်နည်း ပါတယ်။ ဖတ်ကြည့်ကြဖို့ တိုက်တွန်းပါတယ်။

ဒီအပိုင်းနဲ့ သက်ဆိုင်တဲ့ ပိုစ့်တွေကတော့ အောက်ပါအတိုင်းပါ။

1. Using CodePen
2. Before Coding
3. Start Coding
4. Example Code
5. Custom Post Feed
6. Featured Photo

---

Blogger အသုံးပြုနည်းများ

ဒီအပိုင်းကတော့ Blogger အသုံးပြုနည်း အားလုံးကို ရေးထားတာတော့ မဟုတ်ပါဘူး။ ကျွန်တော့တို့ Blog မှာ အသုံးပြုနိုင်ရုံအတွက်သာ ရေးထားတာဖြစ်ပါတယ်။

ဒီအပိုင်းနဲ့ သက်ဆိုင်တဲ့ ပိုစ့်တွေကတော့ အောက်ပါအတိုင်းပါ။

1. Post to Blogger
2. Upload Image to Blogger

Documentation ပိုစ့်တွေ အားလုံးကတော့ စိတ်တိုင်းကျ မပြီးသေးပါဘူး။ ပြင်ရဦးမှာတွေ ရှိသလို လုံးဝမရေးရသေးတဲ့ ပိုစ့်တွေလည်း ရှိသေးတယ်အတွက် နားလည်ပေးကြပါ။ လာမေးပေးကြပါလို့.......

ဒီလောက်ပါဘဲ။ ရေးထားတာတွေနဲ့ ပတ်သက်ပြီး မရှင်းလင်းတာရှိရင် Comment မှာ ဆွေးနွေးခဲ့နိုင်ပါတယ်။

Start Coding

Coding စရေးတဲ့အခါ အရေးအကြီးဆုံး စည်းကမ်းကတော့ <div class="mcg-article"> ... <div> ဒီထဲမှာဘဲ ရေးရပါမယ်။

Post တွေအတွက် အပြင်က ဒီ Div ရဲ့ အပြင်တွေမှာ လုံးဝ ပြင်စရာမလိုပါဘူး။ ကိုယ် စိတ်ကြိုက် CSS Style ထည့်ချင်တယ်ဆိုရင်လည်း inline Style ဖြစ်ဖြစ် <style> ... </style> tag သုံးပြီး Internal Style ဖြစ်ဖြစ် အဲဒီထဲမှာဘဲ ရေးပေးပါ။

ဖြစ်နိုင်ရင်တော့ ကိုယ်ပိုင် CSS Style တွေမလိုအပ်ရင် မထည့်ပါနဲ့ ။ Uniform ဖြစ်အောင်လို့ပါ။

အောက်က ပုံမှာလည်း မြင်သာအောင် ပြထားပါတယ်။

---

Heading Text

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

ဒါကြောင့် ဒီဇိုင်းစဉ်းစားတဲ့အခါ Main Header ရဲ့အောက်ကသာ စပြီး စဉ်းစားရမှာ ဖြစ်ပါတယ်။

ဒီ Post Content နေရာမှာ အဓိကအားဖြင့် <h2> နှင့် <h3> ကိုဘဲ အဓိကသုံးပေးရပါမယ်။ ကျန်တဲ့ heading tag တွေကို ဖြစ်နိုင်ရင် မသုံးပါနဲ့။ ဘာကြောင့်လဲ ဆိုတော့ Style မထည့်ရသေးလို့ပါ။ သင့်တော်သလို inline CSS ထည့်ပြီး သုံးမယ်ဆိုရင် အသုံးပြုနိုင်ပါတယ်။

<p> , <ul>, <ol>, <table>, <a> စတဲ့ အသုံးများနိုင်မယ့် Tag များအတွက် သင့်တော်တဲ့ Style များထည့်ပေးပြီးသားဖြစ်ပါတယ်။ ပုံမှန်ဘဲ အားလုံး‌ရေးသွားနိုင်ပါတယ်။

သို့သော် Style မပြင်ရသေးတဲ့ tag များလည်း များစွာကျန်သေးပါတယ်။ ဒါကြောင့် Style မပြင်ရသေးတဲ့ Tag များသုံးဖို့လိုလာပြီး ဆိုလျှင် inline CSS ထည့်ပြီး သုံးထားပေးပါ။ ပြီးရင် Myanmar Coder Guide Group ထဲမှာ အသိပေး, ပေးပါ။

---

Text Feed များ

ဒီထဲမှာ Text Feed နှစ်ခုဘဲ ထည့်ပေးထားပါတယ်။ အထူး သိမှတ်ဖွယ်ရာများအတွတွက် <div class="mcg-note"> ... <div> အတွင်းမှာ ထည့်သုံးနိုင်ပြီး၊ အသိပေးချက်များ အတွက်အတွက် <div class="mcg-notic"> ... <div> အတွင်းမှာထည့်သုံးနိုင်ပါတယ်။

<div class="mcg-note"> ... <div> အတွင်း ထည့်သုံးထားသော ဥပမာ ဖြစ်ပါတယ်။

<div class="mcg-notic"> ... <div> အတွင်း ထည့်သုံးထားသော ဥပမာ ဖြစ်ပါတယ်။

---

Example DIV

နောက်တစ်ခုကတော့ Example Feed ပါ။

Example မှာ အပိုင်း သုံးခုပါဝင်ပါတယ်။ အောက်ပါအတိုင်း ဖြစ်ပါတယ်။ မြင်သာအောင် အောက်က ပုံမှာ ကြည့်နိုင်ပါတယ်။

1. Example Title
2. Example Feed
3. Try it Yourselt! Button

ဒီ Feed ကြီးတစ်ခုလုံးကိုတော့ <div class="mcg-example"> ... </div> ထဲမှာ ထည့်ရေးပါတယ်။ Stracture က အောက်က Example Code အတိုင်းပါ။

Example Code

1. <div class="mcg-example">

2.      <h3>Example Title</h3>       //For Example Title

3.      <div class="mcg-example-feed"> {.. Example Feed Area code ..} </div>

4.      <a herf="#" class="mcg-primary-btn">Try it Yourself !</a>

5. </div>

Example DIV အကြောင်းကို နောက်အခန်းမှာ ပိုမိုလေ့လာရပါဦးမယ်။

Before Coding

ဒါကတော့ ကျွန်တော် ရေးနေတဲ့ ပုံစံကို ပြောပြတာပါ။ ဒါထက်ကောင်းတဲ့နည်းလမ်းတွေ သိရင်လည်း ကိုယ်စိတ်ကြိုက်ရေးသားနိုင်ပါတယ်။

---

ဘာတွေလိုအပ် သလဲ ?

1. Code Editor : Code Editor တစ်ခုခုလိုအပ်ပါတယ်။ ကျွန်တော်ကတော့ Visual Studio ssသုံးပါတယ်။
2. index.html ဆိုတဲ့ ဖိုင်လေးလိုပါတယ်။ ဒီဖိုင်လေးကတော့ ကျွန်တော်တို့ Blog မှာ မတင်ခင်မှာ ကျွန်တော်တို့ရဲ့ ပိုစ့်တွေကို Coding လုပ်ပြီး ဒီဇိုင်းတွေ ပြင်နိုင်ဖို့ဖြစ်ပါတယ်။
3. နောက်တစ်ခုကတော့ Internet ရှိဖို့လိုပါတယ်။ Coding ရေးနေစဉ်အတွင်းမှာလည်း Internet လိုအပ်ပါတယ်။ အကယ်လို့ Internet အခက်အခဲရှိတဲ့ နေရာကဆိုရင်လည်း လုပ်နိုင်တဲ့နည်းလမ်းတွေရှိပါတယ်။ ကျွန်တော့ Personal Account မှာ ဖြစ်ဖြစ် Writer Grop မှာဖြစ်ဖြစ် လာမေးလို့ရပါတယ်။

ဟုတ်ပါပြီ။ ဆို‌တော့ Code Editor အကြောင်းကိုတော့ မပြောတော့ပါ။

index.html ထဲက ကုဒ်လေးတွေကို ဘယ်လိုယူရမလဲ မပြောခင်မှာ Project Folder တွေ ဘယ်လိုထားမလဲ ဆိုတာလေး နဲနဲပြောပြပါတယ်။ Newbies တွေအတွက်ပေါ့နော်။

ကျွန်တော်လုပ်တဲ့ ပုံစံကတော့ ကိုယ်သုံးနေကြ Document Folder ထဲမှာ Mian Folder အနေနဲ့ Myanmar Coder Guide ဆိုပြီး Folder တစ်ခုဆောက်လိုက်တယ်။ Myanmar Coder Guide က ရှည်တယ်ထင်ရင် MM Coder Guide , MCG စသည်ဖြင့် ကိုယ် မှတ်မိတဲ့ပုံစံအတိုင်းပေးနိုင်ပါတယ်။

အဲဒီ Myanmar Coder Guide အောက်မှာမှ Tutorial Category တစ်ခုချင်းစီအလိုက် Folder ထပ်ဖွင့်ပါတယ်။ ဥပမာ - JS_Tutorials စသည်ဖြင့်ပါ။

အဲဒီ အောက်မှာမှ Tutorial Name နဲ့ html ဖိုင်တွေ ထားပါတယ်။ HTML file တွေကို Name ပေးတဲ့အခါ 001_ နဲ့စပြီး ပေးတယ်။ ကိုယ်ရေးတာလေး အစဉ်လိုက် ဖြစ်နေစေချင်လို့ပါ။ ဥပမာ -
001_JS Home.html
002_JS Intro.html - စသည်ဖြင့်ပါ။

အပေါ်က ပြောခဲ့တဲ့ index.html လေးကိုတော့ Main Folder ဖြစ်တဲ့ Myanamr Coder Guide ဆိုတဲ့အောက်မှာဘဲ ဖိုင်တစ်ခုဖွင့်လိုက်တယ်။

ဟုတ်ပါပြီ။ index.html ထဲကကုဒ်တွေက ဘယ်ကယူရမလဲ ? ဆိုရင် main index.html code ဒီလင့်ကနေကိုသွားပြီး ကုဒ်အားလုံးကို Copy ယူပြီး index.html ထဲမှာ Past လုပ်လိုက်ပါ။

ဘာကြောင့် ဒီ index.html လေးကို သုံးဖို့လိုတာလည်း ဆိုတော့။ ကျွန်တော်တို့ Online Blog မှာ မတင်ခင်မှာ ကိုယ့် Post တွေကို ဒီဇိုင်းလုပ်နိုင်ဖို့ အတွက် Main Website နဲ့ အနည်းငယ်တူအောင် ပြုလုပ်ပေးထားတဲ့ ဖိုင်လေး ဖြစ်လို့ပါ။

အဲဒီဖိုင်ထဲမှာ Main Website ကြီးမှာ သုံးထားတဲ့ CSS Code တစ်ချို့နဲ့ Link ချိတ်ပေးထားပါတယ်။ ဒါကြောင့် Coding ရေးတဲ့အချိန်မှာ Internet လိုပါတယ်လို ပြောခဲ့တာ ဖြစ်ပါတယ်။

Internet အခက်အခဲရှိတဲ့ နေရာမျိုးမှာဆိုရင်တော့ Update CSS ကို Copy လုပ်ပြီး Local တင် Link ချိတ်ပြီး အသုံးပြုနိုင်ပါတယ်။

အခက်အခဲတစ်စုံတစ်ရာရှိတယ် ဆိုရင် Comment မှာ ရေးပြီး ပြောပြခဲ့ပါ။

SiteMap and Category

ဒီအပိုင်းကတော့ Myanmar Coder Guide (MCG) က Writer တွေအတွက် Posts Categorys ခွဲထားပုံနှင့် ကိုယ့် Post ကို ဘယ် Label ထဲထည့်မယ်ဆိုတာ ဆုံးဖြတ်နိုင်စေဖို့ဘဲ ဖြစ်ပါတယ်။

ကျွန်တော်တို့ ဒီ Website မှာ အဓိကအပိုင်း (၄) ခုရှိပါတယ်။ အဲဒါတွေကတော့ အောက်ပါအတိုင်း ဖြစ်ပါတယ်။

• Tutorial Outline : ဒီအပိုင်းမှာတော့ သင်ခန်းစာအပြည့်အစုံကို အဖွဲက ဆုံးဖြတ်ထားတဲ့ Outline တွေအတိုင်း ရေးသားကြရမှာ ဖြစ်ပါတယ်။ Tutorial Outline Guide မှာ အပြည့်အစုံထပ်ဖတ်ပေးပါ။
• Hot To : ဒီအပိုင်းမှာတော့ ဘာတွေကို ဘယ်လိုလုပ်ရမယ်ဆိုတဲ့ သင်ခန်းစာတွေပါ။ ဥပမာ - How to make Mega Menu with CSS Only, How to make Responsive Menu with Bootstrap ဆိုတာမျိုးတွေပါ။
• Technology : ဒီအပိုင်းမှာတော့ Programing နဲ့ပတ်သတ်တဲ့ သတင်းတွေ။ WebServer အကြောင်းတွေ။ E-mail Server အကြောင်းတွေ။ Security နဲ့ပတ်သက်တဲ့ နည်းပညာတွေ။ အသုံးများတဲ့ Tools တွေရဲ့ နည်းပညာပိုင်းတွေ ကိုရေးသားရမှာပါ။
• Knowledge Article : ဒီအပိုင်းကတော့ လုံးဝ Freedome ဖြစ်ပါတယ်။ Programing နဲ့ သက်ဆိုင်တဲ့ ဘယ်လို Post မျိုးကိုမဆိုရေးသားနိုင်ပါတယ်။

---

Label ခွဲခြင်း

Course Outline ရေးသားသူများနှင့် How to Section အတွက် ရေးသားသူများက Label အသစ်တွေ မဖန်တီးကြပါနဲ့။ ရှိပြီးသား Label ထဲကဘဲ ရွေးချယ်ပေးကြပါ။

Knowledge Sharing လုပ်သူများကတော့ ကိုယ့်ပိုစ့်နဲ့ ကိုက်ညီတဲ့ Label အသစ်များဖြင့် ရေးသားနိုင်ပါတယ်။

Tutorial Outline များအတွက် Label ပေးခြင်း

Tutorials Outline များအတွက် Label ပေးတဲ့အခါမှာ Lunguage Course ဆိုပြီး ပေးပါတယ်။ ဒီအတွက် Label တွေက အဆင်သင့်ရှိပြီးသားတွေ ဖြစ်မှာပါ။ ကိုယ်က ရွေး‌ပေးလိုက်ယုံပါဘဲ။

ဥပမာ -

• HTML Course
• CSS Course
• JavaScript Course
• စသည်ဖြင့်....

How to အတွက် Label ပေးခြင်း

ဒီအပိုင်းမှာတော့ Lunguage HowTo ဆိုပြီးပေးရပါမယ်။ ကိုယ့် သင်ခန်းစာက ဘယ် Programing Language အတွက် အဓိကလည်း ဆိုတာ ကိုယ်ဘာကို ဆံုးဖြတ်ပြီး ရွေးခြယ်ပါ။ ကိုယ့် Language နဲ့ HowTo Label ရှိပြီးသားဆိုရင် အသစ်မပေးပါနှင့် ရှိပြီးသားကိုဘဲ ရွေးခြယ်ပေးပါ။

ဥပမာ -

• HTML HowTo
• CSS HowTo
• JavaScript HowTo
• စသည်ဖြင့်....

ဒါက Label ရွေးတဲ့အပိုင်းပါ။ Post Title ကိုတော့ How to နဲ့စပြီး ကိုယ့်စိတ်ကြိုက်ပေးနိုင်ပါတယ်။

How To ထဲက နောက်ထပ် အပိုင်းကြီး တစ်ပိုင်းကတော့ How to Fix ပါ။ How to Fix အပိုင်မှာဆိုရင် ပြဿနာတစ်ခုကို ဘယ်လို ဖြေရှင်းတယ်ဆိုတာတွေ ရေးချင်တဲ့အခါ How to Fix Label ကိုရွေးပေးပါ။ ဒါကလည်း How to နဲ့အတူတူပါဘဲ။ Lunguage HowToFix ဆိုတဲ့ Label ကိုရွေးခြယ်ပေးပါ။ Language ကတော့ ကိုယ် သင်ခန်းစာနဲ့ သက်ဆိုင်တဲ့ Language ကိုရွေးပေးပါ။

Post Title ကိုတော့ How to Fix နဲ့စပြီး ကိုယ်စိတ်ကြိုက်ပေးနိုင်ပါတယ်။

ဥပမာ -

• HTML HowToFix
• CSS HowToFix
• JavaScript HowToFix
• စသည်ဖြင့်....

Technology နှင့် Knowledge များအတွက် Label ပေးခြင်း

Technology နှင့် Knowledge ပိုင်းတွေကတော့ Freedome ဖြစ်ပါတယ်။

ဒီအပိုင်းက အကြောင်းအရာတွေကို ရေးသားတဲ့အခါ Label နှစ်ခုအနည်းဆုံး တတ်ပေးပါ။ ပထမတစ်ခုကိုကိုတော့ Knowledge (or) Technology ထဲက တစ်ခုခုကို ရွေးချယ်‌ပေးပါ။ နောက်တစ်ခုကိုတော့ ကိုယ်နဲ့ သက်ဆိုင်မယ်ထင်တဲ့ ကိုယ်ရာ Label ရွေးချယ်ပေးပါ။ နှစ်ခုထက် ပိုပြီးရွေးချယ်ရင်လည်း ပြဿနာမရှိပါဘူး

ဒီအပိုင်းအတွက် Label အသစ်တွေ အသစ်ဖန်တီးမယ်ဆိုရင်လည်း လွတ်လွတ်လပ်လပ် ဖန်တီးနိုင်ပါတယ် ဒါပေမယ့် ဖန်တီးပြီးသွားရင် Myanmar Coder Guide Group မှာ တစ်ချက် အသိပေး ပေးပါ။ ဒါမှ Menu တွေထဲမှာ အသစ်ထပ်ထည့်နိုင်မှာ ဖြစ်ပါတယ်။

Technology နှင့် Knowledge ကို ဘာကြောင့် နှစ်ပိုင်းခွဲလိုက်တာလဲ ဆိုတာလေးကို နဲနဲလေးရှင်းပြချင်ပါတယ်။

Varsion Control System တွေအကြောင်း အကြမ်းဖျင်း ရှင်းပြတာမျိုး၊ Git မသုံးရင် ဖြစ်တတ်တဲ့ ပြဿနာတွေအကြောင်း ရေးတာမျိုး၊ Git သုံးသင့်တဲ့ အကြောင်း ရေးတာမျိုးတွေကို Knowledge လို သတ်မှတ်ပါမယ်။

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

နောက်တစ်ဆင့် အနေနဲ့ Git ကို ဘယ်လိုသုံးရတယ် ဆိုတာကို Detail Sharing လုပ်မယ်ဆိုရင်တော့ How to (သို့မဟုတ်) Course ထဲကို ထည့်ပါမယ်။

ဒီလောက်ဆို ကိုယ်ရေးတဲ့ အကြောင်းအရာက ဘယ် Level လောက်ရှိမယ်ဆိုတာ ဆုံဖြတ်နိုင်မယ်ထင်ပါတယ်။

Technoligy နှင့် Knowledge အပိုင်းက Label တွေက တင်းတင်းကျပ်ကျပ်ကြီး မဟုတ်ပါဘူး။ ကိုယ့် ပိုစ့်က ဘယ် Level လဲဆိုတာ ကိုယ်တိုင်သာ ဆုံးဖြတ်ပါ။

How to အနေနဲ့ Mini Series ရေးမယ်ဆိုရင် လွတ်လွတ်လပ်လပ် ရေးသားနိုင်ပါတယ်။ တင်းတင်းကျပ်ကျပ် မရှိပါဘူး။

Course အနေနဲ့ ရေးချင်တယ်ဆိုရင်တော့ Myanmar Coder Guide မှာ အရင်ဆုံး ဆွေး‌နွေးပြီးမှ သာရေးသားပေးကြပါ။

သင်တန်းကြော်ညာ ပိုစ်တွေ ရေးခွင့်မပေးပါဘူး။

ဒါပေမယ့် Knowledge or Technology အကြောင်းကို သေသေခြာခြာလေးရေးတယ်။ ပြီးသွားမှ သင်တန်းကြော်ညာကို အောက်ဆုံးမှာ စာကြောင်း လေး၊ ငါး ကြောင်းလောက်ရေးမယ်ဆိုရင်တော့ ခွင့်ပြုပါတယ်။

JS Syntax

JavaScript Syntax ဆိုတာကတော့ JavaScript ကို ဘယ်လိုရေးရမယ်ဆိုတဲ့ စည်းကမ်းတွေဘဲဖြစ်ပါတယ်။

---

JavaScript Value

JavaScript Syntex မှာ Value နှစ်မျိုးရှိပါတယ်။ အဲဒါတွေကတော့ -

1. Fixed Value
2. Variable Value

- တို့ဘဲ ဖြစ်ပါတယ်။

Fixed Value တွေကို Literal လို့ခေါ်ပါတယ်။

Varialbe Value တွေကိုတော့ Variables လိုခေါ်ပါတယ်။

---

JavaScript Literal

Fixed Value ဆိုတာကတော့ တန်ဖိုးပြောင်းလဲလို့ မရတဲ့ Value ကြေညာခြင်းတွေဘဲ ဖြစ်ပါတယ်။

Fixed Value ရဲ့ အရေးအကြီးဆုံး စည်းကမ်း နှစ်ခုရှိပါတယ်။ အဲဒါတွေကတော့ အောက်ပါအတိုင်းဖြစ်ပါတယ်။

1. Numbers : ကိန်းဂဏန်းတွေ တွေရေးတဲ့အခါမှာ ဒသမကိန်းပါသည်ဖြစ်စေ၊ မပါသည်ဖြစ်စေ ဒီအတိုင်းရေးနိုင်ပါတယ်။

Example Code : JS Literal

1.  10.5

2.  1004

2. Strings : Strings ဆိုတာကတော့ စာသားတွေကို ဆိုလိုပါတယ်။ စာသားတွေရဲ့အခါမှာတော့ Double Quote (") or Single Quote (') အတွင်းမှာ ထည့်ပြီးရေးရပါတယ်။

Example Code : JS Literal

1.  "Zayar Aung"

2.  "JavaScript Leaning"

---

JavaScript Variable

Programing Language တွေတိုင်းမှာ Variable ဆိုတာရှိပါတယ်။ Variable ဆိုတာကတော့ Data Value တွေသိမ်းဆည်းဖို့အတွက် အသုံးပြုရတာပါ။

Variable တွေရဲ့ Value ဟာ ပြောင်းလဲနိုင်တဲ့အရာတွေဘဲ ဖြစ်ပါတယ်။

Variable တွေရေးတဲ့အခါမှာ အဆင့်နှစ်ခုရှိပါတယ်။ အဲဒါကတော့ Variable ကြေညာတာနဲ့ Variable တန်ဖိုးသတ်မှတ်တာဘဲ ဖြစ်ပါတယ်။ နှစ်ဆင့်လုံးကို တစ်ပြိုင်ထည်းလုပ်ရင်လည်း လုပ်နိုင်ပါတယ်။

Variable ကြေညာတဲ့အခါမှာ var keyword ကိုအသုံးပြုရပါတယ်။

တန်ဖိုး သတ်မှတ်ဲ့အခါမှာ‌တော့ Equal Sign ( = ) ကိုအသုံးပြုရပါတယ်။

Example Code : JS Variable

1. var  x;     //Declear Varialbe

2. x = 10;      //Assign Value

3. var x = 10; //Declear and Assign Variable

Try it Yourself!

---

JavaScript Operator

JavaScript တွေမှာ တွက်ချက်မှုတွေ ပြုလုပ်ဖို့အတွက် Arithmetic Operator (+ - * /) များကို အသုံးပြုပါတယ်။

JavaScript မှာ တန်ဖိုးတွေသတ်မှတ်ဖို့အတွက်‌တော့ Assigment Operator ( = ) ကို အသုံးပြုပါတယ်။

Example Code

1. (5 + 6) * 8;

2. var = a = 5, b = 6, c;

3. c = a + b;

Try it Yourself!

---

JavaScript Expressions

Values တွေ၊ Variable တွေ၊ Operator တွေပါဝင်ပြီး တွက်ချက်အဖြေထုပ်နိုင်တဲ့ ကုဒ်အစုကိုတော့ Expressions လိုခေါ်ပါတယ်။

ဒါကို တွက်ချက်ဖြေရှင်းခြင်းကို တော့ Evaluation လို့ခေါ်ပါတယ်။

အောက်က ဥပမာအားဖြင့်, 5 * 10 Evalute to 50 ပေါ့ဗျာ။

Example Code

1. 5 * 10

Expression ထဲမှာ Variable တွေလည်း ပါဝင်နိုင်ပါတယ်။

Number နှင့် String Data များလည်း ပါဝင်နိုင်ပါတယ်။

Example Code

1. x * 10;

2. "Zayar" + " " + "Aung";

---

JavaScript Keyword

Keyword တွေဟာ ဆိုရင် ဘာလုပ်ရမယ်ဆိုတာကို သတ်မှတ်ပေးတဲ့အရာတွေဖြစ်ပါတယ်။

var Keyword ဟာ Variable ဖန်တီးဖို့ Browser ကိုပြောတာဖြစ်ပါတယ်။

---

JavaScript Comments

JS Statement

Example Code

1. var x, y, z;    //Statement 1

2. x = 5;          //Statement 2

3. y = 6;          //Statement 3

4. z = x + y;      //Statement 4

JavaScript Programs

Computer Program ဆိုတာဟာ ကွန်ပျူတာ "ဘာတွေလုပ်ဆောင်ရမယ်" ဆိုတဲ့ "ညွှန်ကြားချက်" တွေကို စုစည်းထားတဲ့ အစုအဝေးတစ်ခုဖြစ်ပါတယ်။

အဲဒိ "ညွန်ကြားချက်" တွေကို "Statement" လိုခေါ်ပါတယ်။

Program ဆိုတာကတော့ အဲဒိ Statement တွေစုစည်းထားတာကို ခေါ်တာဘဲ ဖြစ်ပါတယ်။

---

JavaScript Statement

JavaScript Statement တစ်ခုမှာ အောက်ပါ အစိတ်အပိုင်းတွေ ပါဝင်ပါတယ်။

Values, Operators, Expressions, Keywords and Comments.

Statement တွေကို ရေးထားစဉ်က အတိုင်း တစ်ကြောင်းပြီး တစ်ကြောင်းအလုပ် လုပ်သွားပါတယ်။

---

Semicolons (;)

JavaScript Statement တစ်ခုနှင့် တစ်ခုကို Semicolon (;) က ပိုင်းခြားပေးပါတယ်။

Semicolon (;) ကို JS Statemnt တွေရဲ့ နောက်ဆုံးမှာ ထည့်ပေးရပါမယ်။

Example Code

1. var ‌a, b, c;    //Declear 3 Variable

2. a = 5;          //Assign to value 5 to a

3. b = 6;          //Assign to value 6 to b

4. c = a + b;      //Assign to sum of a and b to c

တစ်ခုထက်ပိုတဲ့ Statement တွေ စာတစ်ကြောင်းထဲမှာ ရှိနေရင်လည်း Semicolon (;) ကအလုပ်လုပ်ပါတယ်။

Example Code

1. var ‌a, b, c;; a = 5; b = 6; c = a + b;

ပုံမှန်အားဖြင့်တော့ Semicolon (;) တွေမရေးထည့်ရင်လည်း Webpage မှာ ကောင်းကောင်းအလုပ်လုပ် ပါတယ်။

ဒါပေမယ့် Semicolon (;) တွေထည့်ရေးတာဟာ ကောင်းတဲ့အလေ့အကျင့် တစ်ခုပါ။ ကုဒ်ဖတ်ရတာနဲ့ နောက်ပိုင်း ပြန်ပြင်ဆင်ရတာတွေမှာ အထောက်အကူဖြစ်ပါတယ်။

---

JavaScript White Space

White Space ဆိုတာက ကုဒ်တွေရေးတဲ့အခါမှာ ရှင်းရှင်းလင်းလင်း မြင်ရအောင် ရေးတဲ့ Space တွေ၊ Tab တွေကို ခေါ်တာဖြစ်ပါတယ်။

JavaScript ဟာ White Space တွေကို ကျော်ပြီး အလုပ်လုပ်ပါတယ်။ ဒီတော့ ဖတ်လို့အဆင်ပြေအောင် သင့်စိတ်ကြိုက်ရေးသားနိုင်ပါတယ်။

ဒီအောက်က ကုဒ် နှစ်ခုဟာ အတူတူဘဲ အဖြေထွက်ပါတယ်။

1. var person = "Zayar Aung";

2. var person="Zayar Aung";

Operator (= + - * / ) များရဲ့ ရှေ့နှင့် နောက်မှာ Space ခံထားခြင်းဟာ အလေ့အကျင့်ကောင်းတစ်ခု ဖြစ်ပါတယ်။

1. var a = 5 + 6;

---

JavaScript Code Blocks

JavaScript Statement တွေများစွာကို Code Block ထဲမှာထည့်ပြီးတော့ အုပ်စုဖွဲထားနိုင်ပါတယ်။ အုပ်စုဖွဲ့တဲ့အခါမှာ Carly Brckets {...} ကို အသုံးပြုပါတယ်။

Code Block တွေသုံးရတဲ့ ရည်ရွယ်ချက်ကတော့ အတူတကွ အလုပ်လုပ်ဆောင်မယ့် JS Statement တွေကို သီသန့် ခွဲထုပ် အုပ်စုဖွဲထားဖို့ဘဲ ဖြစ်ပါတယ်။

ဥပမာ အားဖြင့် ပြောရမယ်ဆိုရင်တော့ JS Function တွေမှာ Code Block တွေကို တွေ့နိုင်ပါတယ်။

Example Code

1. function myFunction(){

2.      document.getElementById("demo1").innerHTML = "Hello Dolly!";

3.      document.getElementById("demo2").innerHTML = "How are you?";

4. }

Try it Yourself!

ဒီပေ့မှာ‌တော့ Code Block ဆိုတာ အတူအလုပ်လုပ်‌‌ဆောင်ရမယ့် ကုဒ်တွေကို အုပ်စုဖွဲလိုက်တယ်။ အဲဒီလို အုပ်စုဖွဲဖို့အတွက် Carly Brackets {...} ကိုသုံးတယ် ဆိုတာ သိရင် ရပါပြီ။

JS Function တွေအကြောင်းကို နောက်အခန်းတွေမှာ ပိုမိုလေ့လာရပါဦးမယ်။

---

JavaScript Keywords

နောက်ပိုင်းမှာ JavaScript Keywords တွေကို အသေးစိတ် လေ့လာရပါမယ်။ ဒီပေ့မှာတော့ ရင်းနှီးယုံသာ ကြည့်ထားရင်ရပါပြီ။

JavaScript Keywords အပြည့်အစုံစာရင်းကို ကြည့်လိုတယ်ဆိုရင် တော့ JavaScript Keyword List မှာကြည့်ရှုနိုင်ပါတယ်။

အောက်ကတော့ အသုံးများတဲ့ JS Keywords List ဘဲဖြစ်ပါတယ်။

Keyword	Description
break	Switch တွေ၊ Loop တွေကို ရပ်တန့်စေဖို့အတွက်သုံး
continue	Loop တွေထဲကနေ ထွက်ခွာသွားဖို့နှင့် အစကနေ ပြန်စဖို့အတွက်သုံး
debugger	Stops the execution of JavaScript, and calls (if available) the debugging function
do...while	Executes a block of statements, and repeats the block, while a condition is true
for	Marks a block of statements to be executed, as long as a condition is true
function	Declares a function
if...else	Marks a block of statements to be executed, depending on a condition
return	Exits a function
switch	Marks a block of statements to be executed, depending on different cases
try...catch	Implements error handling to a block of statements
var	Declares a variable

JavaScript Keyword ကို Veriable Name , Function Name များအဖြစ် အသုံးပြုလို့ မရပါဘူး။

JS Output

JavaScript Display Possibilities

JavaScript ဖြင့် Data တွေဖေါ်ပြရာမှာ အောက်ပါနည်း အမျိုးမျိုးဖြင့် ဖေါ်ပြနိုင်ပါတယ်။

1. innerHTML ကိုအသုံးပြု၍ HTML Tag တွေထဲကို ရေးချခြင်း။
2. document.write() ကိုအသုံးပြု၍ HTML Code များအဖြစ် ရေးချခြင်း။
3. window.alert() ကိုအသုံးပြု၍ Alert Box အဖြစ် အသုံးပြုခြင်း။
4. console.log() ကိုအသုံးပြု၍ Browser Console ထဲသို့ရေးချခြင်း။

---

innerHTML အသုံးပြုခြင်း

HTML Element ကို သတ်မှတ်ဖို့အတွက် document.getElementById("id") ကို အသုံးပြုနိုင်ပါတယ်။

"id" ရှိတဲ့ html Element ကို သတ်မှတ်ပေးပါတယ်။ innerHTML ကတော့ HTMl Content ကို သတ်မှတ်ပေးတဲ့ Property ဖြစ်ပါတယ်။

Example Code

1. <!DOCTYPE HTML>

2. <html>

3.   <body>

4.       <h1>My First Web Page</h1>

5.       <p>My First Paragraph</p>

7.       <p id="demo"></p>

9.       <script>

10.          documnet.getElementById("demo").innerHTML = 5+6;

11.       </script>

12.   </body>

13. </html>

Try it Yourself !

Code ရှင်းလင်းချက်

• Line 7 မှာဆိုရင် ဘာ Content မှ မရှိတဲ့ id="demo" နဲ့ <p> tag တစ်ခုရှိပါတယ်။
• Line 9 and line 11 မှာဆိုရင် <script> အဖွင့်နှင့် အပိတ် အသီးသီးရှိကြပါတယ်။
• line 10 မှာတော့ JavaScript Code ရှိပါတယ်။
• line 10 မှာ document.getElementById("demo") ဆိုတာက id="demo" ရှိတဲ့ element ကို ရွေးချယ်လိုက်တာဖြစ်တယ်။ ဒီတော့ line 7 က <p id="demo"> ကိုရွေးချယ်လိုက်တာ ဖြစ်ပါတယ်။
• line 10 မှာ နောက်က innerHTML = 5+6; ကတော့ ရွေးချယ်တားတဲ့ element ထဲမှာ 5+6 ကိုရေးချမယ်လို့ ဆိုတာဖြစ်တယ်။ ဒီတော့ အဖြေ 11 ကို Output ထုပ်ပေးတယ်။

documnet.getElementById("demo").innerHTML = 5+6;
ရဲ့ အဓိပ္ပါယ်က id="demo" ရှိတဲ့ Element ထဲမှာ 5+6 ကို ‌ရေးထည့်မယ် လို့ ဆိုလိုတာဖြစ်တယ်။

innerHTML ဟာ အလွန်အသုံးများတဲ့ ပုံစံဖြစ်ပါတယ်။

---

documnet.write() အသုံးပြုခြင်း

document.write() ကို ကုဒ်စမ်းသတ်တာမျိုးတွေအတွက်ဘဲ အသုံးများပါတယ်။ တကယ့် Real World မှာ အသုံးနည်းတဲ့ ကုဒ်ပါ။

Example Code

1. <!DOCTYPE HTML>

2. <html>

3.   <body>

4.       <h1>My First Web Page</h1>

5.       <p>My First Paragraph</p>

7.       <script>

8.          documtne.write(5+6);

9.       </script>

10.   </body>

11. </html>

Try it Yourself !

document.write() ကို Event တွေနဲ့ တွဲသုံးတဲ့အခါ html file ထဲက Content တွေအားလုံးကို ဖျက်ပြီး အစားထိုးလိုက်ပါတယ်။

Try if Yourself ! ကိုနှိပ်ပြီး မြင်သာအောင် ကြည့်ပါ။

Example Code

1. <!DOCTYPE HTML>

2. <html>

3.   <body>

4.       <h1>My First Web Page</h1>

5.       <p>My First Paragraph</p>

7.          <botton onclick="documtne.write(5+6);">Try it !</botton>

8.   </body>

9. </html>

Try it Yourself !

---

window.alert() အသုံးပြုခြင်း

window.alert() ကို Alert Box တွေဖန်တီးရာမှာ အသုံးပြုပါတယ်။

Example Code

1. <!DOCTYPE HTML>

2. <html>

3.   <body>

4.       <h1>My First Web Page</h1>

5.       <p>My First Paragraph</p>

7.       <botton onclick="window.alert('Hello JavaScripter !');">Alert Now !</botton>

8.   </body>

9. </html>

Try it Yourself !

window keyword ကို မရေးရင်လည်းရပါတယ်။

JavaScript မှာ window object ဟာ Global Scope ဖြစ်တယ်။ ဒါက ဘာကို ဆိုလိုတာလည်း ဆိုတော့ ပုံမှန်အားဖြင့် Variable တွေ၊ properties တွေ၊ method တွေ အားလုံးဟာ window object ရဲ့ အောက်မှာရှိတယ်။ ဒီတော့ window ဆိုတာကို ထည့်မရိုက်လည်း ရပါတယ်။

ဒီတော့ အောက်ကလို ပြောင်းရေးရင်လည်း အတူတူပါဘဲ။

Example Code

1.       <botton onclick="alert('Hello JavaScripter !');">Alert Now !</botton>

---

console.log() အသုံးပြုခြင်း

console.log() ကိုတော့ Debugging လုပ်ဖို့အတွက် အသုံးပြုကြတာဖြစ်ပါတယ်။ Debugging ဆိုတာကတော့ Error ရှာတဲ့အပိုင်းတွေမှာ အသုံးဝင်တာဘဲ ဖြစ်ပါတယ်။

console.log() ကိုအသုံးပြုတဲ့အခါမှာ Browser ထဲက Console ထဲမှာဘဲ log အဖြစ်နဲ့ ပြပေးမှာဖြစ်လို့ User တွေအနေနှင့် မြင်နိုင်မှာ မဟုတ်ပါဘူး။

Debugging အကြောင်းကို နောက်အခန်းတွေမှာ ပိုမိုလေ့လာရပါဦးမယ်။

Example Code

1. <!DOCTYPE HTML>

2. <html>

3.   <body>

5.       <script>

6.          console.log(5+6);

7.       </script>

8.   </body>

9. </html>

Try it Yourself !

---

JavaScript Print

JavaScript မှာ Print Object ရော Print Method ရော မရှိပါဘူး။

Output Device တွေကို JavaScript ကနေ မခိုင်းစေနိုင်ပါဘူး။

Print လုပ်နိုင်ဖို့ အတွက် ကတော့ Browser မှာပါဝင်တဲ့ window.print() Method ကို ခေါ်သုံးတာဘဲ ဖြစ်ပါတယ်။

Example Code

1. <!DOCTYPE HTML>

2. <html>

3.   <body>

4.       <botton onclick="window.print();">Print Now !</botton>

5.   </body>

6. </html>

Try it Yourself !

HTML Home

• HTML ဟာ Webpage တွေအတွက် Standard Markup Language တစ်ခုဖြစ်ပါတယ်။
• HTML ဟာ Website ရေးဆွဲခြင်းအတွက် အခြေခံအကျဆုံး Language တစ်ခုဖြစ်တယ်။
• HTML ဟာ သင်ကြားရလွယ်ကူတဲ့ Language တစ်ခုဖြစ်လို့ ပျော်ရွင်လွယ်ကူစွာ သင်ကြားနိုင်ပါတယ်။

"Try it Yourself!" ကို အသုံးပြုပါ

HTML Code များကို လေ့ကျင့်၊ လေ့လာနိုင်ဖို့ "Try it Yourself!" ခလုပ်ကိုနှိပ်ပြီး Codepen မှာ Code တွေရေးနိုင်တယ်။ Result ကိုချက်ချင်း ကြည့်နိုင်ပါတယ်။

Example

1. <!DOCTYPE html>

2. <html>

3.      <head>

4.      </head>

5.      <body>

7.          <h1>This is a Heading.</h1>

8.          <p>This is a Paragraph.</p>

9.      </body>

10. </html>

Try it Yourself!

"Try it Yourself!" ခလုပ်ဘယ်လို အလုပ်, လုပ်သလဲ သိရဖို့ နှိပ်ကြည့်လိုက်ပါ။

---

HTML Example

ဒီ Tutorial အတွင်းမှာ HTML Example ပေါင်း 200 ခန့်ကို "Try it Yourself!" ခလုပ်ကို နှိပ်ပြီးလေ့လာနိုင်မှာ ဖြစ်ပါတယ်။ အဲဒီ Codepen ပေါ်မှာ Example တစ်ခုချင်းစီကို သင်ကိုယ်တိုင် ပြင်ဆင်ရေးသားခြင်း၊ စမ်းသတ်ခြင်းများပြုလုပ်နိုင်မှာ ဖြစ်ပါတယ်။

---

HTML Refrence

ကျွန်တော်တို့ Myanmar Coder Guide မှာ HTML refrence များအားလုံးကို တစ်ခုတစ်စည်းထဲ ကြည့်ရှုနိုင်အောင် စီစဉ်ပေးထားပါတယ်။

• HTML Element
• Browser Support
• Attributes
• Global Attributes
• Event Attributes
• Color Name
• Canvas
• Auidio/Video DOM
• Character Set
• URL Encoding
• Language Codes
• Country Codes
• HTTP Messages
• Px to Em Conveter
• Keyboard Shortcut

ကျွန်တော်တို့ Blog များရေးသားဆဲ ဖြစ်လို့ Link များ အလုပ်မလုပ်သေးရင် စောင့်ဆိုင်းပေးကြပါခဗျာ။ သိပ်မကြာခင်မှာ ပြည့်စုံစွာတင်ပေးနိုင်ဖို့ ကြိုးစားနေပါတယ်ဗျာ....

---

အကြံပေး၊ ဆွေး‌နွေး၊ မေးမြန်းလိုတာများရှိရင် Comment မှာရေးခဲ့ပေးပါ။