Thursday, July 16, 2015

HTML သင္ခန္းစာ (၂)

HTML  heading
သတင္းစာေတြမွာ ေခါင္းစဥ္စားလံုးကိုအၾကီးနဲ႔ေရးၾကပါတယ္၊ ဒီလိုပဲ သင့္၀က္ဆိုကမွာလဲ ေခါင္းစဥ္စာလံုးေတြကို စာလံုးအၾကီးနဲ႔ ေရးလိုရပါတယ္၊ စာလံုး
အၾကီး ေတြကို 1 က ေန 6 အထိ တျဖည္းျဖည္း ေသးသြားတယ္၊ h1 က အၾကီးဆံုးျဖစ္ျပီး h6 က အေသးဆံုး၊ HTML Tag ေတြရဲ့သဘာ၀အတိုင္း သူတို႔အား
လံုး မွာ အဖြင့္အပိတ္ဆိုျပီးရွိၾကတယ္၊ ေအာက္က ဥပမာ ကို ၾကည့္၊
<!DOCTYPE html>
<html>
<head>
<title>My Web Page </title>
</head>
<body>
<h1> ေခါင္းစဥ္အရြယ္အစား 1 စာလံုး </h1>
<h2> ေခါင္းစဥ္အရြယ္အစား 1 စာလံုး</h2>
<h3> ေခါင္းစဥ္အရြယ္အစား 1 စာလံုး</h3>
<h4> ေခါင္းစဥ္အရြယ္အစား 1 စာလံုး</h4>
<h5> ေခါင္းစဥ္အရြယ္အစား 1 စာလံုး</h5>
<h6> ေခါင္းစဥ္အရြယ္အစား 1 စာလံုး</h6>
</body>
</html>

အထက္က ဥပမာ ကို Run လိုက္ပါ၊ ဒါဆိုရင္ေတာ့ သင့္၀က္ဆိုက္စာမ်က္ႏွာမွာ မတူညီတဲ့ အရြယ္အစားရွိတဲ့ စာလံုးေတြေပၚလာမယ္၊ အဲ့ဒီ့ ကေန ေခါင္းစဥ္
စာလံုး ေတြကို ဘယ္ အရြယ္အစား သံုးခ်င္လဲ သံုးသင့္လဲ ဆိုတာကို နမူနာယူပါ၊ ေနာက္ပိုင္းေရးတဲ့အခါ က်ရင္ေတာ့ သင္ၾကိဳက္တဲ့ ေခါင္းစဥ္အရြယ္အစား
သံုးျပီးေရးႏိုင္တယ္၊ သတိထားရမွာက အဖြင့္အပိတ္ ႏွစ္ခုလံုးပါေအာင္ေရးဖို႔ပဲ၊
Headings Are Important
တခ်ဳိ႕ေတြက စာလံုးၾကီးရင္ျပီးေရာဆိုျပီး Strong Tag , Bold Tag နဲ႔ Font size ေတြ သံုးျပီး ေခါင္းၾကီးစာလံုးေတြကို ျပဳျပင္ၾကပါတယ္၊   ေခါင္းၾကီးစာလံုးရဲ့ ့
heading Tags ကိုေတာ့ မသံုးၾကေတာ့ဘူး၊ 72coder က အၾကံျပဳခ်င္တာကေတာ့ ေခါင္းစဥ္အတြက္ heading tag ေတြကိုပဲသံုးပါ၊ ဒါမွမဟုတ္ရင္ျဖင့္ေနာက္
ပိုင္း စာမ်က္ႏွာေတြအမ်ားၾကီးပါတဲ့ ဆိုက္ ၾကီးေတြကို CSS သံုးျပီး အလွဆင္ရင္ျပသနာျဖစ္တတ္ပါတယ္၊ ဒီ့အျပင္ heading Tag ေတြနဲ႔ ၀ိုင္းထားတဲ့စာ
သားေတြ ကို browser ကေတြ႔ရင္ အဲ့ဒီ့ heading tag မွာပါတဲ့စာသားရဲ့ ေရွ႕နဲ႔ ေနာက္မွာ ေနရာလြတ္ကိုအလုိေလွ်ာက္ခ်န္ေပးထားတယ္၊ ေနရာလြတ္ဆိုတာ
တျခား စာသားေတြမၾကဴးေက်ာ္လာႏိုင္ေအာင္မ်ဥ္တာေပးထားတာ၊ မ်ဥ္းကိုေတာ့မေတြ႔ရပါဘူး၊ ဒါေပသည့္ရွိပါတယ္၊
ေနာက္အရမ္းအေရးၾကီးတဲ့အခ်က္က Search enging ျဖစ္တဲ့ Google တို႔ Yahoo တို႔က သင့္ရဲ့ ဆိုက္ရွိ အေၾကာင္းအရာေတြကို ရွာေဖြတဲ့အခါမွာ သင့္၀က္
ဆိုက္ရဲ့ heading ေခါင္းစဥ္ကို မူတည္ျပီးရွာပါတယ္၊ ဒါေၾကာင့္ heading tag မသံုးရင္ Search engine က သင့္ဆိုက္ကိုရွာရတာ ခက္ခဲပါတယ္၊
သင့္ဆိုက္ကို ၀င္ေရာက္ေလ့လာသူေတြအေနနဲ႔လဲ ေခါင္းစဥ္ကို ရွာျပီး သူလိုအပ္တဲ့ အေၾကာင္းအရာ ဟုတ္လားမဟုတ္လားကိုအလြယ္တစ္ကူဆံုးျဖတ္ႏိုင္မွာပါ၊

အေရးၾကီးရင္ ၾကီးသလို heading tags ေတြကို ခ်ိန္ျပီးသံုးႏိုင္ပါတယ္၊ သိပ္အေရးၾကီးတယ္ဆိုရင္ျဖင့္ အေရးၾကီးတဲ့စာသားကို h1 နဲ႔ ေရး၊ ေခါင္းစဥ္မွန္
သမွ်ကိုေတာ့ heading tags ထည့္ျဖစ္ေအာင္ထည့္ ဒါမွ အသံုျပဳသူေတြက အေၾကာင္းအရာတစ္ခုကိုရွာမယ္၊ အဲ့ဒီ့ အေၾကာင္းအရာက သင့္၀က္ဆိုက္မွာ
ပါတယ္ဆိုရင္ Search Engine က သင့္၀က္ဆိုက္ကို အလြယ္ေလးရွာေတြ႔မွာ၊
HTML Link
HTML မွာ လင့္ေတြထည့္လို႔ရတယ္၊ ဥပမာ သင္ ရဲ့ ၀က္ဆိုက္စာမ်က္ႏွာကေန အျခား ၀က္ဆိုက္စာမ်က္ႏွာကို လွမ္းညြန္းလို႔ရတယ္၊ လင့္ထည့္ဖို႔အတြက္
သံုးရတဲ့ HTML tag ကေတာ့ <a> tag ပါ၊ အဖြင့္ကို <a> လို႔ေရးျပီး အပိတ္ကိုေတာ့ </a> လို႔ေရးပါတယ္၊ ဥပမာ သင့္ဆိုက္မွာ 72coder.com ဆိုက္ကို
လင့္ခ်ိတ္မယ္ဆိုရင္ အဖြင့္ HTML Link tag ရဲ့အတြင္းမွာ ခ်ိတ္မယ့္ဆိုက္ရဲ့နာမည္ကိုေရးေပးရတယ္၊ ခ်ိတ္မယ့္ဆိုက္ရဲ့နာမည္ကိုေရးတဲ့အခါ href လို႔ေခၚတဲ့
hyper reference ကိုပါထည့္ရတယ္၊ ေအာက္မွာၾကည့္ပါ၊
<a href= “72coder.com”>ဒီဆိုက္ကိုသြားလည္ပါ</a>
အထက္က ကုတ္ကို Run ၾကည့္လိုက္ရင္ျဖင့္ ဒီဆိုက္ကိုသြားလည္ပါဆိုတဲ့စာသားကို အျပာေရာင္နဲ႔ ေရးထားတာေတြ႔မယ္၊ အျပာေရာင္ရဲ့သေဘာကေတာ့
အဲ့ဒီ့စာသားမွာ လင့္ပါတယ္ ဆိုတဲ့သေဘာပါ၊ အဲ့ဒီ့စာသားကို ႏွိပ္လိုက္ရင္ (အင္တာနက္ခ်ိတ္ထားရင္) 72coder.com site ကို သင့္ကိုေခၚသြားလိမ့့္မယ္၊
ဒါကေတာ့ သင့္ဆိုက္မွာ လင့္ခ်ိတ္တဲ့ပံုပါ၊ သံုးတဲ့ HTML Tags က <a> နဲ႔ </a> တို႔ပါ၊ အဖြင့္ <a> ရဲ့အတြင္းမွာ href= “ ” လို႔ထည့္ေပးျပီး ႏွစ္ထပ္ေကာ္မာ
ရဲ့ ၾကားမွာေတာ့ သင္လင့္ခ်ိတ္လိုတဲ့ ဆိုက္ရဲ့နာမည္ကို ထည့္ရပါတယ္၊ “ဒိဆိုက္ကိုသြားလည္ပါ” ဆိုတဲ့စာသားကိုေတာ့ သင္စိတ္ၾကိဳက္ လိုအပ္တဲ့စာသားေရး
လို႔ရတယ္၊ အဲ့ဒီ့စာသားက ၀က္ဆိုက္စာမ်က္ႏွာမွာ ေပၚမယ့္စာသား၊
အထက္မွသံုးခဲ့ href = “ ” ကေတာ့ target link ျဖစ္ပါတယ္၊ သူ႔အေၾကာင္းကိုေတာ့ ေနာက္ပိုင္း  HTML Link ေတြကို အေသးစိတ္ရွင္းျပရင္ ထည့္သြင္းရွင္းျပ
ေပးပါမယ္၊

0 comments:

Post a Comment