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

( ၁ ) အောက်က Code ဟာ ပြီးခဲ့တဲ့ သင်ခန်းစာမှာ အသုံးပြုသွားတဲ့ Code တွေဖြစ်ပါတယ်။

( ၂ ) အခြေခံ Code ဆိုတာတောင်မှ နားမလည်သေးတဲ့သူတွေအတွက် တော်တော်ကို အမြင်ရှုပ်ထွေးနေတဲ့ Code တွေဖြစ်နိုင်ပါတယ်။ ဒီတော့ အမြင်ရှင်းသွားအောင်နဲ့ Code တွေကို အပိုင်းလိုက် ခွဲခြားပြီးမြင်တတ်လာအောင် အခြေခံ Html Basic Structure လေးနဲ့ ရှင်းပြပေးပါမယ်။ အောက်ပါပုံကို ကြည့်ပါ။


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

Html Document တစ်ခုဟာ <html> နဲ့စပြီး </html> နဲ့ အဆုံးသပ်ပါတယ်။ အဲဒါကို စာရွက်တစ်ရွက်လို့ မြင်ယောင်ကြည့်ပါ။ <html> နဲ့ </html> ကြားမှာ ကျနော်တို့ စာတွေရေးပြလိုက်တယ်ဆိုရင် <body> နဲ့ </body> ကြားမှာ ရေးပေးရမှာဖြစ်ပါတယ်။ အဲဒီ <body> ကြားထဲမှာရေးမှ အဲဒီစာတွေကို ကျနော်တို့ မြင်တွေ့ခွင့်ရမှာဖြစ်ပါတယ်။ ဒါကြောင့် မြင်ချင်သမျှ၊ တနည်းအားဖြင့် မိမိပြပေးချင်သမျှ စာတွေကို <body> နဲ့ </body> ကြားထဲမှာ ရေးရမယ်လို့ မှတ်ထားနိုင်ပါတယ်။


အဲဒီ html document ထဲမှာ <body> တင်မကပဲ <head> ဆိုတာ ပါဝင်ပါတယ်။ အဲဒီ <head> နဲ့ </head> ကြားထဲမှာရေးတဲ့စာတွေကတော့ သာမန်အားဖြင့် စာဖတ်သူတွေကို မပြပေးပါဘူး။ အဲဒီ <head> ထဲမှာလည်း အများအားဖြင့် ကိုယ့် blog ရဲ့ Title တွေ၊ blog ကို ထိန်းချုပ်ပေးတဲ့ CSS code တွေ၊ Meta Information တွေပါဝင်နိုင်ပါတယ်။ ဒီအဆင့်ထိ နားလည်ပြီဆိုရင် နောက် တဆင့် တက်ပါမယ်။

( ၃ ) Blogger အခြေခံ Code ကို အောက်က ပုံအတိုင်း အစချီထားပါတယ်။

<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE html>

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

<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

ဆိုတဲ့စာကြောင်းမှာ …

xmlns:b ဆိုတာက Blogger Element တွေကို ဝင်ရောက်အသုံးပြုခွင့်တောင်းလိုက်တဲ့သဘောပါ။

xmlns:data ဆိုတာက Blogger ရဲ့ Database ကို ဝင်ရောက်အသုံးပြုခွင့်တောင်းလိုက်တဲ့သဘောပါ။

xmlns:expr ဆိုတာက Blogger ရဲ့ Helper Expression တွေကို ဝင်ရောက်အသုံးပြုခွင့်တောင်းလိုက်တဲ့ သဘောပါ။ ဒီစာကြောင်းလည်း ပုံသေအသုံးပြုနိုင်တယ်လို့ အလွယ်ဆုံးမှတ်သားထားပါဦး။

( ၄ ) Head အပိုင်းကို လေ့လာကြည့်ရအောင် …

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

<title>Thuta Sann</title>

ဒီ Code က မိမိ Document ရဲ့ Title ဖြစ်ပါတယ်။ ဥပမာအဖြစ် Thuta Sann လို့ထည့်ပြထားပါတယ်။ ဒါကို မိမိရဲ့ Blog Title အဖြစ်ပေးချင်တယ်ဆိုရင် <title><data:blog.pageTitle/></title> လို့ ပြောင်းရေးရင်လည်းရပါတယ်။ ဒီကုဒ်က Blogger ရဲ့ Database ထဲက blog page ရဲ့ Title data ကို ဆွဲထုတ်ယူလိုက်တဲ့သဘောဖြစ်ပါတယ်။

 <b:skin><![CDATA[

 body {

 background:white;

 color:black;

 }

 ]]></b:skin>

 

 ဆိုတဲ့ Code က Blogger မှာသုံးတဲ့ CSS Code တွေထည့်ဖို့ နေရာဖြစ်ပါတယ်။ ကျနော်တို့ ထည့်ချင်သမျှ CSS Code တွေကို  <b:skin><![CDATA[  နဲ့ ]]></b:skin> ကြားမှာ လာထည့်ပေးရမှာဖြစ်ပါတယ်။ ဥပမာအားဖြင့် …

body ကို နောက်ခံ ( Background ) အဖြူနဲ့ စာအရောင်( Color ) ကို အနက်ရောင်အဖြစ်မြင်အောင် နမူနာဖန်တီးထားပါတယ်။ CSS Code တွေကို ပိုမိုနားလည်နိုင်ဖို့ အခြေခံသင်ခန်းစာတွေကို ရှာဖွေလေ့လာ ထားသင့်ပါတယ်။ လောလောဆယ် စမ်းသပ်ချင်တယ်ဆိုရင် …

background:white;

color:black;

အစား

background:red; သို့မဟုတ် background:#FF0000;

color:white; သို့မဟုတ် color:#FFFFFF;

လို့ပြောင်းလဲပြီးစမ်းသပ်ကြည့်နိုင်ပါတယ်။

( ၅ ) Body အပိုင်းကို လေ့လာကြည့်ရအောင် …


<body> နဲ့ </body> ကြားမှာ <header>, <div>, <aside>, <footer> ဆိုတဲ့ နမူနာ Code လေးခု ပါဝင်ပါတယ်။ အဲဒါကို တစ်ခုခြင်းစီမရှင်းပြခင် … အောက်ပါပုံကို ကြည့်ပါ။

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

<b:section> တခုထဲမှာ

class, id, maxwidgets, showaddelement ဆိုတာတွေပါဝင်ပါတယ်။ ဒါက လောလောဆယ် ပါတာကို ပြောတာပါ။ ထပ်ပြီးထည့်စရာတွေရှိပါသေးတယ်။ ထားလိုက်ပါဦး …

class နဲ့ id ဟာ နာမည်တူပေးတတ်ကြပါတယ်။ Widget တစ်ခုရဲ့ Class နဲ့ Id ကို သတ်မှတ်ပေးတာပါ။

maxwidgets ဟာ Widget ဘယ်နှစ်ခု ထပ်ပြီး Add နိုင်မလဲဆိုတာသတ်မှတ်တာပါ။ ဥပမာ … maxwidgets = '5' လို့ရေးလိုက်မယ်ဆိုရင် Widget ၅ ခုအပြင်ထပ်မံ Add လို့မရပါဘူး။

showaddelement ဟာ Widget ကို Add ခွင့်ပြုမပြု သတ်မှတ်ပေးတာပါ။ showaddelement = 'yes' ဆိုရင် Widget Add ခွင့်ပေးလိုက်တာဖြစ်ပါတယ်။ လောလောဆယ် နားမလည်သေးလည်း ကိစ္စမရှိပါဘူး။ သဘောတရားလောက်သိထားရင် နောက်ပိုင်းရှင်းသွားပါလိမ့်မယ်။


<header> နဲ့ </header> ထဲမှာ အောက်ပါ Code တွေပါဝင်ပါတယ်။

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

ဒီ Code ရဲ့ အဓိပ္ပါယ်က header အတွက် section တခု သတ်မှတ်လိုက်ပါတယ်။ widget တခုသာ သတ်မှတ်လိုက်ပြီး Element ကို Add ခွင့်မပြုဘူးလို့ ဆိုလိုပါတယ်။

<b:widget id='Header1' locked='true' title='Blog Header' type='Header'></b:widget>

ဒီ Code ကတော့ ထည့်လိုက်တဲ့ Widget ရဲ့ ID ကို Header1 လို့ပေးလိုက်ပြီး Widget ကို ဟိုရွှေ့ဒီရွှေ့ ရွှေ့လို့မရအောင် Lock ချထားပါတယ်။ Title ကို Blog Header လို့ပေးထားပြီး type ကို Header လို့ ပြောထားပါတယ်။ type တွေက အမျိုးမျိုးရှိပါတယ်။ အောက်မှာ နမူနာပြပေးထားပါတယ်။

BlogArchive

Blog

Feed

Header

HTML

SingleImage

LinkList

List

Logo

BlogProfile

Navbar

VideoBar

NewsBar

ဒီသဘောတရားနားလည်ရင် တခြား Body ထဲက ကုဒ်တွေလည်း သဘောပေါက်မှာပါ။ Body ထဲမှာ …

Header <header></header> အတွက် Code ရယ်

Post <div></div> အတွက် Code ရယ်  

Sidebar <aside></aside> အတွက် Code ရယ်

Footer <footer></footer> အတွက် Code ရယ် ဆိုပြီး အပိုင်းလေးပိုင်းပါဝင်တဲ့အတွက် မိမိဘာသာဆက် ပြီးလေ့လာထားပါ။ နောက်မှ ထပ်မံရှင်းပြပါဦးမယ်။ ဒီနေ့ရှင်းပြတဲ့ Code တွေရဲ့ အခြေခံသဘောတရားကို ကောင်းကောင်းဖတ်ထားမှ နောက်ပိုင်းသင်ခန်းစာတွေအတွက် အဆင်ပြေပါ လိမ့်မယ်။ မဟုတ်ရင် နောက်ပိုင်း Code တွေရောပြီး ရှုပ်ကုန်ပါလိမ့်မယ်။