Basic HTML - LESSION - 6

Basic HTML

LESSION _ 6

HTML Links - Hyperlinks

HTML links are hyperlinks.A hyperlink is a text or an image you can click on, and jump to another document.

Web စာမျက်နှာတစ်ခု မှ အခြားစာမျက်နှာတစ်ခု သို့ပြောင်းကြည့်ရန်(သို့မဟုတ်) ဓာတ်ပုံ ၊ ဗွီဒီယိုဖိုင်များနှင့်တခြား document များကို  web page တွင်ထည့်သွင်းဖော်ပြရန်၊ ရည်ညွှန်းရန် Link ကိုအသုံးပြုပါမည်။

When you move the mouse cursor over a link, two things will normally happen:
   The mouse arrow will turn into a little hand
    The color of the link element will change
By default, links will appear as this in all browsers:
    An unvisited link is underlined and blue.

Link ပါသော စာလုံးနှင့်  Link မပါသော စာလုံးကို လွယ်ကူစွာခွဲခြားနိူင်ပါသည်။

ပုံမှန်အားဖြင့်  Link ပါသော စာလုံးအရောင်သည်

အပြာရောင်ဖြစ်၍အောက်ဖက်တွင်မျဉ်းသားထားသည်။

the mouse cursor  ဖြင့် ထောက်ကြည့်လျှင်လည်း လွယ်ကူစွာသိနိုင်ပါ၏။

စာလုံးပေါ်  mouse cursor တင်ကြည့်လို့ လက်ညှိုးပုံစံပြောင်းသွားလျှင်

 Link ပါသော စာလုံးပင်ဖြစ်သည်။

ဥပမာအနေနဲ့ Facebook စာမျက်နှာများတွင် လွယ်ကူစွာလေ့လာ တွေ့ရှိနိုင်ပါသည်။

Facebook စာမျက်နှာများတွင် အပြာရောင်စာလုံးများသည် Link နှင့်တကွဖြစ်သော

စာလုံးများပင်ဖြစ်သည်။

နှိပ်(Click ) လိုက်လျှင်အခြားစာမျက်နှာသို့ပြောင်းသွားမည်ဖြစ်သည်။

ဒီလို   Link ပါသော စာလုံးများ ( link text ) ကို ကိုယ်တိုင်ဖန်တီးဖို့ HTML Links  သင်ခန်းစာကို

စကြရအောင်။

HTML Links -

Synta

6.1 You can use the <a> tag to link text or images

In HTML, links are defined with the <a> tag:

links ကို <a> tag: ဖြင့်အောက်ပါအတိုင်းရေးပါမည်။

<a href="url">link text</a>

url = Adress of link text

Example:
link မပါသောရိုးရိုး  text =>>Lwintmgmg Daily News

link ပါသော  text=>> Lwintmgmg Daily News
The href attribute specifies the destination address (https://lwintmgmgdawei.blogspot.com)
Code ကို ဒီလိုရေးမယ်။

Code	Result
<a href="https://lwintmgmgdawei.blogspot.com/">Lwintmgmg Daily News </a>	Lwintmgmg Daily News

Result မှLwintmgmg Daily News ကို နှိပ်(Click ) လိုက်လျှင် ယခုကြည့်နေသော

 Web Page  နေရာမှာ Lwintmgmg Daily News  စာမျက်နှာပေါ်လာမည်။

 (လက်တွေ့နှိပ်ကြည့်ပါ)

6.2 The target Attribute

      (1) Open the link in a new window (or tab)
    
Here we use target="_blank" to open the link in a new window.

         ယခုကြည့်နေသော Web Page ကိုမပြောင်းစေဘဲ  window သစ် (or ) tabသစ် တစ်ခုဖြင့် ဖွင့်မယ်ဆိုရင်
                 target="_blank" ဆိုတာကိုထည့် လိုက်မယ်။

 Example:

Code	Result
<a href="https://lwintmgmgdawei.blogspot.com" target="_blank">Lwintmgmg Daily News </a>.	Lwintmgmg Daily News .

 (2) Reload the new window

ပထမ link ဖြင့် new window ကိုဖွင့်ပြီး

ဒုတိယ link နှင့် တတိယ link  ကို new window ပေါ်မှာ ပင်ဖွင့်မည်ဆိုလျှင်

target="myTab" ကိုအသုံးပြုမည်။

Example:

Code	Result
<a href="https://lwintmgmgdawei.blogspot.com/" target="myTab">Lwintmgmg Daily News</a><br><a href="https://lwintmgmgmovie.blogspot.com/" target="myTab">LWINT MG MG</a><br><br /> <a href="https://lwintmgmg.blogspot.com/" target="myTab">လွင့်မောင်မောင် ၏ Diary</a><br><br />	Lwintmgmg Daily News LWINT MG MG လွင့်မောင်မောင် ၏ Diary

6.3 The title Attribute

      Link Text ပေါ် mouse cursor ကိုတင်လိုက်သည်နှင့် ၎င်း  Link Text နှင့်ပတ်သက်သည့်

အကြောင်းအရာကိုဖော်ပြသော စာသား ပေါ်လာစေလိုလျှင်

 title Attribute   title =" ရေးလိုသည့်အကြောင်းအရာ"   ကိုအသုံးပြုရသည်။

Example:

Code	Result
<a title="နေ့စဉ်သတင်း" href="https://lwintmgmgdawei.blogspot.com" target="_blank">Lwintmgmg Daily News </a>.<br /><a  href="http://lwintmgmg.blogspot.com/" target="_blank"title="အထွေထွေဗဟုသုတ">လွင့်မောင်မောင် ၏ Diary </a>	Lwintmgmg Daily News . လွင့်မောင်မောင် ၏ Diary .

6.4 - Image as Link

(1) It is common to use images as links:
<img src="url" >

ဓာတ်ပုံအရွယ်အစားပါအတိအကျလိုချင်တယ်ဆိုရင်တော့  width="Number" height ="Number"

ထည့်ပေးလိုက်ပါ။

ဒီလိုပါ - <img src="http:// #"width="#" height ="#" >
Example:

Code	Result
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhICYNtEWyjL7rUEYSncsBW5dF9-NRsdwtT7Xfgb5ZUEcXqhBPnCEGFTDvSpbpdWUU8guu5cEeEUVEk36tnles4WO1qFe-4OCzSBR4jzZSzOelAM4Yju6Lz8n28qgYTtY1Xh0KxeDdmSINh/s400/maungmagan4.jpg"width="150"height="110">

(2) အကယ်၍ Web page တစ်ခုကို ဓာတ်ပုံနှင့်တကွ Link ချိတ်ချင်တယ်ဆိုရင်...ဒီလိုရေးမယ်။
Eg.

Code	Result
<a href="https://lwintmgmgdawei.blogspot.com/"target="_blank><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-UMUd25v-1Wx8PIgQLHeGqxcNTkTsL-UxGCwDgP6oWSf56n8xXDWfYLp5jeN8zp6G3jg4gfDXxGvrYYwq6qN5S05S4W_1Lj7lp7bwOvYqYlWLUksvgQBUTa1ASStaEdSfFr89z1H-Bz0/s1600/LDN+banner2.png" width="150" title=""alt="Photo of Lwintmgmg"></a>

-မှတ်ရန် - ဓာတ်ပုံရဲ့ အရွယ်အစားကိုဖော်ပြရာမှာ height မပါဘဲ width ကိုသာရေးလျှင်လည်းရတယ်။

     ++++++++++++++++++++++++++++++++++++++++++

ချစ်သော ပညာလိုလားမိတ်ဆွေများ....Blogger တွင် website တစ်ခုဖန်တီးရန် Html ကိုအခြေခံအားဖြင့် ဤမျှလောက် ကျွမ်းကျင်တတ်မြောက်လျှင် ပင် အတော်အဆင်ပြေပါလိမ့်မည်။

ကျန်နေသေးသော Html သင်ခန်းစာများကို အချိန်ရလျှင်ရသလို ဆက်လက်ဖော်ပြပေးပါမည်။

နောက်သင်ခန်းစာတွင် Blogger တွင် website ဖန်တီးပုံကို ဆက်လက် ဖော်ပြပေးပါမည်။

မေတ္တာဖြင့် - ဦးအေးမင်း(အောင်မြေ)

                ၂၄- ၅ -၂၀၁၅ တနင်္ဂနွေနေ့ ည၁၁နာရီ၂၀မိနစ်