Sample HTML Pages
Sample HTML Page with Colors
Sample HTML Page with Headers
Sample HTML Page with Hyperlinks
၁။ ဒီအဆင့္ေတြကို စတင္မလုပ္ေဆာင္မွီ Things You'll Need section ကိုေအာက္ဆံုးမွာ ေရးျပထားတာရွိပါတယ္၊ အရင္သြားဖတ္ၾကည့္ပါ။
၂။ HTML Code ေတြနဲ႔ သင္မပါတ္သက္ေသးမွီ သိထားရမဲ့ အရာမ်ား:
HTML မွာ Tags ေတြက အရန္းအေရးၾကီးပါတယ္။ Tags ဆိုတာကေတာ့ လူ နဲ႔ စက္ တို႔အၾကားမွာ နားလည္ေအာင္ ပူးတြဲေဖၚျပေပး ရတဲ့ စလံုး ေတြကိုေခၚတာျဖစ္ပါတယ္။ HTML ကိုအသံုးျပဳတဲ့ အခါမွာ Angle Brackets လို႔ေခၚတဲ့ < > ထဲမွာထဲ့ ေရးတဲ့ စလံုးေတြ ဟာ Tags ေတြဘဲျဖစ္ပါတယ္။ Tags ကို ကြန္ပ်ဴတာ နဲ႔ အသံုးျပဳသူ တို႔အၾကားမွာ ပိုမိုေကာင္းမြန္ေစတဲ့ သရုပ္ေဖၚေရးသားခ်က္ လို႔လည္းမွတ္ထားလို႔ ရပါတယ္။ href လို႔ေခၚတဲ့ အမွတ္သားဟာ Web Page တစ္ခုကိုသြားဖို႔ရန္ Link ခ်ိပ္ေပးတဲ့အခါမွာ စက္ ကိုနားလယ္ေအာင္ထဲ့ေပးရတဲ့ Tags ျဖစ္ပါတယ္။
<a href="http://www.wikihow.com/">WikiHow</a>
META သို႔မဟုတ္ DOCTYPE Tags မ်ားကလြဲျပီး Tags အားလံုးနီးပါးကို Slash / သေကၤတျဖင့္ တူညီနဲ႔အမည္အတိုင္း ပိတ္ေပးရပါတယ္ အထက္ ဥပမာ ကိုၾကည့္ပါ အစမွာ <a> နဲ႔စေပးထားလို႔ အဆံုးမွာ </a> နဲ႔ပိတ္ေပးထားပါတယ္။
၃။ DOCTYPEs
အမ်ားအားျဖင့္ ဝက္ဆိုဒ္စာမ်က္ႏွာ ေတာ္ေတာ္မ်ားမ်ားကို DOCTYPES ျဖင့္ေရးသားရန္ သတ္မွတ္ျပ႒ာန္းထားတာျဖစ္ပါတယ္၊ အဲဒီအတြက္ေထာက္ပန္႔ျဖစ္ေစတာကေတာ့ Coding ေတြကိုေရြးထုပ္ ခြဲျခားနိဳင္ျခင္း အျပင္ Browser အေနျဖင့္ဘယ္လို အဓိပၸာယ္ ေကာင့္ယူရမယ္ဆိုတာကို ျပသေပးျခင္းလည္းျဖစ္ပါတယ္။ Pages ေတာ္ေတာ္မ်ားမ်ားဟာ DOCTYPE မပါဘဲ အလုပ္လုပ္ပါတယ္ ဒါေပမဲ့ DOCTYPE မပါဘဲလုပ္ေဆာင္နိဳင္ရန္အတြက္ အနိတ္ဆံုး HTML 4.01 Version လိုအပ္ပါတယ္၊ ေအာက္မွာျပေပးထားတာကို ၾကည့္ပါ။
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
DOCTYPEs ကို Net (အင္တာနက္) ေပၚမွာရွိတဲ့ Page အေတာ္မ်ားမ်ားမွာအသံုးျပဳေနတာျဖစ္ျပီး ပထမဦးဆံုး HTML ပံုစံလည္းျဖစ္ပါတယ္၊ ဒီျပင္ ဒါဟာ အမ်ားျပည္သူနားလည္လြယ္ေအာင္ အဓိပၸာယ္ ဖြင့္ေပးေသာ Coding ပံုစံလည္းျဖစ္ပါတယ္၊ Browser နဲ႔ Page တို႔ကို DOCTYPE ရဲ့ေနရာကုိေဖၚျပေပးရန္ပို၍ေကာင္းပါတယ္။
DOCTYPE ရဲ့ Tags သို႔မဟုတ္ Specific Tags ေတြဟာ HTML ရဲ့မူကြဲ Version အျဖစ္နဲ႔ႏွစ္အေတာ္ၾကာၾကာထဲကတည္ရွိလာခဲ့တာျဖစ္ပါတယ္၊
ခုေလာေလာဆယ္ အသစ္ျပ႒ာန္းလိုက္တဲ့ Tags ေတြကေတာ့ <b> နဲ႔ <i> တို႔ျဖစ္ပါတယ္ဘာေၾကာင့္လဲဆိုေတာ့ ဘာ့ေၾကာင့္လဲဆိုေတာ့ဒီ Tags ေတြဟာ စလံုးေတြကိုအလွဖန္တည္းရာမွာ ပိုုျပီးေကာင္းမြန္ေစပါတယ္၊ အေသးစိတ္သတ္မွတ္ခ်က္ေတာ့မဟုတ္ပါဘူး၊ <strong> tag ကို <b> နဲ႔အစားထိုးေျပာင္းလဲလိုက္သလို <em> tag ကို <i> နဲ႔အစားထိုးေျပာင္းလဲလိုက္တာျဖစ္ပါတယ္။ ဒါဟာ အေရးတၾကီးလိုအပ္သည့္အတြက္ အစားထိုးေျပာင္းလည္းလိုက္တာျဖစ္ပါတယ္၊ အကယ္၍ စလံုး ေတြကိုဘာသာျပန္ေတာ့မယ္ဆိုရင္ မူလ အဓိပၸယ္ကို မေျပာက္ေစဘဲ ထားေပးပါတယ္ စီစဥ္ဖြဲစည္းမွဳကိုေျပာင္းျပစ္လိုက္တာ မဟုတ္ပါဘူး၊ ဒါဟာ ေဝါဟာရ အသံုးအႏွံဳးအရ မွန္ကန္ပါတယ္။ XHTML Version 2.0 နဲ႔ HTML versions past 3 က <b> နဲ႔ <i> Tags ေတြကိုကန္႔ကြက္ဖို႔ဆံုးျဖတ္ခဲ့ပါတယ္။
၄။ HTML ၏ တိုရွင္းလိုရင္း ဥပေဒ
ခုအသံုးမ်ားတဲ့ tags ကိုေလ့လာၾကည့္ရေအာင္။ ဝက္ဆိုဒ္ စာရြက္ တစ္ရြက္ကိုတည္ေဆာက္တဲ့အခါ အရိုးရွင္းဆံုးတည္ေဆာက္ရတာပါ၊ tags တစ္ခုနဲ႔ဖြင့္ ရင္ တူညီတဲ့ tags နဲ႔ျပန္ပိတ္ေပးရပါတယ္၊ အျပင္အဆင္ဖြဲစည္းထားမွဳအားလံုးကို ထည့္သြင္း စဥ္းစားရန္လိုအပ္ပါတယ္၊ ဒီေနရာမွာ XHTML ရဲ့ေသခ်ာေရရာတဲ့ အဆင္အျပင္ကို ဥပမာ အေနနဲ႔ ေဖၚျပေပးလိုက္ပါတယ္။
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
Hello World ဆိုတဲ့စာေလး ျဖစ္လာဖို႔ coding system ကိုတည္ေဆာက္ဖို႔အျမဲ လိုပ္ပါတယ္ အဲဒီ coding language ကေနျပီး Hello World စာေလးျဖစ္လာဖို႔ အရိုးရွင္းဆံုး ကုဒ္ေတြနဲ႔ ဖန္တည္းျပေပးထားတာျဖစ္ပါတယ္။ ဒါကို Hello World စာသားလို႔ ေခၚပါတယ္။
၅။ ေခါင္းစဥ္
Web page တစ္ခုရဲ့ ေခါင္းစဥ္ကို ထည့္မယ္ဆိုရင္ <head> tag ရဲ့အတြင္းမွာထားေပးရပါတယ္၊ ဒီလိုထားေပးထားတာကို အသံုးျပဳသူအေနနဲ႔ မျမင္နိဳင္ပါဘူး။ ဒီ <head> tag ဟာ အခ်က္လက္ေပါင္းေျမာက္မ်ားစြာေသာ tags ေတြထဲက တစ္ခုေသာ tags ျဖစ္ပါတယ္။
META tag ကို စာသားအခ်က္အလက္မ်ား ႏွင့္ Search Engines သို႔မဟုတ္ အျခားေသာအသံုးတည့္သည့္ေနရာမ်ားအတြက္ အသံုးျပဳေလ့ရွိသည္၊
LINK tag ကို Stylesheets (CSS) ကဲ့သို႔ေသာ စရြက္စာတန္းဆိုင္ရာ ခ်ိတ္ဆက္ေပးရန္အတြက္ အသံုးျပဳသည္။
SCRIPT tag ကို အမ်ားအားျဖင့္ Web coding အခ်ိဳ႕ႏွင့္ Page တစ္ခုရဲ့မူကြဲေသာစာရြက္စာတန္းမ်ားကိုဝင္ေရာက္ရာမွာ သံုးပါတယ္။
STYLE tag ကို အေျခခံအားျဖင့္ Stylesheets အတြက္ျဖစ္ျပီး Page ေတြေပၚမွာ တိုက္ရိုက္ေရးတဲ႔ Tags ျဖစ္ပါတယ္။
TITLE tag ကိုေတာ့ Browser ရဲ့အေပၚပိုင္းက ေခါင္းစည္းေနရာမွာ စာေရးဖို႔ရန္ ျဖစ္ပါတယ္ ( သင္ခု သံုးေနတာ Mozilla ဆိုရင္ အေပၚဆံုး ဘယ္ဘက္ကိုၾကည့္ပါ Mozilla Firefox ဆိုတာကုိျမင္ရပါမယ္ ဒါဟာ TITLE tag နဲ႔ေရးထားတာပါ)
အထက္မွာရွင္းျပေပးထားတဲ့ Tags မ်ားကို ေအာက္မွာ ဥပမာ သံုးျပထားပါတယ္ ဒီဥပမာ က က်ေနာ္ဘာသာျပန္ဆိုေနတဲ့ wikiHow ဝက္ဆိုဒ္ရဲ့အသံုးျပဳတားတာကို အက်င္းခ်ံဳးေရးျပထားတာလည္း ျဖစ္ပါတယ္။
<head>
<title> ... </title>
<meta name="description" content=" ... " />
<link rel="stylesheet" type="text/css" href=" ... " />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<style type="text/css" media="all"> ... </style>
<script type="text/javascript" src=" ... "></script>
</head>
Tags အားလံုးဟာ <head> ႏွင့္ </head> အတြင္းထဲမွာရွိေနရပါတယ္ အထက္မွာ ျပေပးထားတဲ့ Tags အားလံုးဟာ သင္တကယ္ HTML ကိုတပ္ခ်င္ရင္ မျဖစ္မေနသိကိုသိရမဲ့ Tags ေတြဘဲျဖစ္ပါတယ္။
၆။ အေျခခံ Tags မ်ား
<strong> Tag က ေရးလိုက္တဲ့ စာလံုး ကိုထိေရာက္မွဳရွိေအာင္သံုးတာျဖစ္ပါတယ္ ဒါေပမဲ့ ထင္သာျမင္သာေအာင္ Bold လုပ္တာမ်ိဳး မဟုတ္ပါဘူး။
<small> Tag ကေရးလိုက္တဲ့ စာလံုးကို ပံုမွန္ထက္ေသးေစခ်င္ရင္သံုးတာျဖစ္ပါတယ္။
<pre> Tag က ထဲ့သြင္းထားတဲ့ စာလံုးစုကို ေပၚလြင္ေစေအာင္ လုပ္ေပးတာျဖစ္ပါတယ္ ဒီလုပ္တဲ့အခါမွာ စာလံုးအားလံုးရဲ့ အကြာေဝးကိုျပဆိုတာလည္းျဖစ္ပါတယ္။
<em> Tag က စလံုးရဲ့ အသံကိုဖိျပီး ရြတ္တာကိုျပတဲ့ေနရာမွာသံုးပါတယ္ ဒါဟာ စလံုးရဲ့ Style ကိုျပတာမဟုတ္ပါဘူး အဓိပၸာယ္ အတြက္ျဖစ္ပါတယ္။
<del> Tag က အမွန္ခ်စ္ေပးထား သည္ကို ျပန္ဖ်က္ရာတြင္ သံုးပါသည္။
<ins> Tag ကို <del>Tag အေနာက္မွာထားသံုးပါတယ္ စလံုးေအာက္ကေန မ်ဥ္းတားျပတာကို ေပါင္းထည့္တဲ့အခါသံုးပါတယ္။
<h1> Tag ကို စာပိုဒ္ေတြကို ေခါင္းစဥ္ခြဲေတြထည့္တဲ့ေနရာမွာသံုးပါတယ္၊ ဘာ့ေၾကာင့္လည္းဆိုေတာ့ ေခါင္းစဥ္ ခြဲေတြဆိုတာလည္း လိုအပ္လို႔ပါဘဲ။ ေခါင္းစဥ္ေပး Tag ကိုျပန္ပိတ္ေပးျပီးသံုးရတာျဖစ္ပါတယ္။
<p> Tag ကို စာပိုဒ္ အစုလိုက္ေဖၚျပရာမွာ သံုးပါတယ္။
<!---...---> Tag ကို Unlike လိုမ်ိဳး Tag ေတြအျဖစ္သံုးပါတယ္၊ ဒီ Tag ကို Comment ေတြအထဲမွာထဲ့သံုးရတာပါ၊ ဒီအခ်က္ေတြကို Text Program ေတြရဲ့အေျခခံ Source ေတြမွာတိုက္ရိုက္ေတြ႔နိဳင္ပါတယ္။
<blockquote> Tag က Source ေတြရဲ့အေျခခံပံုစံကို အနက္ဖြဲဆိုရာမွာကိုးကားတဲ့အခါသံုးပါတယ္၊ သူ႔ကို <cite> Tag နဲ႔တြဲသံုးရတာပါ။
ခုေရးသားခ်က္ေတြက အေသးဖြဲေတြပါ HTML Dog ရဲ့ Tag မွာဝင္ေရာက္ေလ့လာဖို႔လည္းတိုက္တြန္းပါတယ္။
၇။ ျပန္ၾကားေရးဆိုင္ရာ ဖြဲစည္းပံုတည္ေဆာက္ျခင္း။
အရိုးရိုး Tags မ်ားကိုသံုးျပီး Data ေတြကိုသိမ္းထားဖို႔ Pages မ်ားကိုတည္ေဆာက္ထားတာျဖစ္ပါတယ္၊ ဒါ့ေၾကာင့္ စာပိုဒ္ေတြထဲမွာ ရွိတဲ့သတင္းအခ်က္လက္ေတြကို ကြ်န္ေတာ္တို႕ ေခါင္းစဥ္တပ္ေပးလို႔ရပါတယ္။ ဒီ Data ေတြကို ကြန္ပ်ဴတာကသာ နားလည္ပါတယ္ Link အားလံုးကိုဆိုလိုတာေတာ့မဟုတ္ပါဘူး။ ခ်ိပ္ဆက္ေနေသာ သို႔မဟုတ္ ဆက္စပ္ေနေသာ အေတြးေခၚမ်ိဳးကိုေတာ့ ကြန္ပ်ဴတာက သတိမထားမိပါဘူး။ လူလိုဆက္စပ္ေတြးေခၚတပ္တဲ့ ဦးေႏွာက္ မ်ိဳး ကြန္ပ်ဴတာမွာ မရွိပါဘူး။ ကြန္ပ်ဴကသိျမင္နိဳင္ေအာင္ ခ်ိပ္ဆက္ေနေသာ ဆက္စပ္မွဳမ်ားကို က်ေတာ္တို႔က စိတ္ခ်ယံုၾကည္ရေသာ HTML Page မ်ားကိုတည္ေဆာက္ရပါမယ္။ ဒါကို <div> လို႔ေခၚတဲ့ Tag ကျဖစ္ေျမာက္ေအာင္လုပ္ေဆာင္ေပးလို႔ရပါတယ္၊ ဒါက ေရးသြင္းခ်က္အလြန္မ်ားတဲ့ စာရြက္မ်ားကိုအေထာက္ကူေပးနိဳင္ေအာင္ တည္ေဆာက္ေပးရတာျဖစ္ပါတယ္။ ဒီျပင္ CSS ႏွင့္ပံုစံတူျပီး မွန္ကန္တဲ့ Code အေျမာက္မ်ားနဲေရးသြင္းေပးရတာထက္လြယ္ကူေစပါတယ္။
<div> tag ဟာ အထူးေကာင္းမြန္တဲ့နည္းတစ္ခုျဖစ္ျပီး လြယ္ကူစြာပံုေဖၚေပးတဲ့အျပင္ အသံုးျပဳသူနဲ႔ ကြန္ပ်ဴတာတို႔ ႏွစ္ဦးႏွစ္ဘက္နားလည္ေအာင္္ မူမတူတဲ့ အခ်က္လက္အစုေတြကို အသံုးျပဳလို႔ရနိုင္ေစပါတယ္။ <div> tag အပါအဝင္ ရိုးရိုး HTML အဆင္အျပင္ေတြကို အသံုးျပဳနည္းေလးေတြ ၾကည့္ၾကရေအာင္။
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
<div id="contentOne">
<p>This is some text in div#contentOne.</p>
<div class="subSection">
<p>A paragraph in a sub-section of div#contentOne</p>
</div>
</div>
</body>
</html>
<div> tags က သင့္ CSS ႏွင့္ Javascript ကိုအသံုးျပဳတဲ့အခ်ိန္မ်ိဳးမွာ ရွာေဖြမွဳျပဳျခင္းနဲ႔ ပံုေဖာ္တဲ့ေနရာေတြမွာ အေထာက္ကူျဖစ္ေစပါတယ္။ HTML ဟာ CSS ႏွင့္ Javascript တို႔ကဲ့သို႔ ျဖစ္ေျမာက္ေစတဲ့ လုပ္ေဆာင္မွဳေတြကို မတူညီတဲ့ Code ေတြနဲ႔အသံုးျပဳပါလိပ္မည္။
က်ေနာ္ရဲ့ၾကိဳးစားထားမွဳဟာ စာဖတ္သူေတြအတြက္ လံုေလာက္မယ္မဟုတ္ဖူးဆိုတာကို က်ေနာ္သိပါတယ္ မိတ္ေဆြတို႔ကို အၾကံေပးပရေစ၊
- အျခားေသာ HTML ဆိုဒ္မ်ားကိုသြားေရာက္ေလ့လာပါ၊ ကိုမသိေသးတဲ့ Code ေတြကိုကူးယူအသံုးျပဳေပးပါ။
- Tag ကို <> ဒီသေကၤနဲ႔ အဖြင့္ပိတ္လုပ္ရတာကိုဘယ္ေတာ့မွ မေမ့ပါနဲ႔ <>Tag ကိုအဖြင့္မွာသံုးျပီး </> Tag နဲ႔ အျမဲျပန္ပိတ္ေပးရတာကို အျမဲႏွစ္လံုးသြင္းထားပါ။ ဥပမာ <Body> </Body>
- လူဆိုတာ မျမဲတန္း ေမွ်ာလင့္ခ်က္ ၾကီးမားမွ ေအာင္ျမင္မယ္ ဒါေၾကာင့္ စမ္းသတ္ပါ တည္ထြင္ပါ Code ေတြေရးသားေပးပါ။
- ဒီအလုပ္ကို စတင္မိျပီျဖစ္တဲ့အတြက္ Server Coding ေတြကိုလဲသြားေရာက္သင္ယူပါ။
- ဒီစာေတြကိုဖတ္ျပီး စိတ္မေရွာလိုက္ပါနဲ႔ ကို႔အေတြးနဲ႔ကိုဆက္လက္လုပ္ေဆာင္ပါ။ ကြန္ပ်ဴတာ ပညာရပ္တိုင္းဟာ အျမဲ အသစ္ဆန္းေတြေပၚေနပါတယ္။
- HTML ျပီးရင္ CSS နဲ႔ Javascript ကိုဆက္လက္ေလ့လာသင္ယူပါ။
က်ေနာ္ မိတ္ေဆြအားလံုးကို အသိေပးထားခ်င္တာေလးေတြရွိတယ္ HTML ဆိုတာ Coding မ်ားသက္သက္ပါဝင္တယ္ ဆိုတာလံုးဝေမ့မထားပါနဲ႔၊ အဓိပၸာယ္ကေတာ့ HTML ဆိုတာ အျပည္ျပည္ဆိုင္ရာပံုစံတစ္ခုအတြင့္မွာ ပါဝင္ပါတ္သက္ေနတဲ့ အဓိပၸာယ္မ်ိဳးလည္းျဖစ္ပါတယ္။ တင္ျပမွဳအေျပာင္းလည္းအျဖင့္ အျခားေသာ Coding ေျပာင္းလည္းမွဳအျဖင့္ CSS ကဲ့သို႔လည္း ေျပာင္းလည္းသင့္ပါတယ္။ တနည္းေျပာရရင္ အျခားေသာသူမ်ား အသိအမွတ္မျပဳေသးတဲ့ ေဝါဟာရ မွန္ကန္တဲ့ သေဘာလဲျဖစ္ပါတယ္။ အျခား Languages မ်ားျဖစ္တဲ့ CSS, Javascript, XML တို႔ကိုအကယ့္ကိုအေထာင့္ပန္႔ေပးတဲ့ Language လည္းျဖစ္ပါတယ္။ HTML ရဲ့အဓိပၸာယ္က မာတိကာ ကိုတည္ေဆာက္ေပးတဲ့သေဘာလည္းျဖစ္ပါတယ္။ မွန္ကန္တဲ့တင္ျပမွဳဆိုတာ Java နဲ႔ CSS တုိ႔ရဲ့ ရည္ရြယ္ခ်က္ျဖစ္ပါတယ္။
သင္ ဒါေတြရွိဖို႔လိုအပ္ပါတယ္
ANSI encoding ကိုအေထာင့္ပန္႔ျပဳေပးနိဳင္တဲ့ Text Editor ။
Internet Explorer or Mozilla Firefox ကဲ့သို႔ေသာ Browser ။
Adobe Dreamweaver, Aptana Studio, or Microsoft Expression Web ကဲ့သို႔ေသာ HTML editor မ်ား စသျဖင့္ရွိတားရန္လိုအပ္ပါသည္။
ဒီ HTML အေျခခံကို wikiHow မွာျပန္လည္ေလ့လာျပိး ေရးသားတင္ျပထားတာျဖစ္ပါတယ္ HTML Dog မွာေလ့လာျပိး ထပ္မံတင္ျပပါအုန္းမယ္။
No comments:
Post a Comment