ဒီ ဘေလာ့ ေလးကို သိသူလဲ ရွိမယ္ မသိေသးတဲ႔ သူလဲရွိမယ္ ဒါေလးကေတာ့ မသိေသးတဲ့သူ ေတြ
အတြက္ ရည္ရြယ္ ျပီးေတာ့ တင္းေပးထား တာပါ။ အရမ္းေတာ္ လို႔တတ္ လို႔မဟုတ္ပါဘူး ကိုယ့္တတ္
သိထားတဲ႔ ပညာကို တျခားသူကို ျပန္လည္ ေ၀မွ်တဲ႔ သေဘာပါ။ အားလံုးကို တတ္ေစ ခ်င္ပါတယ္။
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ဆြဲရတ့ ဲ အထမဲ ွာ အလြယ္ဆုံးနဲ႕ အေျခခံအက်ဆုံးပဲ။ သူ႕ကိုေသေသခ်ာခ်ာနားလည္ထားမွ တျခား 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 ထဲတြင္ အခုလိုေရးသားလိုက္ပါ။
<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 ကို yourname.html လို႕ေပးလိုက္ပါ။ yourname သည္
မိမိ၏ ႏွစ္သက္ရာ နာမည္ေပးႏိုင္သည္။ .html သည္ file extension ျဖစ္သည္။ HTML ေရးထားေသာ page မ်ားကို
.html ႏွင့္ .htm လို႕ေပးမွသာ browser တြင္ ေပၚပါလိမ့္မည္။
၃. Save သြင္းလိုက္ေသာ file လမ္းေၾကာင္းကို သြားလိုက္ပါ ။ first.html file
ေလးကို double click လုပ္ျပီး ဖြင့္လိုက္ပါ ။
ဒါဆို page ေလးတစ္ခုတက္လာတာကို ျမင္ရပါမယ္။
ထိပ္ပိုင္းတြင္ 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
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>
<h1>H1</h1>
<h2>H2</h2>
<h3>H3</h3>
<h4>H4</h4>
<h5>H5</h5>
<h6>H6</h6>
</body>
</html>
အခုဆို html အေၾကာင္းနည္းနည္း နားလည္လာေလာက္ပါျပီ။ တကယ္တန္းေတာ့ မခက္ပါဘူး။ ဒါကအစပ ဲ
ရိွပါေသးတယ္။ ဒီေလာက္ေလးန႕ဲ ပင္ စာေတြပဲပါတ့ ဲ page တစ္ခုေရးလို႕ရေနျပီ။
ဘယ္ code ပဲေရးေရး <html><head><title></title></head><body></body></html>
သူတို႔ေတြကို ထည့္ေပးပါ ေနာက္ ပိုင္းတြင္ ကၽြန္ေတာ္ အေရွ့မွာ ရွင္းျပျပီး ျပီ မို သူတို႔ေတြကို ထပ္မ
ထည့္ေတာ့ ပါဘူး။
Alignment(စာအေန အထားခ်ိန္ ျခင္း)
Alignment မွာ Left, Right, Center, Justify ဆိုျပီးေတာ့ ရွိပါတယ္။
(ဥပမာ) notepad ထဲမွာ <h1 align=”center”>Example</h1> လို႔ရိုက္ျပီး save လုပ္လုိက္ပါ။
ျပီးရင္ save file ကို run လုိက္ပါ။ စာလံုးက အေရွ့မွာ ကၽြန္ေတာ္ တို႔ ရိုက္ထား သလို စာလံုးက ၾကီး
ေပမယ့္ အလယ္ကုိ ေရာက္သြား တာကိုေတြ႔ ရမွာပါ။ အနီ ေရာင္နဲ႔ ေရးထားတဲ႔ေနရာမွာ ကိုယ့္ ၾကိဳက္
သလိုေျပာင္းလဲ ေရးသားႏိုင္ပါတယ္။ သတိ - h1 နဲ႔ align ၾကားမွာ space တစ္ခ်က္ ျခားရပါ့မယ္။
Paragraph (စာပိုဒ္ ေရးသားျခင္း)
Website ေတြမွာ စာပိုဒ္ေတြ ပါတဲ႔ webpage ေတြကို ေတြ႔ဖူးပါလိမ့္မယ္ စာပိုဒ္ေတြ ကညီ ျပီးေတာ့
ၾကည့္လို႔ ေကာင္းပါတယ္။ အဲ႔ဒီလိုေလး ေရးခ်င္တယ္ ဆိုရင္ေတာ့.........
<p align=”justify”>ဒီေနရာမွာ စာပိုဒ္ေရးပါ</p> ဒီလိုေလး ေရးျပီးေတာ့ save လုပ္လုိ္က္ပါ။
<p align=”justify”></p> နဲ႔ ေရးမယ္ဆို ရင္ေတာ့ သူက စာပိုဒ္တစ္ပိုဒ္ ခ်င္းကို ပဲညီ ေအာင္ လုပ္
ေပးျပီး ေနာက္ စာပိုဒ္ေတြ ကိုဆက္ေရးလို႔မရပါဘူး။ ေနာက္စာပိုဒ္ေရးမယ္ ဆိုရင္ ေတာ့အစက
<p align=”justify”> နဲ႔စ ျပီးေတာ့ ျပန္ေရးရပါ့မယ္ ျပီးရင္ </p> နဲ႔ ျပန္ပိတ္ ပါ.....
ေနာက္တစ္မ်ိဳးကေတာ့.....
<div align=”justify”>ဒီေနရာမွာ စာပိုဒ္ေရးပါ</div> ျပီးရင္ save လိုက္ပါ။
<div align=”justify”></div> နဲ႕ ေရးမယ္ဆို ရင္ေတာ့ သူက စာပိုဒ္ေတြအားလံုးကို ညီေအာင္လုပ္
ေပးပါတယ္။ တစ္ပိုဒ္ျပီး ရင္တစ္ပိုဒ္ကို <br> ခြဲျပီးေတာ့ ေရးရပါ့မယ္။ <br> ဆိုတာကေတာ့
စာေၾကာင္းတစ္ေၾကာင္း (သို႔) စာတစ္ပိုဒ္နဲ႔တစ္ပို္ဒ္ ကို ခြဲျခားျပီးေရးတာပါ။ စာတေၾကာင္းေရးျပီး
<br> ထည့္ေနာက္တစ္ ေၾကာင္းေရးၾကည့္လိုက္ပါ ေအာက္ကိုဆင္းသြားတာကိုေတြ႔ ရပါလိမ့္...ဒီ
လိုပါပဲ <div align=”justify”>............<br>
...........................................<br>
ျပီးရင္ေတာ့ </div> ျပန္ပိတ္ ပါ။
ဒီေလာက္ဆို ရင္ေတာ့ html အေျခခံနဲ႔ ပတ္သက္ျပီး ေတာ္ေတာ္ေလး သိေလာက္ျပီထင္ပါတယ္ ။
စိတ္၀င္းစားသူမ်ားကေတာ့ ဖတ္ျပီးရင္ စမ္းၾကည့္ပါလို႔ မွာေစခ်င္ပါတယ္။ စမ္းသပ္တာကေတာ့
ေကာင္းတဲ့အလုပ္ပါ။ code ေတြကို ေရးရတာေပ်ာ္ လာပါလိမ့္မယ္။ ကိုယ္ဖန္းတီးထားတဲ့ webpage ေလးကိုၾကည့္ ျပီးေတာ့ ၾကည္ႏူးလာပါလိမ့္မယ္။ ေပ်ာ္စရာေကာင္းပါတယ္..........
ဒီေနကေတာ့ ဒီေလာက္ပါပဲ ေနာက္လဲက်ေနျပီ ဆိုေတာ့ ျပန္ရေတာ့မယ္ ေနာက္ေန႔ မွာေတာ့
(ဒုတိယ) ပိုင္းကို ဆက္ျပီး တင္ေပးသြားပါ့မယ္။ စမ္းသပ္လိုိ႔ မရဘူးဆိုရင္ေတာ့
bravit.james@gmail.com ကုိ ဆက္သြယ္ျပီး ေမးျမန္ ႏိုင္ပါတယ္။ ကၽြန္ေတာ္ သိသေလာက္ အကုန္
ေျဖေပးပ့ါမယ္ :P ။ လစ္ျပီ ဘိုင္းဘိုင္။။။။။။။။။။။။။။။။အဆင္ေျပႏိုင္ ၾကပါေစ။
မဂၤလာပါ ဆရာ၊ HTMLဟာ ကၽြန္ေတာ္အတြက္ အရမ္း အေထာက္ အကူ ျဖစ္ခဲ့ပါတယ္ဗ်ာ (၃) ပိုင္းစလုံးကို ေလ႔လာ သင္ယူသြားပါတယ္။ ေက်းဇူး အထူးတင္ပါတယ္ ဆရာ။
ReplyDelete