HTML ဆိုတာ website တစ္ခုေရးေတာ့မယ္ဆိုရင္ အေျခခံအက်ဆံုးကုဒ္တစ္မ်ိဳးပါပဲ။
တစ္ျခားကုဒ္ေတြကိုမသိေသာ္ျငားလည္း ဒီကုဒ္ကိုသိရင္ လွတပတ ဆိုဒ္ေလးတစ္ခုေတာ့ေရးလို႕ရမွာပါ။
ကဲ နိဒါန္းေလးပ်ိဳးရေအာင္……
HTML မွာ မပါမျဖစ္ပါရတဲ့ ကုဒ္ ၃ခုရွိတယ္ ။ အဲ့ဒါကေတာ့ <html> <head> <body>
တို႕ျဖစ္ပါတယ္။ ပထမဆံုး ကုဒ္စတင္ေရးေတာ့မယ္ဆိုရင္ <html> နဲ႕စပါတယ္ </html> နဲ႕ဆံုးပါတယ္။
<head> ကေတာ့ ေခါင္းစဥ္ ျဖစ္ျပီးေတာ့ <body> ကေတာ့ ကၽြန္ေတာ္တို႕ျမင္ေနရတဲ့ Page ၾကီးျဖစ္ပါတယ္။
ကုဒ္တစ္ေၾကာင္းေလာက္ေရးၾကည့္မယ္ေနာ္။
Notepad ကို ဖြင့္လိုက္ပါ။
<html>
<head>
<title> your title </title>
</head>
<body bgcolor=”#ffffff”>
<h1> your text here </h1>
<h2> your text here </h2>
<h3> your text here</h3>
<h4> your text here </h4>
<h5> your text here </h5>
<h6> your text here </h6>
</body>
</html>
ဒီကုဒ္ေလးက အလြန္ကိုလြယ္တဲ့ကုဒ္ေလးတစ္ခုျဖစ္ပါတယ္။ အခုက အစမွာမို႕လို႕ ဒီဇိုင္းမပါပဲနဲ႕
စာပဲေရးထားတာျဖစ္ပါတယ္ ။ အဲ့ဒါကို ၾကည့္မယ္ဆိုရင္ notepad ကို .html နဲ႕ save လုိက္ပါ။ ေနာက္ ဖိုင္ကို browser တစ္ခုနဲ႕ဖြင့္ၾကည့္လုိက္ပါ။
ကုဒ္ အစကေနၾကည့္မယ္ဆိုရင္ <html> နဲ႕စထားတာမို႕ ေနာက္ဆံုး</html>
နဲ႕ပဲဆံုးထားရပါတယ္။
<head> ကေတာ့ ေခါင္းစဥ္းအပိုင္းေပါ့။ ေခါင္းစဥ္ကိုေပးမယ္ဆိုရင္ <head> နဲ႕ </head> ႏွစ္ခုၾကားမွာ
<title> ဆိုတာေလးေရးေပးရပါတယ္။ <title>နဲ႕ </title> ၾကားမွာမွ ကိုယ္တင္ခ်င္တဲ့ ေခါင္းစဥ္ကို ေရးရမွာျဖစ္ပါတယ္။
ေနာက္ဆံုးတစ္ခုကေတာ့ <body> ပဲျဖစ္ပါတယ္။ အဲ့ဒါကေတာ့ ကိုယ္ျမင္ရမယ့္ webpage ၾကီးေပါ့။ အဲ့ဒီမွာ
ႏွစ္ခုတိုးလာတယ္ bgcolor ဆိ္ုတာေလးေလ။ အဲ့ဒါက ကိုယ့္ webpage ရဲ႕ကာလာကို ေျပာင္းေပးတာ
ျဖစ္ပါတယ္။ bgcolor ကုဒ္ေတြကို Photoshop ထဲမွာ အလြယ္တစ္ကူ ၾကည့္ႏိုင္သလို RGB လို႕
မွတ္ထားရင္လည္း လြယ္ပါတယ္။ Number ၆လံုးထဲကမွ ေရွ႕ွႏွစ္လံုးက အနီ ေနာက္ႏွစ္လံုးက အစိမ္း ေနာက္ဆံုးႏွစ္လံုးက အျပာ လို႕ မွတ္ထားႏိုင္ပါတယ္။
<h1> ဆိုတာကေတာ့ စာလံုး ကိုၾကီးေစတဲ့ကုဒ္ပါပဲ။ ကိုယ္ ၾကီးေစခ်င္တဲ့ကုဒ္ကို <h1> နဲ႕ <h2>
ၾကားထည့္ေရးလိုက္ျပီဆိုရင္ ကိုယ္ေရးလိုက္တဲ့စာလံုးကို အၾကီးဆံုးျမင္ရမွာျဖစ္ပါတယ္။ အေသးဆံုးကေတာ့
<h6>ျဖစ္ပါတယ္။ ထုိထက္မ်ားေသာဂဏန္းမ်ားထည့္လွ်င္ effect မျဖစ္ေတာ့ပါ။ ဒီကုဒ္က ဂဏန္းၾကီးေလေလ
စာလံုးေသးေလေလပဲျဖစ္ပါတယ္။
ေနာက္ထက္ကုဒ္တစ္ေၾကာင္းဆက္ေရးရေအာင္ေနာ္
အခုေရးမွာက <body> နဲ႕ </body> ၾကားထဲမွာေရးရမွာျဖစ္ပါတယ္။
<a href=”www.google.com”> Google </a>
ဟုေရးၾကည့္ပါ။
Webpage တြင္ Google ဟုစာတစ္လံုးထဲေပၚေနမည္။ ထုိ Google ကို ႏွိပ္လိုက္လွ်င္ google ရဲ႕ webpage ကို ေရာက္သြားမွာျဖစ္ပါတယ္။ ထုိကုဒ္ကို link ခ်ိတ္သည္ဟုေခၚပါသည္။
ေနာက္ webpage မွာ ပံုထည့္ၾကည့္ရေအာင္။
<body> tags ထဲမွာေရးရမွာပဲျဖစ္ပါတယ္။
<img src="file:///D|/Nyein Chan Ko/header.jpg”> ဟုရုိက္ၾကည့္ပါ။ ေနာက္ run ၾကည့္လိုက္ပါ။
Webpage တြင္ပံုေပၚေနမည္ျဖစ္ပါတယ္။ ဒီကုဒ္ကိုေတာ့ single tags လို႕ေခၚပါတယ္။
အေရးၾကီးတဲ့ single tags ေတြကေတာ့ <br> နဲ႕ <hr> ပဲျဖစ္ပါတယ္။ <br> ကေတာ့ Enter ေခါက္တာနဲ႕
တူျပီးေတာ့ <hr> ကေတာ့ မ်ဥ္းပိတ္တာနဲ႕တူပါတယ္။
ထုိပံုကို link ခ်ိတ္ၾကည့္ရေအာင္ေနာ္။
<a href=”www.nyeinchanko.weebly.com”><img src="file:///D|/Nyein Chan Ko/header.jpg"></a>
ဟု ရိုက္ၾကည့္လုိက္ပါ ။
ပံုတစ္ပံုပဲေပၚေနမွာျဖစ္ျပီးေတာ့ ပံုကို Click လုိက္ရင္ေတာ့ www.nyeinchanko.weebly.com
ကိုေရာက္သြားမွာျဖစ္ပါတယ္။
အဖြင့္ပဲေရးျပီး အပိတ္မေရးရင္ဘာျဖစ္မလဲ။
အဲ့ဒါကို link ခ်ိတ္တာနဲ႕ပဲရွင္းျပပါမယ္။
သူငယ္ခ်င္းတုိ႕ေရ ဒီေနရာေလးမွာ သြားေဒါင္းလုိက္ေနာ္။
အဲ့ဒီစာေၾကာင္းထဲမွာကိုယ္က ဒီေနရာေလး ကို link ခ်ိတ္ခ်င္တယ္ေပါ့။
သူငယ္ခ်င္းတို႕ေရ <a href=” your download link”> ဒီေနရာေလး </a> မွာ သြားေဒါင္းလုိက္ေနာ္
လုိ႕ေရးရမွာကိ္ု
သူငယ္ခ်င္းတို႕ေရ <a href=” your download link”> ဒီေနရာေလး မွာ သြားေဒါင္းလုိက္ေနာ္
လို႕ေရးလုိက္ရင္ ဒီေနရာေလး မွာ သြားေဒါင္းလုိက္ေနာ္ ဆိုတဲ့စာေၾကာင္းတစ္ခုလံုးကို link ခ်ိတ္ျပီးသား ျဖစ္သြားမယ္ဆိုေတာ့ ပိတ္ဖို႕ကို မေမ့ဖို႕လိုတယ္ေနာ္။
ကဲအခုေတာ့ဒီေလာက္ပါပဲ ေနာက္ထက္ tags တစ္ခုမွာ ဘယ္လို attribute ေတြရွိတယ္ဆိုတာကိုေျပာျပေပး ပါ့မယ္။
တစ္ျခားကုဒ္ေတြကိုမသိေသာ္ျငားလည္း ဒီကုဒ္ကိုသိရင္ လွတပတ ဆိုဒ္ေလးတစ္ခုေတာ့ေရးလို႕ရမွာပါ။
ကဲ နိဒါန္းေလးပ်ိဳးရေအာင္……
HTML မွာ မပါမျဖစ္ပါရတဲ့ ကုဒ္ ၃ခုရွိတယ္ ။ အဲ့ဒါကေတာ့ <html> <head> <body>
တို႕ျဖစ္ပါတယ္။ ပထမဆံုး ကုဒ္စတင္ေရးေတာ့မယ္ဆိုရင္ <html> နဲ႕စပါတယ္ </html> နဲ႕ဆံုးပါတယ္။
<head> ကေတာ့ ေခါင္းစဥ္ ျဖစ္ျပီးေတာ့ <body> ကေတာ့ ကၽြန္ေတာ္တို႕ျမင္ေနရတဲ့ Page ၾကီးျဖစ္ပါတယ္။
ကုဒ္တစ္ေၾကာင္းေလာက္ေရးၾကည့္မယ္ေနာ္။
Notepad ကို ဖြင့္လိုက္ပါ။
<html>
<head>
<title> your title </title>
</head>
<body bgcolor=”#ffffff”>
<h1> your text here </h1>
<h2> your text here </h2>
<h3> your text here</h3>
<h4> your text here </h4>
<h5> your text here </h5>
<h6> your text here </h6>
</body>
</html>
ဒီကုဒ္ေလးက အလြန္ကိုလြယ္တဲ့ကုဒ္ေလးတစ္ခုျဖစ္ပါတယ္။ အခုက အစမွာမို႕လို႕ ဒီဇိုင္းမပါပဲနဲ႕
စာပဲေရးထားတာျဖစ္ပါတယ္ ။ အဲ့ဒါကို ၾကည့္မယ္ဆိုရင္ notepad ကို .html နဲ႕ save လုိက္ပါ။ ေနာက္ ဖိုင္ကို browser တစ္ခုနဲ႕ဖြင့္ၾကည့္လုိက္ပါ။
ကုဒ္ အစကေနၾကည့္မယ္ဆိုရင္ <html> နဲ႕စထားတာမို႕ ေနာက္ဆံုး</html>
နဲ႕ပဲဆံုးထားရပါတယ္။
<head> ကေတာ့ ေခါင္းစဥ္းအပိုင္းေပါ့။ ေခါင္းစဥ္ကိုေပးမယ္ဆိုရင္ <head> နဲ႕ </head> ႏွစ္ခုၾကားမွာ
<title> ဆိုတာေလးေရးေပးရပါတယ္။ <title>နဲ႕ </title> ၾကားမွာမွ ကိုယ္တင္ခ်င္တဲ့ ေခါင္းစဥ္ကို ေရးရမွာျဖစ္ပါတယ္။
ေနာက္ဆံုးတစ္ခုကေတာ့ <body> ပဲျဖစ္ပါတယ္။ အဲ့ဒါကေတာ့ ကိုယ္ျမင္ရမယ့္ webpage ၾကီးေပါ့။ အဲ့ဒီမွာ
ႏွစ္ခုတိုးလာတယ္ bgcolor ဆိ္ုတာေလးေလ။ အဲ့ဒါက ကိုယ့္ webpage ရဲ႕ကာလာကို ေျပာင္းေပးတာ
ျဖစ္ပါတယ္။ bgcolor ကုဒ္ေတြကို Photoshop ထဲမွာ အလြယ္တစ္ကူ ၾကည့္ႏိုင္သလို RGB လို႕
မွတ္ထားရင္လည္း လြယ္ပါတယ္။ Number ၆လံုးထဲကမွ ေရွ႕ွႏွစ္လံုးက အနီ ေနာက္ႏွစ္လံုးက အစိမ္း ေနာက္ဆံုးႏွစ္လံုးက အျပာ လို႕ မွတ္ထားႏိုင္ပါတယ္။
<h1> ဆိုတာကေတာ့ စာလံုး ကိုၾကီးေစတဲ့ကုဒ္ပါပဲ။ ကိုယ္ ၾကီးေစခ်င္တဲ့ကုဒ္ကို <h1> နဲ႕ <h2>
ၾကားထည့္ေရးလိုက္ျပီဆိုရင္ ကိုယ္ေရးလိုက္တဲ့စာလံုးကို အၾကီးဆံုးျမင္ရမွာျဖစ္ပါတယ္။ အေသးဆံုးကေတာ့
<h6>ျဖစ္ပါတယ္။ ထုိထက္မ်ားေသာဂဏန္းမ်ားထည့္လွ်င္ effect မျဖစ္ေတာ့ပါ။ ဒီကုဒ္က ဂဏန္းၾကီးေလေလ
စာလံုးေသးေလေလပဲျဖစ္ပါတယ္။
ေနာက္ထက္ကုဒ္တစ္ေၾကာင္းဆက္ေရးရေအာင္ေနာ္
အခုေရးမွာက <body> နဲ႕ </body> ၾကားထဲမွာေရးရမွာျဖစ္ပါတယ္။
<a href=”www.google.com”> Google </a>
ဟုေရးၾကည့္ပါ။
Webpage တြင္ Google ဟုစာတစ္လံုးထဲေပၚေနမည္။ ထုိ Google ကို ႏွိပ္လိုက္လွ်င္ google ရဲ႕ webpage ကို ေရာက္သြားမွာျဖစ္ပါတယ္။ ထုိကုဒ္ကို link ခ်ိတ္သည္ဟုေခၚပါသည္။
ေနာက္ webpage မွာ ပံုထည့္ၾကည့္ရေအာင္။
<body> tags ထဲမွာေရးရမွာပဲျဖစ္ပါတယ္။
<img src="file:///D|/Nyein Chan Ko/header.jpg”> ဟုရုိက္ၾကည့္ပါ။ ေနာက္ run ၾကည့္လိုက္ပါ။
Webpage တြင္ပံုေပၚေနမည္ျဖစ္ပါတယ္။ ဒီကုဒ္ကိုေတာ့ single tags လို႕ေခၚပါတယ္။
အေရးၾကီးတဲ့ single tags ေတြကေတာ့ <br> နဲ႕ <hr> ပဲျဖစ္ပါတယ္။ <br> ကေတာ့ Enter ေခါက္တာနဲ႕
တူျပီးေတာ့ <hr> ကေတာ့ မ်ဥ္းပိတ္တာနဲ႕တူပါတယ္။
ထုိပံုကို link ခ်ိတ္ၾကည့္ရေအာင္ေနာ္။
<a href=”www.nyeinchanko.weebly.com”><img src="file:///D|/Nyein Chan Ko/header.jpg"></a>
ဟု ရိုက္ၾကည့္လုိက္ပါ ။
ပံုတစ္ပံုပဲေပၚေနမွာျဖစ္ျပီးေတာ့ ပံုကို Click လုိက္ရင္ေတာ့ www.nyeinchanko.weebly.com
ကိုေရာက္သြားမွာျဖစ္ပါတယ္။
အဖြင့္ပဲေရးျပီး အပိတ္မေရးရင္ဘာျဖစ္မလဲ။
အဲ့ဒါကို link ခ်ိတ္တာနဲ႕ပဲရွင္းျပပါမယ္။
သူငယ္ခ်င္းတုိ႕ေရ ဒီေနရာေလးမွာ သြားေဒါင္းလုိက္ေနာ္။
အဲ့ဒီစာေၾကာင္းထဲမွာကိုယ္က ဒီေနရာေလး ကို link ခ်ိတ္ခ်င္တယ္ေပါ့။
သူငယ္ခ်င္းတို႕ေရ <a href=” your download link”> ဒီေနရာေလး </a> မွာ သြားေဒါင္းလုိက္ေနာ္
လုိ႕ေရးရမွာကိ္ု
သူငယ္ခ်င္းတို႕ေရ <a href=” your download link”> ဒီေနရာေလး မွာ သြားေဒါင္းလုိက္ေနာ္
လို႕ေရးလုိက္ရင္ ဒီေနရာေလး မွာ သြားေဒါင္းလုိက္ေနာ္ ဆိုတဲ့စာေၾကာင္းတစ္ခုလံုးကို link ခ်ိတ္ျပီးသား ျဖစ္သြားမယ္ဆိုေတာ့ ပိတ္ဖို႕ကို မေမ့ဖို႕လိုတယ္ေနာ္။
ကဲအခုေတာ့ဒီေလာက္ပါပဲ ေနာက္ထက္ tags တစ္ခုမွာ ဘယ္လို attribute ေတြရွိတယ္ဆိုတာကိုေျပာျပေပး ပါ့မယ္။