Link တွေကို Webpage တိုင်းမှာတွေ့နိုင်ပါတယ်။ အသုံးများပြီး အလွန်အသုံးတည့်တဲ့လှတဲ့ html tag တစ်ခုပါ။
Link တွေဟာ Webpage တစ်ခုနှင့်တစ်ခု၊ Website တစ်ခုနှင့်တစ်ခု ကို ကူပြောင်းကြည့်ရှုနိုင်ဖို့ ဆက်သွယ်ပေးတာဖြစ်ပါတယ်။
Link တွေကို Webpage တစ်ခုအတွင်းမှာကိုဘဲ ညွှန်းဆိုမှုတွေ ပြုလုပ်နိုင်ပါတယ်။
HTML Link - Hyperlinks
HTML link တွေကို Hyperlink လိုလဲ ခေါ်ပါတယ်။
Webpage ပေါ်မျာ Link တစ်ခုကို နှိပ်လိုက်ရင် သူညွှန်းဆိုထားတဲ့ Document ကို ခေါ်ဆောင်ပေးသွားမှာဖြစ်ပါတယ်။
Mouse Arrow လေးကို Link ပေါ်ကို တင်လိုက်ရင် လက်ကလေးပုံပြောင်းလဲသွားပါလိမ့်မယ်။
Note : Link တွေမှာ စာသားတွေချည်းဘဲ သုံးလို့ရတာမဟုတ်ပါဘူး။ ပုံတွေဖြစ်နိုင်သလို HTML element တိုင်းဟာ Link ဖြစ်နိုင်ပါတယ်။
HTML Link - Syntax
Link တွေကို HTML <a> Tag နဲ့ သတ်မှတ်နိုင်ပါတယ်။ သူရဲ့ Syntax ကတော့ အောက်ပါအတိုင်းပါ။
Link Syntax
<a href="url"> link text </a>
Link တစ်ခုရဲ့ အရေးအကြီးဆုံး Attribute ကတော့ href ဖြစ်ပါတယ်။ သူက အဲဒီ Link က ဘယ်ကို ညွှန်းဆိုမယ်ဆိုတာကို ပြရတဲ့အရာဖြစ်တယ်။
link text ဆိုတဲ့ဟာကတော့ Website ကြည့်ရှုနေသူကို ပြပေးမယ့် စာသားဖြစ်ပါတယ်။
အဲဒီ link text ပေါ်ကို ကလစ် လုပ်လိုက်တာနဲ့ href က ညွှန်းဆိုတာတဲ့နေရာကို ခေါ်ဆောင်သွားမှာဖြစ်ပါတယ်။
Example
အောက်က ဥပမာကတော့ myanmarcoderguide.com ဆိုတဲ့ Link ကိုဘယ်လိုလုပ် ရတယ်ဆိုတာပါ။
<a href="http://www.myanmarcoderguide.com"> Myanmar Coder Guide </a>
ပုံမှန်အားဖြင့် Link စာသား တစ်ခုကို ဘာ Style မှ မထည့်ထားဘူးဆိုရင် အောက်ပါပုံစံအတိုင်းမြင်ကြရပါလိမ့်မယ်။
- တစ်ခါမှ မကလစ်ရသေးတဲ့ Link ဆိုရင် အပြာရောင် Underline နှင့် မြင်ရပါလိမ့်မယ်။
- "ကလစ်" ပြီးသား Link ဆိုရင်တော့ ခရမ်းရောင် Underline နှင့် မြင်ရပါလိမ့်မယ်။
- "ကလစ်" ဖိထားတဲ့အချိန်မှာတော့ အနီရောင် Underline နှင့် မြင်ရပါလိမ့်မယ်။
Tip : Link တွေကို CSS နဲ့ သင်လိုအပ်တဲ့ပုံစံအတိုင်း ပြောင်းလဲနိုင်ပါတယ်။
The target Attribute
ပုံမှန်အားဖြင့် Link တစ်ခုကို နှိပ်လိုက်တဲ့အခါမှာ Browser ရဲ့ လက်ရှိ Tab မှာဘဲ Link ထဲက Document ကို ဖေါ်ပြပေးမှာဖြစ်ပါတယ်။ သဘောကတော့ လက်ရှိကြည့်နေတဲ့ Webpage က ပျောက်ဆုံးသွားပြီး Link ထဲမှာပါတဲ့ Webpage ကို ဖေါ်ပြပေးမှာဖြစ်ပါတယ်။
ဒါကို ပြောင်းလဲချင်တယ်ဆိုရင်တော့ target Attribute ကိုအသုံးပြုရပါလိမ့်မယ်။
target Attribute ဟာ linked Document ကို ဘယ်မှာ ဖေါ်ပြမယ်ဆိုတာကို သတ်မှတ်ပေးပါတယ်။
target Attribute Value တွေထဲက တစ်ခုခုကိုသုံးရပါလိမ့်မယ်။
_selfဒါက Default Value ပါ။ သူကတော့ ခုဏက ပြောခဲ့သလိုဘဲ သူရှိနေတဲ့ မူရင်း Frame ထဲမှာဘဲဘဲ Linked Document ကိုဖေါ်ပြပေးမှာ ဖြစ်ပါတယ်။_blankနောက်ထပ် window တစ်ခု(သို့) Tab တစ်ခုဖွင့်ပြီး ဖေါ်ပြပေးမှာဖြစ်ပါတယ်။_parentLink ရဲ့ မူလမိဘ ရဲ့ အတွင်းမှာဘဲ ဖွင့်ပေးမှာဖြစ်ပါတယ်။ (ဒါကို နားလည်ဖို့ဆိုရင် အောက်က Example ပုံကို ကြည့်ပါ။)_topသူကတော့ ဘယ် Frame ထဲမှာ ရှိနေနေ မူရင်း Tab ကြီးတစ်ခုလုံး အဖြစ်ပွင့်သွားမှာဖြစ်ပါတယ်။
Notic - Frame တွေကိုကတော့ iframe ကိုလေ့လာကြည့်ပြီးရင် ပိုမိုနားလည်ပါလိမ့်မယ်။ Iframe သင်ခန်းစာကလည်း နောက်ပိုင်းမှာ လေ့လာရပါလိမ့်မယ်။
Example Code
<a href="http://www.myanmarcoderguide.com" target="_self"> Myanmar Coder Guide</a><a href="http://www.myanmarcoderguide.com" target="_blank"> Myanmar Coder Guide</a><a href="http://www.myanmarcoderguide.com" target="_parent"> Myanmar Coder Guide</a><a href="http://www.myanmarcoderguide.com" target="_top"> Myanmar Coder Guide</a>
Absolute URLs vs. Relative URLs
Web Designer (or) Web Developer တစ်ယောက်ဟာ Absolute URL နဲ့ Relative URL ကို သေသေခြာခြာ နားလည်ဖို့ လိုအပ်ပါတယ်။
Absolute URLs ဆိုတာကတော့ Domain အပြည့်အစုံပါတဲ့ URL ကိုခေါ်တာဖြစ်တယ်။ (ဥပမာ - http://www.myanmarcoderguide.com )
Relative URLs ဆိုတာကတော့ Local Link လိုခေါ်တဲ့ ကိုယ့် Domain ထဲမှာဘဲရှိတဲ့ရှိတဲ့ လက်ရှိ Document ကနေဆက်နွယ်နေတဲ့ လမ်းကြောင်းပုံစံဖြစ်တယ်။
မြင်သာအောင် ပြောရမယ်ဆိုရင်ဗျာ။ Folder တစ်ခုထဲမှာ index.html တစ်ခု၊ home.html တစ်ခု Document နှစ်ခုရှိတယ် ဆိုပါစို့။ index.html ထဲက Link မှာ home.html ကို ညွှန်းချင်တယ် ဆိုရင် href="home.html" လို့ညွှန်းလိုက် ရုံဘဲ ဖြစ်ပါတယ်။
Relative URL မှာကိုယ့် Domain ထဲက ဖိုင်ကိုဘဲ ပြန်ညွှန်းတာဖြစ်လို့ http://www. တွေ၊ မိမိရဲ့ လက်ရှိ Domain တွေ ထည့်စရာမလိုပါဘူး။ အောက်က ဥပမာ များကို တစ်ချက်ကြည့်ပါ။
Absolute URLs
http://www.myanmarcoderguide.com
http://www.w3school.com
Relative URL
home.html
css/custom.css (လက်ရှိ folder ထဲက css ဆိုတဲ့ folder ထဲက custom.css ဆိုတဲ့ File ကိုညွှန်းတာဖြစ်ပါတယ်။)
../custom.css (../ဆိုတာက လက်ရှိ Folder ရဲ့ အပြင်ကိုတစ်ဆင့်ထွက်တာဖြစ်ပါတယ်။)
Image Link
ပုံတစ်ခုကို Link အနေနဲ့ သုံးချင်တယ်ဆိုရင်တော့ <a> tag ထဲမှာ <img> tag ကိုထည့်လိုက်ရုံပါဘဲ။
<img> image tag ကို နောက်အခန်းမှာလေ့ လာရတော့မှာမို့ သူ့အကြောင်းကို သိပ်နားမလည်သေးရင်လည်း စိတ်မပူပါနဲ့။
Link to email Address
Link ကိုနှိပ်လိုက်တာနဲ့ Window ထဲက အသုံးပြုနေကျ email Software ကို ဖွင့်ပြီး Mail ပို့နိုင်ဖို့ အတွက် mailto: ဆိုတဲ့ code ကို href Attribute ထဲမှာ သုံးရပါတယ်။
Try it Yourself! ကိုနှိပ်ပြီး သူဘယ်လိုအလုပ်, လုပ်သလဲ ကြည့်ရှုလိုက်ပါ။
ဒီကောင်က ခဏခဏ သုံးရလေ့ မရှိပေမယ့် အလွန် အသုံးဝင်ပါတယ်။ ဒါကြောင့် သတိထားပြီး သေခြာလေး မှတ်သားထားသင့်ပါတယ်။ ခဏခဏ သုံးနေတဲ့ Code တွေဆိုရင် သိပ်မှတ်နေစရာမလိုပါဘူး။ ဒီအတိုင်းရေးရင်းနဲ့ အလွတ်ရသွားပါတယ်။ အသုံးနည်းပြီး အသုံးတည့်တဲ့ကောင်တွေကျတော့ တကယ်လည်း အသုံးလိုလာတော့ မေ့မေ့ နေတတ်ကြလို့ပါ။
Link Title Attribute
Link တစ်ခုကို မောက်စ့် ထောက်လိုက်တဲ့အခါမှာ အဲဒီလင့် အကြောင်းရှင်းပြထားတဲ့ စာသားမျိုး ပြစေချင်ရင် title Attribute ကိုသုံးရပါတယ်။ သူအလုပ်လုပ်တဲ့ပုံစံကို Try it Yourself! မှာ စမ်းကြည့်ပါ။
မောက်စ့် ပွိုင်တာ လေး Link ပေါ်မှာ တင်ထားတာကို hover လို့ခေါ်ပါတယ်။ မောက်စ့် လေးတင်လိုက်တယ် hover stage ပေါ့ဗျာ။
မောက်စ့်တင်လိုက်တာနဲ့ စာသားလေး၊ ပုံလေး ပေါ်လာပြီးပြပေးတာမျိုကို Tooltip လို့ခေါ်ပါတယ်။
ဒါလေးတွေကိုလည်း မှတ်သားထားသင့်ပါတယ်။ နောက်ပိုင်းကျရင်တော့ ဒါတွေက အမြဲသုံးနေ ပြောနေရမှာပါ။
Link Title Example
<a href="url" title="Free Programing Tutorial"> Myanmar Coder Guide</a>
Chapter Summary
<a>- Link သတ်မှတ်ရန်သုံး။href- (Attribute) Link Address သတ်မှတ်ရန် အသုံးပြု။target- (Attribute) Linked Document ပွင့်လာမယ့်နေရာကို သတ်မှတ်ရန် အသုံးပြု။title- (Attribute) Link tooltip အတွက် အသုံးပြု။mailto:- (Scheme) email Program ဖွင့်ရန်အသုံးပြု။
Extra Knowledge
ရှေ့ကသင်ခန်းစာတွေမှာ ပြောခဲ့မပြောခဲ့ မသေခြာလို့ ဒီမှာ နဲနဲလေး ပြောချင်တာပါ။
HTML ကိုလေ့လာရင်း Element, Tag, Attribute, Value, Content နဲ့ Scheme ဆိုတာလေးတွေကို တွေ့လာရပါလိမ့်မယ်။ အဲဒါလေးတွေကို သဘောလောက် ရှင်းပြချင်တာပါ။
HTML Element တိုင်းကို HTML Tag လိုခေါ်နိုင်ပါတယ်။ <a> tag, <h1> tag, <p> Tag စသည်ဖြင့်...။
Attribute ဆိုတာကတော့ HTML Element တွေထဲမှာ အသုံးပြုနိုင်တဲ့ တန်ဖိုးသတ်မှတ်တာတွေ၊ အပြောင်းအလဲလေးတွေ လုပ်ပေးနိုင်တဲ့အရာတွေပါ။ href တို့၊ src တို့၊ title တို့ဟာ Attribute တွေပေါ့ဗျာ။
Attribute တိုင်းရဲ့ နောက်မှာ Value လိုက်ပါတယ်။ Attribute Value ကို equalto (=) နဲ့ Double quote (") သို့မဟုတ် Single Quote (') ထဲမှာ ထည့်ပေးရပါတယ်။
Content ဆိုတာကတော့ HTML အဖွင့် Tag နဲ့ အပိတ် Tag ကြားက Website လာကြည့်သူကို ဖေါ်ပြမယ့် အရာတွေကို ခေါ်ပါတယ်။
Scheme ကတော့ အသုံးနည်းပါတယ်။ ဥပမာ - mailto: က Scheme ပါ။
Nice မရှင်းတာလေးတေတော့ရှိတယ်
ReplyDelete