HTML ဆိုတာ Hyper Text Markup Language ကိုအတိုေကာက္သံုးထားတာပါ၊ HTML ဟာ Web Pages မ်ားကိုေကာင္းသည္ ထက္ေကာင္းေအာင္ မြန္းမံၿပင္ဆင္ ရာမွာ အေျခခံအက်ဆံုးေသာ ကြန္ပ်ဴတာ ဘာသာစကား တစ္ခုျဖစ္ျပီး အဆင္ေျပေခ်ာေမႊ႔ေစေသာ Code မ်ားႏွင့္ ဖြဲစည္းထာတဲ့ Language လည္းျဖစ္ ပါတယ္၊ အင္တာနက္ေပၚက စာမ်က္ႏွာေတာ္ေတာ္မ်ားကို HTML ကိုအေျခခံေသာ
(ColdFusion, XML, XSLT) Code မ်ားႏွင့္ေကာင္းသည္ ထက္ေကာင္းေအာင္ ဖန္တည္းထားၾက တာျဖစ္ပါတယ္။ ဒီေဆာင္းပါးကို ဖတ္ျခင္းျဖင့္ သင့္ရဲ့ HTML အရည္ေသြးကိုတိုးတက္ေအာင္ ၾကိဳးစားျပီး wiki-How အပါဝင္ အျခား အျခားေသာ Website မ်ားမွာပါ ဝင္ေရာက္ေလ့လာျပီး သင့္ရဲ့ HTML ေခတ္မွီ တိုးတက္ေအာင္ အျမဲၾကိဳး စား ေနပါလို႔ မွာၾကားလိုပါတယ္။
၁။ ဒီအဆင့္ေတြကို စတင္မလုပ္ေဆာင္မွီ 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 လိုအပ္ပါတယ္၊ ေအာက္ မွာျပေပး ထား တာကို ၾကည့္ပါ။
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 အျဖစ္နဲ႔ႏွစ္ အေတာ္ ၾကာၾကာထဲက တည္ရွိလာခဲ့တာျဖစ္ပါတယ္၊
"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 ရဲ့ေသခ်ာေရရာတဲ့ အဆင္အျပင္ကို ဥပမာ အေနနဲ႔ ေဖၚျပေပးလိုက္ပါတယ္။
၄။ 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 နဲ႔ေရးထားတာပါ)
အထက္မွာ ရွင္းျပေပးထားတဲ့ 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 မ်ား
ဒီအဆင့္ကို အထူး အေလးေပး ေလ့လာပါ 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 ဆိုတာ 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 မွာေလ့လာျပိး ထပ္မံတင္ျပပါအုန္းမယ္။
"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 နဲ႔ေရးထားတာပါ)
အထက္မွာ ရွင္းျပေပးထားတဲ့ 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 မွာေလ့လာျပိး ထပ္မံတင္ျပပါအုန္းမယ္။
From... http://thesupernaturalmyanmar.blogspot.com
No comments:
Post a Comment