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 (http://www.lwintmgmg.com)
Code ကို ဒီလိုေရးရတယ္။

Code	Result
<a href="http://www.lwintmgmg.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="http://www.lwintmgmg.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="http://www.lwintmgmg.com/" target="myTab">Lwintmgmg Daily News</a><br><a href="http://lwintmgmgmovie.blogspot.com/" target="myTab">LWINT MG MG</a><br><br /> <a href="http://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="http://www.lwintmgmg.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="http://www.lwintmgmg.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 ဖန္တီးပံုကို ဆက္လက္ ေဖာ္ျပေပးပါမည္။

ေမတၱာျဖင္႔ - လြင္႔ေမာင္ေမာင္
                ၂၄- ၅ -၂၀၁၅ တနဂၤေႏြေန႔ ည၁၁နာရီ၂၀မိနစ္