အခုေနာက္ပိုင္း ခဏခဏေျပာျဖစ္တဲ့ စကားတစ္ခုရွိပါတယ္... Programming Language ေတြ တက္ျပီး Code ေရးတက္ယံုနဲ႕ Professional Developer မျဖစ္ပါဘူး... သက္ဆုိင္ရာ နယ္ပယ္မွာ သိသင့္သိထုိက္တဲ့ နည္းပညာေတြကို သိရွိ နားလည္ ထားမွသာ Professional Developer ျဖစ္မွာပါ...

အမွန္တစ္ကယ္ ကြ်မ္းက်င္တဲ့ Web Developer ျဖစ္ခ်င္သူတစ္ေယာက္အေနနဲ႕ PHP, C# စတဲ့ Programming Language ေတြ တက္ထားယံုနဲ႕ (လံုး၀) မလံုေလာက္ပါဘူး... Web Standard ေတြအေၾကာင္းသိထားရပါတယ္... Web2.0 လုိ Terms ေတြနဲ႕ Modern Technology ေတြအေၾကာင္း သိထားရပါတယ္... Web Usability အေၾကာင္းနဲ႕ Ajax လိုနည္းပညာမ်ိဳးအေၾကာင္းေတြ သိထားရပါတယ္... Search Engine Optimization လို နည္းစနစ္ေတြအေၾကာင္း နားလည္ထားရပါတယ္... ဒါေတြ မသိထားရင္ ဘယ္လိုမွ Professional Web Developer ျဖစ္မွာ မဟုတ္ပါဘူး...

အခုကေတာ့ Web Development အတြက္ အလြန္အေရးၾကီးတဲ့ အေျခခံအက်ဆံုး နည္းပညာအေၾကာင္း ေျပာခ်င္ပါတယ္...

Web Development မွာ Javascript ရဲ႕ အေရးပါမွဳ အေၾကာင္းကို ခဏခဏ ေျပာဖူးပါတယ္... အခု ေျပာခ်င္တာကေတာ့ ေနာက္ထပ္အေရးၾကီးတဲ့ နည္းပညာတစ္ခုျဖစ္တဲ့ HTML နဲ႕ CSS အေၾကာင္းပါ... ဒီအေၾကာင္း ေျပာဖို႕ HTML ရဲ႕ သမိုင္းေၾကာင္းေလးကို နည္းနည္း ျပန္လွန္ခ်င္ပါတယ္...

History
ကေန႕ ကြ်န္ေတာ္တို႕ Web လို႕ အလြယ္ေခၚတဲ့ World Wide Web ဆုိတာဟာ Document ေတြ တစ္ခုနဲ႕တစ္ခု အျပန္အလွန္ခ်ိတ္ဆက္ (Interlinked) တဲ့ နည္းပညာတစ္ခုမွ်သာျဖစ္ပါတယ္... ကေန႕ေခတ္မွာ Features စံုစံုလင္လင္နဲ႕ Web Application ေတြ အမ်ားၾကီးရွိေနေပမယ့္ Web ရဲ႕ တစ္ကယ့္ အသက္ဟာ Hyperlink ေတြကိုအသံုးျပဳျပီး Document ေတြ အျပန္အလွန္ Link လုပ္ထားၾကျခင္းသာ ျဖစ္ပါတယ္...

Web ဟာ Internet ကိုအသံုးျပဳထားတဲ့ Service တစ္ခုျဖစ္ပါတယ္... Internet ဆိုတာကေတာ့ (အားလံုးသိထားတဲ့အတိုင္း) တစ္ကမၻာလံုး အတိုင္းအတာနဲ႕ ခ်ိတ္ဆက္ထားတဲ့ Network ၾကီး လို႕ အလြယ္ေျပာလို႕ရပါတယ္...

Internet ဆိုတဲ့ Network ၾကီးမွာ Platform အမ်ိဳးမ်ိဳး၊ OS အမ်ိဳးမ်ိဳးနဲ႕ System အမ်ိဳးမ်ိဳး ပါႏုိင္ပါတယ္... PC ေတြပါႏုိင္သလို Mainframe Computer ေတြလည္း ပါႏုိင္ပါတယ္... PC မဟုတ္တဲ့ Mobile လို Device မ်ိဳးလဲ ပါႏုိင္ပါတယ္... Windows OS ေတြပါႏုိင္သလို၊ Unix ေတြ Linux ေတြလည္းပါႏုိင္ပါတယ္... Mac ေတြ Solaris ေတြလည္း ပါႏုိင္ပါေသးတယ္...

Document တစ္ခုဟာ ဒီလိုမ်ိဳး အမ်ိဳးစံုေအာင္ကြဲျပားလွတဲ့ System ေတြေပၚမွာ တူညီစြာအလုပ္လုပ္ဖို႕အတြက္ System အားလံုးက လိုက္နာတဲ့ စံသတ္မွတ္ခ်က္ လိုလာပါတယ္...

World Wide Web Consortium (W3C)
W3C လို႕ ေခၚတဲ့ World Wide Web Consortium ဟာ စံသတ္မွတ္ခ်က္ (Web Standard) ေတြ ခ်မွတ္ေပးတဲ့ အဖြဲ႕အစည္းတစ္ခုျဖစ္ပါတယ္... အဲ့ဒီအဖြဲ႕အစည္းက Web အတြက္ အဓိက စံ ႏွစ္မ်ိဳးကို သတ္မွတ္ေပးပါတယ္...

• Web Document ေတြကို ဘယ္လိုတည္ေဆာက္ရမလဲ ဆိုတဲ့ (စံ) နဲ႕
• Web Document ေတြကို Internet ေပၚမွာ ဘယ္လို Transfer လုပ္ရမလဲဆိုတဲ့ (စံ) တို႕ ျဖစ္ပါတယ္...

Web Document ေတြ Internet ေပၚမွာ Transfer လုပ္ဖို႕အတြက္ HTTP လို႕ေခၚတဲ့ Protocol ကို တီထြင္ေပးထားပါတယ္... Document ေတြကို တည္ေဆာက္ဖို႕အတြက္ေတာ့ HTML ဆိုတဲ့ Markup Language တစ္ခုကို တည္ထြင္ေပးပါတယ္... ဒါေၾကာင့္ HTML ဟာ Web Document ေတြ တည္ေဆာက္ဖို႕အတြက္ စံသတ္မွတ္ခ်က္ျဖစ္ပါတယ္... Web Developer ေတြဟာ Web Document ေတြ တည္ေဆာက္ေပးရမယ့္သူေတြ ျဖစ္တဲ့အတြက္ ဒီ HTML စံသတ္မွတ္ခ်က္ကို နားလည္ဖို႕ လိုပါတယ္...

HTML Version History
Sir Tim-Berner Lee ဟာ HTML ရဲ႕ ပထမ Version ကို ၁၉၉၁ ခုႏွစ္ေလာက္မွာ စတင္ခဲ့တာျဖစ္ျပီး Text ေတြ Image ေတြပါတဲ့ Document ေတြတည္ေဆာက္ႏုိင္ဖို႕ Elements (Tags) ေတြ ပါ၀င္ပါတယ္...

၁၉၉၅ ခုႏွစ္မွာ ထြက္ရွိခဲ့တဲ့ HTML 2.0 မွာေတာ့ Table ေတြပါလာပါတယ္...

HTML 3.2 ကိုေတာ့ ၁၉၉၇ ခုႏွစ္မွာ W3C Recommendation အေနနဲ႕ ထြက္ရွိခဲ့ပါတယ္... စံသတ္မွတ္ခ်က္မတဟုတ္ပဲ Web Browser ေတြက သူတို႕သေဘာနဲ႕သူတို႕ ထည့္သြင္းထားတဲ့ တစ္ခ်ိဳ႕ Element ေတြ (ဥပမာ။ ။ Netscape's Visual Tags) ကို စံအျဖစ္ သတ္မွတ္ေပးခဲ့ျပီး အခ်ိဳ႕ကိုေတာ့ ထည့္သြင္းျခင္းမျပဳခဲ့ပါဘူး (ဥပမာ။ ။ Internet Explorer's Marquee)...

၁၉၉၇ နဲ႕ ၁၉၉၈ မွာ ထြက္ရွိခဲ့တဲ့ HTML 4.0 မွာေတာ့ HTML ကို Document Structure လုပ္ဖို႕သာ သံုးသင့္ျပီး Visual Style ေတြကို Markup ကေန ခြဲထုပ္ႏုိင္ဖို႕ Cascading Style Sheet (CSS) ဆိုတဲ့ နည္းပညာတစ္ခု ထည့္သြင္းခဲ့ပါတယ္...

အခု ကြ်န္ေတာ္တို႕ သံုးေနတာကေတာ့ ၁၉၉၉ ခုႏွစ္မွာ Update လုပ္ခဲ့တဲ့ HTML 4.01 ျဖစ္ပါတယ္...

Purpose of CSS
အထက္က HTML Version History မွာ CSS ရဲ႕ အခန္းက႑ကို ျမင္ခဲ့မယ္လို႕ထင္ပါတယ္... HTML ဟာ Web Document ေတြကို တည္ေဆာက္ဖို႕သာျဖစ္ျပီး အေသးစိတ္ အျပင္အဆင္ (Style) ေတြအတြက္ CSS ကို အသံုးျပဳရမွာျဖစ္ပါတယ္...

ဒီလိုမ်ိဳး Style ကို Markup ကေနခြဲထုပ္လိုက္တဲ့အတြက္ ျမင္သာတဲ့ အက်ိဳးေက်းဇူး (၂)ခု ရွိပါတယ္... ပထမတစ္ခုကေတာ့ Style ကို Markup ကေန ခြဲထားတဲ့အတြက္ ေနာက္ပိုင္းမွာ Maintain လုပ္ရလြယ္ကူပါတယ္... ဒုတိယတစ္ခုကေတာ့ Style တစ္ခုကို Document အမ်ားၾကီးက ၀ုိင္း၀န္းအသံုးျပဳႏုိင္တဲ့အတြက္ Web Document ေတြတည္ေဆာက္ရတာမွာ သက္သာပါတယ္...

ဥပမာ...
Document ေတြ ရာခ်ီတဲ့ Web Site တစ္ခု တည္ေဆာက္တယ္ဆိုၾကပါစို႕... Document တုိင္းမွာ အျပာေရာင္ရွိတဲ့ ေခါင္းစဥ္ထည့္ခ်င္ရင္ ဒီ Code ကိုကူးျပီး Document တုိင္းမွာ လုိက္ထည့္လို႕ရပါတယ္...

<font color="blue" size="4">Document Title</font>

ဒါက HTML ရဲ႕ Font ဆိုတဲ့ Visual Style Tag ကို အသံုးျပဳလိုက္တာပါ... ေနာက္တစ္ပတ္ေလာက္ ၾကာေတာ့မွာ ေခါင္းစဥ္ကို အျပာေရာင္မထားခ်င္ေတာ့ဘူး၊ အစိမ္းေရာင္း ေျပာင္းခ်င္တယ္ဆိုရင္ ဘယ္လိုလုပ္မလဲ..? ရွိသမွ် Document (၁၀၀) ေက်ာ္မွာ လိုက္ျပင္ေပေတာ့ေပါ့...

ဒီျပႆနာမ်ိဳးကို ေျဖရွင္းဖို႕ CSS ေပၚလာတာပါ... Style ေတြကို CSS File တစ္ခုနဲ႕ခြဲေရးထားျပီး Document (၁၀၀) ေက်ာ္က အဲ့ဒီ CSS File ကို ေခၚသံုးထားမယ္ဆိုရင္ ျပင္ဖို႕လိုတဲ့အခါ CSS File တစ္ခုပဲ ျပင္ဖို႕လိုပါတယ္... ဒီလိုပါ...

[ style.css ]

h1 {
    color: blue;
    font-size: 18px;
}

[ All HTML Documents ]

<link rel="stylesheet" href="style.css" />
<h1>Document Title</h1>

ေနာက္ပိုင္း Document Title ေတြကို အစိမ္းေရာင္ေျပာင္းခ်င္တယ္ဆိုရင္ style.css File ထဲက color: blue ကို color: green လို႕ ေျပာင္းလိုက္ယံုနဲ႕ အဲ့ဒီ Style File ကို ေခၚသံုးထားတဲ့ Document (၁၀၀) ေက်ာ္လံုးမွာ Effect ျဖစ္ပါလိမ့္မယ္...

The Important of HTML and CSS
အင္တာဗ်ဴးတစ္ခုမွာ Beginner တစ္ေယာက္ ေျပာတာကို ၾကားဖူးပါတယ္... HTML တို႕ CSS တို႕ဆိုတာ Web Designer ေတြရဲ႕အလုပ္ မဟုတ္လားတဲ့... လံုး၀မွားယြင္းတဲ့အယူအဆျဖစ္ပါတယ္... Server-side Technologies ေတြနဲ႕ တစ္ျခား နည္းပညာေတြကို ခဏထားပါဦး... Web Document ေတြ ကို တည္ေဆာက္ေပးရမယ့္ Web Developer တစ္ေယာက္က Web Document ေတြ တည္ေဆာက္ဖို႕အတြက္ အေျခခံ (စံ) ျဖစ္တဲ့ HTML ကို အေသအခ်ာမသိရင္ ဘယ္ျဖစ္မလဲ... ဒီလိုပါပဲ CSS ရဲ႕ အခန္းက႑ နဲ႕ အသံုး၀င္မွဳကို နားမလည္ရင္ ကေန႕ေခတ္က ေတာင္းဆိုေနတဲ့ Usability ျမင့္တဲ့ Web Application ေတြ ဖန္တီးႏုိင္မွာမဟုတ္ပါဘူး...

ဘာေၾကာင့္ ကြ်န္ေတာ္တို႕ဆီက Beginner Web Developer ေတြ HTML, CSS မသိေတာ့တာလဲဆိုတာနဲ႕၊ သိဖို႕ မလိုဘူးဆိုတဲ့ အယူအဆအမွားေတြ ဘယ္လိုေပၚလာလဲဆိုတာကို Why Frameworks Suck ဆိုျပီး တစ္ခါေျပာဖူးပါတယ္...

The Art and Science of HTML and CSS
HTML ဟာ Document ေတြတည္ေဆာက္ဖို႕အတြက္ အေတာ္ေကာင္းမြန္တဲ့ Markup Language တစ္ခုျဖစ္ပါတယ္... စဥ္းစားၾကည့္လိုက္ရင္ (Text)Document တစ္ခုမွာ အမ်ားအားျဖင့္ ပါႏုိင္တာေတြက...

• ေခါင္းစဥ္ေတြရွိမယ္... (Heading)
• ေခါင္းစဥ္ခြဲေတြရွိမယ္... (Sub-Heading)
• စာပိုဒ္ေတြရွိမယ္... (Paragraph)
• စာရင္း ေတြရွိမယ္... (Table)
  
• List ေတြရွိမယ္... (Bullet & Number)
• ပံုေတြရွိမယ္... (Image)
• Web Document ျဖစ္တဲ့အတြက္ Link ေတြရွိမယ္... (Hyperlink)

ဒီ(၇)မ်ိဳးေလာက္ ကို ဘယ္လို HTML Element ေတြနဲ႕ တည္ေဆာက္ရသလဲ သိျပီဆိုရင္ HTML တက္ပါျပီ... မယံုမရွိပါနဲ႕၊ သိပ္ကို လြယ္ပါတယ္... ဒီေလာက္လြယ္တဲ့ HTML ကို ကိုယ္တုိင္မေရးပဲ Dreamweaver လို IDE ေတြ ရွိမွ လုပ္တက္မယ္ဆိုရင္ ေလ့လာပံု မွားယြင္းေနလို႕ဆိုတာ အေသအခ်ာပါပဲ...

ေလ့လာပံုမွားယြင္းေတာ့ Element အေၾကာင္း ေသခ်ာမသိေတာ့ဘူးေပါ့... ဥပမာ။ ။ ေခါင္းစီး ထည့္ခ်င္ရင္ <h1> Tag ကို သံုးရပါတယ္... <h1> Tag ကိုသံုးလိုက္တာနဲ႕ အားလံုးထက္ ပိုၾကီးျပီး ေအာက္မွာ ေနရာလြတ္ နည္းနည္းယူထားတဲ့ ေခါင္းစဥ္ ကိုရပါလိမ့္မယ္... ဒါကို အယူအဆလြဲျပီး စာလံုးအၾကီးၾကီးနဲ႕ ျပခ်င္ရင္ <h1> သံုးရတာလို႕ ထင္ေနရင္ေတာ့ အေတာ္ၾကီးကိုလြဲေနပါျပီ... တစ္ခ်ိဳ႕ကလည္း စာလံုးၾကီးၾကီး ေပၚခ်င္ရင္ <font size="5"> ဆိုျပီး ေရးလိုက္လဲ ေပၚေနတာပဲဆိုျပီး ေခါင္းစီးကို အဲ့ဒီနည္းနဲ႕ တည္ေဆာက္တက္ပါေသးတယ္...

HTML ကို နားလည္ျပီး စနစ္တစ္က် တည္ေဆာက္တာကို Semantic Markup လို႕ေခၚပါတယ္... ဒီလို Semantic Markup ျဖစ္ေအာင္ တည္ေဆာက္ျခင္းအားျဖင့္ ရႏုိင္မယ့္ အက်ိဳးေက်းဇူးေတြ အမ်ားၾကီး ရွိပါတယ္... ဥပမာတစ္ခုေပးပါမယ္...

Google လုိ Search Engine ေတြဟာ Web ေပၚက Document ေတြကို Index လုပ္ဖို႕အတြက္ Spider(Script) ေတြလႊတ္ျပီး ဖတ္ေလ့ရွိပါတယ္... အဲ့ဒီ Spider Script ေတြက ကိုယ့္ရဲ႕ Document ကို ပိုနားလည္ေလ ကိုယ့္ Document ရဲ႕ Search Engine Rank ကလည္း ျမင့္လာေလျဖစ္ပါတယ္... Site ရဲ႕ ေခါင္းစဥ္ကို <h1>Myanmar Culture</h1> လို႕ တည္ေဆာက္ထားမယ္ဆိုရင္ <h1> ကိုေတြ႕တာနဲ႕ Spider ေတြက ဒါဟာ ေခါင္းစီးျဖစ္တဲ့အတြက္ ဒီ Document ဟာ Myanmar Culture အေၾကာင္း အဓိက ေဖာ္ျပတဲ့ Document ျဖစ္တယ္လို႕ အလြယ္တစ္ကူ ယူဆလုိက္ႏုိင္ပါတယ္... ဒါေၾကာင့္ User ေတြက Search Engine မွာ Myanmar Culture လို႕ ရွာခဲ့ရင္ အဲ့ဒီ Document ကို အဓိကထား ျပေပးႏုိင္ပါတယ္... ေခါင္းစီးကို <h1> နဲ႕ အေသအခ်ာမထည့္ထားပဲ <font size="5"> ဆိုျပီးတည္ေဆာက္ထားခဲ့ရင္ Spider ေတြက ဒါကို ေခါင္းစီးမွန္းမသိေတာ့တဲ့အတြက္ ဒီ Document ဟာ ဘာအေၾကာင္း ေဖာ္ျပတဲ့ Document လဲဆိုတာကို သူတို႕ အလြယ္တစ္ကူ နားမလည္ႏုိင္ေတာ့ပါဘူး... Search Engine Rank လည္း က်ျပီေပါ့... ဒါဟာ ဥပမာတစ္ခုပဲ ျဖစ္ပါတယ္... HTML ကို အေသအခ်ာနားလည္ျပီး Document ေတြကို စနစ္တစ္က် တည္ေဆာက္ရျခင္းရဲ႕ အက်ိဳးေက်းဇူးေတြ အမ်ားၾကီး ရွိပါေသးတယ္...

ဒီလုိ Semantic Markup ျဖစ္တဲ့ HTML ေတြ တည္ေဆာက္ႏုိင္ဖို႕အတြက္ CSS က အေရးၾကီးတဲ့ အခန္းက႑ကေန ကူညီေပးရပါတယ္...

အထက္က Layout ေလးရဖို႕အတြက္ CSS အကူအညီနဲ႕ တည္ေဆာက္တာနဲ႕ HTML ခ်ည္းသက္သက္ တည္ေဆာက္တာကို ႏွိဳင္းယွဥ္ၾကည့္ပါ...

[HTML Only version]

<table width="800" align="center" cellpadding="4" cellspacing="0">
    <tr>
        <td height="80" colspan="2" bgcolor="#53cbe1"></td>
    </tr>
    <tr>
        <td width="200" height="300" bgcolor="#a9dcfd"></td>
        <td></td>
    </tr>
    <tr>
        <td colspan="2" height="50" bgcolor="#d2f6fd"></td>
    </tr>
</table>

[ HTML + CSS version]

<div id="wrapper">
    <div id="header"></div>
    <div id="sidebar"></div>
    <div id="content"></div>
    <div id="footer"></div>
</div>

အထက္က Version ႏွစ္ခုကို ႏွိဳင္းယွဥ္ ၾကည့္ပါ... HTML Document တစ္ခုအေနနဲ႕ ဘယ္ေလာက္ ကြာ သြားလဲဆိုတာ ျမင္သာပါတယ္... CSS အကူအညီနဲ႕ တည္ေဆာက္ထားတဲ့ Version က အလြန္ရွင္းလင္းျပီး စနစ္က်တာကို ေတြ႕ရပါလိမ့္မယ္... ဘာ Style Definition မွ မပါတဲ့ Structure က်တဲ့ HTML Markup တစ္ခုကို ရရွိပါတယ္...

HTML + CSS version အတြက္ CSS က ဒီမွာပါ...

#wrapper {
    width: 800px;
    margin: 0 auto;
}
#header {
    height: 80px;
    background: #53cbe1;
}
#sidebar {
    width: 200px;
    height: 300px;
    background: #a9dcfd;
    float: left;
}
#content {
    width: 600px;
    height: 300px;
    float: right;
}
#footer {
    clear: both;
    height: 50px;
    background: #d2f6fd;
}

ဒီေနရာမွာ ေနာက္ထပ္ရတဲ့ အားသာခ်က္တစ္ခုက Sidebar ကို ဘယ္ဘက္မွာ မထားေတာ့ပဲ ညာဘက္ကိုေျပာင္းခ်င္ရင္ float: left ဆိုတဲ့ေနရာမွာ float: right လို႕ ေျပာင္းလိုက္ယံုပါပဲ... HTML ကို သြားထိစရာ လံုး၀ မလိုပါဘူး... ဒီလိုမ်ိဳး Style ကို ခြဲထုတ္လိုက္တဲ့အတြက္ ျပင္ရတာလြယ္သြားသလို Structure က်တဲ့ Semantic HTML Markup ကိုလဲ ရပါတယ္...

CSS ဆိုတာ တစ္ကယ္ေတာ့ Style Rule Set မွ်သာျဖစ္ပါတယ္... Selector ေတြနဲ႕ Style Property ေတြရဲ႕ သေဘာသဘာ၀ကို နားလည္ထားရင္ လံုေလာက္ပါျပီ...

အမွန္ေတာ့ HTML တို႕ CSS တို႕ကို ေလ့လာရတာ Programming Language တစ္ခုကိုေလ့လာရတာနဲ႕ ႏွိဳင္းယွဥ္ရင္ အေတာ္လြယ္ပါတယ္... ဒီလို ေလ့လာရလြယ္ေပမယ့္ အေရးၾကီးတာေလးေတြကို ခြေက်ာ္ျပီး အေလးမထားတာေတြကို ေတြ႕ရေတာ့ တစ္ခါတစ္ေလ အားမလိုအားမရျဖစ္မိပါတယ္...

ဒါေၾကာင့္ ဒီေနရာကေန ေျပာခ်င္ပါတယ္... တစ္ကယ့္ Professional Web Developer စစ္စစ္ ျဖစ္ခ်င္တဲ့ သူတစ္ေယာက္ဟာ HTML, CSS ကို ပိုင္ႏုိင္ေအာင္ ေလ့လာဖို႕ (လံုး၀) လိုအပ္ပါတယ္... ဒါေတြသိဖို႕ မလိုပါဘူး၊ မသိလဲျဖစ္ပါတယ္လို႕ ယူဆေနရင္ေတာ့ ဘယ္ေတာ့မွ အရည္အခ်င္းျပည့္၀တဲ့ Web Developer တစ္ေယာက္ ျဖစ္လာမွာ မဟုတ္ပါဘူး...

--
ေက်းဇူး...
[ Ei Maung ]