Showing posts with label IT Notes. Show all posts
Showing posts with label IT Notes. Show all posts

Thursday, December 27, 2012

Blog လုပ္နည္း (ဇြဲကပင္ေျမ မွ ကူးယူေဖာ္ျပသည္)

From http://www.amyokaungtarr.com/2012/09/blog.html


1. မိမိမွာ Gmail Account တစ္ခုရွိၿပီး၊ ျမန္မာလိုစာစီနိုင္ရန္အတြက္ ZawGyi ( fount) တစ္ခုရွိၿပီး၊ ျမန္မာလိုစာစီနိုင္ရန္အတြက္ ZawGyi Font ကိုလည္း Install ၿပီးခဲ့ၿပီဆိုရင္ Blog တစ္ခုကို စတင္ဖန္တီး နိုင္ၾကပါၿပီ။


Blog တစ္ခုတည္ေဆာက္ဖို႔ရန္ လုပ္ေဆာင္ရမည့္အဆင့္မ်ားကို ေဖာ္ျပပါ ေခါင္းစဥ္မ်ားျဖင့္ ေဖာ္ျပသြားပါမယ္။

(Step 1) Sign in to blogger

Step 2) Display name (or) Author name
Step 3) Name your blog
Step 4) Choose your template Step
5) Publish your first pest
မွတ္ခ်က္။ ။ ထိုအဆင့္မ်ားၿပီးဆုံးလ်င္ ဘေလာ့တစ္ခုကို ရရွိၿပီ ျဖစ္ပါသည္။
Step1) Sign to Blogger မိမိ Gmail Account တစ္ခုရွိၿပီဆိုရင္ Blog တစ္ခုဖန္တီးရန္အတြက္ www.blogger.com မွာ Sign in တစ္ခုလုပ္ရပါမယ္။

သြားပုံက Browser program တစ္ခုျဖစ္တဲ့ IE (0r) Mozilla ၏ Address bar တြင္
www.blogger.com ဟု ရိုက္ထည့္ၿပီး Enter key ကိုႏွိပ္ပါ။
Blogger home page ၏ အေပၚညာဘက္ေထာင့္တြင္ “ sign in area ” ၏ အေပၚရွိ Language တြင္ English ျဖစ္ရပါမယ္။ Email Address (ဥပမာ- username@gmail.com) ၊ Password ေနရာတြင္ ၄င္း Email password တို႔ကို ရိုက္ထည့္ပါ။ ၿပီးလ်င္ Keyboard မွ Enter ကိုႏွိပ္ပါ (သို႔) Sign in တြင္ Click ႏွိပ္ပါ။

Step 2) Display Name (0r) Author Name မိမိထည့္သြင္းသည့္ Email ႏွင့္ Password တို႔ မွန္ကန္ပါက Signup လုပ္ဖို႔ရန္ ေတာင္းခံပါလိမ့္မည္။


Display name ေနရာတြင္ မိမိႏွစ္သက္ရာ အမည္ကို ရိုက္ထည့္ပါ။ ဒီေနရာမွာ ထည့္သြင္းေပးလို္က္တဲ့ အမည္ကို Blog မွာတင္သမ် Post တို႔၏ ေအာက္ေျခတြင္ ေဖာ္ျပမွာ ျဖစ္ပါတယ္။ သေဘာက Post မွာ ေရးသူ (သို႔)ကေလာင္အမည္ျဖစ္ပါတယ္။ သည့္အတြက္ အမည္ဝွက္ႏွင့္ ေရးခ်င္ရင္ မိမိအမည္ရင္း အစားအျခားအမည္ဝွက္ တစ္ခုထည့္သြင္းရပါမည္။


Display name ထည့္သြင္းခဲ့ၿပီးၿပီဆိုရင္ ေရွ႕ဆက္သြားဖို႔ရန္အတြက္ Blogger မွ ထုတ္ျပန္ေသာ Term of Service ေတြကို လက္ခံသေဘာတူရပါမယ္။ Trem of service ေဘးရွိ Check box တြင္ အမွန္ျဖစ္ေပၚေအာင္ Click တခ်က္ႏွိပ္ပါ။ ၿပီးလ်င္ Button တြင္ Click ႏွိပ္လိုက္ပါ။


မွတ္ခ်က္။ ။ ယခုထည့္ေပးခဲ့သည့္ Display name အတိုင္းပင္ အျမဲတမ္းသုံးရေတာ့မည္ဟု မစိုးရိမ္ပါႏွင့္။ Blog တစ္ခု အစအဆုံးဖန္တီးၿပီးသြားသည့္ ေနာက္ပိုင္း Display name ကို အခ်ိန္မေရြး မိမိႏွစ္သက္သလို ေျပာင္းလဲေရးသားနိုင္ၾကပါတယ္။ Step3) Name your Blog ဒီအဆင့္မွာ Blog title ႏွင့္ URL လို႔ေခၚတဲ့ မိမိ Blog လိပ္စာတို႔ကို သတ္မွတ္ထည့္သြင္းေပးရပါမယ္။


စာအုပ္အမည္တို႔ႏွင့္ သေဘာတရားတူပါတယ္။ Blog title ကို ျမင္ၾက႐ုံျဖင့္ အထဲမွာ ဘယ္လို အေၾကာင္းအရာေတြ ေရးသားထားမလဲဆိုတာကို မွန္းမိနို္ငေစပါက ပိုေကာင္းပါတယ္။ ႏွစ္သက္ရာ အမည္ကို Blog Title တြင္ ရိုက္ထည့္ရာတြင္ Title ကို ျမန္မာလို ေပးခ်င္ပါကလည္း ေပးနိုင္သည္။


URL (or) Blog Address Bolg လိပ္စာကို ေရြးခ်ယ္တဲ့ေနရာမွာ မိမိ Blog ကို ဖတ္သူတို႔အေနႏွင့္ မွတ္မိလည္းလြယ္ရမယ္။ ရိုက္လို႔လည္း လြယ္ရမယ့္ အမည္မ်ိဳးျဖစ္သင့္ပါတယ္။ အမ်ားအားျဖင့္ မိမိနာမည္ (သို႔) Blog title ကိုပင္ ျပန္ေပးေလ့ရွိၾကပါတယ္။ အေရးႀကီးတာက လိပ္စာကို အဂၤလိပ္လိုသာေပးရပါမည္။ အထူးသတိျပဳပါ။ မိမိေရြးခ်ယ္ထည့္သြင္းမည့္ စကားလုံးတို႔၏ ေနာက္တြင္ blogspot.com ပါရွိမည္ျဖစ္ရာ မိမိ Bolg လိပ္စာအျပည့္အစုံ
http://www.name.blogspot.com ျဖစ္ပါလိမ့္မည္။

Blog Address တစ္ခု သည္ အျခားမည္သည့္ Address တို႔ႏွင့္မွ မတူညီနိုင္သည့္ ကိုယ္ပိုင္လိပ္စာ ျဖစ္ၾကရပါမယ္။ သည့္အတြက္ မိမိအလိုရွိရာအမည္ပါ လိပ္စာအတိုင္း ရရနိုင္မရနိုင္ဆိုတာ စစ္ေဆးၾကရပါမယ္။ Check Availability တြင္ Click ႏွိပ္ၿပီးစစ္ေဆးပါ။ အျခားသူတဦး လိပ္စာႏွင့္ တူေနပါက ေျပာင္းခိုင္းပါလိမ့္မည္။ လိပ္စာတူရွိေနရင္ အနီေရာင္ စာလုံးေတြႏွင့္ not available ဆိုၿပီးျမင္ရပါမယ္။

 ဒါ့အျပင္ယူသုံးလို႔ရနိုင္တဲ့ အမည္ေတြကို အႀကံျပဳေဖာ္ျပထားပါလိမ့္မယ္။ အဲ့ဒီအမည္ေတြထဲက တစ္ခုခုကို Click ႏွိပ္ၿပီး ေရြးခ်ယ္ နိုင္တယ္။ မႀကိဳက္ဘူးဆိုရင္ စိတ္တိုင္းက်အမည္တစ္ခု ရိုက္ထည့္ၿပီး Check Availibility ျဖင့္ ထပ္မံစစ္ေဆးၾကည့္ရမယ္။ လိပ္စာမတူ၊ လိပ္စာတူမရွိပါက “available” ဆိုတာကိုျမင္ၾကရမယ္။ ေရွ႕ဆက္သြားရန္အတြက္ continue တြင္ Click တစ္ခ်က္ႏွိပ္လိုက္ပါ။ မွတ္ခ်က္။ ။ Title ပဲျဖစ္ျဖစ္၊ Address ပဲျဖစ္ျဖစ္ ေနာက္ပိုင္းမွာ ေျပာင္းနိုင္ပါတယ္။ Address ေျပာင္းမယ္ဆိုရင္ သတိျပဳရမွာက မိမိ Blog ဝင္ေရာက္ဖတ္႐ူ႔သူေတြ မ်က္ေျချပတ္သြားနိုင္ပါတယ္။

Step 4) Choose your Template Template ဆိုတာမိမိ Blog ရဲ့ design ၊ တနည္းဆိုရရင္ Webpage ရဲ့ degsin ျဖစ္ပါတယ္။ အျဖဴေရာင္ေနာက္ခံ၊ အစိမ္းေရာင္ေနာက္ခံ၊ အမည္းေရာင္ေနာက္ခံ အစရွိသျဖင့္ေပါ့။ Blogger မွာ အဆင္သင့္ ယူသုံးနိုင္တဲ့ Template မ်ားစြာရွိပါတယ္။ ကိုယ့္ရဲ့ Blog ကို အစိမ္းေရာင္ေလးေနာက္ခံႏွင့္ လိုခ်င္ရင္ Scrodl bar ကို အေပၚေအာက္ဆြဲၿပီး အစိမ္းေရာင္ပါတာေလးေရြးေပါ့။

 Scroll bar ကို အေပၚေအာက္ဆြဲေရြးၿပီး ပိုမိုတိက်စြာ သိခ်င္ရင္ စိတ္ဝင္စားစရာ Template ၏ review တြင္ Click ႏွိပ္လိုက္ပါ။ ဒါဆိုရင္ Blog တစ္ခုကို အစအဆုံးေရးၿပီးသြားတဲ့အခါ မိမိ Blog အား Webpage တစ္ခုအေနႏွင့္ ဘယ္လိုျမင္ရမလဲဆိုတာကို သီးျခား Window တစ္ခုျဖင့္ ေဖာ္ျပပါလိမ့္မည္။ အျခားေသာ Blog Setting ေတြကဲ့သို႔ပင္ Template ကို အခ်ိန္မေရြးေျပာင္းလဲနိုင္ပါတယ္ ။

ဒါ့ေၾကာင့္ ဒီေနရာမွာ ေရြးခဲ့တဲ့ Template အတိုင္းပဲံအျမဲျဖစ္ေနေတာ့မယ္လို႔ စိုးရိမ္စိတ္မထားပါႏွင့္။ စျဖစ္သြားေအာင္ လက္သင့္ရာေရြးၿပီး ေနာက္မွ ေျပာင္းမယ္ဆိုရင္လည္း ျဖစ္ပါတယ္။ မိမိႏွစ္သက္ရာ Template ရွိ Radio button ကို Click ႏွိပ္ၿပီး Select လုပ္ပါ။ Template ေရြးၿပီးၿပီဆိုရင္ Continue button တြင္ Select လုပ္ပါ။ Template ေရြးၿပီးၿပီဆိုရင္ Continue button တြင္ Click ႏွိပ္၍ ေရွ႕ဆက္သြားပါ။ Step 5) Publish Your First Post Template ကိုေရြးခဲ့ၿပီးၿပီဆိုရင္ Blog တစ္ခုကို ေအာင္ျမင္စြာ Create လုပ္ၿပီးၿပီျဖစ္ေၾကာင္းေဖာ္ေျပ သာ Page ကို ျမင္ၾကရပါမယ္။


ထို Page ေပၚမွ Your blog has been create! စာတန္းေအာက္ေျခမွ Start blogging တြင္ Click တစ္ခ်က္ႏွိပ္ပါ။ ဒီအဆင့္သို႔ေရာက္ၿပီဆိုရင္ သိရမွာက blog တစ္ခုလိုေတာ့ ဖန္တီးၿပီးၿပီ။ သို႔ေသာ္ ဘာမွမရွိေသးတဲ့ အခြံခ်ညး္သက္သက္လို႔သိထားရပါမယ္ ။


ဥပမာ-ဆိုရရင္ ေျမေနရာ (Address) ရလို႔ ႏွစ္သက္ရာပုံစံ (Template) ႏွင့္ အိမ္လည္းတည္ေဆာက္ၿပီးၿပီ ျပည့္စုံေအာင္ ျဖည့္ရအုံးမယ္။ ဒါေတြျဖည့္ၿပီးမွသာ ေနလို႔ရနိုင္ၿပီျဖစ္တဲ့ အိမ္တစ္လုံးအျဖစ္သို႔ ေရာက္ရွိမယ္ေပါ့။ ထိုသေဘာတရားအတိုင္းပါဘဲ။ ကိုယ္လိုခ်င္တဲ့ အေၾကာင္းအရာေတြရယ္၊ စာေတြရယ္ ေရးမယ္။ တင္ခ်င္တဲ့ ပုံေတြတင္ၿပီး ေဝေဝဆာဆာျဖစ္ေအာင္ ဖန္တီးၾကရပါအုံမယ္။ အဲ့ဒီလိုစာေတြေရးတင္ျခင္း၊ ပုံေတြလွမ္းတင္ျခင္းကို Post တင္တယ္လို႔ေခၚပါတယ္။


စၿပီး Post လုပ္ရန္အတြက္ Start Blogging တြင္ Click ႏွိပ္လိုက္ပါ။ စာေတြေရးသားနိုင္မယ့္ ပုံေတြထည့္နိုင္တဲ့ Window တစ္ခုက်လာပါမယ္။ ၄င္းကို Post Editor လို႔လည္းေခၚပါတယ္။ Post Title ဒီေနရာမွာက Post title ၊ ဟိုေရွ႕မွာျဖည့္ခဲ့တဲ့ Title က Blog title ။ မေရာေထြးမိပါေစႏွင့္။ Blog title ဆိုတာက စာအုပ္အမည္လို တစ္ခုပဲရွိမယ္။ Post title ဆိုတာက ကိုယ္တင္ရင္ တင္သေလာက္မ်ားမယ္။


ဥပမာ ဆိုရရင္ Blog တစ္ခုထဲမွာ post ဆယ္ခုတင္ရင္ Post title ဆယ္ခုရွိမယ္ေပါ့။ Text Area ေရးလိုသမ် Text area ထဲမွာေရးသားၾကပါမယ္။ ဒီေနရာမွာ ေရးသားသမ်တို႔သည္ မိမိတင္မည့္ Post ၏ စာကိုယ္ျဖစ္ပါလိမ့္မည္။


ေရးလိုသမ်ေရးၿပီး၍ စိတ္တိုင္းက်ၿပီဆိုရင္ Publish post တြင္ Click ႏွိပ္လိုက္ပါ။ ေရးခဲ့ေသာ Post ကို အင္တာနက္ေပၚမွတဆင့္ အမ်ားသူငါ ၾကည့္၍ရေအာင္ ေအာင္ျမင္စြာ လွင့္တင္ၿပီးျဖစ္ေၾကာင္း ေဖာ္ျပေသာ Page ကိုျမင္ၾကရပါမည္။ မိမိရဲ့ တင္လိုက္တဲ့ Blog ကို ကိုယ္တိုင္ၾကည့္ခ်င္ရင္ View Blog တြင္ Click ႏွိပ္လိုက္ပါ။


Post တစ္ခုတည္းသာရွိတဲ့ မိမိရဲ့ Blog အသစ္စက္စက္ေလးကို ေတြ႕ၾကရပါလိမ့္မယ္။ Sign Out Post အသစ္တင္ခ်င္ရာေတြကိုလည္း တင္ခဲ့ၿပီးၿပီ၊ ျပင္စရာရွိတာေတြကို ျပင္ခဲ့ၿပီး၍ လတ္တေလာ ေရွ႕ဆက္ အသုံးမရွိေသးသည့္အတြက္ ထြက္ေတာ့မယ္ဆိုရင္ အျမဲတမ္း Sign out လုပ္ၿပီးမွ ထြက္ရပါမယ္။ အေပၚညာဘက္ေထာင့္တြင္ရွိေသာ Sign out တြင္ Click ႏွိပ္ၿပီးထြက္ပါ။


မွုလအစျဖစ္တဲ့
www.blogger.com သို႔ ျပန္ေရာက္သြားပါလိမ့္မည္။ Blogger Interface အားေလ့လာျခင္း Blog ေလးတစ္ခု ဖန္တီးလိုက္တယ္။ Post ေလးေတြေရးတင္တယ္။ လိုအပ္ရင္ ေရးထားတဲ့ Post ေတြကို ျပန္ျပင္မယ္။ Post အသစ္ေတြထပ္တင္ၾကတယ္။ ဒါေတြက Blog ႏွင့္ဆိုင္တဲ့ သာမာန္လုပ္ရိုးလုပ္စဥ္ေတြပါ။ သာမန္ထက္ပိုတဲ့ နည္းလမ္းေတြသုံးၿပီး မိမိ Blog ကို ထူးထူးျခားျခားေလး ျဖစ္ေအာင္ ျပင္ဆင္ၾကခ်င္တယ္။

Blogger interface ကို နားလည္ထားဖို႔လိုပါလိမ့္မယ္။ Posting Tab Posting tab ေအာက္မွာ Create၊ Edit post အစရွိသျဖင့္ အခြဲေတြပါတယ္။ Post အသစ္မ်ားတင္ျခင္း၊ တင္ၿပီးသား Post ေတြကို ျပင္ဆင္ျဖည့္စြက္ျခင္းမ်ားကို ဒီ Posting tab ေအာက္မွာ လုပ္ေဆာင္နိုင္ၾကတယ္။


Setting Tab Setting Tab ေအာက္မွာ Basic၊ Publishing၊ Formatting အစရွိသျဖင့္ အခြဲေတြရွိပါတယ္။ Blog title ေျပာင္းျခင္း၊ Comment ပိတ္ျခင္း၊ Email ျဖင့္ post လွမ္းတင္နိုင္ေအာင္ စီစဥ္ျခင္းမ်ား အပါအဝင္ စီမံခန္႔ခြဲျခင္းလုပ္ငန္းစဥ္ အေတာ္မ်ားမ်ားကို ဒီ Setting tab ေအာက္မွာ လုပ္ေဆာင္နိုင္ၾကပါတယ္။


Layout Tab Layout tab ေအာက္မွာ Page Elements၊ Pick new template အစရွိသျဖင့္ အခြဲေတြပါတယ္။ Template အသစ္ေျပာင္းျခင္း၊ မိမိ Blog ရဲ့ အဆင္အျပင္ကို ပိုမိုၾကည့္ေကာင္းေအာင္ Page elements မ်ား ထပ္တိုးျဖည့္စြက္ထည့္သြင္းျခင္းမ်ားကို ဒီ Layout tab ေအာက္မွာ လုပ္ေဆာင္နိုင္ၾကပါတယ္။


The Dashboard မိမိရဲ့ Blog မွာ Post အသစ္ေတြထပ္တင္ခ်င္တာပဲျဖစ္ျဖစ္၊ တင္ၿပီးသား Post ေတြထဲက အခ်ိဳ႕ျပန္ျပင္ခ်င္တာမ်ိဳးေတြပဲျဖစ္ျဖစ္၊ ဖ်က္ထုတ္ျခင္တာပဲျဖစ္ျဖစ္၊ အျမဲတမ္း Blogger homepage ျဖစ္တဲ့ (
www.blogger.com ) ထံသို႔ ျပန္လာရပါမယ္။ ေရာက္ၿပီဆိုရင္ Blog ဖန္တီးခဲ့စဥ္က အသုံးျပဳခဲ့ေသာ Email address ႏွင့္ Password တို႔ကိုပင္ သုံးၿပီး ျပန္လည္ Sign in လုပ္ရပါမယ္။ Sign in ဝင္ေရာက္မွု ေအာင္ျမင္ၿပီဆိုရင္ Blogger Dashboard ဆိုတာကို ျမင္ၾကရပါမယ္။ Blogger Dashboard သည္ Post အသစ္ထပ္တင္ျခင္း၊ ရွိၿပီးသား Post ကို Edit လုပ္ျခင္းတို႔အပါအဝင္ Blog အားစီမံခန္႔ခြဲမွု အလုပ္မ်ားကို အလြယ္တကူ လုပ္ေဆာင္နိုင္ရန္မ်ားစြာ အေထာက္အကူေပးပါတယ္။ New post ႏွင့္ Manage post တို႔သည္ Dashboard ထဲမွ အသုံးျပဳရမွုအမ်ားဆုံး Icon ၂ခုပင္ျဖစ္ပါတယ္။

မွတ္ခ်က္။ ။ Blog တစ္ခုကို ဖန္တီးခဲ့ဘူးေသာ Gmail Account ႏွင့္ ျပန္ဝင္တိုင္းမွာ Blogger Dashboard ကိုျမင္ၾကရပါမည္။ Post အသစ္မ်ားထပ္တင္ျခင္း ေရွ႕ဘက္မွာေဖာ္ျပခဲ့သလို User name ႏွင့္ Password တို႔ကို ထည့္ၿပီး Blogger မွာ Sign in လုပ္ၿပီးတာႏွင့္ မိမိ Blog ကို အဓိက Control လုပ္ရာ Dashboard ဆိုတာကို ေတြ႕ၾကရပါမယ္။


Post အသစ္တစ္ခု ထပ္တင္ရန္အတြက္ အစိမ္းေရာင္အေပါင္းသေကၤတေလးႏွင့္ New Post တြင့္ Click တစ္ခ်က္ႏွိပ္ပါ။ Post ေတြေရးသားနိုင္မည့္ (Posting create page) ေပၚလာပါမည္။ ေရွ႕မွာတုန္းက Post အသစ္တစ္ခုစေရးစဥ္က အတိုင္းပင္ Title ေနရာတြင္ စာေခါင္းစဥ္ Post title ႏွင့္ Text area ထဲတြင္ ေရးလိုေသာစသားမ်ားကို ရိုက္ထည့္ပါ။ စိတ္တိုင္းက်ၿပီဆိုရင္ Publish post တြင္ Click ႏွိပ္လိုက္ပါ။


ဒါဆိုရင္ Post အသစ္ကို ေအာင္ျမင္စြာ ထပ္တင္ၿပိး ျဖစ္ပါလိမ့္မယ္။ မိမိ Bolg ကို ဖြင့္ၾကည့္လ်င္ အရင္တင္ခဲ့သည့္ Post မ်ားႏွင့္အတူ Post အသစ္မ်ားကိုပါ ယွဥ္တြဲျမင္ရပါလိမ့္မယ္။ တင္ၿပီးသား Post မ်ားကို ျပန္လည္ျဖည့္စြက္ျပင္ဆင္ျခင္း မိမိတင္ထားခဲ့တဲ့ Post ေတြကို ျပင္ခ်င္ရင္ အခ်န္မေရြးျပန္လည္ Edit လုပ္လို႔ရပါတယ္။ သေဘာက မႀကိဳက္တဲ့စာသားေတြကို ျဖဳတ္ပစ္မယ္။ ထပ္ထည့္ဖို႔လိုအပ္ရင္ ထပ္ထည့္မယ္ေပါ့။ Dashboard ေပၚမွ Manage Post ေပၚတြင္ Click ႏွိပ္လိုက္ပါ။


မိမိ၏ Blog မွာတင္ထားသမ်ေသာ Post တို႔၏ Title မ်ားအားတန္းစီျမင္ရပါမယ္။ ျပန္လည္ Edit လုပ္လိုေသာ Post Title ႏွင့္ သက္ဆိုင္ေသာ Edit ေပၚတြင္ Click ႏွိပ္လိုက္ပါ။ (Posting /Edit posts) Page သို႔ေရာက္သြားၿပီး Post တြင္ပါ စာသားမ်ားကို ျမင္ၾကရပါမယ္။ ၄င္း Post title တစ္ခုစီေဘးမွ Edit တြင္ Click တစ္ခ်က္ႏွိပ္ပါ။ Title ပဲျဖစ္ေစ၊ Text area ထဲမွ စာသားမ်ားကိုျဖစ္ေစ လိုသလို ေျပာင္းလဲျဖည့္စြက္နိုင္ၾကပါတယ္။ စိတ္တိုင္းက်ၿပီဆိုလ်င္ Publish post တြင္ Click ျပန္ႏွိပ္ေပးရန္မေမ့ပါႏွင့္ ။


ဒီေနရာမွာ တင္ၿပီးသား Post ေတြထဲက အခ်ိဳ႕ကို ျပင္ဆင္ Edit လုပ္ျခင္းမဟုတ္ပဲ။ လုံးဝကို ဖ်က္ထုတ္လည္း ရနိုင္ပါတယ္။ တန္းစီထားေသာ Post title မ်ားထဲမွ ဖ်က္ထုတ္လိုေသာ Title ႏွင့္ သက္ဆိုင္ေသာ Delete ေပၚတြင္Click ႏွိပ္လိုက္ပါ။ အမွန္တကယ္ ဖ်က္ထုတ္လိုျခင္း ဟုတ္မဟုတ္ဆိုတာကို Confrom လုပ္ပါလိမ့္မယ္။ Delete It တြင္ Click ႏွိပ္ဖ်က္လိုက္ပါ။ ဒါဆိုရင္ ၄င္း Post ကို အၿပီးအပိုင္ ျဖတ္ထုတ္ၿပီး ျဖစ္ပါလိမ့္မယ္။


Add formatting Text area ထဲမွာ ရွိေနသည့္ စာသားေတြရဲ့ စာလုံးပုံစံ Font ေျပာင္းျခင္း၊ Font အရြယ္အစားေျပာင္းျခင္း၊ Blod လုပ္ျခင္း၊ အစရွိတဲ့ လုပ္ငန္းစဥ္ေတြကို လုပ္ေဆာင္နိုင္ရန္ Compose တြင္ Formatting tools တစ္ခုပါရွိပါတယ္။ စာလုံးပုံစံ Font ေျပာင္းျခင္း ရိုက္ထည့္ထားသည့္ စာသားေတြထဲက အခ်ိဳ႕ကို Font ေျပာင္းခ်င္ရင္ ေျပာင္းခ်င္တဲ့ စာသားေတြကို အေျပာေရာင္ High light ျဖစ္ေအာင္ Mouse ျဖင့္ Drag ဆြဲၿပီး Select လုပ္ပါ။ ၿပီးလ်င္ Font family ထဲက down arrow တြင္ Click ႏွိပ္ၿပီး Font တစ္မ်ိဳးကို ေရြးခ်ယ္ Click ႏွိပ္ပါ။


ဒါဆိုရင္ မိမိ Select လုပ္ခဲ့ေသာ စာသားေတြရဲက စာလုံးပုံစံ Font ေျပာင္္္္းသြားပါလိမ့္မယ္။ စာလုံုးအရြယ္အစားေျပာင္းျခင္း Text area ထဲမွ စာလုံး အရြယ္အစားေျပာင္းလိုေသာ စာသားမ်ားကို Mouse ျဖင့္ High light ျဖစ္ေအာင္ Select လုပ္ပါ။Font size icon ေပၚတြင္ Click ႏွိပ္ၿပီး က်လာမည့္ List ထဲမွ ႏွစ္သက္ရာ အရြယ္အစား တခုခုေပၚတြင္ Click ႏွိပ္ေရြးခ်ယ္ပါ။ Bold, Italic, Text color အခ်ိဳ႕စာလုံးေတြကို Bold ပဲျဖစ္ျဖစ္၊ Italic ပဲျဖစ္ျဖစ္၊Text color အေရာင္ေျပာင္းခ်င္တာပဲ ျဖစ္ျဖစ္ပထမဦးဆုံး Drag ဆြဲၿပီး လုပ္ရပါမယ္။

 Bold လုပ္ခ်င္ရင္ “B” တြင္ Click ႏွိပ္ပါ။ စာလုံးအထူမ်ားျဖင့္ ျမင္ရပါမယ္။ Italic လုပ္ခ်င္ရင္ “I” တြင္ Click ႏွိပ္ပါ။ စာလုံးေစာင္းမ်ား ျမင္ရပါမယ္။ Text Color အေရာင္ေျပာင္းခ်င္ရင္ Text box တြင္ Click ႏွိပ္ၿပီး ႏွစ္သက္ရာအေရာင္ကို ေရြးခ်ယ္ Click ႏွိပ္လိုက္ပါ။ စာလုံးအေရာင္ေျပာင္းသြားပါမယ္။

Post တြင္းသို႔ပုံမ်ားထည့္တင္ျခင္း ( Add Image) တစ္ခါတစ္ေလက်ေတာ့လည္း စာသားေတြခ်ည္းပဲ တင္ထားတာထက္စာရင္ အေၾကာင္းအရာႏွင့္ လိုက္ဖက္တဲ့ ပုံေလးေတြပါဆြဲၿပီး တင္သည့္ Post ေတြဟာ လူအမ်ားအား ပိုမိုဆြဲေဆာင္နိုင္ေစပါတယ္။ အခ်ိဳ႕က သူတို႔ျဖတ္သန္းခဲ့ရတဲ့ ကာလေတြအတြင္း စုေဆာင္းထားသည့္ အမွတ္တရာ ပုံေတြကို မိမိႏွင့္ စိတ္ခ်င္းနီးသူတို႔ ခံစားနိုင္ေအာင္ မ်ေဝခ်င္သည့္ ရည္ရြယ္ခ်က္ေတြႏွင့္ ပုံေတြကို မွတ္တမ္းတင္သေဘာမ်ိဳး တင္ထားေပးတတ္သည္။


Add to Picture ပုံေတြကို ေရွ႕မွာတုန္းကလို Post ထဲမွာ မဟုတ္ပဲ Page Element (widget) ေတြအျဖစ္မိမိ Blog မွာထည့္ထားလို႔ရပါတယ္။ Picture ေနရာရွိ Add to Blog တြင္ Click ႏွိပ္လိုက္ပါ။ Configure Image ပြင့္လာပါမည္။ Title ႏွင့္ Caption တို႔တြင္ ႏွစ္သက္သလို စာသားမ်ား ျဖည့္သြင္းပါ။


ထို႔ေနာက္ Browse တြင္ ႏွိပ္ၿပီး တင္လိုေသာ ပုံကို ေရြးခ်ယ္ညႇန္ျပေပးလိုက္ပါ။ Image ေနရာတြင္ ပုံေပၚလာၿပီဆိုရင္ Save Change တြင္ Click ႏွိပ္လိုက္ပါ။ မိမိမွာ Gmail Account တစ္ခုရွိၿပီး၊ ျမန္မာလိုစာစီနိုင္ရန္အတြက္ ZawGyi Font ကိုလည္း Install ၿပီးခဲ့ၿပီဆိုရင္ Blog တစ္ခုကို စတင္ဖန္တီး နိုင္ၾကပါၿပီ။ Blog တစ္ခုတည္ေဆာက္ဖို႔ရန္ လုပ္ေဆာင္ရမည့္ အဆင့္မ်ားကို ေဖာ္ျပပါ ေခါင္းစဥ္မ်ားျဖင့္ ေဖာ္ျပသြားပါမယ္။


Third-Party Page Elements (widgets) Poll တို႔၊ Slide Show တို႔အစရွီတဲ့ Blogger ထံမွ အဆင္သင့္ယူနိုင္တဲ့ Page element ေတြအျပင္အျခား Website မ်ားထံမွ Page element ေတြကို ယူထားၿပီးေတာ့လည္း မိမိ Blog page ထဲမွာ ေပါင္းစပ္ထည့္သြင္းထားနိုင္ပါေ သးတယ္။ အဲဒီလို Blogger ထံမွ မဟုတ္ပဲ အျခား Website တစ္ခုခုထံမွ သီးျခားယူသုံးတဲ့ Element ေတြကို Third- Party element ေတြလို႔ေခၚပါတယ္။


အျခားသူတို႔ရဲ့ Blog စာမ်က္ႏွာေတြမွာလည္း ေတြ႕ဖူးေကာင္းေတြ႕ဘူးၾကပါလိမ့္မယ္။ နာရီေလးေတြ၊ ျပကၡဒိန္ေလးေတြ အစရွိသျဖင့္ေပါ့။ ဥပမာ အေနႏွင့္ Clock widget ေလး တစ္ခုေလာက္ထည့္ၾကည့္လိုက္ၾကရေအာင္။ Third-party element ေတြထည့္မယ္ဆိုရင္ လုပ္ရမယ့္ အပိုင္းက ႏွစ္ပိုင္းရွိတယ္။ ပထမအပိုင္းက မိမိ Blog ထဲထည့္ထားလိုတဲ့ အျခား Website မွ Element ႏွင့္ ဆိုင္ေသာ HTML tag ေတြကို Copy မွ ကူးယူရမယ္။ ၿပီးမွ မိမိ Blog ထဲမွာ Paste လုပ္ယူရမယ္။


နာရီပုံ HTML widget ရယူရန္အတြက္
www.clocklink.com သို႔သြားပါ။ ထို႔ေနာက္ Go to Gallery တြင္ Click ႏွိပ္လိုက္ပါ။ နာရီပုံသ႑န္ဒီဇိုင္းမ်ိဳးစုံတို႔ရွီရာ Clock Gallery ထဲသို႔ ေရာက္သြားပါမယ္။ မွတ္ခ်က္။ ။ Clock link မွ မဟုတ္ပါဘူး။ အင္တာနက္ေပၚမွ အေျခားေသာ Clock widget site ေတြမ်ားစြာရွိပါေသးတယ္။ Google သို႔သြားေရာက္ၿပီး Clock widget လို႔ ထည္သြင္းရွာေဖြၾကည့္ပါ။ ရလာတဲ့ အထဲကမွ ကိုယ္လိုအပ္ခ်က္ႏွင့္ ကိုက္ညီနိုင္မည့္ Link မ်ားသို႔ သြားေရာက္ၿပီး စမ္းသပ္အသုံးျပဳၾကည့္ၾကပါ။

မိမိႏွစ္သက္ရာ နာရီပုံ တခုကိုေရြးပါ။ ရၿပီဆိုရင္ ထိုနာရီႏွင့္ သက္ဆိုင္ရာ View Html Tag ေပၚတြင္ Click ႏွိပ္လိုက္ပါက နာရီပုံပါ Pop-up windows တစ္ခုပြင့္လာပါမည္။ Time Zone ေနရာတြင္ မိမိေဒသစံေတာ္ခ်ိန္ကို ေရြးေပးပါ။ ဥပမာ- ျမန္မာနိုင္ငံအတြက္ဆိုလ်င္ (GMT +6:30) ျဖစ္ပါတယ္။ လိုအပ္ပါက နာရီအရြယ္အစား အႀကီးအေသးကို Size ေနရာတြင္ ေရြးခ်ယ္ေျပာင္းလဲနိုင္ပါတယ္။ (130*130) နာရီႏွင့္ပတ္သက္ၿပီး စိတ္တိုင္းက်ျပင္ဆင္ၿပီးၿပီဆို လ်င္ အေပၚကြက္လပ္ထဲရွိ Code မ်ားအားလုံးကို Copy ကူးယူရပါမယ္။ စာသားမ်ားကို Select မွတ္ၿပီးညာဘက္ Click တစ္ခ်က္ႏွိပ္လိုက္ပါ။ က်လာမည့္ Menu ထဲရွိ Copy တြင္ ႏွိပ္ၿပီး ကူးယယူလိုက္ ရပါမယ္။


Post ထဲမွာ ပုံေတြထည့္ရန္အတြက္က ဘာမွမခက္ခဲပါဘူး။ Blogger မွာပုံေတြကို အလြယ္တကူ ထည့္သြင္းနိုင္တဲ့ Add Image လို႔ေခၚတဲ့ Tools တစ္ခုပါ၇ွိၿပီးသား ျဖစ္ပါတယ္။ အေရးႀကီးတာက ဘယ္ပုံကို တင္မွာလဲ။ မိမိကြန္ပ်ဴတာထဲက ဘယ္ေနရာ (ဥပမာ-Desktop ေပၚမွာလား၊ My Doc**ent ထဲမွာလား) ဘယ္မွာရွိေနသလဲဆိုတာေလာက္ကိုေတာ ့ သိႏွင့္ၿပီးသားျဖစ္ဖို႔လိုပါတယ္။ 1. Compose bar ေပၚရွိ Formatting toolbar ထဲမွ Add image တြင္ Click ႏွိပ္လိုက္ပါ။ Upload window တစ္ခုပြင့္လာပါမည္။


2. ပထမဦးစြာတင္ခ်င္သည့္ ပုံကို ေရြးခ်ယ္ညႇန္ျပေပးရပါမယ္။ Browse တြင္ Click ႏွိပ္ပါက “File upload” box ေပ်ာက္သြားၿပီး မွုလ Upload window ရွိ Browse ေနရာတြင္ မိမိေရြးခ်ယ္ခဲ့ေသာပုံ File အမည္ကို ျမင္ၾကရပါမယ္။ ယခုအဆင့္ထိသည္ ပုံကို အမွန္တကယ္ Upload မလုပ္ရေသးပါ။ ဘယ္ပုံတင္မလဲဆိုတာကို ေရြးခ်ယ္ညႇန္ျပၿပီး႐ုံရွိေသးတယ္ဆိုတာကို သတိျပဳပါ။ မွတ္ခ်က္။ ။ တၿပိဳင္နက္ ပုံငါးပုံအထိတင္နိုင္ပါတယ္။ အျခားပုံေတြထပ္တင္လိုပါက Add another image တြင္ Click ႏွိပ္ၿပီးထပ္မံေရြးခ်ယ္နိုင္ျ ကပါတယ္။


3. ေနာက္တစ္ခါ ေရြးခ်ယ္စရာက Layout ႏွင့္ Image Size ျဖစ္ပါတယ္။ တင္ခ်င္တဲ့ပုံကို Right၊ Center၊ Left တို႔ထဲက ဘယ္ေနရာမွာ ထားခ်င္သလဲ။ တခုခုကို ေရြးခ်ယ္နိုင္ပါတယ္။ ေရြးခ်ယ္ပုံက သက္ဆိုင္ရာ Radio Button ေပၚတြင္ Click ႏွိပ္ရပါမယ္။ ထို႔အတူ ပုံအရြယ္အစားကိုလည္း Small၊ Medium၊ Large တို႔ထဲကမွ တခုခုေရြးခ်ယ္နိုင္ပါတယ္။ အဆင္သင့္ျဖစ္ၿပီဆိုရင္ စတင္ Upload လုပ္လို႔ရပါၿပီ။ Upload လုပ္ရန္အတြက္ Blogger မွ ထုတ္ျပန္ေသာ စည္းကမ္းခ်က္ေတြပါတဲ့ ” Term of Services” ကိုလက္ခံသေဘာတူရပါမယ္။ သည္အတြက္ I Accept ေဘးရွိ Check Box ေပၚတြင္ အမွန္ျခစ္ေပၚေအာင္ Click ႏွိပ္ရပါမယ္။ ၿပီးလ်င္ Upload တြင္ Click ႏွိပ္လိုက္ပါ။ မိမိေရြးခ်ယ္ခဲ့ေသာ ပုံကိုစတင္ Upload လုပ္ေနပါလိမ့္မယ္။


ပုံ၏ အရြယ္အစားႏွင့္ Internet Connection ေပၚမွုတည္ၿပီး အခ်ိန္အနည္းငယ္ၾကာပါလိမ့္မယ္။ Upload ၿပီးၿပီဆိုရင္ Done ဆိုတဲ့စာလုံးေပၚလာပါလိမ့္မယ္။ Done တြင္ Click ႏွိပ္လိုက္ပါ။ Upload Window ေပ်ာက္သြားၿပီး Text area ထဲတြင္ မိမိတင္ခဲ့ေသာပုံ ျမင္ၾကပါပါမယ္။ စိတ္တိုင္းက်ၿပီဆိုရင္ Publish post တြင္ Click ႏွိပ္၍ Post ကိုတင္နိုင္ၾကပါၿပီ။


မွတ္ခ်က္။ ။ Publish လုပ္ခဲ့ၿပီဆိုရင္ မိမိရဲ့ Blog ကိုဖြင့္ၿပိး ပုံရဲ့အေနအထား ေကာင္းရဲ့လား၊ ပုံအရြယ္အစား အလားေတာ္ျဖစ္ရဲ့လား အစရွိသျဖင့္ ျပန္လည္စစ္ေဆး ၾကည့္႐ူသင့္ပါတယ္။ စိတ္တိုင္းမက်ဘူးဆိုရင္ ေရွ႕မွာေျပာျပသလို Post ထဲမွာရွိတဲ့ စာသားေတြကို ျပန္လည္ Edit လုပ္သလိုမ်ိဳး ပုံေတြကိုလည္းျပန္လည္ လုပ္နိုင္ၾကပါေသးတယ္။


 အျခား Blog မ်ားႏွင့္ ခ်ိတ္ဆက္ျခင္း (Add Link) Link ဆိုတာက Webpage တခုကေနအျခား Webpage တခုခုဆီသို႔ ကူးေျပာင္းသြားနိုင္တဲ့ ေနရာေတြ ျဖစ္ပါတယ္။ Link ဟုတ္မဟုတ္ဆိုတာကို အလြယ္တကူ ခြဲျခားသြားနိုင္တဲ့နည္းကေတာ့ Mouse Pointer ျဖင့္လိုက္ေထာက္ၾကည့္ပါ။ ပုံပဲျဖစ္ျဖစ္၊ စသားေတြပဲျဖစ္ျဖစ္ မွားပုံကေန၊ လက္ပုံေျပာင္းတာမွန္သမ် သည္ Link မ်ားပဲျဖစ္ပါတယ္။ လက္ပုံေပၚလာတဲ့အခ်ိန္မွာ Click ႏွိပ္ရင္ လက္ရွိျမင္ေနရတဲ့ Page ကေန ခ်ိတ္ဆက္ထားတဲ့ အျခား Page တစ္ခုသို႔ ကူးေျပာင္းသြားပါလိမ့္မယ္။ Blog ထဲမွာ မိမိေရးခ်င္ရာအျပင္အျခား Blog မ်ား(သို႔) Website မ်ားဆီသို႔ ခ်ိတ္ဆက္ထားတဲ့ Link ေတြလည္း ထည့္ထားနိုင္ပါတယ္။ Link ေတြကို ရည္ရြယ္ခ်က္အမ်ိဳးမ်ိဳးႏွင့္ ထည့္ၾကတယ္။

အခ်ိဳ႕က မိမိတင္သည့္ Post ႏွင့္ အေၾကာင္းအရာခ်င္းဆက္စပ္မွုရွိတဲ့ Post တြင္းပါ အေၾကာင္းအရာေတြကို ပိုမို အားေကာင္းေအာင္ အေထာက္အကူေပးနိုင္ေသာ အျခားသူတဦးဦး၏ Blog (သို႔) Webpage တစ္ခုခုကို Link လုပ္ထားေလ့ရွိပါတယ္။ အခ်ိဳ႕က်ျပန္ေတာ့လည္း မိတ္ေဆြအခ်င္းခ်င္း (သို႔) ဦးတည္ခ်က္ျခင္းတူတဲ့ Blog ေတြအခ်င္းခ်င္း အျပန္အလွန္ Link မ်ားထည့္သြင္းျခင္းျဖင့္ အုပ္စုဖြဲ႕ ထားေလ့ရွိပါတယ္။ မိမိတို႔အုပ္စုထဲက Blog တစ္ခုခုေပါက္သြားရင္ တနည္းဆိုရရင္ လူႀကိဳက္မာ်းလာၿပီဆိုရင္ အဲ့ဒီ Blog ထဲမွာ ညႇန္ျပခ်ိတ္ဆက္ထားတဲ့ အျခား Blog ေတြပါ လူၾကည့္ပိုမ်ားလာမယ္ေပါ့။


1. ပထမဦးစြာ မိမိ Link လုပ္လိုေသာ Blog (သို႔) Webpage ကို ဖြင့္လိုက္ပါ။ ပြင့္လာၿပီဆိုရင္ ၄င္း Page ၏ URL လို႔ေခၚတဲ့ လိပ္စာကို Copy လုပ္လိုက္ပါ။


2. (Posting/Compose) Text area ထဲမွ Link လုပ္လိုေသာ စာသားမ်ားကို Mouse ျဖင့္ Drag ဆြဲၿပီး Select လုပ္ပါ။ စာသားမ်ားအျပာေရာင္ High light ျဖစ္လာပါမည္။ Select လုပ္ၿပီးၿပီဆို၇င္ Tool bar ထဲမွ Add link ေပၚတြင္ Click တစ္ခ်က္ႏွိပ္လိုက္ပါ။


3. က်လာမည့္ Box ထဲရွိ URL ေနရာတြင္ Paste လုပ္လိုက္ပါ။ ေရွ႕မိမိ Copy ယူထားခဲ့သည့္ URL ေပၚလာပါမည္။ Copy/Paste မလုပ္လိုလ်င္ ဒီေနရာမွာ ကိုယ္တိုင္ ရိုက္ထည့္နိုင္ပါတယ္။ Typing အမွားမျဖစ္ေအာင္ေတာ့ အထူးဂ႐ုျပဳရပါလိမ့္မယ္။ 4. Ok button တြင္ Click ႏွိပ္လိုက္ပါက Select မွတ္ထားခဲ့ေသာ စာသားမ်ားကို အျပာေရာင္ ေအာက္ခံလိုင္းျဖင့္ ျမင္ရပါမယ္။ သေဘာက Link ျဖစ္သြားၿပီဆိုတာကို ျပပါတယ္။


အဆင္သင့္ျဖစ္ၿပီဆိုရင္ Publish post တြင္ Click ႏွိပ္ၿပီး မိမိရဲ့ Post ကိုတင္လိုက္ပါ။ 5. Blog ထဲတြင္ Post တက္လာတဲ့အခါ Link ေပၚတြင္ Click ႏွိပ္ပါက ခ်ိတ္ဆက္ထားခဲ့ေသာ Blog (သို႔) Webpage ကိုျမင္ၾကရပါမယ္။ 6. ထို Link ေပၚတြင္ Click ႏွိပ္ပါက ခ်ိတ္ဆက္ထားေသာ name.blogspot.com ကိုျမင္ရပါမယ္။ Comments ပုံမွတ္အားျဖင့္ဆိုရင္ Post တစ္ခုခ်င္းစီရဲ့ေအာက္မွာ Comment ဆိုတဲ့ Link တစ္ခုကို ေတြ႕ၾကရပါမယ္။ Blog တို႔တြင္ Comment တို႔ရဲ့ အခန္းက႑ဟာ အလြန္အေရးပါလွပါတယ္။ ေရးသူႏွင့္ ဖတ္သူတို႔ အျပန္အလွန္ထိေတြ႕ေစနိုင္တဲ့ နည္းလမး္တစ္ခုလည္း ျဖစ္ပါတယ္။


သေဘာက Post တြင္ပါ အေၾကာင္း အရာႏွင့္ ပတ္သတ္ၿပီး ဖတ္႐ူသူတို႔မွ ေဝဖန္ေဆြးေႏြးျခင္း၊ ျဖည့္စြက္အႀကံေပးျခင္းမ်ားကို Comment မွတဆင့္ဝင္ ေရာက္ေရးသားနိုင္ၾကပါတယ္။ Writing Comment ပုံမွတ္အားျဖင့္ဆိုရင္ Blog post တိုင္းမွာ Comment ဝင္ေရးနိုင္ၾကပါတယ္။ အခ်ိဳ႕ေတြက Comment ေရးခြင့္ပိတ္ထားသည့္ Post တို႔မွာေတာ့ Comment ေရးလို႔မရပါ။ အမ်ားစုမွာေတာ့ Google account တစ္ခုရွိရင္ ဝင္ေရးနိုင္ၾကပါတယ္။ ေရးပုံေရးနည္းကေတာ့ ရိုးရွင္း လြယ္ကူလွပါတယ္။ ေရးလိုတဲ့ Post ေအာက္မွာရွိေသာ Comment ေပၚတြင္ Click ႏွိပ္လိုက္ပါ။


ဒါဆိုရင္ ဒီ Post ႏွင့္ပတ္သက္ၿပီး၊ မိမိေရွ႕ကေရးသားထားေသာ Comment မ်ားကို တန္းစီၿပီးေတြ႕ရပါမယ္။ ဘယ္သူေတြက ဘယ္လိုေဝဖန္ခ်က္ျပဳထားသလဲဆိုတာ ကို ဖတ္႐ူနိုင္ပါတယ္။ မိမိကိုယ္တိုင္လည္း Comment ဝင္ေရးခ်င္ရင္ Leave Your Comment ေနရာတြင္ ေရးလိုေသာ စာသားမ်ားကို ရိုက္ထည့္ပါ။ ေရးၿပီးၿပီဆိုရင္ Publish လုပ္ရပါမယ္။ User name နဲ႔ Password တို႔ကို ရိုက္ထည့္ပါ။ ထို႔ေနာက္ Publish Your Comment တြင့္ Click ႏွိပ္လိုက္ပါ။


ဒါဆိုရင္ Comment အေရအတြက္ တခုထပ္တိုးသြားၿပီး Comment List ထဲေရာက္သြားပါမည္။ Stop Comments မိမိတင္တဲ့ Post ေတြမွာ Comment ေရးတာမႀကိဳက္ရင္ Comment Link မပါေအာင္ျဖဳတ္ထားလို႔ရပါ တယ္။ အေရးႀကီးတာက Post တစ္ခုခ်င္းစီကို ေရြးၿပီးခြင့္ျပဳမယ္၊ မျပဳဘူး။ လုပ္ခ်င္တာလား၊ ဒါမွမဟုတ္ တင္သမ် Post အားလုံးကို ေရးခြင့္ မျပဳခ်င္တာလားဆိုတာကို အရင္စဥ္းစားရမယ္။


ဒီအေျခအေန ၂မ်ိဳး ေပၚမွုတည္ၿပီး …..

1. Dashboard ေပၚမွ Manage Settings တြင္ Click ႏွိပ္ပါ။ Setting ေအာက္မွ Basic ထဲသို႔ ေရာက္သြားပါမယ္။ ဒီေနရာကို (Setting / Basic) Page လို႔ ေခၚပါမယ္။

2. Setting ေအာက္မွ Comments တြင္ ထပ္မံ Click ႏွိပ္ပါက (Setting/Comments) Page ထဲသို႔ ေရာက္သြားပါမယ္။ Who can Comment? ေနရာတြင္ ဘယ္သူေတြကိုပဲ ေရးခြင့္ျပဳမယ္ဆိုတာ မ်ိဳးကန္႔သတ္နိုင္ၾကပါတယ္။


Anyone ကို ေရြးမယ္ဆိုရင္ Google account (Gmail) ရွိသူေတြသာ ေရးခြင့္ျပဳမယ္ဆိုတာမ်ိဳးျဖစ္ပါ တယ္။ Comment Default for Posts ေနရာတြင္ ပုံမွန္အားျဖင့္ New posts have Comments ျဖစ္ပါတယ္။ သေဘာက တင္သမ် Post တိုင္းမွာ Comment ပါၿပီးသားျဖစ္ပါတယ္။ Comment မပါေအာင္ တခါတည္း ပိတ္ထားလိုလ်င္ New Posts Do Not Have Comments ကိုေရြးရပါမယ္။ စိတ္တိုင္းက်ျပင္ဆင္ခဲ့ၿပီးပါက Page ၏ ေအာက္ေျခတြင္ရွိေသာ “Save Settings” တြင္ Click ႏွိပ္လိုက္ပါ။ Template Selection Dashboard ေပၚမွ Layout ေပၚတြင္ Click ႏွိပ္ၿပီးသြားမယ္ဆိုရင္ Template Selection ေအာက္ကို ေရာက္ပါတယ္။


ဒီေနရာက မိမိ Blog ရဲ့ ဒီဇိုင္း အဆင္အျပင္ႏွင့္ ပတ္သက္ၿပီး လိုသလို ျပဳျပင္ေျပာင္းလဲ နိုင္ၾကပါတယ္။

 Pick a New Template Bloggerမွာအဆင္သင့္ယူသုံးနိုင္တဲ့Template ေပါင္းမ်ားစြာရွိၿပီးသား ျဖစ္ပါတယ္။ တစ္ခုမႀကိဳက္ရင္ အျခားတစ္ခု အခ်ိန္မေရြးေျပာင္းသုံးလို႔ရပါ တယ္။ အျခား Template တစ္ခုသို႔ ေျပာင္းခ်င္ရင္ Layout ေအာက္မွ Pick New Template တြင္ Click ႏွိပ္ပါ။ အဆင္သင့္ ယူသုံးနိုင္တဲ့ Template မ်ားကို ျမင္ရပါမယ္။ ဒီေနရာကို (Layout/Pick New Template) လို႔ ဆိုရပါမယ္။ အႀကိဳက္ဆုံး တစ္ခုကို ေရြးခ်ယ္လိုက္ပါ။ ထို႔ေနာက္ Save Template တြင္ Click ႏွိပ္ပါ။ မိမိ Blog ရဲ့ Template ကို ေျပာင္းေပးသြားပါမည္။

View Blog တြင္ Click ႏွိပ္ၾကည့္နိုင္ပါသည္။ Page Elements (Widgets) Page Elements ေတြဆို္တာက Webpage တို႔ရဲ့ အဆင္တန္ဆာမ်ားပဲ ျဖစ္ပါတယ္။ ၄င္းတို႔ကို ညီညႇတ္မ်တေအာင္ ေပါင္းဆပ္ဆင္ယင္နိုင္မည္ဆိုပါက Page ရဲ့ အဆင့္အတန္းအရည္အေသြးကို ပိုမိုေပၚလြင္ေစပါလိမ့္မယ္။ မိမိတို႔ Blog ရဲ့ဒီဇိုင္း (Template) ကိုလည္း Page element တို႔ ထပ္မံေပါင္း စပ္ထည့္သြင္းၿပီး စိတ္ႀကိဳက္တန္ဆာဆင္ထားလို႔ ရပါတယ္။


ပုံမွန္အားျဖင့္ Blog တစ္ခုဖန္တီးၿပီးတိုင္း Profile တို႔ Active တို႔ဆိုတဲ့ Page element ေတြကေတာ့ အလိုအေလ်ာက္ပါရွိၿပီးသား ျဖစ္ပါတယ္။ အဲဒါေတြအျပင္၊ နာရီတို႔၊ ျပကၡဒိန္တို႔။ မိမိမိတ္ေဆြတို႔၏ Blog လိပ္စာမ်ား အစရွိသည္တို႔ကို Page element ေတြအျဖစ္ လိုသလို ထည့္သြင္းထားနိုင္ပါေသးတယ္။ Layout ေအာက္မွ Page elements တြင္ Click တစ္ခ်က္ႏွိပ္လိုက္ပါ။ ဒီေနရာ ကို (Layout/Page element) လို႔ဆိုပါမယ္။ ညာဘက္ျခမး္ကို သတိထားၿပီးၾကည့္ပါ။ Contributors ႏွင့္ Blog Archive ဆိုၿပီး Page elements ႏွစ္ခုကို ေတြ႕ရပါမယ္။


ထိုႏွစ္ခုက Blog စတင္ Create လုပ္စဥ္ကတည္းကိုက အလိုေလ်ာက္ပါၿပီးသား ျဖစ္ပါတယ္။ ကိုယ္စိတ္တိုင္းက် Page Elements သစ္ေတြထပ္ထည့္ခ်င္ရင္္ “ Add a page element” တြင္ ႏွိပ္ၿပိး ထပ္ထည့္နိုင္ၾကပါတယ္။ မွတ္ခ်က္။ ။ မိမိေရြးခဲ့တဲ့ Template ေပၚမွုတည္ၿပီး Page element ထည့္နိုင္မယ့္ေနရာေတြ အနည္းငယ္ ကြဲျပားပါလိမ့္မယ္။ Add a Description Blog Title ေအာက္တြင္ Description ထည့္လိုက ထည့္ထားနိုင္ပါတယ္။


Description ဆိုတာက မိမိရဲ့ Blog သည္ စီးပြားေရး၊ လူမွုေရး၊ ေဖ်ာ္ေျဖေရး အစရွီသည္တို႔ထဲက ဘယ္က႑ေပၚမွာ အေျခခံတည္ေဆာက္ထားသလဲဆိုတာကို ဖတ္႐ူ႔သူမ်ားအား အလြယ္တကူသိေစနိုင္မည့္ အခ်က္အလက္ စကားလုံးမ်ားပဲ ျဖစ္ပါတယ္။ Dashboard ေပၚမွ Manage Setting တြင္ႏွိပ္ပါ။ Setting ေအာက္မွ Basic ထဲသို႔ ေရာက္သြားပါမယ္။ ဒီေနရာကို (Setting / Basic) Page လို႔ ေခၚပါမယ္။ Blog title ကိုျပင္လိုက ဒီေနရာတြင္ ျပင္နိုင္ပါတယ္။


Description ေနရာတြင္ မိမိေရးလိုတဲ့ က႑ကို ကိုယ္စားျပဳမည့္ စကားလုံးမ်ားကို ရိုက္ထည့္ပါ။ ၿပီးလ်င္ Page ၏ ေအာက္ေျခတြင္ရွိေသာ Save Setting ကို Click ႏွိပ္ပါ။ “setting were saved successfully” ဆိုတာ ေပၚလာပါမည္။ သေဘာက မိမိျဖည့္စြက္ခဲ့သည့္ အတိုင္း ထည့္သြင္းျပင္ဆင္ၿပိးျဖစ္ေၾကာင္ း ေဖာ္ျပျခင္းျဖစ္ပါသည္။ ဒါဆိုရင္ Description ထည့္ၿပီးသြားၿပီ။ မိမိ Blog ကိုသြားၾကည့္မယ္ဆိုရင္ Blog title ေအာက္မွာက Description အျဖစ္ထည့္ခဲ့ေသာ စာသားမ်ားကို ျမင္ၾကရပါမယ္။


Add a team Member Blog တစ္ခုတည္းကို လူအမ်ားစုေပါင္းေရးလို႔ရတယ္။ သေဘာက ကိုယ္တစ္ေယာက္တည္း မဟုတ္ပဲ စိတ္ခ်ရတဲ့ မိတ္ေဆြအေပါင္းအသင္းေတြကိုပါ မိမိ Blog မွာဝင္ေရာက္ေရးသား Post တင္နိုင္ေအာင္ လုပ္ထားလို႔ရပါတယ္။ အားသာခ်က္ကေတာ့ တစ္ေယာက္မအားတဲ့အခါ တစ္ေယာက္ဝင္ ေရးၾကျခင္းျဖင့္ မိမိ Blog သည္ အျမဲတမ္း Update ျဖစ္ေနမယ္ေပါ့။ အဲ့လိုဝင္ေရးနိုင္ေအာင္ သူတို႔သည္ မိမိ Blog ရဲ့ Member ျဖစ္ၾကရပါမယ္။ Member ျဖစ္ေအာင္လုပ္ဖို႔ရန္ အပိုင္း(၂)ပိုင္း ရွိပါတယ္။


ပထမဦးစြာ Blog ပိုင္ရွင္ျဖစ္တဲ့ မိမိကေနသူတို႔ထံသို႔ Email ျဖင့္ Invite လုပ္ရပါမယ္။ ဒါက ကိုယ့္ဘက္က လုပ္ရမယ့္အပိုင္း။ ဟိုတစ္ဖက္က ဝင္ေရာက္ေရးသားဖို႔ရန္ ဖိတ္ၾကားခံရသူေတြ အေနႏွင့္ေတာ့ Invite လုပ္သည့္ Email ေရာက္လာၿပီဆိုရင္ ဖြင့္ဖတ္ၿပီး Activate လုပ္ေပးရပါမယ္။ Activate လုပ္ၿပီးတာႏွင့္ Member ျဖစ္သြားၿပီး ဝင္ေရာက္ေရးသားနိုင္ၾကပါၿပီရွင္ ။


Invite လုပ္ျခင္း Member ျဖစ္ေအာင္ Invite လုပ္ရန္အတြက္ Setting ေအာက္မွ Permission တြင္ Click တစ္ခ်က္ႏွိပ္လိုက္ပါ။ ဒီေနရာကို (Setting Permission) Page လို႔ ဆိုရပါမယ္။ Permission ေအာက္ရွိBlog Author ေနရာတြင္ ဒီ Blog မွာ ဝင္ေရးသူ ဘယ္ႏွစ္ေယာက္ရွိသလဲဆိုတာကို ျဖစ္ပါတယ္။ ယခုခ်ိန္မွာေတာ့ Member မရွိေသးသည့္ အတြက္ မိမိ တဦးတည္း၏ အမည္ကိုသာ ျမင္ေတြ႕ၾကရပါဦးမယ္။


Invite လုပ္ရန္အတြက္ Add Author တြင္ Click တစ္ခ်က္ႏွိပ္ပါ။ ထို႔ေနာက္ Member အျဖစ္ ဖိတ္ၾကား လိုေသာ သူ၏ Email လိပ္စာကို Invite more people ေနရာတြင္ ရိုက္ထည့္လိုက္ပါ။ Invite တြင္ Click ႏွိပ္လိုက္ပါက Blogger သည္ ထည့္သြင္းေပးခဲ့ေသာ Email လိပ္စာထံသို႔ Activation Link တစ္ခုပါတဲ့ Email တစ္ေစာင္ေပးပို႔ပါလိမ့္မယ္။ ထို႔အတူ Permission ေအာက္တြင္ Invite ခုပ္လိုက္ေသာ Email လိပ္စာေပၚလာပါမည္။ အကယ္၍ အေၾကာင္းတခုခုေၾကာင့္ Invite မလုပ္လိုေတာ့ပါက Remove တြင္ Click ႏွိပ္ၿပီး ဖ်က္ထုတ္နိုင္ၾကပါတယ္။


Invite လုပ္ျခင္းကို လက္ခံျခင္း (Join a team Blog) ယခုဆက္လက္ၿပီး Member အျဖစ္ဖိတ္ၾကားခံရသူေတြဘက္က ဆက္လက္လုပ္ေဆာင္ၾကရမယ့္ Activation အပိုင္းကို ေဖာ္ျပသြားပါမယ္။ Blog မွာ ဝင္ေရာက္ေရးသားရန္ ဖိတ္ၾကားေသာ Email ထဲသို႔ ဝင္လိုက္ပါက Invite လုပ္ေသာ Email message ကိုေတြ႕ရပါမယ္။ ၄င္း Message ကို ဖြင့္လိုက္ပါက အျပာေရာင္စာသားမ်ားျဖင့္ Activation Link တစ္ုခကိုေတြ႕ရပါမယ္။ Member ျဖစ္ေအာင္ Activate လုပ္ဖု႔ိရန္ Link ေပၚတြင္ Click တစ္ခ်က္ႏွိပ္ပါ။ ဒါဆိုရင္
www.blogspot.com သို႔ေရာက္ရွိသြားၿပီး Invite လုပ္ျခင္းကို လက္ခံသေဘာတူေၾကာင္း အတည္ျပဳေပးရပါမယ္။

Username ေနရာတြင္ Email Address ႏွင့္ Password ေနရာတြင္ ၄င္း Email Address ႏွင့္ သက္ဆိုင္ေသာ Password တို႔ကို ထည့္ေပးရပါမယ္။ Username ႏွင့္ Password တို႔ကို မွန္ကန္စြာ ျဖည့္စြက္ၿပိးပါက Accept Invitation တြင္ Click ႏွိပ္လိုက္ပါ။ ဒါဆိုရင္ Team Member ျဖစ္သြားၿပီး ၄င္း Blog တြင္ ဝင္ေရာက္ ေရးေသာ Post တင္နိုင္ ၾကပါၿပီ။ Manage team Member ဖိတ္ၾကားခ်က္ကို လက္ခံ၍ Activate လုပ္ၿပီး သူတို႔သည္ မိမိ Blog ရဲ့ Member မ်ားျဖစ္လာၾကပါၿပီ။ အဲဒီ Member ျဖစ္လာသူေတြသည္ ပုံမွန Default အားျဖင့္ မိမိ၏ Blog မွာ Post ေတြကိုသာ ေရးတင္နိုင္ခြင့္ရွိ ၾကပါတယ္။ အျခားဘာလုပ္ပိုင္ခြင့္မွ မရွိၾကပါဘူး။


Blog ပိုင္ရွင္ျဖစ္တဲ့ မိမိကသာလ်င္ Blog အမည္ေျပာင္းျခင္း၊ Template ေျပာင္းျခင္း၊ Post ေတြဖ်က္ထုတ္ျခင္း အစရွိတဲ့ လုပ္ငန္းစဥ္ေတြကို လုပ္ေဆာင္နိုင္ပါတယ္။ ဒါက အေျခခံသေဘာကို ေျပာ တာပါ။ အကယ္၍ လိုအပ္ပါက Member ထဲမွ ယုံၾကည္ရသူတစ္ဦးဦးကို မိမိရဲကလုပ္ပိုင္ခြင့္မ်ားအတို င္း ေပးအပ္ထားလို႔လည္းရပါတယ္။ Setting ေအာက္မွ Permission တြင္ Click ႏွိပ္ၿပီး (Setting / Permission) သို႔ုသြားလိုက္ၾကရေအာင္။


Permission ေအာက္တြင္ ဒီ Blog မွာ ဝင္ေရာက္ေရးသားနိုင္သူ Member ဘယ္ႏွစ္ေယာက္ ရွိသလဲဆိုတာကို တန္းစီေဖာ္ျပထားပါလိမ့္မယ္။ အဲ့ဒီ Member ေတြထဲကမွ လုပ္ပိုင္ခြင့္တိုးမွင့္ေပးလို ေသာ Member အမည္ေဘးမွ Grant Admin တြင္ Click ႏွိပ္ပါ။ Admin အဆင့္ေပးပို႔ရန္ အတည္ျပဳခ်က္ေတာင္းခံေသာ Box တစ္ခုျမင္ရပါမယ္။ “Grant Admin Privilege” တြင္ Click ႏွိပ္လိုက္ပါ။ ဒါဆိုရင္ ထိုသူသည္ Post ေရးသားနိုင္႐ုံသက္သက္ မဟုတ္ေတာ့ဘဲ Blog အားမိမိကဲ့သို႔ စီမံခန္႔ခြဲနိုင္ခြင့္ရွိသူ တစ္ဦး ျဖစ္သြားပါလိမ့္မယ္။


Add Poll Poll ဆိုတာက အေၾကာင္းအရာ အျဖစ္အပ်က္ တစ္ခုေပၚမွာ လူအမ်ား၏ သေဘာထား အျမင္ေတြကို သိရွိနိုင္ေအာင္ ေကာက္ယူေသာ စစ္တမ္းတစ္မ်ိဳးပင္ ျဖစ္ပါတယ္။ ဆိုရရင္ စစ္တမ္း ထုတ္ခ်င္တဲ့ ေမးခြန္း တစ္ခု ဖန္တီးမယ္။ ၿပီးရင္ သေဘာထားအျမင္ေတြကို ၿခံဳငုံမိနိုင္တဲ့ အေျဖေလးေတြေပးထားလိုက္မယ္။ လာေရာက္ဖတ္႐ူသူေတြက သူတို႔ဆႏၵရွိတဲ့ အေျဖကို ေရြးခ်ယ္ေျဖၾကားသြားျခင္းျဖင့္ အမ်ားဆႏၵ ဘယ္လိုရွိနိုင္မယ္ဆိုတာ သိနိုင္မယ္ေပါ့။

 Element သစ္တခုကို ထည့္သြင္းခ်င္တိုင္းမွာ “Add a page element” တြင္ Click ႏွိပ္ၾကရပါမယ္။ ဒါဆိုရင္ မိမိ Blog မွာ ထပ္မံထည့္သြင္းနိုင္မည့္ Element မ်ားပါဝင္တဲ့ Pop-up window တစ္ခုပြင့္လာပါ မည္။ အဲဒီအထဲကမွ ဆႏၵရွိရာ Element ၏ Add to blog တြင္ Click ႏွိပ္ၿပီးထည့္သြင္းနိုင္ၾကပါတယ္ ။ Pop-up window ထဲက “ Poll ” Section ေနရာရွိ Add to blog တြင္ Click ႏွိပ္လိုက္ပါ။ ေအာက္ေဖာ္ျပပါ “Create Poll” Window ကို ျမင္ၾကရပါမယ္။
 ျပည့္စုံစြာ ျဖည့္စြက္ၿပီးၿပီဆိုရင္ Save တြင္ Click ႏွိပ္ရပါမယ္။ Pop-up window ေပ်ာက္သြားၿပီး မွုလ (Template/Page element) တြင္ Element သစ္တစ္ခု တိုးလာတာကို ေတြ႕ၾကရပါမယ္။ View Blog တြင္ Click ႏွိပ္ၾကည့္ပါက မိမိထည့္သြင္းခဲ့ေသာ Poll ကို ေအာက္ပါအတိုင္း ေတြ႕ၾကရပါမယ္။ Add Link List မိမိ Blog ကို ဝင္ေရာက္ဖတ္႐ူသူတို႔အားေကာင္းႏွု ိးရာရာ Website ေလးေတြ၊ ဦးတည္ခ်က္တူလို႔ ညႇန္ျပခ်င္တဲ့ Blog ေတြကို Link List အျဖစ္တန္းစီၿပီး ထည့္ထားလို႔ရပါတယ္။
 Element သစ္တခုကို ထည့္သြင္းခ်င္တိုင္းမွာ “Add a page element” တြင္ Click ႏွိပ္ၾကရမယ္။ Pop-up window ထဲက Link List ေနရာရွိ Add to blog တြင္ Click ႏွိပ္လိုက္ပါ။ ေအာက္ေဖာ္ျပပါ “Configure Link List” Window ကိုျမင္ၾကရမယ္။ ျပည့္စုံစြာ ျဖည့္စြက္ၿပီးလ်င္ Add Link တြင္ Click တစ္ခ်က္ႏွိပ္ပါ။ ဒါဆိုရင္ Link တစ္ခုစာရင္းဝင္သြားပါၿပီ။ URL ႏွင့္ Name တို႔တြင္ ျဖည့္စြက္ၿပီးေနာက္ Link မ်ားထပ္ထည့္ပါ။ ထည့္သြင္းလိုတဲ့ Link အေရအတြက္ ျပည့္ၿပီဆိုရင္ Save Changes တြင္ Click ႏွိပ္ပါ။ Pop-up window ေပ်ာက္သြားပါလိမ့္မယ္။
 Pop-up window ေပ်ာက္သြားၿပီးမွုလ (Template Page element) တြင္ Element အသစ္တစ္ခုထပ္တိုးလာပါမည္။ View Blog တြင္ Click ႏွိပ္ၾကည့္ပါက မိမိထည့္သြင္းခဲ့ေသာ Link List ကို ေတြ႕ၾကရပါမယ္။ ဒါဆိုရင္ HTML Code ေတြကို Copy ကူးၿပိးသြားၿပီ။ ေနာက္တဆင့္ ဆက္ရန္အတြက္ www.blogger.com ထဲ Login ဝင္ေရာက္ၿပီး Page Element သစ္တခုထည့္ရန္ ျပင္ဆင္ၾကရပါမယ္။ HTML Java Script ေနရာရွိ Add to blog တြင္ Click ႏွိပ္လိုက္ပါ။ Configure window ပြင့္လာပါမယ္။

Title တြင္ နာရီႏွင့္ ပတ္သတ္၍ ေပးလိုေသာ အမည္ရိုက္ထည့္ပါ။ (ဥပမာ-ျမန္မာစံေတာ္ခ်ိန္) Content ေနရာထဲတြင္ ညာဘက္ Click ႏွိိပ္ၿပီး Paste လုပ္လိုက္ပါ။ ဒါဆိုရင္
www.clocllink.com ကေနကူးလာတဲ့ HTML Code မ်ား ဒီ Content ထဲမွာ ေပၚလာပါမည္။ Save Changes တြင္ Click ႏွိပ္ပါက စတင္ Save လုပ္ပါလိမ့္မယ္။ ၿပီးၿပီဆိုရင္ Page Element Added ဆိုၿပီးေပၚလာပါမည္။ View Blog တြင္ Click ႏွိပ္ၾကည့္ပါက Blog စာမ်က္ႏွာတြင္ နာရီကို ျမင္ၾကရပါမယ္။

Email ျဖင့္ Post အသစ္မ်ားတင္ျခင္း Blogger ကို ေရြးခ်ယ္မွုအတြက္ ေက်နပ္ႏွစ္သက္မွုကို ေပးစြမ္းနိုင္မည့္ ထူးျခားသည့္ အပိုင္းကေတာ့ Email ျဖင့္ Post လွမ္းတင္နိုင္ျခင္းပင္ ျဖစ္ပါတယ္။ သာမန္ Email ပို႔ရိုးပို႔စဥ္အတိုင္း ပို႔႐ုံျဖင့္ Blog ထဲမွာ Post တစ္ခုတင္ၿပီးသား ျဖစ္ပါလိမ့္မယ္။ ဆိုရရင္ Email ပို႔တဲ့အခါေရးသည့္ Subject သည္ Post Title ျဖစ္လာမည္။ Email Message တြင္ပါ စာသားတို႔သည္ Post တြင္းပါစာသားမ်ား ျဖစ္လာပါလိမ့္မယ္။ အဓိကက်တာက To ေနရာမွာ ထည့္သြင္းေပးပို႔ရမယ့္ Email Address ပင္ျဖစ္ပါတယ္။


၄င္း Email လိပ္စာကိုရရွိဖို႔ရန္ Blogger မွာ Login ဝင္ေရာက္ၿပိး ဖန္တီး ယူရမယ္။ ၿပီးရင္ လ်ိဳ႕ဝွက္ထားရမယ္။ ဘာျဖစ္လို႔လည္းဆိုေတာ့ ဘယ္သူပဲပို႔ပို႔ အဲဒီလ်ိဳ႕ဝွက္လိပ္စာဆီပို႔လို က္ၿပီဆိုတာႏွင့္ Blog ထဲမွ Post တစ္ခုအေနႏွင့္ တက္လာေတာ့မွာ ျဖစ္သည့္အတြက္ ထိုလိပ္စာကို လုံးဝ လ်ိဳ႕ဝွက္ထားရပါမယ္။ ပထမ အဆင့္အေနႏွင့္ လ်ိဳ႕ဝွက္လိပ္စာ (Secret Email Address) ရရွိေအာင္လုပ္ေဆာင္ပုံ အဆင့္ဆင့္ကို ၾကည့္ၾကရေအာင္။ ၿပီးမွ Gmail ဖြင့္ၿပီး ၄င္းလ်ိဳ႕ဝွက္ လိပ္စာထံသို႔ Email တစ္ေစာင္ေရးပို႔ၿပီး Post လွမ္းတင္ပုံကို ဆက္လက္ ေျပာျပသြားပါမယ္။


1.
www.blogger.com ထဲသို႔ Login ဝင္ေရာက္ခဲ့ၿပီးၿပီဆိုရင္ Setting tab ေအာက္တြင္ရွိေသာ Email ထဲသို႔သြားလိုက္ရေအာင္။ ဒီေနရာကို (Setting/Email) Page လို႔ေခၚလိုက္က်ရေအာင္။

2. Blog Send Address ေနရာတြင္ မိမိရဲ့ Email လိပ္စာကိုထည့္သြင္းေပးလိုက္ပါ။ Mail-to-Blog Address ေနရာတြင္ လ်ိဳ႕ဝွက္လိပ္စာအတြက္ မိမိအသုံးျပဳလိုတဲ့ စာလုံးမ်ားကို ထည့္ေပးရပါမယ္။ လ်ိဳ႕ဝွက္ Email လိပ္စာသည္ ေအာက္ေဖာ္ျပပါ ပုံစံအတိုင္းျဖစ္သည္။ ------@blogger.com လိပ္စာမွ -----ျပထားေသာ ေနရာမ်ားသည္ ကိုယ္ထည့္ရမည့္ အပိုင္းပင္ ျဖစ္ပါတယ္။ ေရွ႕ကဆိုခဲ့သလိုပင္ လ်ိဳ႕ဝွက္လိပ္စာျဖစ္ရမွာ ျဖစ္သည့္အတြက္ အျခားသူမ်ားခန္႔ မွန္းလို႔ မရနိုင္ေစမည့္ စာလုံးမ်ားသာ ျဖစ္သင့္ပါတယ္။ အနည္းဆုံး ၄-လုံးျဖည့္သြင္း ၾကရပါမယ္။ ဥပမာ-ပုံအရ လ်ိဳ႕ဝွက္စာသည္ username@blogger.com ျဖစ္လာပါမည္။


3. Save Setting တြင္ Click တစ္ခ်က္ႏွိပ္လိုက္ပါ။ Secretemail Adddress တစ္ခုတည္ေဆာက္ျခင္း ၿပီးဆုံးသြားပါၿပီ။ ဒါဆိုရင္ ဒုတိယအဆင့္ျဖစ္တဲ့ Email မွတဆင့္ Post လွမ္းေရးဖို႔ရန္ အဆင္သင့္ ျဖစ္ပါၿပီ။ Email ဖြင့္ၿပီး Post တစ္ခုေလာက္ေရးတင္ပုံကို ၾကည့္လိုက္ရေအာင္……..


1. To ေနရာတြင္ လ်ိဳ႕ဝွက္လိပ္စာကို ထည့္သြင္းပါ။


2. Subject ေနရာတြင္ ေရးခဲ့ေသာ စာသားမ်ားသည္ Post title ျဖစ္လာလိမ့္မည္။ 3. Email Message ၏ Body ထဲတြင္ ေရးသားေသာ စာမ်ားသည္ Post တြင္ပါ စာသားမ်ား ျဖစ္လာပါလိမ့္မယ္။


ေရးလိုသမ် ေရးၿပီးၿပီဆိုရင္ ေနာက္မွ စာေနာက္ဆုံးမွာ #end ဆိုတာေလးကိုထည့္ေပးလိုက္ပါ။ ဒီေနရာအထိပဲဆိုတဲ့ သေဘာျဖစ္ပါတယ္။ အခ်ိဳ႕ Email Program ေတြမွာ ကိုယ္ေရးတာအျပင္ “No Virus Found” ဆိုတဲ့ စာသားေတြ၊ ေၾကာ္ျငာေတြအလိုလိုပါသြား တတ္ပါတယ္။ အဲ့ဒါေတြမပါေအာင္ #end ကိုထည့္ရျခင္း ျဖစ္ပါတယ္။ စိ္တ္တိုင္းက်ၿပီဆိုလ်င္ Send တြင္ Click ႏွိပ္ၿပီးပို႔လိုက္ပါ။ ခဏအၾကာ Blog ထဲမွာ Post သစ္တခုတိုးလာပါလိမ့္မယ္။


Blog ေရးနည္း Blog တို႔သည္ Website မ်ားကဲ့သို႔ပင္ ျဖစ္ပါသည္။ ဆိုရရင္ Website မ်ားမွာကဲ့သို႔ Blog တစ္ခုမွာလည္း အျခားမည္သည့္ Blog တို႔ႏွင့္ မတူနိုင္တဲ့ ကိုယ္ပိုင္လိပ္စာ ( URL) တစ္ခုစီရွိၾကပါတယ္။ Page တစ္ခုကေန အျခား Page တစ္ခုကို ကူးေျပာင္းၾကည့္႐ူနိုင္တဲ့ Hyperlink ေတြပါရွိၾကတယ္။ ဒါက အေျခခံ အက်ဆုံး တူညီခ်က္ေတြကို ေျပာတာပါ။ သေဘာတရားအားျဖင့္ အနည္းငယ္ကြဲလြဲမွုေလးေတြေတာ့ ရွိပါတယ္။


အဓိကအားျဖင့္ Website တို႔တြင္ ေရးသားေဖာ္ျပထားေသာ အေၾကာင္းအရာတို႔ႏွင့္ ပတ္သက္ၿပီး ဝင္ေရာက္ဖတ္႐ူ႔သူမ်ားအေနႏွင့္ ပါဝင္ေဆြးေႏြးခြင့္မရွိပါဘူး။ ဝင္ေရာက္ဖတ္႐ူနိုင္႐ုံသက္သက္ ျဖစ္ပါတယ္။ သို႔ေသာ္ Blog တြင္ ပါဝင္ေရးသားခ်က္မ်ားေပၚမွာ စိတ္ဝင္စားရင္ ဖတ္႐ူသူတို႔ ကိုယ္တိုင္ ေဝဖန္ေဆြးေႏြး Comment ဝင္ေရးလို႔ ရနိုင္ပါတယ္။ သိလိုသမ်ကိုလည္း ေမးျမန္းနိုင္ၾကပါတယ္။ C-Box C-Box ဆိုတာက Blog Page အေတာ္မ်ားမ်ားမွာ ေတြ႕ရေလ့ရွိတဲ့ စကားေျပာခန္း (Chat room) ေလးမ်ားပဲ ျဖစ္ပါတယ္။


အဲဒီ C-Box ထဲမွာ Post တြင္းပါ အေၾကာင္းအရာတို႔ႏွင့္ ပတ္သက္ၿပီး လြယ္လြယ္ကူကူ ေဆြးေႏြးေမးျမန္းနိုင္ၾကသလို Blog ကိုလာေရာက္လည္ပတ္သူေတြ အခ်င္းခ်င္းလည္း ႏွစ္သက္ရာ အေၾကာင္းအရာကို ေခါင္းစဥ္တင္ ေဆြးေႏြးနိုင္ၾကသည္။ သေဘာက Blog ပိုင္ရွင္ႏွင့္ ဝင္ေရာက္ဖတ္႐ူသူတို႔အလြယ္တကူ ထိေတြ႕ ဆက္ဆံနိုင္တဲ့ ေနရာေလးပင္ ျဖစ္ပါတယ္။ မိမိရဲ့ Blog မွာလည္း C-Box ထားခ်င္ရင္ အခေၾကးေငြကုန္က်မွုမရွိဘဲ ထည့္သြင္းထားနိုင္ပါတယ္။ Blog ထဲမွာ C-box ထည့္ျခင္းကို ေအာက္ေဖာ္ျပပါအတိုင္း ၃ပိုင္းခြဲ၍ ေဖာ္ျပသြားပါမယ္။


1) Create an C-Box Account 2) Configuring C-Box 3) Add to Blog Create an C-Box Account C-Box ထံမွ Account တစ္ခုရရွိရန္ ထုံးစံအတိုင္း ပထမဦးစြာ Registration လုပ္ရမယ္။ ၿပီးရင္ Email မွတဆင့္ Activative လုပ္ၾကရပါမယ္။


1.
www.Cbox.ws သို႔သြားပါ။ ေရာက္ၿပီဆိုရင္ Account သစ္တစ္ခုစေဆာက္ရန္ Signup တြင္ Click ႏွိပ္လိုက္ပါ။

2. Username၊ Password အပါအဝင္ Email Address တို႔ကိုျဖည့္ၿပီး Register လုပ္ရပါမယ္။ ျပည့္စုံစြာ ျဖည့္စြက္ၿပီးလ်င္ Finish တြင္ Click တစ္ခ်က္ႏွိပ္လိုက္ပါ။ ဒါဆိုရင္ Registration လုပ္ျခင္း ၿပီးဆုံးသြားၿပိး မိမိထည့္သြင္းေပးခဲ့ေသာ Email လိပ္စာတြင္းသို႔ C-Box မွ Mail တစ္ေစာင္ပို႔ထားပါလိမ့္မယ္။


3. C-Box တြင္ Register လုပ္စဥ္အခါတုန္းက ေပးခဲ့ေသာ Email အတြင္းသို႔ Login ဝင္လိုက္ပါက C-Box မွပို႔ထားေသာ Message အားေတြ႕ရပါမယ္။ ၄င္း Mail Message အားဖြင့္ဖတ္လိုက္ပါ။


4. ပြင့္လာေသာ Mail Message ထဲတြင္
www.cbox.ws သို႔ဝင္ေရာက္တဲ့အခါ အသုံးျပဳနိုင္မည့္ Username ႏွင့္ Password တို႔ကို ေတြ႕ရပါမယ္။ လိုအပ္ပါက ကူးယူမွတ္ထားလိုက္ပါ။ ထို႔ေနာက္ အျပာ ေရာင္ Activation Link ေပၚတြင္ Click တစ္ခ်က္ႏွိပ္လိုက္ပါ။ သီးျခား Window တစ္ခုပြင့္လာၿပီး www.cbox.ws သို႔ ျပန္ေရာက္သြားပါမယ္။ 5. Activation လုပ္ရန္အတြက္ Username ႏွင့္ Password ကိုျဖည့္ၿပီး Login ဝင္ရပါမယ္။ (Username က ျဖည့္ၿပီးသားျဖစ္ပါလိမ့္မယ္)။ Password ျဖည့္ၿပီး Login တြင္ click ႏွိပ္လိုက္ပါ။

ဒါဆိုရင္
www.cbox.ws သို႔ Login ဝင္ေရာက္သြားၿပီး Activaiton လုပ္ျခငး္ၿပီးဆုံးၿပီျဖစ္ပါတယ္။ Configuring you C-Box C-box တြင္ Login ဝင္ေရာက္ခဲ့ၿပီးၿပီဆိုရင္ လိုအပ္သလို Setting အခ်ိဳ႕ကို ျပင္ဆင္နိုင္ၾကပါၿပီ။ အထူးသျဖင့္ C-Box အရြယ္အစား၊ စာလုံးအေရာင္ အစရွိသျဖင့္ေပါ့။ စိတ္တိုင္းက်ၿပီဆိုမွ နာရီေတြ၊ ျပကၡဒိန္ေတြထည္သလိုပင္ HTML Code မ်ားအား Copy ကူးယူၿပီး မိမိ Blog ထဲသြားထည့္ၾကရပါမယ္။

1. C-Box အတြင္းဝင္ေရာက္ၿပိးၿပီဆိုလ်င္ မိမိေရာက္ရွိေနေသာ ေနရာသည္ Admin ေအာက္မွာ My Account ဆိုတဲ့ ေနရာျဖစ္ပါတယ္။ (Page ၏ ဘယ္ဘက္ Quick Setup၊ Option အစရွိသည္တို႔ထဲမွ My Account သည္ High Light ျဖစ္ေနပါမည္)။ C-Box Options တြင္ Click ႏွိပ္လိုက္ပါ။


2. Options ထဲတြင္ C-Box ရဲ့ အရြယ္အစားကို လိုသလို ျမင္နိုင္ပါတယ္။ မွုလ အရြယ္အစားက 160*380 px ျဖစ္ပါတယ္။


3. အကယ္၍မ်ား 200*400 px လို႔မ်ား ေျပာင္းလိုက္ရင္ C-Box သည္ ေဘးဘက္ပိုက်ယ္လာမယ္။ အေပၚေအာက္ ရွည္လာမယ္ေပါ့။ တစ္ခုခုျပင္ခဲ့တယ္ဆိုရင္ အေရးႀကီးတာက Save တြင္ Click ႏွိပ္ရပါမယ္။ မွတ္ခ်က္။ ။ စာလုံးအေရာင္အရြယ္အစားေတြကို ေျပာင္းလိုလ်င္ Colours & Fonts တြင္ Click ႏွိပ္သြားေရာက္ၿပီး လိုသလိုျပင္ဆင္နိုင္ပါတယ္။

 ေနာက္တခါ Smiles ထဲမွာဆိုရင္ Keyboard ကေနဘယ္ေသကၤတေတြတြဲရိုက္ပါက C-Box ထဲမွာ ဘယ္လိုပုံ (Gesture) ေလးေတြေပၚမယ္ဆိုတာ မ်ိဳးသြားေရာက္ေလ့လာ ထားနိုင္ၾကပါတယ္။ C-Box အတြင္းေရးသားထားေသာ Message မ်ားအား ဖ်က္ထုတ္ျခငး္၊ ဘယ္သူေတြကိုေတာ့ ဝင္ေရာက္ ေရးသားခြင့္ မျပဳဆိုတာမ်ိဳးေတြ ကန္႔သတ္လိုပါက Message Blocked user တို႔ထဲမွာ လုပ္ေဆာင္ နိုင္ၾကပါတယ္။ ယခုအဆင့္တင္ မလိုအပ္ေသးပါ။

4. စိတ္တိုင္းက်ျပင္ဆင္ခဲ့ၿပီးၿပီ ဆိုရင္ မိမိ Blog တြင္ ထည့္သြင္းရန္အတြက္ HTML Code မ်ားကို Copy ကူးယူရပါမယ္။ Quick setup တြင္ Click ႏွိပ္လိုက္ပါ။ မိမိရဲ့ C-Box အတြက္ HTML Code မ်ားျမင္ၾကရ ပါမယ္။ 5. “Copy to Clipboard” တြင္ Click ႏွိပ္လိုက္ပါက ၄င္း Code မ်ားအားလုံးကို Copy ကူးယူၿပီးသြားပါၿပိ။ တစ္ေနရာတြင္ Paste (Ctrl+v) လုပ္နိုင္ၿပီျဖစ္ေၾကာင္း ေဖာ္ျပေသာ Message ပါသည့္ Box က်လာပါမည္။ OK တြင္ ႏွိပ္ၿပိး ပိတ္လိုက္ပါ။

 Add to Blog C-Box အတြက္ HTML Code ေတြ Copy ကူးခဲ့ၿပိးလ်င္ ေရွ႕က နာရီ၊ ျပကၡဒိန္တို႔ ထည့္သလိုပင္ Blog Page Element တစ္ခုအျဖစ္ Paste လုပ္ၿပီးထည့္ၾက႐ုံ ျဖစ္ပါတယ္။ HTML Java Script ေနရာရွိ Add to Blog တြင္ Click ႏွိပ္လိုက္ပါ။ Configure Window ပြင့္လာပါမည္။ Title ေနရာတြင္ ေပးလိုေသာ အမည္ထည့္ပါ။ ဥပမာ-မွာခ်င္တာေလးေတြရွိရင္မွာ ခဲ့ပါ။ Content ထဲတြင္ Cursor ခ်ၿပီး (Ctrl+V) တြဲႏွိပ္ပါ (သို႔) Content ေနရာထဲတြင္ ညာဘက္ Click ႏွိပ္ၿပီး Paste လုပ္လိုက္ပါ။ ကူးလာတဲ့ HTML Code မ်ား ဒီေနရာတြင္ ေပၚလာမည္။ Save Changes တြင္ Click ႏွိပ္ၿပီး Save လုပ္လိုက္ပါ။ View Blog တြင္ Click ႏွိပ္ၾကည့္ပါက Blog စာမ်က္ႏွာတြင္ C-Box ကို ျမင္ၾကရပါမယ္။

ဒါဆိုရင္ Blog တြင္းသို႔ (C-Box) လို႔ေခၚတဲ့ စကားေျပာခန္း (Chat Room) ေလးတစ္ခု ထည့္သြင္းၿပီးသြားပါၿပီ။ Manage Page Element မိမိရဲ့ Blog မွာ ထည့္သြင္းထားသည့္ Page Element ေတြထဲက ဘယ္ဟာေတြကိုေတာ့ အေပၚကထားမယ္။ ဘယ္ Element ေတြကိုေတာ့ ေအာက္မွာထားမယ္ အစရွိသျဖင့္ လိုသလို ေနရာခ် လို႔ရပါတယ္။ “ဥပမာ-ကဗ်ာေရးေလ့ရွိပါသလား” လို႔ အမည္ေပးထားသည့္ “Poll Element” ကို အေပၚဆုံးမွာ ထားလိုတယ္ဆိုပါစို႔။ Mouse Pointer ကို ထို Poll Element ေပၚေရွ႕လိုက္ပါ။ Cursor သည္ Drag ဆိုတဲ့ ဖိဆြဲလို႔ရတဲ့ မွားပုံေလးေထာင့္ေလး ေျပာင္းသြားပါမည္။


အဲဒီအခ်ိန္မွာ Mouse ျဖင့္ Drag ဆြဲၿပီး လိုသည့္ေနရာေရာက္လ်င္ လွတ္လိုက္ပါ။ ဒါဆိုရင္ ၄င္း Element သည္ အေပၚသို႔ ေရာက္သြားပါမည္။ စိတ္တိုင္းက် ေရွ႕ၿပီးးလ်င္ Save တြင္ Click ႏွိပ္ရန္မေမ့ပါႏွင့္။ Edit (or) Delete Page Element မိမိထည့္သြင္းထားခဲ့သည့္ Page Element ေတြထဲက အခ်ိဳ႕ကို ျပန္လည္ျပင္ဆင္ျခင္းသို႔တည္းမဟု တ္ မလိုအပ္ေတာ့၍ ဖ်က္ထုတ္ျခင္းမ်ားကို လိုအပ္သလို လုပ္ေဆာင္နိုင္ၾကပါတယ္။

 ျပန္လည္ ျပင္ဆင္တည္းျဖတ္လိုေသာ Page Element ၏ Edit ေပၚတြင္ Click တစ္ခ်က္ႏွိပ္လိုက္ပါ။ Configure Window ျပန္ပြင့္လာပါလိမ့္မယ္။ ျပင္ဆင္လိုသည့္ စာသားမ်ာကို ျပင္ဆင္နိုင္ပါၿပီ။ အကယ္၍ မ်ားလုံးဝဖ်က္ထုတ္လိုပါက Remove Page Element တြင္ ႏွိပ္ၿပီး ဖ်က္ထုတ္နိုင္ၾကပါတယ္။ Edit Header Header ဆိုတာဟာ Blog title ႏွင့္ Description အျဖစ္ထည့္သြင္းထားေသာ စာသားမ်ားရွိရာ ေနရာ ျဖစ္သည္။ Header ရွိ Edit တြင္ Click ႏွိပ္လိုက္ပါ။ Configuration Window ပြင့္လာပါမည္။ ၄င္း Window ထဲတြင္ Blog title ႏွင့္ Description တို႔ကို ေတြ႕ရပါမယ္။ ျပင္လိုက ျပင္နိုင္ပါတယ္။

ဒီေနရာမွာ Header ကို ထူးျခားေအာင္ လုပ္လို႔ရတာက ေနာက္ခံေနရာမွာ မိမိႏွစ္သက္ရာ ပုံကို ေျပာင္း ထည့္ထားနိုင္ျခငး္ျဖစ္ပါတယ္။ Browse တြင္ Click ႏွိပ္ၿပီး Header ေနာက္ခံထားလိုသည့္ ပုံဖိုင္လ္ကို ေရြးေပးပါ။ စိတ္တိုင္းက်ၿပီဆိုရင္ Save Changes တြင္ Click ႏွိပ္ၿပီး သိမး္ဆည္းလိုက္ပါ။ ဒါဆိုရင္ Blog ကို ျပန္ၾကည့္ပါက Header ေနရာမွာ ေရွ႕ကလို ေနာက္ခံပလိတ္ မဟုတ္ေတာ့ပဲ မိမိေရြးခ်ယ္ထည့္သြင္းခဲ့တဲ့ ပုံေနာက္ခံ ျဖစ္သြားပါလိမ့္မယ္။ Blogger ျဖင့္ Blog ေရးရန္ဘာေတြလိုမလဲ ပုံမွန္အားျဖင့္ Blog ေရးခ်င္တဲ့ Website မွာ Register အရင္လုပ္ရတယ္။ ၿပီးမွစေရးလို႔ရတယ္။


ဆိုရရင္ Multiply မွာေရးခ်င္ရင္
www.multiply.com ကို သြား၊ ထုံးစံအတိုင္း Email လိပ္စာေပးၿပီး Registe လုပ္၊ ၿပီးရင္ စေရးလို႔ရၿပီ Blogger မွာလည္း ေယဘုယ်အားျဖင့္ ထိုနည္းအတိုင္းပါပဲ။ သို႔ေသာ္ မိမိမွာ Gmail Account တစ္ခုရွိရမယ္ဆိုရင္ေတာ့ Blogger မွာ Register လုပ္စရာမလိုပဲ တန္းေရးလို႔ရတယ္။ သေဘာက Blogger သည္ Google ကေပးတဲ့ Service Gmail သည္လည္း Google ကေပးတဲ့ Service ျဖစ္သည့္အတြက္ Gmail Account ရွိသူတေယာက္ျဖစ္ဖို႔လိုပါသည္။ ၀ါသနာပါသူမ်ား အလြယ္တကူ ရွာေဖြဖတ္ရွုနိုင္ေစလိုေသာေၾကာင့္လည္းေကာင္း၊
(မူရင္းေရးသားသူ၏ ေရးသာခ်က္ေလး ျပန္႔ပြားျပီး လူ အသိမ်ားေစလိုေသာေၾကာင့္ လည္းေကာင္း ထပ္ဆင့္မ်ေဝလိုက္ပါသည္။ )

Huawei C8812 ROOT လုပ္နည္း၊ ျမန္မာေဖာင့္သြင္းနည္း

10:01:00 PM အမ်ဳိးေကာင္း သား 3 comments

Credits to ေအာင္ခိုင္ မိုး
  • ကၽြန္ေတာ္ ေရွ႕မွာလည္း Huawei C8812 ကို ROOT လုပ္နည္း တင္ေပးၿပီးသြားပါၿပီ။ C-Box မွာ အစ္ကို တစ္ေယာက္က အဆင္မေျပဘူးဆိုလို႕ သီးသန္႕ေရးေပးလိုက္ပါတယ္။ ခုေနာက္ပုိင္း CDMA ေတြအတြက္ အသစ္ထုတ္လိုက္တဲ့ C8812 ကို လူေတာ္ေတာ္မ်ားမ်ား ကိုင္လာၾကပါတယ္။ Android Version 4.0.3 ( ICS ) မို႕လို႕ ေတာ္ေတာ္မ်ားမ်ားကလည္း စိတ္၀င္စားၾကပါတယ္။ ခုကၽြန္ေတာ္ ROOT လုပ္နည္းေလး တင္ေပးသြားပါ့မယ္။
  • အရင္ဆံုးေတာ့ C8812 ရဲ႕ Driver ကို မိမိစက္မွာ သြင္းေပးထားဖို႕ လိုပါတယ္။ မရွိတဲ့သူမ်ားအတြက္ ေအာက္မွာ ကၽြန္ေတာ္ တင္ေပးထားပါတယ္။ မိမိ Windows အလိုက္ ဆြဲသြားၾကပါ။
  • ၿပီးရင္ ေအာက္မွာ Root ဖိုင္ေလးကို Download လုပ္လုိက္ပါ။
  •  ၿပီးရင္ေတာ့ ေအာက္ကအဆင့္ေတြအတုိင္း လုပ္သြားလုိက္ပါ။
ROOT လုပ္နည္း 
  1. အဲ Zip ဖိုင္ေလးကို Extra လုပ္လိုက္ပါ။ အဲထဲမွာ ပါလာတဲ့ Recovery.exe ဖိုင္ေလးကို Run လိုက္ပါ။
  2. ၿပီးလွ်င္ မိမိဖုန္းရဲ႕ Setting ထဲက Application ထဲမွာ Fast Boot ကို Off လုပ္ထားေပးပါ။
  3. မိမိဖုန္းရဲ႕ SD Card ထဲသို႕ ခုနက Extra လုပ္ထားတဲ့ update.zip ဖိုင္ေလးကို ထည့္လုိက္ပါ။
  4. မိမိဖုန္းကို Power ပိတ္လုိက္ပါ။ ၿပီးလွ်င္ Volume Down + Power ကို 3 မိနစ္ေလာက္ ဖိထားပါ။ Huawei Logo မွာရပ္ေနပါမယ္။
  5. Logo မွာ ရပ္ေနပါက ဖုန္းကို USB Cable ႀကိဳးျဖင့္ ကြန္ပ်ဳတာႏွင့္ခ်ိတ္လုိက္ပါ။
  6. ခုနက ကြန္ပ်ဴတာမွာ Run ထားတဲ့ Recovery ေနရာမွာ Space Bar ႏွိပ္သြားပါ။ Update လုပ္ေနတာကို ေတြ႕ရပါမယ္။
  7. ၿပီးလွ်င္ Battery ကို ဆြဲၿဖဳတ္လိုက္ပါ။ Volume Up + Power ကို ထပ္ၿပီး ေတာ့ ဖိထားေပးပါ။ Recovery Mode ထဲ ၀င္သြားပါမယ္။
  8. ၿပီးလွ်င္ update.zip ဖိုင္ေလးကို ေရြးေပးလုိက္ပါ။
  9. သူ႕ကသူ လုပ္ေနပါလိမ့္မယ္။ ၿပီးသြားၿပီဆိုရင္ေတာ့ မိမိဖုန္းဟာ Root လုပ္ၿခင္း ေအာင္ျမင္သြားပါၿပီ။
  •  ၿမန္မာေဖာင့္သြင္းနည္း ( Credit to Myanmar Mobile User Club )
  •  ၿမန္မာေဖာင့္သြင္းနည္းကို MMUC မွ ကိုသူရိန္ ေရးထားတဲ့ ပို႕စ္ေလးကို ေတြ႕လို႕ ျပန္ Share လုပ္ေပးလုိက္ပါတယ္။ သြင္းဖို႕အတြက္ ေအာက္ကဖိုင္ေလးကို Download လုပ္လုိက္ပါ။
  • ၿပီးလွ်င္ မိမိဖုန္းထဲသို႕ ထို apk ဖိုင္အား ထည့္ၿပီး Install လုပ္လုိက္ပါ။ ၿပီးလွ်င္ ဖြင့္လိုက္ပါ။ Check For Root Access ကို ႏွိပ္ပါ။ Superuser Permission ေတာင္းပါလိမ့္မယ္။ Allow လုပ္ေပးပါ။ ဒါဆို Installလုပ္လို႕ရမယ့္ ေဖာင့္ေလးေတြ ေပၚလာပါမယ္။ မိမိႏွစ္သက္တဲ့ ေဖာင့္အမ်ိဳးအစားကိုေရြးၿပီး Install လုပ္လုိက္ပါ။ Sketch Font က ICS နဲ႕ ေတာ္ေတာ္လွတယ္လို႕ေျပာပါတယ္။ ကိုယ္ၾကိဳက္တာကိုကိုယ္ Install လုပ္ပါ။ Install ၿပီးပါက Reboot လုပ္ခုိင္းပါမယ္။ လုပ္လိုက္ပါ။ ျပန္တက္လာလွ်င္ေတာ့ ျမန္မာလို ျမင္ရၿပီျဖစ္ပါတယ္။
KEYBOARD သြင္းနည္း  
  • KEYBOARD သြင္းဖို႕အတြက္ ေအာက္မွာ Download လုပ္လုိက္ပါ။
  • ၿပီးလွ်င္  မိမိဖုန္းမွာ Install လုပ္လုိက္ပါ။ ဖုန္းရဲ႕ Setting > Language & Input ကို သြားပါ။ MyanDroid Soft Keyboard ကို အမွန္ၿခစ္ေပးလိုက္ပါ။ ဒါဆို ျမန္မာလိုလည္း ရိုက္လို႕ရၿပီ ျဖစ္ပါတယ္။
Ref>>>> http://myanmarplay.com/

Saturday, November 24, 2012

Basic HTML.pdf file.pdf

I've shared an item with you.
Google Drive: create, share, and keep all your stuff in one place. Logo for Google Drive

Blogger မ်ားအတြက္ HTML မိတ္ဆက္

1 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
HTML မိတ္ဆက္
ယေန႕အခါမွာ Internet ဟာအလြန္က်ယ္ျပန္႕လာျပီး လူတိုင္းနီးပါးအသံုးျပဳၾကေပသည္။
ကၽြန္ေတာ္တို႕ေတြဟာလည္း Internet ေပၚမွာ ကိုယ္ပိုင္ေနရာမ်ားကို
ကိုယ္ပိုင္ Homepage မ်ားကို အလြယ္တကူ
ယူေဆာင္ႏိုင္ေလျပီ။ Internet ဆိုတာကို အက်ယ္ရွင္းမေနေတာ့ပါဘူး။
အလြယ္ရွင္းရရင္ေတာ့ Internet ဆိုတာ
ကမာၻ ေပၚရိွ ႏိုင္ငံအခ်င္းခ်င္း ခ်ိတ္ဆက္ထားေသာ Network
ကြန္ယက္ၾကီးတစ္ခုျဖစ္ပါသည္။ အဲဒီလို Information
ေတြ ဖလွယ္ဖို႕အတြက္ Web Page ေတြကို ေရးဆြဲရပါတယ္။ Web Page
ေရးဆြဲဖို႕ရာအတြက္ HTML ဟာ အဓိက
က်ပါတယ္။ ေရးသားထားတ့ ဲ Web Page ေတြကို Web Browser Software နဲ႕
ၾကည့္ရႈရပါတယ္။ Web Broswer
Software ေတြက Internet Explorer နဲ႕ Firefox တို႕က နာမည္ၾကီးေတြပါ။
HTML History
1989 ခုက Tim Berners-Lee နဲ႕ Rober Calliau ဟာ Research Documents
ေတြကို ပိုမိုျမန္ဆန္ေကာင္းမြန္ မယ့္
နည္းလမ္းကို ရွာေဖြခ့ပဲ ါတယ္။ ၂ ႏွစ္ ေလာက္ၾကာေတာ့ Berners-Lee ဟာ
browser ေတြက ၾကည့္ရႈဖတ္သားႏိုင္ျပီး
Tag မ်ားႏွင့္ ဖြဲ႕စည္းတည္ေဆာက္ထားတ့ ဲ နည္းပညာတစ္ခုကို ျပဳလုပ္ႏိုင္ခ့ပဲ
ါတယ္။ ထို႕ေနာက္အဲဒီ tage ေတြထဲမွာ
Hyper-Link နဲ႕ document အခ်င္းခ်င္းခ်ိတ္ဆက္ႏိုင္တ့ ဲ tag
ေတြပါထည့္သြင္းႏိုင္ခ့ပဲ ါသည္။ Berners-Lee ရဲ႕
နည္းပညာကို Hyber Text Markup Language ဆိုတ့ ဲ HTML ပါပဲ။
Tag ဆိုတာဘာလဲ
Tag ဆိုတာကေတာ့ ရိုးရိုး Text ေတြနဲ႕ HTML code ေတြကို
ခြဲျခားလို႕ရေအာင္လုပ္ထားတာပါ။
ဘယ္လိုမ်ဳိးလဲဆိုရင္ေတာ့ <b>This is bold </b> ဆိုရင္ web browser နဲ႕
ၾကည့္ရင္ စာလံုးဟာ bold
ျဖစ္ေနပါလိမ့္မယ္။ အဲဒီမွာ <b> နဲ႕ </b> တို႕ဟာ tag ေတြပါ။ အမ်ားအားျဖင့္
tag ေတြဟာ အဖြင့္ နဲ႕ အပိတ္ပါ
ပါတယ္။ အပိတ္ဆိုရင္ / ေလးခံထားေပးရပါတယ္။
HTML အတြက္ Editor
HTML အတြက္ Editor ေတြ IDE ေတြအမ်ားၾကီးရိွပါတယ္။ ကၽြန္ေတာ္ကေတာ့
Dreamweaver အၾကိဳက္ဆံုးပါပဲ။
သူက HTML မတတ္ရင္ေတာင္ Website တစ္ခုဆြဲလို႕ရပါတယ္။ ဒါေပမယ့္ Dreamweaver
ကိုသံုးရင္ေတာ့ HTML
code ေတြသိလာမွာ မဟုတ္သလို တျခား website ေတြကို
ျပင္ရတာလည္းခက္ပါလိမ့္မယ္။ ကၽြန္ေတာ္တို႕ေတြ
သူမ်ားေတြေပးထားတ့ ဲ website template ကိုျပင္ခ်င္တယ္။
ကိုယ္ပိုင္ေသေသခ်ာခ်ာ HTML code
ေတြကိုသိခ်င္တယ္။ ဒါဆိုရင္ေတာ့ ေလ့လာကာစမွာ Notepad သံုးျပီးေလ့လာပါ။
ေလ့က်င့္ပါ။ HTML က web site
2 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
ဆြဲရတ့ ဲ အထမဲ ွာ အလြယ္ဆုံးနဲ႕ အေျခခံအက်ဆုံးပဲ။
သူ႕ကိုေသေသခ်ာခ်ာနားလည္ထားမွ တျခား web
programming ေတြျဖစ္တ့ ဲ PHP, ASP.NET , JSP , Ruy On Rail တို႕မွာ
အေထာက္အကူျဖစ္မွာပါ။
HTML ကိုေလ့လာမယ္
1.Starting To Creat and Edit Webpage
Notepad ျဖင့္စတင္ျခင္း
၁. Windows Key + R ကို ႏိွပ္လိုက္ပါ။ Run Dailog Box တက္လာပါမည္။
ထို႕ေနာက္ notepad လုိ႕ရိုက္လိုက္ပါ။
ျပီးလွ်င္ OK ကို ႏိွပ္လိုက္ပါ။ ဒါဆိုရင္ notepad တက္လာပါလိမ့္မယ္။
၂. Notepad ထဲတြင္ Format ေအာက္က word warp ကို check လုပ္ထားပါ ။
ဘာျဖစ္လို႕လည္းဆိုရင္ေတာ့ Word
Warp က Notepad မွာစာရိုက္တာ ျပည့္သြားရင္ ေအာက္တစ္ေၾကာင္း
ဆင္းသြားရန္အတြက္ ျဖစ္သည္။
HTML စတင္ေရးသားျခင္း
၁. Notepad ထဲတြင္ အခုလိုေရးသားလိုက္ပါ။
3 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
<html>
<head>
<title>This is title</title>
</head>
<body>
This is body
</body>
</html>
HTML နဲ႕ စျပီး HTML နဲ႕ျပန္ပိတ္ရပါတယ္။ အဲဒီၾကားမွာ html code
ေတြေရးရပါတယ္။ Head Tag နဲ႕ Head Tag အပိတ္ၾကားတြင္ Title
ထည့္ထားသည္ကို ေတြ႕ရမည္။ Title သည္ Browser ၏ ထိပ္ bar တြင္
ေတြ႕ျမင္ရန္ျဖစ္သည္။ Body အဖြင့္ နဲ႕ အပိတ္ၾကားမွာ မိမိ၏ ႏွစ္သက္ရာ
စာမ်ားေရးသားႏိုင္သည္ ။
၂. အဲဒါကို တေနရာ မွာ save သြင္းလိုက္ပါ။ Save Dialog box
တက္လာရင္ filetype ကို All file လို႕ေပးလိုက္ပါ။ file name ကို
firstrun.html လို႕ေပးလိုက္ပါ။ firstrun သည္
မိမိ၏ ႏွစ္သက္ရာ နာမည္ေပးႏိုင္သည္။ .html သည္ file extension ျဖစ္သည္။
HTML ေရးထားေသာ page မ်ားကို
.html ႏွင့္ .htm လို႕ေပးမွသာ browser တြင္ ေပၚပါလိမ့္မည္။
၃. Save သြင္းလိုက္ေသာ file လမ္းေၾကာင္းကို သြားလိုက္ပါ ။ first.html file
ေလးကို double click လုပ္ျပီး ဖြင့္လိုက္ပါ ။
ဒါဆို page ေလးတစ္ခုတက္လာတာကို ျမင္ရပါမယ္။
4 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
ထိပ္ပိုင္းတြင္ File ပတ္လမ္းေၾကာင္းကို address bar
တြင္ေတြ႕ရမည္ျဖစ္သည္။ title tag ထဲတြင္ ေရးထားေသာ This is tile
ဆိုေသာ စာကို Windos ၏ Title bar ႏွင့္ Tab Title bar တို႕တြင္
ေတြ႕ရမည္။ Body tag ထဲတြင္ ေရးထားေသာ This is body ဆိုေသာ
စာသားကို စာမ်က္ႏွာအျဖဴေပၚတြင္ ေပၚေနသည္ကို ေတြ႕ရမည္ျဖစ္သည္။
ျပင္မယ္ဆိုရင္ေတာ့
IE7 မွာဆိုရင္
Page > View Source ကိုႏိွပ္လိုက္ပါက Notepad န႕ဲ ကိုယ္ေရးထားတ့ ဲ HTML
ပြင့္လာပါမယ္။
IE 6 မွာဆိုရင္
View > Source ကို ႏိွပ္လိုက္ပါက Notepad နဲ႕ ကိုယ္ေရးထားတ့ ဲ HTML ပြင့္လာပါမယ္။
အဲဒီမွာ ေရးထားတ့ ဲ codeေတြကို ဖတ္ႏိုင္သလို ကိုယ့္စက္ထဲမွာေရးထားတ့ ဲ
page ဆိုရင္ေတာ့ ျပင္ျပီး တစ္ခါတည္း
save လုပ္ႏိုင္ပါတယ္။ Internet ေပၚက Web site ေတြကိုေတာ့ view > source
ကေနဖြင့္ျပင္ျပီး save
လုပ္လို႕မရပါဘူး။
Header Tag
5 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
notepad ထဲမွာ ဒီလိုရိုက္လိုက္ပါ
<html>
<head>
<title>Example Of Header</title>
</head>
<body>
<h1>This is Header</h1>
This is normal text
</body>
</html>
အဲဒီ code ေလးကို notepad ထဲမွာထည့္ေရး.. ျပီးေတာ့ run ၾကည့္လိုက္ပါ။
အခုလိုျမင္ရပါလိမ့္မယ္။ Head Tag က
h1 ကေန h6 အထိ ရိွပါတယ္။ နံပါတ္ၾကီးေလေလ ေသးသြားေလေလပဲ။ h6
ဆိုအေသးဆံုးကို ေရာက္သြားျပီ။ ကဲ
လက္ေတြ႕ စမ္းၾကည့္ရေအာင္။ notepad ထဲမွာ ေအာက္ကလို ရိုက္ျပီး save
လုပ္လိုက္။ ျပီးရင္ ဖြင့္ၾကည့္လိုက္ရင္
ေတြ႕ရပါလိမ့္မယ္။
<html>
<head>
<title>Example</title>
</head>
<body>
6 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
<h1>H1</h1>
<h2>H2</h2>
<h3>H3</h3>
<h4>H4</h4>
<h5>H5</h5>
<h6>H6</h6>
</body>
</html>
အခုဆို html အေၾကာင္းနည္းနည္း နားလည္လာေလာက္ပါျပီ။ တကယ္တန္းေတာ့
မခက္ပါဘူး။ ဒါကအစပ ဲ
ရိွပါေသးတယ္။ ဒီေလာက္ေလးန႕ဲ ပင္ စာေတြပဲပါတ့ ဲ page တစ္ခုေရးလို႕ရေနျပီ။
ဒါေပမယ့္ လိုအပ္တာေတ ြ
ရိွေသးတာေပါ့။ အခုဆက္ျပီး bold ၊ italic ၊ underline လုပ္ပံုေလးေတြ
ဆက္ေျပာပါမယ္။ လြယ္ပါတယ္။
Line Break
HTML မွာ စာတစ္ေၾကာင္းဆင္းခ်င္ရင္ေတာ့ <br/> ကိုသံုးပါတယ္။ သူ႕မွာ close tag
မပါဘူး။ <br/> ပဲေရးေရး <br> ပဲေရးေရးရပါတယ္။
<html>
<head>
<title>Example</title>
</head>
<body>
First Line<br/>Second Line<br>Third Line
</body>
</html>
7 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
Bold, Italic , Underline Tag
bold မို႕လို႕ ကၽြန္ေတာ္တို႕ေတြ <b> ကိုသံုးပါမယ္။ ေနာက္ျပီး italic
မို႕လို႕ <i> ေပါ့။ ဒါဆိုရင္ Underline
ကဘာလဲဆိုရင္ သိျပီးသားေလာက္ပါ။ ကၽြန္ေတာ္တို႕ေတြ <u> ကိုသံုးပါမယ္။
အဲဒါကို notepad ထဲမွာ ဒီလိုေရးျပီး
run လိုက္ရင္ရပါတယ္။
<html>
<body>
<b>This is bold</b> <br/>
<i>This is italic</i> <br/>
<u>This is underline</u> <br/>
</body>
</html>
Bold လုပ္မယ္။ ေနာက္ျပီး အဲဒါကို underline သားမယ္။ ဒါမွ မဟုတ္ italic
လုပ္မယ္။ အဲလိုမ်ဳိးလုပ္ခ်င္တယ္။
ရပါတယ္။ tag ေတြထဲမွာ tag ေတြထည့္လိုက္ေပါ့။ ဒီလိုထည့္လို႕ရပါတယ္။
<i><b>This is bold italic </b></i>
<u><i><b>This is bold italic </b></i></u>
အဲလိုမ်ဳိးေရးလို႕ရပါတယ္။ တခ်ဳိ႕လူေတြက ေမးတတ္တယ္။
<i> နဲ႕စမွ ရမွာလား။ ဒီလိုတိုင္း အစဥ္တိုင္းေရးမွ ရမွာလား။ ေနာက္ျပီး
<b><i></b></i> အဲလိုမ်ဳိးေတြေကာ
ပိတ္လို႕မရဘူးလား။
ဘာနဲ႕ စစရပါတယ္။ အစဥ္တိုင္းမဟုတ္ပဲ <b><i> This is bold italic </i></b>
လို႕ေရးလည္းျဖစ္ပါတယ္။
ေနာက္ျပီး tag အဖြင့္ေတြ အပိတ္ေတြက ၾကိဳက္သလိုျဖစ္ေနလို႕ရပါတယ္။ ဒါေပမယ့္
structure က်က်ေလး။
ပံုစံက်က်ေလး ျဖစ္ေနရင္ေကာင္းတာေပါ့။ ေနာက္မို႕ဆို code ကိုျပန္ဖတ္ရခက္တာေပါ့။
Pre Tag
8 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
ကၽြန္ေတာ္တို႕ေတြ စာတစ္ေၾကာင္းဆင္းရမွာ မၾကိဳက္ဘူး။ Enter
ေခါက္လိုက္ရံုနဲ႕တင္ တစ္ေၾကာင္းဆင္းခ်င္တယ္။
အလြယ္ဆံုး နည္းလမ္းကေတာ့ dream weaver သံုးလိုက္ျခင္းပဲ။ အဲဒါဆိုရင္ေတာ့ HTML
နားလည္မွာမဟုတ္ေတာ့ဘူး။ ေနာက္တစ္နည္းကေတာ့ <pre> ပါ။ ဒါေပမယ့္ သူက font
ပံုစံေျပာင္းသြားတယ္။
အဲဒါက ကိစၥ မရိွပါဘူး။ ေနာက္ပိုင္း font ေတြဘယ္လိုေျပာင္းရလဲ
ဆိုတာသိလာရင္ လာျပင္လုိက္လို႕ရပါတယ္။
ေနာက္ျပီး <pre> မွာ သူက tab ေခါက္ထားတာေတြ အစသိပါတယ္။
<html>
<head>
<title>Example</title>
</head>
<body>
<pre>Pre Tag, Now Enter
Now Tab Tab
</pre>
</body>
</html>
Paragraph Tag
ကၽြန္ေတာ္တို႕ေတြ စာေတြကို paragraph ပံုစံေရးခ်င္တယ္။ စာပိုဒ္ေတြနဲ႕
ေရးမယ္ေပါ့။ ဒါဆိုရင္ <p>
ကိုသံုးလို႕ရပါတယ္။ သူက အပိတ္ tag မပါလည္းရပါတယ္။ ထည့္ရင္ေတာ့ ပိုေကာင္းတာေပါ့။
<html>
<head>
<title>Example</title>
</head>
<body>
9 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
<h1>About Notepad</h1>
<p>Notepad is a basic text editing program and it is most commonly
used to view or edit
text files. A text file is a file type typically identified by the
.txt file name extension.</p>
<b> How do I change the font style and size?</b>
<p>Changes to the font style and size affect all the text in the document.<br/>
Click the Format menu, and then click Font.<br/>
Make your selections in the Font, Font style, and Size boxes.<br/>
An example of how your font will look appears under Sample.<br/>
When you are finished making font selections, click OK.<br></p>
</body>
</html>
Horizonal Line
ကၽြန္ေတာ္တို႕ေတြ horizonal မ်ဥ္းသားခ်င္တ့ ဲ အခါမွာ သုံးလို႕ရပါတယ္။
သုံးပုံသုံးနည္းကေတာ့ <hr> ပါပဲ။ close
tag မပါပါဘူး။
<html>
<head>
<title>Example</title>
</head>
<body>
10 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
<h1>About Notepad</h1>
<p>Notepad is a basic text editing program and it is most commonly
used to view or edit
text files. A text file is a file type typically identified by the
.txt file name extension. </p>
<hr>
<h1> How do I change the font style and size?</h1>
<p>Changes to the font style and size affect all the text in the document.<br/>
Click the Format menu, and then click Font.<br/>
Make your selections in the Font, Font style, and Size boxes.<br/>
An example of how your font will look appears under Sample.<br/>
When you are finished making font selections, click OK.<br></p>
</body>
</html>
အထက္ပါ code ကို run လိုက္ရင္ ဒီလိုျမင္ရမယ္။ အဲမွာ <hr> ထည့္ထားတ့ေဲ
နရာက line ေလးတားထားတာကို
ျမင္ရပါလိမ့္မယ္။
Attribue
11 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
ကၽြန္ေတာ္တို႕ေတြဟာ tag ေတြမွာလည္း attribute ေတြထည့္ျပီး
သံုးႏိုင္ပါတယ္။ attribute ဆိုတာကေတာ့ အဲဒီ
tag ပိုင္ဆိုင္တ့ ဲ properties ေပါ့။ tag တိုင္းမွာေတာ့ attribute
မရိွပါဘူး။ အခု ဦးစြာ အရင္ဆုံး body မွာပါတဲ့ color
attribute အေၾကာင္းေလးနဲ႕ စလိုက္ရေအာင္။
Body Color
<html>
<head>
<title>Example</title>
</head>
<body bgcolor=silver>
Body BGCOLOR
</body>
</html>
အဲဒီ code ေလးကို run လုိက္ရင္ေတာ့ အရင္ကလို background color က
အျဖဴေရာင္မဟုတ္ေတာ့ပဲ
စိမ္းႏုေရာင္ေလးျဖစ္ေနတာကို ေတြ႕ရပါမယ္။
ေအာက္က Table မွာ အသုံးမ်ားတ့ ဲ color 16 ေရာင္နာမည္ေတပြ ါ။
Silver
Gray
Maroon
Green
Navy
Purple
Olive
Teal
White
Black
Red
Lime
Blue
Magenta
Yellow
Cyan
ကၽြန္ေတာ္တို႕ေတြဟာ color ေတြကို code အေနနဲ႕လည္း အသံုးျပဳႏိုင္ပါတယ္။
သံုးရမွာကေတာ့ RGB color ပါ။
Hex code number ကိုအသံုးျပဳရပါတယ္။ #FF0000 ဆိုရင္ေတာ့အနီေရာင္ပါ။
ေရွ႕ဆံုး ၂ လံုးက အနီေရာင္ျဖစ္ျပီး
အလယ္ ၂ လံုးက အစိမ္းေရာင္ပါ။ ေနာက္ဆံုး ၂လံုးကေတာ့ အျပာေရာင္ေပါ့။ အဲဒီ
အေရာင္ ၃ေရာင္ကို စပ္ျပီး
သုံးရပါတယ္။ တကယ္လို႕ color ေတြကို မသိဘူးဆိုရင္ photoshop ကေနလည္း
ၾကိဳက္ႏွစ္သက္တ့ ဲ အေရာင္ကို
12 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
ယူျပီးသံုးႏိုင္ပါတယ္။ ဘယ္လိုယူရမလဲဆိုရင္ေတာ့ အရင္ဆံုး photoshop
ကိုဖြင့္လိုက္။ ဘယ္ဘက္ ေအာက္နားမွာ
color ေရြးဖို႕ေလးပါတယ္။
အဲဒါေလးကို double click လုပ္လိုက္ပါ။ color dialog box တက္လာပါမယ္။
ျပီးရင္ ႏွစ္သက္ရာ အေရာင္ေရြးပါ။
color အေရာင္ေရြးျပီးရင္ ေအာက္နားမွာ hex code ေလးကို copy
ကူးလိုက္ရံုပါပဲ။ ကၽြန္ေတာ္တို႕ေတြ color
အေနနဲ႕သံုးခ်င္ရင္ # ေလးကို ေရွ႕မွာ ခံျပီးသံုးလိုက္ရံုပါပဲ။
<html>
<head>
<title>Example</title>
</head>
<body bgcolor=#e5bb2c>
Body BGCOLOR Hex code
</body>
</html>
13 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
အခုဆိုရင္ေတာ့ attribute ပိုင္း နဲ႕ color ပိုင္းေလးကို
နည္းနည္းပါးပါးသိေလာက္ျပီလို႕ထင္ပါတယ္။ attribute
ထည့္လို႕ရတ့ ဲ tag ေတကြ လည္း အမ်ားၾကီးရိွပါေသးတယ္။ ျဖည္းျဖည္းျခင္း
ေျပာျပသြားမယ္။ အခု ေနာက္ထပ ္ tag
တစ္ခုျဖစ္တ့ ဲ <hr> ရဲ႕ attribute အေၾကာင္းေလးေျပာပါမယ္။
Hr Attribute
ကၽြန္ေတာ္တို႕ေတြဟာ tag တစ္ခုရဲ႕ေနာက္မွာ attribute တစ္ခုထက္မက
လိုက္လို႕ရပါတယ္။ tag ေတြေနာက္မွာ
attribute တစ္ခုထက္မကပါတာေတြကို ေနာက္ပိုင္းမွာေတြ႕ရပါလိမ့္မယ္။ အခုေတာ့
hr အေၾကာင္းေလး
ဆက္ရေအာင္။
<html>
<head>
<title>Example</title>
</head>
<body bgcolor=#e0e0e0>
Default HR
<hr>
Hr with size=1
<hr size=1>
Hr with size=5
<hr size=5>
14 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
Hr with size=10
<hr size=10>
Hr with size=10 and noshade
<hr size=10 noshade>
Hr with size=5 and color
<hr size=5 color=#D60000>
</body>
</html>
အဲမွာ size ကေတာ့ အရြယ္အစားပါ။ noshade ဆိုတာကေတာ့ shade မပါတ့ဟဲ ာကို
ေျပာတာပါ။ ေျဗာင္ၾကီးေပါ့။
color ကေတာ့ မိမိၾကိဳက္ႏွစ္သက္တ့အဲ ေရာင္ထည့္လို႕ရပါတယ္။
List
List ပိုင္းမွာ order list နဲ႕ unorder list ဆိုျပီးရိွပါတယ္။
တနည္းအားျဖင့္ နံပါတ္စဥ္နဲ႕ list နဲ႕ နံပါတ္စဥ္ေတြမပါတ့ ဲ
list ေပါ့။
ေနာက္ျပီး defination list ဆိုတာရိွပါေသးတယ္။ လူသံုးနည္းပါတယ္။ ပထမဆံုး
unorder list
အေၾကာင္းေလးသြားရေအာင္။
Unorder list
<html>
<head>
<title>Example</title>
</head>
<body>
<h3>Unorder List</h3>
<ul>
<li>First Item</li>
<li>Second Item</li>
15 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
<li>Third Item</li>
</ul>
</body>
</html>
<ul> က unorder list ပါ။ <li> ကေတာ့ list ေပါ့။ list ၁ ခုပဲဆိုရင္
<li>1</li>။ ၂ခုဆိုရင္ <li>1</li>
<li>2</li> လို႕ေရးပါတယ္။ အေပၚက code ကို run လုိက္ရင္ list ေလးေတြကို
ျမင္ရမွာပါ။ အကုန္လံုးက
အဝိုင္းေလးေတြနဲ႕ List ပါပဲ။ ကဲ အခု attribute ေလးထည့္ျပီး
ပံုစံေျပာင္းၾကည့္ရေအာင္။
<html>
<body>
<h3>Unorder List</h3>
<h5>Disc</h5>
<ul type="disc">
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ul>
<h5>Square</h5>
<ul type="square">
<li>First Item</li>
<li>Second Item</li>
16 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
<li>Third Item</li>
</ul>
<h5>Circle</h5>
<ul type="circle">
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ul>
</body>
</html>
unorder list မွာ disc, square, circle ဆိုျပီး ၃
မ်ဳိးေျပာင္းလို႕ရပါတယ္။ default ကေတာ့ disc ပါ။
Ordered List
<html>
<head>
<title>Example</title>
</head>
<body>
<h3>Ordered List</h3>
<ol>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ol>
17 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
</body>
</html>
<ol> ကေတာ့ order list ပါ။ အဲဒီ code ေလးကို run လိုက္ရင္ နံပါတ္
အစဥ္လိုက္ေပၚလာပါလိမ့္မယ္။ သူ႕မွာလည္း
attribute ေတြရိွပါတယ္။
<html>
<head>
<title>Example</title>
</head>
18 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
<body>
<h3>Ordered List</h3>
<ol type="1">
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ol>
<h5>Type A</h5>
<ol type="A">
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ol>
<h5>Type a</h5>
<ol type="a">
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ol>
<h5>Type a</h5>
<ol type="I">
<li>First Item</li>
19 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
<li>Second Item</li>
<li>Third Item</li>
</ol>
<h5>Type i</h5>
<ol type="i">
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ol>
</body>
</html>
Order List တြင္လည္း Unorder List က့သဲ ို႕ပင္ type မ်ားရိွပါတယ္။
အဲဒါေတြကို အေပၚက code မွာ ေဖာ္ျပထားပါတယ္။ order list က unorder
list နဲကမတူတ့ ဲ အခ်က္ကေတာ့ နံပါတ္စဥ္လိုက္ျဖစ္ပါတယ္။ မိမိၾကိဳက္တ့ ဲ
နံပါတ္ကေန စႏိုင္တယ္။ မိမိၾကိဳက္တ့ ဲ နံပါတ္ကစႏိုင္ဖို႕ start ဆိုတ့ ဲ attribute
ကိုသံုးႏိုင္ပါတယ္။
<ol type="A" start=4> မွာဆိုရင္ေတာ့ D ကေနစမွာပါ။ ဒါဆိုရင္ေတာ့
HTML န႕ဲ list ေတြပါတ့ ဲ web page ေလးေရးလို႕ရျပီေပါ့။ ေနာက္ထပ္ list
တစ္ခုက်န္ပါေသးတယ္။ definition list ပါ။
Definition List
အမ်ားအားျဖင့္ အဓိပၸာယ္ဖြင့္ဆိုခ်က္ေတြမွာ သံုးပါတယ္။
<html>
<head><title>Example</title></head>
<body>
20 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
<h3>Definition List</h3>
<dl>
<dt>HTML
<dd>Language used to develop Web Pages
<dt>Image
<dd>Any graphic such as an icon,bullet, line, photo , or illustration
</dl>
</body>
</html>
Defination List က အျခား List ေတြနဲ႕ မတူပါဘူး။ သူ႕မွာက defination term
နဲ႕ defination ပါ ပါတယ္။
စရင္ေတာ့ dl နဲက စရပါတယ္။ defination term ကိုေတာ့ <dt> အသံုးျပဳျပီး
defination ကိုေတာ့ <dd>
သံုးပါတယ္။ သူက အျခား list နဲ႕မတူတ့ ဲ ေနာက္တစ္ခ်က္ကေတာ့ tag အပိတ္မပါတာပဲ။ </dl>
တစ္ခုပဲပါတယ္ဆိုတာကို ေတြ႕ႏိုင္ပါတယ္။
ကဲ... အခုဆိုရင္ေတာ့ HTML ကိုအၾကမ္းအားျဖင့္ေလာက္ေတာ့ သိေလာက္ျပီေပါ့။
အခုကၽြန္ေတာ္တို႕ေတြ
ေနာက္ထပ္ ေသေသခ်ာခ်ာ သိရေအာင္ ေနာက္ထပ္ တစ္ခန္းသြားရေအာင္။
21 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
2.Creating Web Page With Apperance And Link
ကၽြန္ေတာ္တို႕ေတြ အစပိုင္းမွာ bold,italic,underline တို႕ကို
သိခ့ျဲပီးပါျပီ။ အခု ဒီအခန္းမွာေတာ့ အရင္ဆုံး font
အေၾကာင္းေလး စေျပာပါမယ္။ ကၽြန္ေတာ္တို႕ေတြ font ေတြေျပာင္းမယ္။ font size
ေတြေျပာင္းမယ္။ စာလံုးေတြမွာ
color ေတြထည့္မယ္။ အဲဒါေတြကို အျပင္ page တစ္ခုနဲ႕ တစ္ခု link
ခ်ိတ္တာေတြလည္း ပါဝင္မွာပါ။ အဲဒါေတြကို
မေျပာခင္မွာ <center> အေၾကာင္းေလးနဲ႕ စလိုက္ရေအာင္။
Optional Tag
Move To Center
သူက စာလံုးေတြကို center ေရာက္ေအာင္လုပ္ေပးပါတယ္။
<html>
<head><title>Example</title></head>
<body>
<center>
This is center
</center>
</body>
</html>
This is center ဆိုတာေလးက အလယ္ပိုင္းကိုေရာက္ေနတာကိုေတြ႕ရပါမယ္။
အဲဒါေလးကို သံုးျပီး စာေတြကို
အလယ္ပိုင္းကို ေရြ႕ထားလို႕ရပါတယ္။
<html>
<head><title>Example</title></head>
<body>
<h1 align="justify">Test</h1>
22 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
</body>
</html>
အဲဒီ code မွာဆိုရင္ေတာ့ header ေတြက အလယ္ကိုေရာက္ေနတာကိုေတြ႕ရပါလိမ့္မယ္။
Marquee
marquee ကေတာ့ စာလံုးေတြကို ေရြ႕ေနဖို႕လုပ္ေဆာင္ေပးတာပါ။
<html>
<head><title>Example</title></head>
<body>
<marquee>I'm moving</marquee>
</body>
</html>
အဲဒီ code မွာဆိုရင္ စာသားေလးက ေရြ႕ေနတာကိုေတြ႕ရပါမယ္။ ဘယ္ဘက္ကေန
ညာဘက္ကိုေရြ႕လာတာပါ။
Marquee မွာရိွတ့ ဲ attribute ေတြကေတာ့
Attribute Name
Properties
Descripton
behavior
alternate
ဘယ္ကေနညာ ၊ ညာကေန ဘယ္ျပန္သြား ပါတယ္။
<marquee behavior="alternate">I'm moving</marquee>
scroll
သူက default value ပါ။ ဘယ္ကေန ညာ ၊ ညာဘက္ေရာက္သြားရင္ ဝင္သြားျပီး
ဘယ္ဘက္ေန ျပန္စတာပါ။
<marquee behavior="scroll">I'm moving</marquee>
slide
သူကေတာ့ ဘယ္ကေနညာ ျပီးရင္ညာဘက္လည္းေရာက္ေရာ ရပ္သြားပါတယ္။
<marquee behavior="slide">I'm moving</marquee>
direction left သူကေတာ့ default value ပါ။ ညာဘက္ကေန ဘယ္ဘက္ကိုသြားမယ္လို႕
23 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
ဆိုတာပါ။
<marquee direction="left" >I'm moving</marquee>
right
သူကေတာ့ ဘယ္ဘက္ကေန ညာဘက္ကိုသြားမယ္လို႕ဆိုတာပါ။
<marquee direction="right" >I'm moving</marquee>
up
သူကေတာ့ ေအာက္ကေန အေပၚလာမယ္လို႕ဆိုတာပါ။
<marquee direction="up" >I'm moving</marquee>
down
သူကေတာ့ အေပၚကေန ေအာက္ဆင္းမယ္လို႕ဆိုတာပါ။
<marquee direction="down" >I'm moving</marquee>
loop
[number]
သူကေတာ့ ကိုယ္ဘယ္ႏွစ္ၾကိမ္ marquee ကို လုပ္ခိုင္းမယ္ဆိုျပီး number
တစ္လံုးထည့္ေပးရပါတယ္။ ၁ ဆို ၁ ၾကိမ္ပဲလုပ္မယ္ေပါ့။
<marquee loop="1" >I'm moving</marquee>
scrollamount
[number]
တစ္ခါေရြ႕ရင္ ဘယ္ေလာက္ pixel ေရႊ႕မလဲဆိုျပီး ထည့္ေပးရတာပါ။
ထည့္လိုက္တ့ ဲ နံပါတ္မ်ားေလေလ ေဝးေဝးေရြ႕ ျမန္ျမန္သြားေလေလပဲ။
<marquee scrollamount="10">I'm moving</marquee>
scrolldelay
[number]
သူကေတာ့ ဘယ္ေလာက္ၾကာရင္ ေရႊ႕မလဲဆိုတာပါ။ သူက millisecond နဲ႕ပါ။
1000 လို႕ထည့္လိုက္ရင္ 1 second ၾကာမွ တစ္ခါေရြ႕မွာပါ။ သူကေတာ့
နံပါတ္မ်ားေလေလ ၾကာေလေလပါပဲ။
<marquee scrolldelay="1000">I'm moving</marquee>
Bgcolor
[hex code] OR
[Color Name]
သူကေတာ့ marquee ရဲ႕ back color အေရာင္ေလးပါ။ #009933 ဆိုရင္ေတာ့
အစိမ္းေရာင္ေလးကို background ထားျပီး ေရႊ႕သြားမွာပါ။ color ပိုင္းကို
ကၽြန္ေတာ္ အေပၚပိုင္းမွာ ေျပာခ့ျဲပီးပါျပီ။
<marquee bgcolor="#009933" >I'm moving</marquee>
24 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
marquee ေလးလုပ္ရတာ ေပ်ာ္စရာေတာ့ေကာင္းပါတယ္။ စာလံုးေလးေတြက
ေရြ႕ေရြ႕သြားတာေလးကို ၾကည့္ျပီး
ေက်နပ္မႈေလးရႏိုင္ပါေစ။ အခု font ပိုင္းကို ဆက္လက္ေလ့လာရေအာင္။
Font
Font ကေတာ့ HTML မွာအေရးပါတ့ ဲ အပိုင္းပါ။ Web Page တစ္ခုမွာ
ကိုယ္လိုခ်င္တ့ ဲ font ကိုေျပာင္းလဲဖို႕အတြက္
font tag ကိုသိမွ ျဖစ္မွာပါ။။
<html>
<head><title>Example</title></head>
<body>
<font face="Zawgyi-one">Zawgyi Font ျဖင့္အသံုးျပဳထားသည္</font>
</body>
</html>
အဲဒါဆိုရင္ <font> နဲ႕ </font> ၾကားမွာရိုက္ထားတ့ ဲ စာက zawgyi-one font
နဲ႕ေပၚေနမွာပါ။ face="font name"
ကိုထည့္ရတာပါ။
font tag မွာသုံးလို႕ရတ့ ဲ attribute ေတြကေတာ့
Name Properties Description
color [hex code] OR
[color name]
color ကေတာ့ သိျပီးသားပါ။ အေပၚမွာလည္း ကၽြန္ေတာ္ ေျပာခ့ဘဲ ူးပါတယ္။
ဥပမာအေနနဲ႕ ဒီလိုသံုးလို႕ရပါတယ္
<font face="Zawgyi-one" color="#006699">Zawgyi Font
ျဖင့္အသံုးျပဳထားသည္</font>
size [number] သူကေတာ့ font ရဲ႕ အရြယ္အစားေျပာင္းတာပါ။ ပံုမွန္က size=3
ပါ။ စာလံုး size
ၾကီးလိုလွ်င္ size=4 ကေန 7 ထိထည့္လို႕ရပါတယ္။ 1 ကေန 7 အထိရိွပါတယ္။ 3
ကေတာ့ ပံုမွန္စာလံုးပါ။ ေနာက္ျပီး +1 ကေန +6 ရိွပါတယ္။ ပံုမွန္ကို
ဘယ္ေလာက္တိုးမယ္ဆိုပါ။ +2 ဆိုရင္ ပံုမွန္က 3 ဆိုေတာ့ 5 ျဖစ္သြားမွာေပါ့။
အဲလိုမ်ဳိးပဲ
-1 ကေန -6 ထိရိွပါေသးတယ္။ -1 ဆိုရင္ ပံုမွန္က 3 ဆိုေတာ့ 2 ျဖစ္သြားမွာေပါ့။
ဒီလိုေလး သံုးလို႕ရပါတယ္။
25 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
<font face="Zawgyi-one" size="5">Zawgyi Font ျဖင့္အသံုးျပဳထားသည္</font>
<font face="Zawgyi-one" size="+2">Zawgyi Font ျဖင့္အသံုးျပဳထားသည္</font>
<font face="Zawgyi-one" size="-2">Zawgyi Font ျဖင့္အသံုးျပဳထားသည္</font>
ဒါေတြကေတာ့ အျခား text formatting tags ေတြပါ။ အခ်ဳိ႕ကေတာ့
အေပၚမွာေျပာခ့ဘဲ ူးပါတယ္။
Tag Description
<b></b> ဒါကိုေတာ့ အေပၚမွာလည္း ေျပာျပီးပါျပီ။ သူက font ကို blod လုပ္တာပါ။
<big></big> သူကလည္း bold လုပ္တာပါပဲ။
<blockquote></blockquote> ဒါကေတာ့ tab ခုန္တာေပါ့။ ကိုယ့္စာပိုဒ္ေလးကို
တစ္တည္းတစ္သနု္႕ထ ဲ ေဖာ္ျပခ်င္တ့ ဲ
အခါမွာ သံုးၾကပါတယ္။
<i></i> italic လုပ္တာကို အေပၚမွာေျပာခ့ဘဲ ူးပါတယ္။
<pre></pre> ဒီ code ကိုလည္း သိမွာပါ။ ကၽြန္ေတာ္တို႕ေတြ enter ေတြ tab ေတြမလိုပဲ
သုံးခ့တဲ ာေလ။
<small></small> သူကေတာ့ စာလံုးကို ပံုမွန္ထက္ ေသးေအာင္ လုပ္ေပးတာပါ။
<strike></strike> အဲဒါေလးကေတာ့ စာလံုးေတြရဲ႕ အလယ္မွာ မ်ဥ္းသားလိုက္တာပါ။
<sub></sub> သူကေတာ့ စာလံုးကို ေအာက္နားဆင္းတာေလးေပါ့။ H2 လိုမ်ဳိးေလးအတြက္ေပါ့။
<sup></sup> သူကေတာ့ စာလံုးကို အေပၚတင္တာပါ။ 22 လိုမ်ဳိးေပါ့။
<tt></tt> ဒါက typing font ကိုေျပာတာပါ။ typing ရိုက္သလို စာလံုးေပၚေအာင္အတြက္ပါ။
<u></u> ဒါကိုေတာ့သိျပီးေလာက္ျပီလို႕ထင္ပါတယ္။ underline တားတာပါ။
26 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
အခုဆက္ျပီးေတာ့ Link ေတြအေၾကာင္းေျပာပါမယ္။ Link ကေတာ့ Web Page မွာအဓိက
အခန္းက ပါဝင္ပါတယ္။
Page တစ္ခုနဲ႕ တစ္ခု ခ်ိတ္ဆက္ထားဖို႕ အတြက္ Link ခ်ိတ္တတ္ဖို႕လိုပါတယ္။
Page Link And Image Link
Page Link လုပ္တယ္ဆိုတာကေတာ့ page တစ္ခုကေန ေနာက္ page တစ္ခုကို
ခ်ိတ္ဆက္ထားပါတယ္။ ေအာက္က
example ပံုေလးကို ၾကည့္လိုက္ရင္ နားလည္ႏိုင္ပါတယ္။
ကၽြန္ေတာ္တို႕ေတြ Home Page ကေန Gallery Page က ို Go To Home ဆိုတ့ ဲ
စာလုံးေလး ႏိွပ္လိုက္တာနဲ႕
ကူးသြားမယ္။ ေနာက္ျပီး Gallery ကေနလည္း Home Page ကို Home ဆိုတ့ ဲ
စာလုံးေလးကို ႏိွပ္လိုက္တာနဲ႕ Home
page ကို ျပန္ေရာက္သြားမယ္။ အဲဒီလိုမ်ဳိးေလး ျဖစ္ေအာင္ ကၽြန္ေတာ္တို႕
ေအာက္ကအတိုင္း ေရးလိုက္မယ္။ File ၂
ခုရိွရမယ္ေပါ့။ index.html နဲ႕ gallery.html ေပါ့။ ေနရာအတူတူပဲ
သိမ္းထားေနာ္။ C:\example\index.html နဲ႕
C:\example\gallery.html အဲလိုမ်ဳိးေလး ေနရာအတူတူျဖစ္ရမယ္။
Index.html
<html>
<head><title>Example</title>
<body>
<!-- Link To Gallery Page -->
27 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
<a href="gallery.html">Gallery</a>
</body>
</html>
Gallery.html
<html>
<head><title>Example</title>
<body>
<!-- Link To Home Page -->
<a href="index.html">Home</a>
</body>
</html>
အေပၚက code ကိုမရွင္းျပခင္ ေမးခ်င္တာေလးေတ ြ ပါလာမယ္ထင္တယ္။ <!-- --> က
ဘာၾကီးလဲဆိုျပီးေတာ့။
ေနာက္ျပီးေတာ့ home page ကို home.html နဲ႕ သိမ္းလို႕ေကာ မရဘူးလား။
ဘာလို႕ index.html နဲ႕သိမ္းတာလဲ။
ဘာေတြကြာလဲ။
<!-- comment --> အဲဒါက comment ေရးထားတာပါ။ <!-- နဲ႕ --> ၾကားမွာ
ေရးထားတ့ ဲ စာေတြကို
အလုပ္မလုပ္ပါဘူး။ ကၽြန္ေတာ္တို႕ home page ကို ဘာလို႕ index.html နဲ႕
သိမ္းရလဲဆို web page ေတြမွာ
စတက္တ့ ဲ page က index.html ပါ။ ဒါမွ မဟုတ္ default.html ေပါ့။
www.example.com လို႕ေခၚလိုက္ရင္ page
တစ္ခုတက္လာမယ္။ တကယ္တမ္းေတာ့ www.example.com/index.html ဆိုတာကို သြားေခၚထားတာပါ။
အေနာက္က index.html မပါလည္း အလုပ္လုပ္ပါတယ္။ ဒါေၾကာင့္ Home Page
ဆိုရင္ေတာ့ index.html
ဆိုျပီးသံုးရပါတယ္။ ဒါမွမဟုတ္ default.html ဆိုလည္းရပါတယ္။
ကဲ.. Link အေၾကာင္းလည္း ဆက္သြားရေအာင္။ link ခ်ိတ္ခ်င္ရင္ <a
href="address">Name</a>
ဆိုတ့ပဲ ုံစံမ်ဳိးနဲ႕ သြားရတာေပါ့။ address ဆိုတာကေတာ့ ကိုယ္ခ်ိတ္ခ်င္တ့
ဲ page ေပါ့။ Name ကေတာ့ ေပၚေစခ်င္တ့ ဲ
နာမည္ေပါ့။ ထပ္ေမးစရာေလး တစ္ခုထပ္ေပၚလာတာကို ေတြ႕ရပါလိမ့္မယ္။ Link က
အစကေတာ့ အျပာေရာင္။
ေနာက္ေတာ့ နီညိဳေရာင္ ေျပာင္းသြားတယ္။ ဘာျဖစ္လို႕လည္း ။ အဲဒါကေတာ့
vistied ျဖစ္ျပီးသြားလို႕ပါ။ တစ္ခါ click
လုပ္ျပီးရင္ အဲလိုအေရာင္ ေျပာင္းသြားပါတယ္။ ကိုယ္ႏိွပ္ျပီးသားေပါ့။
အေရာင္မေျပာင္းခ်င္ရင္ေတာ့ body မွာ vlink
ဆိုတ့ ဲ attribute နဲ႕ link ဆိုတ့ ဲ attribute မွာ အေရာင္
ျပင္လို႕ရပါတယ္။ <body vlink="green" link="green">
အဲဒါဆိုရင္ေတာ့ link color က အစိမ္းေရာင္ျဖစ္ေနတာကို ေတြ႕ရမွာပါ။ link
လုပ္ရင္ လူတိုင္းေမးတတ္တ့ ဲ
28 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
ေမးခြန္းတစ္ခုရိွပါတယ္။ file ေတြကို download ခ်ေစခ်င္တယ္။
ဘယ္လိုေရးရမလဲ။ တကယ္တမ္းေတာ့
လြယ္ပါတယ္။ link address ကို file ကိုေပးလိုက္ရံုပဲေပါ့။
<a href="file.zip>Download</a> အဲလိုမ်ဳိးပံုစံေလးေပါ့။ ကဲ.. Link
အေၾကာင္းေရာက္ရင္ေတာ့ path
လမ္းေၾကာင္းေလး ေကာင္းေကာင္းသိဖို႕လိုတယ္။ ေတာ္ေတာ္မ်ားမ်ားက မသိဘူး။
ရႈပ္တယ္လို႕ထင္ၾကတယ္။
တကယ္တမ္းအဲလို မရႈပ္ပါဘူး။
Path For Link
Path <a href=" ေအာက္က path link">Path</a> ရွင္းလင္းခ်က္
./file.html OR file.html ေနရာတစ္ခုထဲမွာ အတူတူ သိမ္းရင္
အဲလိုေခၚလို႕ရပါတယ္။ C:\example\index.html
ကေန C:\example\gallery.html ကိုေခၚရင္ေပ့ါ။ ./
ကေတာ့ directory တူတူပဲလို႕ ဆိုတာပါ။
./download/download.html OR download/download.html ဒါကေတာ့ ကိုယ့္
folder ေအာက္က folder ကို
ထပ္ေခၚတာပါ။
../file.html သူကတာ့ မတူေတာ့ဘူး။ folder ကို up လုပ္ျပီး
ေခၚတာပါ။ ဘယ္လိုမ်ဳိးလဲဆိုရင္ေတာ့
C:\example\download\index.html ကေန
C:\example\gallery.html ကိုေခၚတာေပါ့။ download
ဆိုတ့ ဲ folder အေပၚတဆင့္က file ကိုေခၚတာေပါ့။
ႏွစ္ဆင့္ ေခၚခ်င္ရင္ေတာ့ ../../file.html ေပါ့။ ../
ဆိုတာက folder directory ကို up လုပ္လိုက္တာပါ။
http://www.mysteryzillion.com ဒါကေတာ့တျခား website တစ္ခုကို လွမ္းေခၚတာပါ။
./download/file.zip OR download/file.zip download ခ်ဖို႕အတြက္ file ေတြ
image file
ေတြကိုလည္း တိုက္ရိုက္ေခၚလို႕ရပါတယ္။ image
ပိုင္းေတြကို ကၽြန္ေတာ္ ေနာက္ပိုင္း
ဆက္လက္ရွင္းျပပါအံုးမယ္။
ဒီပတ္လမ္းေၾကာင္းေတြ အေၾကာင္းေကာင္းေကာင္းသိဖို႕လိုပါတယ္။
ဘာျဖစ္လို႕လည္းဆို ကိုယ့္ site က
ၾကီးလာတာနဲ႕ အမွ site structure က ရႈပ္ေထြးလာမွာပါ။ Link ေတြလည္း
မ်ားလာမွာျဖစ္လို႕ပါ။ ဒါေၾကာင့္
ေသေသခ်ာခ်ာ သိထားသင့္ပါတယ္။
29 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
ကဲ.. အခု ကၽြန္ေတာ္တို႕ေတြ page မွာ ပုံေလးေတ ြ ထည့္ရေအာင္။
Image
ပုံေတြကေတာ့ web page တစ္ခုမွာ မျဖစ္မေနပါဝင္ရပါတယ္။ ကိုယ္တည္ေဆာက္တ့ ဲ
page ကို လွပျပီး
အဓိပၸာယ္ျပည့္စံုဖို႕ အတြက္ပါ။ ကဲ... ပံုေလးေတြ ထည့္ၾကည့္ရေအာင္။
<html>
<head>
<title>Example</title>
</head>
<body>
<img src="Apple-logo.jpg"> Apple Logo</body>
</html>
တကယ္လို႕ ပုံမျမင္ရပဲ ၾကက္ေျခခတ္ ( ) ပဲျမင္ရရင္တာ့ ထည့္ထားတ့ ဲ image
ပတ္လမ္းေၾကာင္းမွားတာျဖစ္ႏိုင္သလို image extension မွားတာလည္း
ျဖစ္ႏိုင္တယ္။ image ထည့္လို႕ရတဲ့
extension ေတြကေတာ့ jpg gif png ေတြပဲ။ image က size ၾကီးက ၾကီးေနတယ္။
ေသးခ်င္တယ္။ ျဖစ္ပါတယ္။
<html>
<head>
<title>Example</title>
</head>
30 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
<body>
<img src="Apple-logo.jpg" width=80px height=80px> Apple Logo</body>
</html>
width နဲ႕ height ဆိုတ့ ဲ attribute က ပုံရဲ႕ size ကို
ထိန္းခ်ဳပ္ေပးပါတယ္။ ကိုယ္ၾကိဳက္တ့ ဲ အလ်ားကို width
မွာထည့္ျပီး အျမင့္ကိုေတာ့ height မွာထည့္ျပီး ပံုရဲ႕ size ကိုျပင္လို႕ရတယ္။
<img src="Apple-logo.jpg" width=80px height=80px alt="Apple Logo"> Apple Logo
ဆိုရင္ေတာ့ alt ဆိုတ့အဲ ထဲမွာေရးထားတ့ ဲ စာသားကို ပုံေပၚ Mouse
ေလးသြားတင္လိုက္ျပီး ခဏၾကာမွာ
ေပၚလာမွာပါ။ ကၽြန္ေတာ္တို႕ကေတာ့ tool tip လို႕ေခၚတာပါ။
Image ပိုင္းမွာ ေျပာစရာေတြ ေတာ္ေတာ္မ်ားပါတယ္။ သူ႕မွာ attribute
ေတြထပ္ရိွေသးတယ္။ ဘာလည္းဆိုေတာ့
text align ေပါ့။ text align ကို img code ထဲမွာ align ဆိုတ့ ဲ attribute
ကိုသုံးတယ္။
Align ရွင္းျပခ်က္
top စာတစ္ေၾကာင္းကို ပံုရဲ႕ ေဘးနားက align မွာ အေပၚဆံုးမွာ ေဖာ္ျပေပးတာပါ။
bottom သူကေတာ့ default ပါ။ စာသားကို ပံုေအာက္ဘက္မွာ ေဖာ္ျပတာကိုေတြ႕ရပါမယ္။
middle စာသားကို ပံုအလယ္မွာ မွာေပးတာပါ။
left သူကေတာ့ ပံုကို page ရဲ႕ ဘယ္ဘက္ကိုပို႕လိုက္ျပီး စာသားအကုန္လံုးကို
ပံုေဘးမွာ ေဖာ္ျပေပးတာပါ။
right သူကလည္း Left နဲ႕ အတူတူပါပဲ။ ညာဘက္ကို ပံုေရြ႕သြားျပီ
စာသားအားလံုးကို ပံုရဲ႕ ဘယ္ဘက္မွာ
ေဖာ္ျပေပးပါမယ္။
31 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
ပံု : img top
ပံု : img bottom
ပံု : img middle
ပံု : img left
ပံု : img right
အခုဆိုရင္ image နဲ႕ပတ္သက္ျပီး ေတာ္ေတာ္ေလးသိေလာက္ျပီ ထင္တယ္။
ေနာက္ထပ္တစ္ခု ထပ္ေျပာအံုးမယ္။
ပံုေသးေသးေလးကို ႏိွပ္လိုက္မွ ပံုအၾကီးၾကီးေျပာင္းသြားသလိုမ်ဳိးေလးေပါ့။
ပံု size ကို width နဲ႕ height attribute နဲ႕
ခ်ဳံတာမဟုတ္ဘူးေနာ္။ ပံုႏွစ္ပံု။ တစ္ပံုက အၾကီး ၊ ေနာက္တစ္ပံုက အေသးေပ့ါ။
Photo ေတြကို size ေသးတာကို
32 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
ျပထားျပီး ပံုကို click လုပ္လိုက္မွ size ၾကီးတ့ ဲ ပုံကို ျပ တ့ပဲ ုံပါ။
အဲလိုဘာလို႕ လုပ္ရလဲဆို ပုံၾကီးရင္ page
တက္တာၾကာပါတယ္။ ဒါေၾကာင့္ ပံုေသးကို အရင္ျပတယ္။ click လုပ္လိုက္မွ
ပံုၾကီးျဖစ္သြားမယ္။
<html>
<head>
<title>Example</title>
</head>
<body>
<a href="fullsize.jpg"> <!-- Full size when click -->
<!-- img src is small size -->
<img src="smallsize.jpg" width=80px height=80px border=0>
</a>
</body>
</html>
အေပၚက code ကို ဖတ္လိုက္တာနဲ႕ နားလည္မယ္ထင္ပါတယ္။ အဲမွာ
ေမးစရာတစ္ခုထြက္လာတယ္။ border
ဆိုတာဘာလဲေပါ့။ ကၽြန္ေတာ္တို႕ href ကို သုံးလိုက္တ့ ဲ အခါ image မွာ
အျပာေရာင္ border ျဖစ္သြားတယ္။
အဓိပၸာယ္ကေတာ့ Link ရိွတယ္ေပါ့။ အဲဒါေလးကို မေပၚခ်င္လို႕ ေဖ်ာက္လိုက္တာပါ။
ပံု : border မေဖ်ာက္ထားေသာ နဲ႕ image ပံု : border ေဖ်ာက္ထားေသာ ပံု
အခုဆိုရင္ေတာ့ ကၽြန္ေတာ္တို႕ေတြ link ေတြ လုပ္တတ္သြားျပီ။ page တစ္ခုကေန
တစ္ခုကို ေခၚတတ္သြားျပီ။ ပံုေတြ
ထည့္တတ္သြားျပီ။ အခုအခန္းမွာ ကၽြန္ေတာ္က sample ေသးေသးေလးေတြပဲ
ျပသြားတယ္။ ကိုယ္တိုင္ စမ္းၾကည့္ပါ။
ေပ်ာ္ဖို႕ တကယ္ေကာင္းပါတယ္။ ကိုယ့္ ပံုေလးေတြ နဲ႕ web page ေလး
စမ္းေဆာက္လို႕ေတာ့ရျပီ။ ဒါေပမယ့္
ျပည့္ျပည့္စံုစံုျဖစ္ေအာင္ ေဆာက္လို႕မရေသးတာကို ေတြ႕မွာပါ။ ကၽြန္ေတာ္တို႕
table လိုအပ္ေနေသးတာပါ။
ေနာက္တစ္ခန္းမွာ table နဲ႕ frame ေတြအေၾကာင္း ေျပာျပပါမယ္။
Table And Frame
33 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
Table ဟာ web page တည္ေဆာက္ရာမွာ အေရးပါပါတယ္။ စတင္ေလ့လာသူေတြအတြက္ေတာ့ table ကသာ
web page frame ကို ပံုစံက်ေအာင္ လုပ္ေပးႏိုင္တာပါ။ တကယ္လို႕ ကိုယ္က
professional ျဖစ္သြားျပီ ၊ stylesheet
ေတြ တတ္သြားျပီဆိုရင္ေတာ့ div နဲ႕ CSS ကို တြဲျပီးေတာ့ ကိုယ့္ page
ကိုလွျပေအာင္ လုပ္ႏိုင္တာေပါ့။ အခုေတာ့
HTML အေၾကာင္းပဲ ေျပာေနေသးတယ္ ၊ ေနာက္ျပီး CSS အေၾကာင္းေတ ြ Advance
ျဖစ္တ့အဲ ေၾကာင္းေတြ
မပါေသးဘူး။ table သံုးျပီးလည္း သူမ်ား web page ေတြလို လွမလာပါလားလို႕
ေမးခ်င္ရင္ ေမးလာႏိုင္လို႕
အခုလိုေျဖထားတာပါ။ ကဲ table အေၾကာင္းေလးစရေအာင္။
Table ဆိုတာ
Table တစ္ခုကိုတည္ေဆာက္ရာမွာ အေျခခံအားျဖင့္ roll နဲ႕ column ပါဝင္ပါတယ္။
ေနာက္ျပီး cell ကြက္ေလးေတြ
နဲ႕ တည္ေဆာက္ထားပါတယ္။ Table တစ္ခုဟာ ကၽြန္ေတာ္ အေပၚမွာ ေျပာခ့သဲ လို
HTML တစ္ခုတည္းနဲ႕ web site
တစ္ခု တည္ေဆာက္ရာမွာ ေတာ္ေတာ္ေလးအသံုးဝင္ပါတယ္။ ေနာက္ျပီး Gallery Page
ေတြ တည္ေဆာက္ရာမွာ
အရမ္းအသံုးဝင္တယ္။ Page တစ္ခုလံုး Layout ကို CSS ကိုသာအသံုးျပဳတတ္မယ္ဆို
Table ထက္စာရင္ CSS ကို
အသံုးျပဳသင့္တယ္။ CSS ဆိုတာ ဘာလဲဆိုေတာ့ Cascading Style Sheets ပါ။
ဒီစာအုပ္မွာေတာ့ CSS
အေၾကာင္းပါဝင္မွာ မဟုတ္ပါဘူး။ ဒီစာအုပ္ဟာ Web Page ကိုစေလ့လာခါစ
အေျခခံအက်ဆုံးျဖစ္တ့ ဲ HTML
အေၾကာင္းကိုသာ ေျပာသြားတာပါ။ HTML ကိုေသေသခ်ာခ်ာနားလည္သြားရင္ CSS န႕ဲ
တသဲြ ုံတ့အဲ ခါမွာေတာ့ ကိုယ့္
site ေလးဟာ ေသသပ္လွပလာမွာပါ။ အခုေတာ့ HTML အေၾကာင္းေလးပဲ ဆက္လိုက္ရေအာင္။
34 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
အေပၚပံုကို ၾကည့္လိုက္ပါ။ အကြက္တစ္ခုလံုးအျပည့္ဟာ table ပါ။ ေနာက္ျပီး
စာေရးထားတ့ ဲ အကြက္ေတြဟာ cell
ေတြေပါ့။ cell ကြက္ေတြထဲမွာပဲ စာေရးတာပါ။ ကဲ.. ပိုျပီး နားလည္သြားေအာင္
code ေလးေတြနဲ႕စလိုက္ရေအာင္။
<head>
<title>Example Table</title>
</head>
<body>
<table>
<tr> <!-- Row-->
<td> <!-- Column -->
Row
</td>
35 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
<td>
Row
</td>
</tr>
</table>
</body>
</html>
Table တစ္ခုစတင္ျပီဆိုရင္ေတာ့
၁။ <table>နဲ႕ စျပီး </table> နဲ႕ပိတ္ရမွာပါ။
၂။ ကိုယ္ထည့္ခ်င္တ့ ဲ Row အေရအတြက္ ရိွသေလာက္ကို <tr></tr>
ကိုသုံးရမွာပါ။ ကိုယ္က row ၂
ခုလိုခ်င္တယ္ဆိုပါစို႕။ဒါဆိုရင္ <tr></tr><tr></tr> ဆိုျပီး ႏွစ္ခုသံုးရမွာေပါ့။
၃။ကိုယ္ထည့္ခ်င္တ့ ဲ column အေရအတြက္ ရိွသေလာက္ကို <td></td>
ကိုသုံးရမွာပါ။ <td></td> ကို <tr> နဲ႕
</tr> ၾကားမွာ ထည့္ျပီးသံုးရမွာပါ။ ကၽြန္ေတာ္တို႕ column ၂ ခုဆိုရင္
<tr><td></td><td></tr> ဒါဆိုရင္
column ၂ ခုေပါ့။
ကဲ... ကၽြန္ေတာ္တို႕ေတြ row ၂ ခု column ၃ ခုလုပ္မယ္ေပါ့။
row ၂ ခုျဖစ္တ့အဲ တြက္ေၾကာင့္ <tr> </tr> ၂ ခုသုံးရမယ္။ column ၃
ခုျဖစ္လို႕ <td></td> ကို ၃ ခုသုံးမယ္။
ပထမ row မွာ ၃ခုဆို အျခား row ေတြမွာလည္း ၃ခုျဖစ္မွ table ေပၚလာမွာပါ။
<table>
<tr> <!-- First Row -->
<td> <!-- First Column -->
1
</td>
<td>
36 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
2
</td>
<td>
3
</td>
</tr>
<tr> <!-- Second Row -->
<td> <!-- Second Column -->
4
</td>
<td>
5
</td>
<td>
6
</td>
</tr>
</table>
အဲဒီ Example ကို ၾကည့္လိုက္ရင္ နားလည္ႏိုင္မလားမသိဘူး။ ကၽြန္ေတာ္တို႕ေတြ
row ၂ ခုနဲ႕ column ၃ ခု ရိွတ့ ဲ
table တစ္ခုတည္ေဆာက္ခ့တဲ ာပါ။ table ပိုင္းကို ရႈပ္တယ္လို႕
ထင္ခ်င္ထင္ေနပါလိမ့္မယ္။ ဟုတ္ပါတယ္။ ရႈပ္ပါတယ္။
ဒါေပမယ့္ နားလည္သြားရင္ လြယ္ျပီး သံုးလို႕ေကာင္းပါတယ္။ ကၽြန္ေတာ္တို႕ေတြ
table ပိုင္းကို ေသေသခ်ာခ်ာေလး
ေလ့လာဖို႕လိုပါလိမ့္မယ္။ ကဲ... ေနာက္ထပ္ example တစ္ခု
ထပ္လုပ္ၾကည့္ရေအာင္ ။ အခု ကၽြန္ေတာ္တို႕ေတြ row
၃ ခု column ၃ ခု ရိွတ့ ဲ table တစ္ခုကို ေဆာက္ၾကည့္ရေအာင္။
row ၃ခု ျဖစ္လို႕ <tr></tr> ၃ခုပါမယ္။ column ၃ ခုျဖစ္လို႕ <tr>နဲ႕ </tr>
ၾကားမွာ <td></td> ၃ ခုပါမယ္။
အဲလိုေလး စဥ္းစားလို႕ရသြားျပီဆိုရင္ စျပီး code ေရးၾကည့္ရေအာင္။
37 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
<html>
<head><title>Example</title></head>
<body>
<table>
<tr><!-- First Row -->
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr><!--Second Row -->
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr><!-- Third Row -->
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
</table>
</body>
</html>
38 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
ကဲ... အခုေလာက္ဆို နားလည္ေလာက္ျပီထင္တယ္။ ကၽြန္ေတာ္တို႕ ေရွ႕ဆက္ရေအာင္။
ကၽြန္ေတာ္တို႕ေတြဟာ table ရဲ႕ width ကို ထိန္းခ်ဳပ္ႏိုင္ပါတယ္။ table ရဲ႕ width ကို
သတ္မွတ္တ့အဲ ခါမွာ % နဲ႕သတ္မွတ္တာနဲ႕ pixel န႕ဲ သတ္မွတ္တာရယ္ရိွပါတယ္။
table ရဲ႕ width သာမက <td> ရဲ႕ width ေတြကိုပါသတ္မွတ္ႏိုင္ပါတယ္။ % နဲ႕
သတ္မွတ္တာနဲ႕ Pixel နဲ႕
သတ္မွတ္တာ ဘာကြာသလဲဆိုရင္ေတာ့ % ကေတာ့ broswer ရဲ႕ အေပၚမွာ မူတည္ျပီး
width ကေျပာင္းလဲပါတယ္။
pixel ကေတာ့ မေျပာင္းလဲဘူးေပါ့။ အေသေပါ့။ % နဲ႕ဆိုရင္ broswer
ခ်ဲ႕လိုက္တာနဲ႕ လုိက္က်ယ္သြားပါတယ္။
pixel နဲ႕ဆိုရင္ေတာ့ browser က်ယ္လည္း လိုက္မက်ယ္သြားပါဘူး။ ကဲ.. စလိုက္ရေအာင္။
<html>
<head><title>Example</title></head>
<body>
<table width="100%">
<tr><!-- First Row -->
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr><!--Second Row -->
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr><!-- Third Row -->
<td>6</td>
<td>7</td>
<td>8</td>
39 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
</tr>
</table>
</body>
</html>
အဲဒီမွာဆိုရင္ width က 100% ျဖစ္တ့အဲ တြက္ေၾကာင့္ browser အျပည့္ table ကယူပါမယ္။
အဲဒီက အေပၚဆံုး first row ကိုဒီလိုျပင္ၾကည့္လိုက္ပါ။
<table width="100%">
<tr><!-- First Row -->
<td width="30px">1</td>
<td>2</td>
<td>3</td>
</tr>
ဒါဆိုရင္ေတာ့ ပထမ column ရဲ႕ width ကို 30px လို႕သတ္မွတ္လိုက္ပါျပီ။ ပထမ
row မွာသတ္မွတ္လုိက္ရင္ တျခား
row ေတြရဲ႕ ပထမ column ကိုပါသတ္မွတ္ျပီးသား ျဖစ္သြားပါလိမ့္မယ္။
ကၽြန္ေတာ္တို႕ေတြဟာ px သာမက % နဲ႕ပါ
သတ္မွတ္ႏိုင္ပါတယ္။ column ၃ ခုလံုးကို သတ္မွတ္ခ်င္ရင္ေတာ့ ဒီလိုေရးလို႕ပါတယ္။
<table width="100%">
<tr><!-- First Row -->
<td width="45%">1</td>
<td width="20%">2</td>
<td width="35%">3</td>
40 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
</tr>
အဲဒီမွာဆိုရင္ေတာ့ column ရဲ႕ width ကို % နဲ႕သတ္မွတ္ေပးမွာပါ။ အဲဒီမွာ
တတိယ colum ကို width
မထည့္လည္း သူ႕ဘာသာ ခ်ိန္ညိွေပးႏိုင္ပါတယ္။ ကဲ... table နဲ႕ time table
ေလးဆြဲၾကည့္ရေအာင္။
<html>
<head><title>Example</title></head>
<body>
<table width="100%">
<tr><!-- First Row -->
<td>Date</td>
<td>Time</td>
<td>Subject</td>
</tr>
<tr><!--Second Row -->
<td>Oct 07</td>
<td>1:00 PM - 3:00 PM</td>
<td>Hardware</td>
</tr>
<tr><!-- Third Row -->
<td>Oct 08</td>
<td>1:00 PM - 3:00 PM</td>
<td>Software Install</td>
</tr>
<tr>
<td>Oct 08</td>
41 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
<td>1:00 PM - 3:00 PM</td>
<td>Windows Install</td>
</tr>
</table>
</body>
</html>
ကဲ.. အခုဆိုရင္ လက္ေတြ႕ အသံုးျပဳတတ္ေလာက္ျပီ ထင္တယ္။ ကၽြန္ေတာ္တို႕ေတြ
table မွာ border ေတြကို
ေပၚေစခ်င္ရင္ေတာ့ border ဆိုတ့ ဲ attribute ထည့္ရပါမယ္။
Border , Cellpadding, Cellspacing
<table width="100%" border="1"> ဆိုရင္ေတာ့ border လည္းေပၚလာပါလိမ့္မယ္။
အထူအပါးကေတာ့
ၾကီးေလေလ border ထူေလေလေပါ့။
border ကိုအေရာင္ထည့္ခ်င္ရင္ေတာ့
<table width="100%" border="1" bordercolordark="red" bordercolorlight="#FF3300">
bordercolordark ကေတာ့ အရိပ္ေပါ့။ bordercolorlight ကေတာ့
အေပၚအေရာင္ေပါ့။ ဒါမွမဟုတ္ bordercolor
ဆိုျပီးလည္း အသံုးျပဳႏိုင္ပါတယ္။
<table width="100%" border="1" cellspacing="0" bordercolor="#0066CC" >
42 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
border က ႏွစ္ထပ္ျဖစ္ေနတာကို ေတြ႕ရပါလိမ့္မယ္။ အဲဒါက cell padding
ေၾကာင့္ပါ။ cell padding နဲ႕ cell
spacing ဆိုျပီး ႏွစ္မ်ဳိးရိွပါတယ္။
cellpadding ဆိုတာကေတာ့ table အတြင္း border နဲ႕ စာ ေနရာအကြာအေဝးပါ။
cellpadding မ်ားလာေလေလ
စာက အတြင္းကို ဝင္ေလေလျဖစ္မွာပါ။ အခု cellpadding ကို 30 ထားလိုက္တ့အဲ
ခါမွာ စာသားေတြနဲ႕ border
အရမ္းက်ဲသြားတာကို ေတြ႕ရပါလိမ့္မယ္။
<table width="100%" border="1" cellpadding="30" bordercolor="#0066CC" >
cellspacing ကေတာ့ cell တစ္ခုနဲ႕ တစ္ခုၾကား အကြာအေဝးေပါ့။ အခု border ဟာ
ႏွစ္ထပ္ျဖစ္ေနတာကိုေတြ႕ရပါလိမ့္မယ္။ အဲဒါကို တစ္ထပ္တည္း ျဖစ္ခ်င္ရင္ေတာ့
cellspacing ကို 0 ေပးလိုက္ရံုပါပဲ။
<table width="100%" border="1" cellspacing="0" bordercolor="#0066CC" >
43 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
ကဲ... အခုဆိုရင္ေတာ့ နည္းနည္းေလး သိလာျပီထင္တယ္။ ဒီေလာက္ထိ
နားလည္ျပီဆိုရင္ ကၽြန္ေတာ္တို႕ေတြ cell
ေတြကို merge လုပ္တာေတြကို စလိုက္ရေအာင္။ နားမလည္ေသးရင္ေတာ့ ကိုယ္တိုင္ လက္ေတြ႕
စမ္းသပ္ၾကည့္ဖို႕လိုပါတယ္။ table ပိုင္းက ထင္သေလာက္ မရႈပ္ပါဘူး။
လက္ေတြ႕လုပ္လိုက္ရင္ နားလည္သြားမွာပါ။
Cell Merge
Cell Merge ပိုင္းကေတာ့ table ပိုင္းကို ေသခ်ာသိထားရင္
နားလည္လြယ္မယ္လို႕ထင္ပါတယ္။ Cell Merge ကေတာ့
Cell ႏွစ္ခု ဒါမွမဟုတ္ Cell ႏွစ္ခုထက္ ေပါင္းတာေပါ့။ Cell Merge ကို
ဒီလိုေပါင္းရမွာပါ။ table တစ္ခုကို စခ့တဲ ုန္းက
row ေတြကို <tr> နဲ႕ေရးရမွာပါ။ <tr> တစ္ခုမွာ <td> ၂ ခုပါရင္ ေနာက္ထပ္
<tr> မွာလည္း <td> ၂
ခုပါဝင္ရမွာပါ။ ဒါေပမယ့္ cell ေတြကို merge လုပ္လိုက္ရင္ အနည္းငယ္
ေျပာင္းလဲကုန္ပါတယ္။ အေပၚမွာ column
သံုးခု ။ ဒါေၾကာင့္ <td> ၃ ခုပါမယ္။ ဒါေပမယ့္ ေအာက္မွာက column ၃ ခုမွာ
ႏွစ္ခုကို ေပါင္းလိုက္တယ္။ ဒါဆိုရင္
cell က ၂ ခုပဲရိွေတာ့မယ္။ ဒါဆိုရင္ေတာ့ <td> ၂ ခုပဲပါေတာ့မယ္။ အဲဒါကေတာ့
column merge
လုပ္တ့အဲ ခါမွာေပါ့။ row ကလည္း အဲလိုပါပဲ။ အခုေတာ့ column merge လုပ္တ့ ဲ
code ေလးကို ၾကည့္လိုက္ပါအုံး။
<html>
<head>
<title>Example</title>
</head>
<body>
<table border="1">
<tr>
<td>
Cell 1
</td>
<td>
Cell 2
44 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
</td>
<td>
Cell 3
</td>
</tr>
<tr>
<td colspan="2">
Cell 1
</td>
<td>
Cell 3
</td>
</tr>
</table>
</body>
</html>
အေပၚက code မွာ <td colspan="2"> ဆိုတာကို ေတြ႕ႏိုင္မယ္ထင္ပါတယ္။
အဲဒါကေတာ့ Cell ၂ ခုေပါင္းမယ္
ဆိုတ့ ဲ အဓိပၸာယ္ပါ။ တကယ္လို႕ cell ၃ ခုေပါင္းခ်င္ရင္ေတာ့ <td
colspan="3"> ပါ။ ကၽြန္ေတာ္ အဲလိုမ်ဳိး code
ကိုေျပာင္းေရးလိုက္ရင္ ဒီလိုေတြ႕ရမွာပါ။
<html>
<head>
45 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
<title>Untitled Document</title>
</head>
<body>
<table border="1">
<tr>
<td>
Cell 1
</td>
<td>
Cell 2
</td>
<td>
Cell 3
</td>
</tr>
<tr>
<td colspan="3">
Cell 1
</td>
</tr>
</table>
46 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
</body>
</html>
ကၽြန္ေတာ္တို႕ေတြ column ကုိ ၃ ခုစလုံး ေပါင္းလိုက္တ့ ဲ အတြက္ စုစုေပါင္း
column ၁ ခုပဲရိွေတာ့တယ္။ ဒါေၾကာင့္
<td> တစ္ခုကို ပဲသံုးတာပါ။ ကဲ... ဆက္ျပီးေတာ့ example တစ္ခုေလာက္ ေဆာက္ၾကည့္ရေအာင္။
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<table border="1">
<tr>
<td colspan="3">
List Of Adboe Software
</td>
</tr>
<tr>
<td>
Adobe Acrobat
</td>
<td>
47 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
Adobe Dreamweaver
</td>
<td>
Adboe Flash
</td>
</tr>
<tr>
<td>
Adobe InDesign
</td>
<td>
Adobe Photoshop
</td>
<td>
Adboe Bridge
</td>
</tr>
</table>
</body>
</html>
48 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
အဲဒီက code မွာဆိုရင္ေတာ့ List Of Adboe Sofware အတြက္ Column ၃
ခုလံုးကို merge လုပ္ထားတာကို
ေတြ႕မွာပါ။ Column ၃ ခုကို merge လုပ္လိုက္တ့အဲ တြက္ column ၁
ခုပဲရိွပါေတာ့တယ္။ ဒါေၾကာင့္ <td> တစ္ခုပ ဲ
လိုအပ္ပါေတာ့တယ္။ အခုေလာက္ဆိုရင္ေတာ့ Column Merge
ကိုသိေလာက္ျပီထင္ပါတယ္။ ဆက္ျပီး Row Merge
အေၾကာင္းေလး ေလ့လာရေအာင္။
Row ေတ ြ Merge လုပ္တ့အဲ ခါမွာလည္း column merge လုပ္သလိုပါပဲ။ အရင္ဆုံး
code ေလးစေရးလိုက္ရေအာင္။
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<table border="1">
<tr>
<td rowspan="2">
Cell Left
</td>
<td>
Cell 2
</td>
</tr>
<tr>
<td>
49 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
Cell 3
</td>
</tr>
</table>
</body>
</html>
ပထမဆံုး Column မွာ <td rowspan="2"> ဆိုတာေလးရိွပါတယ္။ ပထမဆံုး Column
မွာ Row ၂ ခုကိုေပါင္းမယ္
ဆိုတ့ ဲ အဓိပၸာယ္ပါ။ အေပၚမွာ column ၂ ခုရိွေပမယ့္
ေနာက္ထပ္တစ္ဆင့္မွာေတာ့ Column ၁ ခုပဲရိွပါေတာ့မယ္။
ဘာျဖစ္လို႕လည္းဆိုရင္ေတာ့ First Column မွာ သူ႕ေအာက္က First Column နဲ႕
ေပါင္းလိုက္ေတာ့ Column
တစ္ခုေပ်ာက္သြားတာေပါ့။ ထပ္ျပီးရွင္းေအာင္ ေနာက္ထပ္ example တစ္ခု ထပ္ျပပါမယ္။
<html>
<head>
<title>Example</title>
</head>
<body>
<table border="1">
<tr>
<td>
Row1 , Cell1
</td>
<td>
50 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
Row1 , Cell2
</td>
<td>
Row1 , Cell3
</td>
</tr>
<tr>
<td rowspan="2">
Left
</td>
<td>
Center
</td>
<td rowspan="2">
Right
</td>
</tr>
<tr>
<td> Cell 1</td>
</tr>
</table>
</body>
</html>
51 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
ဒီ example မွာဆိုရင္ row span ကုိေကာင္းေကာင္းနားလည္မယ္ထင္ပါတယ္။ Left
နဲ႕ Right ဆိုျပီး row
ႏွစ္ခုေပါင္းလိုက္ေတာ့ ေအာက္ဆံုး row မွာ column တစ္ကြက္ပ ဲ က်န္ေတာ့တ့အဲ
တြက္ <td> တစ္ခုပ ဲ ေရးရတာပါ။
Appearnce
ကၽြန္ေတာ္တို႕ေတြဟာ Table ေတြမွာ background color
ေတြအသံုးျပဳႏိုင္ပါတယ္။ border အသံုးျပဳနည္းကိုေတာ့
အေပၚမွာ ေဖာ္ျပျပီးသြားပါျပီ။ အခု ကိုယ္လိုခ်င္တ့ ဲ cell မွာ background
အေရာင္ေလးေတ ြ ထည့္ရေအာင္။
<html>
<head>
<title>Example</title>
</head>
<body>
<table border="1">
<tr>
<td bgcolor="blue">
<font color="#FFFFFF">BLUE</font>
</td>
<td bgcolor="red">
Red
</td>
<td bgcolor="#EABCDF">
Hex Color
</td>
</tr>
52 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
</table>
</body>
</html>
အဲဒီမွာဆိုရင္ bgcolor ကိုေတြ႕မွာပါ။ အဲဒါကေတာ့ background
အေရာင္ထည့္တာပါ။ ကၽြန္ေတာ္တို႕ေတြ
background အေရာင္ကိုထည့္လို႕ရေပမယ့္ စာလံုးအေရာင္ေတြ ထည့္လို႕မရပါဘူး။
ကၽြန္ေတာ္တို႕ေတြ
စာလံုးအေရာင္ထည့္ခ်င္ရင္ေတာ့ font color နဲ႕ထည့္သြင္းရပါတယ္။
တျခားအဆင္ေျပတ့နဲ ည္းကေတာ့ CSS
အသံုးျပဳလိုက္ျခင္းပါပဲ။ ဒီစာအုပ္ထဲမွာေတာ့ CSS
အေၾကာင္းပါဝင္ျခင္းမရိွေသးဘူး။ အခုဆိုရင္ေတာ့ bg color
ကိုနည္းနည္းနားလည္လာျပီထင္ပါတယ္။ တကယ္လို႕ ကၽြန္ေတာ္တို႕ေတြ row တစ္ခုလံုးကို
အေရာင္ထည့္ခ်င္ရင္ေတာ့ <tr> မွာ bgcolor ဆိုတ့ ဲ attribute သုံးရပါမယ္။
<html>
<head>
<title>Example</title>
</head>
<body>
<table border="1">
<tr>
<td bgcolor="blue">
<font color="#FFFFFF">BLUE</font>
</td>
<td bgcolor="red">
53 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
Red
</td>
<td bgcolor="#EABCDF">
Hex Color
</td>
</tr>
<tr bgcolor="#FF6699">
<td>
a
</td>
<td>
b
</td>
<td>
c
</td>
</tr>
</table>
</body>
</html>
54 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
အဲဒီမွာဆိုရင္ေတာ့ <tr bgcolor="#FF6699"> ေၾကာင့္ row တစ္ခုလံုး
အေရာင္ေျပာင္းသြားတယ္ဆိုတာကို
ေတြ႕ႏိုင္မွာပါ။ အခုေလာက္ဆိုရင္ေတာ့ table အေၾကာင္းသိေလာက္ပါျပီ။ table က
HTML နဲ႕ေရးရတာ
ေတာ္ေတာ္လက္ဝင္ျပီး စိတ္ပ်က္ဖို႕ ေကာင္းပါတယ္။ Dreamweaver လိုမ်ဳိး
software သံုးလိုက္ရင္ေတာ့ table
တစ္ခုေဆာက္ရတာ အရမ္းလြယ္ပါတယ္။ table ကို merge လုပ္တာေတြကလည္း dreamweaver မွာ
အလြယ္တကူလုပ္ႏိုင္ပါတယ္။ ဒီစာအုပ္မွာ dreamweaver အေၾကာင္းေျပာတာ မဟုတ္ပဲ
HTML ကိုအေျခခံက
အစနားလည္ေအာင္ ေရးတတ္ေအာင္ ေျပာျပထားတာေၾကာင့္ အခုလိုမ်ဳိး
နည္းနည္းလက္ဝင္ေပမယ့္ နားလည္ေအာင္
ေလ့လာသင့္ပါတယ္။ အခုေတာ့ frame အေၾကာင္းေလးပ ဲ ဆက္ရေအာင္။
Frame
Frame ကေတာ့ HTML Page ႏွစ္ခု ထက္မက တာေတြကို စာမ်က္ႏွာ တစ္ခုထ ဲ မွာ
ေဖာ္ျပျခင္တ့ ဲ အခါေပါ့။
ဘယ္လိုမ်ဳိးလဲ ဆိုေတာ့
အဲဒီမွာ ဆိုရင္ Frame ၃ ခုနဲ႕ Page တစ္ခုကို ဖြဲ႕စည္း တည္ေဆာက္ထားတာပါ။
အခုေနာက္ပိုင္းမွာ Frame
ကိုအသုံးနည္းသြားပါျပီ။ AJAX ဆိုတ့ ဲ နည္းပညာကို ေျပာင္းသုံးၾကပါတယ္။
အရင္တုန္းကေတာ့ Frame
ကိုအသုံးမ်ားခ့ပဲ ါတယ္။ ဘာလို႕အသုံးျပဳရသလဲဆိုရင္ေတာ့ အေပၚက
ပုံမွာၾကည့္လိုက္ပါ။ ဘယ္ဘက္က menu
ျဖစ္ျပီး ညာဘက္ကေတာ့ menu က ႏိွပ္လိုက္ရင္ ေပၚလာမယ့္ page ေပါ့။ အေပၚဆံုးကေတာ့ Name
ကိုေရးထားတာပါ။ အဲ.. အခု frame အေၾကာင္း စလိုက္ေအာင္။
Frame1.html
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
55 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
This is frame 1
</body>
</html>
Frame2.html
<html>
<head>
<title>Untitled Document</title>
</head>
This is frame 2
</html>
index.html
<html >
<head>
<title>Untitled Document</title>
</head>
<frameset cols="80,*" frameborder="no" border="0" framespacing="0">
<frame src="frame1.html" name="leftFrame" scrolling="No"
noresize="noresize" id="leftFrame" />
<frame src="frame2.html" name="mainFrame" id="mainFrame" />
</frameset>
56 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
<noframes><body>
</body>
</noframes></html>
frame တစ္ခုကို တည္ေဆာက္ျပီရင္ေတာ့ အနည္းဆံုး file ၃ ခုလိုပါတယ္။
index.html ကေတာ့ Frame1 နဲ႕
Frame2 ကိုခ်ိတ္ဆက္ေဖာ္ျပေပးမွာျဖစ္ျပီး frame1 နဲ႕ frame2 ကေတာ့ အဓိကေပါ့။
index.html ကို ၾကည့္လိုက္ပါ။ ထူးျခားတာ တစ္ခုပါ ပါတယ္။ အဲဒါကေတာ့ <body>
မပါျခင္းပဲ။ frame ရဲ႕ Main
Page ဟာ Body ထည့္စရာမလိုပါဘူး။ frameset ပဲ ထည့္ရမွာပါ။ HTML မွာ frame
သံုးရတာ လက္ဝင္လွပါတယ္။
အေကာင္းဆံုးကေတာ့ IDE ေတြထဲက Dreamweaver ကိုအသံုးျပဳလိုက္ရင္ေတာ့
လြယ္လင့္တကူ frame
ကိုေရးသားႏိုင္မွာပါ။ အခုေတာ့ သိေအာင္ ကိုယ္တိုင္ပဲ ေရးၾကည့္ရတာေပါ့။
<frameset> နဲ႕ စျပီး </frameset> နဲ႕ ေရးရပါမယ္။cols ဆိုတာကေတာ့ column
အေရအတြက္ေပါ့။ အခု
column ၂ ခုပဲပါတ့အဲ တြက္ cols="80,*" လို႕ေရးလိုက္ပါတယ္။ အဲဒီ အဓိပၸာယ္က
ေရွ႕က column အက်ယ္ကို 80
px ယူမယ္ ေနာက္ကေတာ့ က်န္တာ အကုန္ယူဆိုတ့ ဲ အဓိပၸာယ္ပါ။ ကၽြန္ေတာ္တို႕
percentage နဲ႕လည္း
အသံုးျပဳလို႕ရပါတယ္။ cols="50%,*" လို႕ေျပာင္းေရးလိုက္ရင္ေတာ့ ေရွ႕က 50%
ျဖစ္ျပီး ေနာက္က frame
ကလည္း က်န္တ့ ဲ 50% ေပါ့။ frameborder="no" ဆိုတာကေတာ့ frame မွာ boder
မပါဘူးဆိုတ့ ဲ အဓိပၸာယ္ပါ။
border="0" framespacing="0" အဲဒါကေတာ့ border အထူက 0 ျဖစ္ျပီး frame
တစ္ခုနဲ႕ တစ္ခုၾကားက spacing
က 0 လို႕ေျပာတာပါ။ အခု column ၂ ခုမဟုတ္လား။ ဒီေတာ့ ကၽြန္ေတာ္တို႕ေတြ
<frame> ႏွစ္ခု ထည့္ရမယ္။
ဒါေၾကာင့္
<frame src="frame1.html" name="leftFrame" scrolling="No" noresize="noresize" />
<frame src="frame2.html" name="mainFrame" id="mainFrame" />
အဲလိုမ်ဳိးေရးလိုက္တာ။ အဲမွာ src ဆိုတာကေတာ့ frame ရဲ႕ Link ေပါ့။
ကၽြန္ေတာ္တို႕ေတြ file ၃ ခုလံုးကို
တစ္ေနရာတည္းမွာထည့္ထားတယ္။ ဒါေၾကာင့္ တိုက္ရိုက္ လွမ္းေခၚလိုက္ရံုပဲ။
Name ကေတာ့ နာမည္ပါ။
မထည့္လည္းရပါတယ္.. scrolling ဆိုတာကေတာ့ ေဘးနားက scrollbar ေပၚမေပၚေပါ့။
ေပၚေစခ်င္ရင္ Yes ေပါ့။
noresize ကေတာ့ frame ကို resize လုပ္လို႕မရေအာင္ လုပ္ထားတာပါ။ ဒါဆို
frame ကို resize လုပ္ခ်င္ရင္ေတာ့
အဲဒါကို မထည့္နဲ႕ေပါ့။ အခု column ၃ ခု နဲ႕လုပ္ၾကည့္ရေအာင္။
57 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
index.html
<html>
<head>
<title>Untitled Document</title>
</head>
<frameset cols="20%,30%,*">
<frame src="frame1.html" />
<frame src="frame2.html" />
<frame src="frame1.html" />
</frameset>
<noframes>Your Browser Don't Support Frame</noframes></html>
ေမးစရာ တစ္ခုေပၚလာျပီ။ ဘာလဲဆိုရင္ေတာ့ <noframes> ။ အဲဒါက ဘာလဲဆိုရင္ေတာ့
ဟိုးအရင္က browser
ေတြက frame ေတြကို support မလုပ္ပါဘူး။ ဒါေၾကာင့္ frame ေတြကို support
မလုပ္တ့ ဲ browser ေတြျဖစ္ေနရင္
Message ေလးေဖာ္ျပေပးပါမယ္။ အခုေနာက္ပို္င္း browser ေတြက support
လုပ္ပါတယ္။ ကဲ.. အခု code ေလးကို
နည္းနည္းေလး ေျပာင္းၾကည့္လိုက္ရေအာင္။
<html>
<head>
<title>Untitled Document</title>
</head>
58 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
<frameset rows="20%,30%,*">
<frame src="frame1.html" />
<frame src="frame2.html" />
<frame src="frame1.html" />
</frameset>
<noframes><body>
</body>
</noframes></html>
ဘာေျပာင္းသြားသလဲဆိုေတာ့ frameser ပါ။ cols ကေန rows
ျဖစ္သြားပါတယ္။ cols နဲ႕ rows ေလးပဲ ကြာတာပါ။ က်န္တာ
အတူတူပါပဲ။ frame အထဲမွာလည္း ထပ္ျပီး
ထပ္မံခြဲထုတ္လို႕ရပါေသးတယ္။ အခု အေပၚဆံုးက rows ကို
column ထပ္ျပီး ခြဲပါမယ္။
<html>
<head>
<title>Untitled Document</title>
</head>
<frameset rows="20%,30%,*">
<frameset cols="*,50%" framespacing="0" frameborder="NO" border="0">
<frame src="frame1.html" />
<frame src="frame2.html" name="rightFrame" scrolling="NO" noresize>
</frameset>
59 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
<frame src="frame2.html" />
<frame src="frame1.html" />
</frameset>
<noframes><body>
</body>
</noframes></html>
အဲဒီမွာ <frameset> ေအာက္မွာ <frameset> ထပ္ထည့္ထားတာကို ေတြ႕ရမွာပါ။
<frameset rows="20%,30%,*">
<frameset cols="*,50%" framespacing="0" frameborder="NO" border="0">
<frame src="frame1.html" />
<frame src="frame2.html" name="rightFrame" scrolling="NO" noresize>
</frameset>
ကၽြန္ေတာ္တို႕ အေပၚဆံုးက rows ကို ထပ္ျပီး cols ခြဲတာပါ။ ဒါေၾကာင့္
အေပၚဆံုး rows မွာ columns
ႏွစ္ခုျဖစ္သြားပါျပီ။ ဒါေၾကာင့္ <frame> ႏွစ္ခု ေရးရတာပါ။ တကယ္လို႕ ဒုတိယ
rows မွာပဲ colums
ထပ္ထည့္ခ်င္ရင္ေတာ့ code က ဒီလိုေလးျဖစ္သြားမွာပါ။
60 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
<html>
<head>
<title>Untitled Document</title>
</head>
<frameset rows="20%,30%,*">
<frame src="frame1.html" />
<frameset cols="*,50%" framespacing="0" frameborder="NO" border="0">
<frame src="frame2.html" />
<frame src="frame2.html" name="rightFrame" scrolling="NO" noresize>
</frameset>
<frame src="frame1.html" />
</frameset>
<noframes><body>
</body>
</noframes></html>
61 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
ရွင္းရွင္းေလးပါ။ ဒုတိယ rows မွာ ျဖစ္ေစခ်င္လို႕ ဒုတိယ rows မွာ frameset
တစ္ခုထပ္ထည့္ရတာပါ။ အဲလိုမ်ဳိးပဲ
columns ေတြထဲမွာ rows ေတြ ခြဲလို႕ရပါတယ္။ အတူတူပါပဲ။ အေပၚက rows ေနရာမွာ
cols ေျပာင္းျပီးေတာ့ cols
ေနရာမွာ rows ေျပာင္းလိုက္ရင္ သိမွာပါ။ ကၽြန္ေတာ္ မေရးျပေတာ့ဘူး။
ကိုယ္တိုင္ပဲ ေရးျပီး စမ္းၾကည့္လိုက္ေပါ့။
အခု ဒီစာအုပ္ရဲ႕ ေနာက္ဆံုးအခန္းက ေနာက္ဆံုး အေၾကာင္းပါပဲ။ ဘာလဲဆိုရင္ေတာ့
Link And Frame ပါ။ Frame
တစ္ခုက Link က ႏိွပ္လိုက္ရင္ ေနာက္ frame တစ္ခုက ေျပာင္းသြားဖို႕ပါ။
ကၽြန္ေတာ္ အကုန္လံုးကို
အေျခခံေလာက္ပဲ ေျပာႏိုင္မွာပါ။ Web ပိုင္းမွာ ေလ့လာစရာေတ ြ အမ်ားၾကီးပါ။
HTML ဆိုတာ လုံးဝ စကာစ
အေျခခံအဆင့္ေလးပါ။ ကဲ.. ေနာက္ဆံုး အခန္းေလး ဆက္လိုက္ရေအာင္။
62 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
Link And Frame
ကၽြန္ေတာ္တို႕ အေပၚမွာ ေျပာဘူးပါတယ္။ ဘယ္ဘက္က Link ကို ႏိွပ္လိုက္ရင္
ညာဘက္မွာ သက္ဆိုင္ရာ Page ကို
ေျပာင္းသြားမယ္ဆိုျပီးေတာ့။ အခုအဲလိုမ်ဳိး ဘယ္ဘက္က frame ကေန
ႏိွပ္လိုက္ရင္ ညာဘက္က frame မွာ
သက္ဆိုင္ရာ Page ေျပာင္းသြား ေအာင္လုပ္ပါမယ္။ ပထမဆံုး frame ၂ ခုအတြက္
index.html ကိုစေရးပါ့မယ္။
<html>
<head>
<title>Menu</title>
</head>
<frameset cols="100,*">
<frame src="menu.html" id="menu">
63 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
<frame src="home.html" name="main">
</frameset>
<noframes></noframes>
</html>
အဲမွာ.. name="main" လို႕ေပးခ့တဲ ာကို ေတြ႕မွာပါ။ အဲလိုမ်ဳိးနာမည္
ထည့္ခ့မဲ ွ menu ကေန အဲဒီ frame မွာ
သြားေပၚဆိုျပီး ေျပာလို႕ရမွာ။ ကဲ.. အခု menu.html မွာေရးထားတာကို
ၾကည့္လိုက္ရေအာင္...
<html>
<head>
<title>Menu</title>
</head>
<body>
<a href="home.html" target="main">Home</a><br>
<a href="download.html" target="main">Download</a><br>
<a href="link.html" target="main">Link</a><br>
</body>
</html>
အဲမွာ link ေတြအကုန္လံုးမွာ target ဆိုတာေလး ပါတာကိုေတြ႕ရပါလိမ့္မယ္။
ကၽြန္ေတာ္တို႕ index.html မွာ
name="main" ဆိုတ့ ဲ frame မွာ သြားေပၚမယ္ဆိုတ့ ဲ အဓိပၸာယ္ေပါ့။ download
ဆိုတာကို ႏိွပ္လိုက္ရင္ ညာဘက္က
frame မွာ download.html ဆိုတ့ ဲ page ေလးေပၚသြားပါမယ္။ Home
ကိုႏိွပ္လိုက္လည္း home.html ဟာ
ညာဘက္က frame မွာပဲ သြားေပၚပါမယ္။ အဲဒီေလာက္ဆိုရင္ နားလည္ သိရိွျပီလို႕ထင္ပါတယ္။
64 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
အခုဆက္ျပီး နည္းနည္းအပိုေလး ထည့္ေျပာျပရေစ။
menu.html page ထဲမွာပဲ home.html ေလးကို လွမ္းျပီး ေခၚျပတ့နဲ ည္းပါ။
အဲဒါေလးကေတာ့ အသုံးဝင္ပါတယ္။
Home Page မွာ news ေတြကို ေဖာ္ျပတဲ့အခါ မွာအသံုးဝင္လွပါတယ္။
<html>
<head>
65 | P a g e HTML BY SATURNGOD
http://saturngod.mysteryzillion.com
<title>Menu</title>
</head>
<body>
<iframe src="home.html" width="500" height="200"></iframe>
</body>
</html>
code ေလးက ရွင္းပါတယ္။ <iframe> ပါ။ src ကေတာ့ ဘယ္ page ကို
ခ်ိတ္မလဲဆိုတာပါ။ width နဲ႕ height
ကေတာ့ ကိုယ္ေဖာ္ျပခ်င္သေလာက္ေပါ့။ အခုဆိုရင္ေတာ့ ကၽြန္ေတာ္တို႕ေတြ HTML
အေျခခံေလးကို
ေလ့လာလို႕ျပီးသြားပါျပီ။ ဒီစာအုပ္ကို ဖတ္ျပီးရင္ေတာ့ ဘာ code က
ဘာကိုေျပာတာလဲဆိုတာပဲ သိႏိုင္မွာပါ။
ဘာလိုခ်င္ရင္ ဘယ္လိုလုပ္ရမလဲ ဆိုတာေတာ့ မိမိရဲ႕ ေလ့လာမႈစြမ္းအားေပၚ
မူတည္ပါတယ္။ စာအုပ္ဖတ္ရံုနဲ႕
မရပါဘူး ။ လုိက္ေတြးပါ။ စမ္းၾကည့္ပါ။ ဒါမွ တိုးတက္မႈကို ရမွာပါ။
မ်က္စိနဲ႕ ၾကည့္ရံုနဲ႕ေတာ့ တိုးတက္မႈရိွမွာ
မဟုတ္ပါဘူး။ ဒီစာအုပ္ ဖတ္ျပီးရင္ေတာ့ "ေအာ္.. ဒီ code က ဒါအတြက္ေရးထားတာ"
အဲေလာက္ပဲ စြမ္းေဆာင္
ေပးႏိုင္မွာပါ။ ငါဒီလိုဆြဲခ်င္တယ္။ ဒါေၾကာင့္ ဒါကို သံုးရမယ္ ဆိုတာကေတာ့
မိမိရဲ႕ အာရံု ကြန္႕ျမဴးမႈနဲ႕ ဒီစာအုပ္ကို
ေပါင္းျပီး အသံုးခ်ရရင္ ရႏိုင္မွာပါ။
ကၽြန္ေတာ္တို႕ေတ ြ ဘာေတ ြ ဆက္ျပီးေလ့လာဖို႕လိုေသးလဲဆိုေတာ့ အမ်ားၾကီးပါ။
HTML ကို ဒီစာအုပ္
အဆင့္ေလာက္ သိသြားျပီဆိုရင္ေတာ့ CSS ကိုဆက္ျပီး ေလ့လာဖို႕လိုပါတယ္။
အဲဒီႏွစ္ခုတတ္ျပီးရင္ေတာ့
နည္းနည္းေလး ေရးဆြဲရတာ လြယ္သြားေအာင္ Dreamweaver
သံုးျပီးဆြဲေစခ်င္ပါတယ္။ ျပီးရင္ေတာ့ Javascript
ေပါ့။ အဲဒီဟာေတြ ျပီးသြားရင္ photoshop နဲ႕ Flash
နည္းနည္းသံုးတတ္ဖို႕လိုပါတယ္။ Webdesigner
တစ္ေယာက္အေနနဲ႕ ေလ့လာဖို႕ေျပာတာပါ။ web developer အေနနဲ႕လည္း CSS ,
Javascript, Phtoshop, Flash
တို႕ကို အနည္းအက်ဥ္းေလး သိရိွနားလည္ထားဖို႕လိုပါတယ္။ ျပီးရင္ web
programming ေတြ ေလ့လာရမွာပါ။ .NET
သမားေတြဆိုရင္ေတာ့ ASP.NET ေပါ့။ Java သမားဆိုရင္ေတာ့ JSP ရိွပါတယ္။
အျခား လြယ္ကူစြာ
ေလ့လာခ်င္ရင္ေတာ့ php က အလြယ္ဆုံးပါ။ ေနာက္ဆုံး technology ေတြနဲ႕
ေကာင္းေကာင္းေရးလို႕ရတ့ ဲ Ruby On
Rails နဲ႕ python တို႕ကိုလည္း ေလ့လာႏိုင္ပါေသးတယ္။ အမ်ားၾကီး
ေလ့လာဖို႕ေတြရိွပါတယ္။ ဦးစြာေတာ့ HTML ကို
ေသေသခ်ာခ်ာ တတ္ကၽြမ္းထားဖုိ႕လိုပါတယ္။
CSS By Saturngod…… coming soon…………….