Adding Links

Web page တွေ တစ်ခုနဲ့ တစ်ခု ချိတ်ဆက်ဖို့ ဘယ်လို ရေးရမလဲ ဆိုတာကို ဒီ အခန်း မှာ ဖော်ပြပေးပါမယ်။ ဒီအခန်းမှာတော့ ကိုယ့်ရဲ့ HTML file အချင်းချင်း ချိတ်ဆက်ရုံသာမက အခြား website နဲ့ link ချိတ်တာ၊ email link ချိတ်တာ၊ နောက်ပြီး link ချိတ်တဲ့ စာရဲ့ ပုံသဏ္ဍန် ပြင်တာတွေကို ဖော်ပြပေးပါမယ်။ အရင်ဆုံး ကျွန်တော်တို့တွေ အနေနဲ့ URL အကြောင်းကို နားလည် သိရှိဖို့လိုပါတယ်။ Link ကိုတော့ <a> ဆိုတဲ့ tag ကို သုံးပြီးတော့ href attribute နဲ့ ပေါင်းသုံးသွားမှာပါ။

Understanding Links

Hyper links ဒါမှမဟုတ် link ဆိုပြီး အတိုကောက် ခေါ်ကြပါတယ်။ လက်ရှိ html page ကနေ အခြား page တစ်ခုကို ရောက်သွားစေချင်ရင် ဒါမှမဟုတ် အခြား website ကို ရောက်စေချင်ရင်တော့ <a> ကို အသုံးပြုရပါတယ်။

Link ချိတ်ထားတာတွေက စာတွေ ဖြစ်နိုင်သလို ပုံတွေ လည်း ဖြစ်နိုင်ပါတယ်။ Link လုပ်ထားတဲ့ စာက ပုံမှန် အားဖြင့် အောကဘက်လိုင်းတားထားပြီး ဖော်ပြတတ်ပါတယ်။ ဥပမာ ။ Navigation menu မှာ Home , Galllery , Profile စတာတွေ ရှိပါတယ်။ Gallery ကို နှိပ်လိုက်ရင် ပုံတွေထည့်ထားတဲ့ gallery.html ကို ရောက်သွားပြီး profile ကိုနှိပ်လိုက်ရင် profile.html ကို ရောက်သွားမယ်။ အဲဒီလိုမျိုး စာကို click နှိပ်လိုက်ပြီး page တွေပြောင်းသွားဖို့အတွက် စာ ကို anchor tag ( <a> ) နဲ့ တွဲသုံးရပါတယ်။

ဒီပုံလေးမှာ ဆိုရင် gallery လေးကို နှိပ်လိုက်ရင် gallery page ရောက်သွားတာလေးကို ပြထားပါတယ်။

Figure 6-1

Figure 6-1

Figure 6-2

Figure 6-2

Understanding URLs

HTTP Prefix

URL ဆိုတာကတော့ Uniform Resource Locator ကို ဆိုတာပါ။ URL ဟာ domain နဲ့ web server ပေါ်မှာ ရှိတဲ့ directory path တွေကို ရည်ညွှန်းပါတယ်။ webpage ကိုလည်း ညွှန်းဆိုထားတဲ့ လိပ်စာ ဆိုလည်း မမှားပါဘူး။ ပုံမှန် website URL တွေမှာ အခုခေတ်မှာ HTTPS (https://) ကို သုံးသင့်ပါတယ်။ HTTPS က connection ကို encrypt လုပ်ပေးတာကြောင့် login, payment transaction, web email စတဲ့ လုံခြုံရေး အရေးကြီးတဲ့ နေရာတွေမှာ မဖြစ်မနေလိုအပ်ပါတယ်။ http:// ကိုတော့ local testing သို့မဟုတ် legacy site တွေမှာ တွေ့ရနိုင်ပါတယ်။ FTP(File Transfer Protocol) အတွက်ကတော့ ftp:// ဆိုပြီး အသုံးပြုပါတယ်။ website မှာ email link ကို ချိတ်မယ်ဆိုရင်တော့ mailto: ကို အသုံးပြုနိုင်ပါတယ်။
Domain Name

HTTP ရဲ့နောက်မှာ domain name ပါပါတယ်။ http://www.example.com မှာ example.com က domain name ပါ။ www ကတော့ wold wide web ရဲ့ အတိုကောက်ပါ။ domain name ရှေ့မှာ အသုံးပြုကြပါတယ်။ domain name ကို domain name server က web server IP ကို ညွှန်းထားပြီးတော့ server မှာက domain name အတွက် apache , ningx စတဲ့ webserver ကို အသုံးပြုပြီးတော့ ချိတ်ဆက်ထားပါတယ်။ ဥပမာ ။။ 128.199.247.176 က server IP ဆိုပါစို့။ domain name server မှာ saturngod.net ဆိုရင် IP 128.199.247.176 ကို သွားဆိုပြီး ထည့်ထားတယ်။ ဒါကြောင့် browser မှာ saturngod.net လို့ ရိုက်လိုက်ရင် အဆင့်ဆင့်သွားပြီးတော့ နောက်ဆုံး saturngod.net ကို register လုပ်ထားတဲ့ name server ကို ရောက်သွားတယ်။ သူကနေပြီးတော့ IP address 128.199.247.176 ကို အကြောင်းပြန်လိုက်တယ်။ အဲဒီ အခါ browser က IP 128.199.247.176 ကိုသွားခေါ်တယ်။ web server က domain က saturngod.net နဲ့ လာတာ ဆိုရင် ဒီ directory ထဲက index file ကို တွေ ပြဆိုပြီး ထုတ်ပြန်လိုက်တယ်။

အောက်မှာ အလုပ်လုပ်ပုံလေးကို youtube video မှာ သွားကြည့်နိုင်ပါတယ်။

Directory Path and File Name

Domain name ရဲ့ နောက်မှာတော့ Directory Path တွေပါလာပါတယ်။ http://www.example.com/images/profile.png ဆိုရင် images ဆိုတဲ့ folder အောက်က profile.png ကို ဆိုလိုတာပါ။ directory path က directory တစ်ခု ထက် မက ဖြစ်နိုင်ပါတယ်။ http://www.example.com/images/logo/mylog.png ဆိုရင် images folder အောက်က logo အောက်က mylog.png file ကို ရည်ညွှန်းတာပါ။

Link to Another Page

ပထမဆုံး ကျွန်တော်တို့တွေ page ၁ ခု နဲ့ တစ်ခု ချိတ်ဆက်ကြည့်တာပေါ့။ folder တစ်ခုထဲမှာ index.html နဲ့ gallery.html ဆိုပြီး file ၂ ခု ဖန်တီးလိုက်မယ်။

index.html မှာ

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Link</title>
</head>
<body>
  <h1>Home Page</h1>
  <a href="gallery.html">Gallery</a>
</body>
</html>

ဆိုပြီး ရှိတယ်။

gallery.html မှာ

<html>
<head>
  <title>Link</title>
</head>
<body>
  <h1>Gallery</h1>
  <a href="index.html">Home</a>
</body>
</html>

ဆိုပြီ။ ရှိတယ်။

ကျွန်တော်တို့ index.html ကို ဖွင့်ကြည့်ရအောင်။ အဲဒီမှာ Gallery ဆိုပြီး အပြာရောင် မျဉ်းတားထားတဲ့ စာကို တွေ့ရပါလိမ့်မယ်။ Click လုပ်ကြည့်တဲ့ အခါမှာ gallery page ကို ရောက်သွားပါမယ်။ Browser ရဲ့ address bar မှာလည်း link ပြောင်းသွားတာကို တွေ့ရပါမယ်။

Figure 6-3

Figure 6-3

Figure 6-4

Figure 6-4

Home ကို ပြန်နှိပ်ပြီးတဲ့ အခါမှာတော့ Gallery ဆိုတဲ့ စာက ခရမ်းရောင်ဖြစ်နေတာကို တွေ့ရပါမယ်။ ဘာကြောင့်လည်းဆိုတော့ Gallery link ကို နှိပ်ထား ပြီးသားဖြစ်လို့ပါ။

ကျွန်တော်တို့ index.html ကို gallery ဆိုတဲ့ folder ထဲမှာ ဆောက်မယ်။ ပြီးတော့ index.html မှာ link ကို ပြင်လိုက်တယ်။

<html>
<head>
  <title>Link</title>
</head>
<body>
  <h1>Home Page</h1>
  <a href="./gallery/index.html">Gallery</a>
</body>
</html>

gallery folder အောက်က index.html မှာ

<html>
<head>
  <title>Link</title>
</head>
<body>
  <h1>Gallery</h1>
  <a href="../index.html">Home</a>
</body>
</html>

အဲဒီ code မှာ ../ ဆိုတာကို တွေ့နိုင်ပါတယ်။ ../ ဆိုတာက up ကိုပြောတာပါ။ လက်ရှိ folder ရဲ့ အပေါ် တဆင့် လို့ ဆိုလိုတာပါ။

Path

Link တွေ image တွေကို ထည့်မယ်ဆိုရင် HTML မှာ ဘယ်လိုမျိုး path တွေကို ရေးရသလဲ ဆိုတာကို သိဖို့လိုပါတယ်။

Path Description
./ လက်ရှိ file ၏ folder နဲ့ level အတူတူ ။ ဥပမာ။ ./index.html , ./sample.jpg
../ လက်ရှိ file ၏ folder ရဲ့ တစ်ဆင့် အထက် တွင် ရှိသော လမ်းကြောင်း။
../../ လက်ရှိ file ၏ folder ရဲ့ နှစ်ဆင့် အထက် တွင် ရှိသော လမ်းကြောင်း။ ဥပမာ။ index.html , sample/sub/index.html တွင် sample/sub/index.html ကနေ index.html ကို ခေါ်လိုပါက ../../index.html ဟု ခေါ်ရသည်။
/ parent သို့မဟုတ် domain အစ။ ဥပမာ။ www.example.com/gallery/sample.html တွင် link ၏ src ကို / ဟု ရေးထားပါက www.example.com သို့ ပြန်ခေါ်ထားခြင်းဖြစ်သည်။

Open a New Tab with a Link

Link တစ်ခုကို click နှိပ်ပြီး ဖွင့်လိုက်တဲ့ အခါမှာ လက်ရှိ page ကနေ တခြား page တစ်ခုကို ပြောင်းသွားပါတယ်။ လက်ရှိ page ကို မပျောက်ချင်ဘူး။ နောက်ထပ် page တစ်ခုကို tab အသစ်တစ်ခုမှာ ဖွင့်လိုတယ်ဆိုရင်တော့ a tag မှာ target="_blank" ကို အသုံးပြုနိုင်ပါတယ်။ External link တွေမှာတော့ လုံခြုံရေးအတွက် rel="noopener noreferrer" ကိုပါ ထည့်သင့်ပါတယ်။

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Link</title>
</head>
<body>
  <h1>Home Page</h1>
  <a target="_blank" rel="noopener noreferrer" href="./gallery/index.html">Gallery</a>
</body>
</html>

မှာ ဆိုရင် Gallery ကို click နှိပ်လိုက်တဲ့ အခါမှာ browser မှာ tab အသစ်တစ်ခု နဲ့ ဖွင့်ပေးတာကို တွေ့ပါလိမ့်မယ်။

Make All Links Open New Tabs

a tag တစ်ခု ခြင်းဆီမှာ လိုက်မထည့် ချင်ဘူး။ a tag အားလုံးကို page တစ်ခု အနေနဲ့ ဖွင့်ချင်တယ်ဆိုရင်တော့ base tag ကို အသုံးပြုရပါမယ်။

<base target="_blank">

ကို head tag ထဲမှာ ထည့်ထားပေးဖို့လိုပါတယ်။

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Link</title>
  <base target="_blank">
</head>
<body>
  <h1>Home Page</h1>
  <a href="./gallery/index.html">Gallery</a>
</body>
</html>

တကယ်လို့ new tab ဖွင့်စေချင်တယ်။ ဒါပေမယ့် အချို့ link တွေကိုတော့ ဖွင့်ထားတဲ့ tab အသစ်ထဲမှာ ပဲ ပေါ်စေချင်ရင်တော့ target="new_tab" ဆိုပြီး နာမည်ပေးထားလို့ ရပါတယ်။ အသစ်ဖွင့်လိုက်တဲ့ tag name က new_tab ဖြစ်ပြီးတော့ target က new_tab လေး ပေးထားတဲ့ နေရာတွေမှာပဲ အသစ်ပွင့်ပါလိမ့်မယ်။

Link to an Area on the Same Page

လက်ရှိ page ထဲမှာ ရှိတဲ့ နေရာ တစ်ခုခု ကို ပဲ link လုပ်ချင်တယ်ဆိုရင်တော့ ကျွန်တော်တို့တွေ a tag နဲ့ id တွဲ သုံးရပါလိမ့်မယ်။

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Link Same Page</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>One Piece</h1>
    <h2>by Eiichiro Oda</h2>
    <ul class="menu">
        <li><a href="./home.html">Home</a></li>
        <li><a href="./anime.html">Anime</a></li>
        <li><a href="./download.html">Download</a></li>
    </ul>
        <img class='cover' src="onepiece_cover.jpg" title="One Piece Cover" width="150px" height="200px" alt="One Piece cover">
    <p>One Piece is a Japanese <span class='highlight'>shounen manga series</span> written and illustrated by Eiichiro Oda. It has been serialized in Weekly Shōnen Jump since August 4, 1997; the individual chapters are being published in tankōbon volumes by Shueisha, with the first released on December 24, 1997, and the 70th volume released as of March 2013. </p>

<div class="clear"></div>

    <p>One Piece follows the adventures of <a href="#luffy">Monkey D. Luffy</a>, a young boy whose body gains the properties of rubber after unintentionally eating a Devil Fruit, and his diverse crew of pirates, named the Straw Hat Pirates. Luffy explores the ocean in search of the world's ultimate treasure known as One Piece in order to become the next Pirate King.</p>


<h3 id="luffy">Monkey D. Luffy</h3>
<p>Monkey D. Luffy,[1] also known as "Straw Hat Luffy" and commonly as "Straw Hat",[4] is a pirate and the main protagonist of the anime and manga, One Piece. He is the son of the Revolutionary Army's commander, Monkey D. Dragon,[12] the grandson of the famed Marine, Monkey D. Garp,[13] the foster son of a mountain bandit, Curly Dadan, and the adopted brother of the late "Fire Fist" Portgas D. Ace and the revolutionary Sabo. His life long dream is to become the Pirate King by finding the legendary treasure left behind by the previous Pirate King, Gol D. Roger.[14] He believes that being Pirate King means one has the most freedom in the world. He has eaten the Gomu Gomu no Mi. As the founder and captain of the Straw Hat Pirates, he is the first member who makes up the crew, as well as one of its top three fighters. </p>
            
</body>
</html>

အထက် ပါ code မှာ <h3 id="luffy">Monkey D. Luffy</h3> ဆိုပြီး h3 ကို id နာမည်ပေးထားတာတွေ့ရပါလိမ့်မယ်။

Figure 6-5

Figure 6-5.

<a href="#luffy">Monkey D. Luffy</a> ဆိုပြီး link ကို id luffy ကို ပေးထားတာ တွေ့ပါမယ်။ Monkey D. Luffy ကို နှိပ်လိုက်တဲ့ အခါမှာ web page က <h3 id="luffy">Monkey D. Luffy</h3> နေရာကို ရောက်သွားတာ တွေ့ရပါလိမ့်မယ်။

Figure 6-6

Figure 6-6.

တကယ်လို့ အခြား page တစ်ခုက id ကို ချိတ်ချင်ရင်တော့ page နာမည်နဲ့ တွဲရေးလို့ ရပါတယ်။

<h3 id="profile.html#luffy">Monkey D. Luffy</h3>

အထက်ပါ code မှာ ဆိုရင် link ကို နှိပ်လိုက်ရင် profile.html က id luffy ဆီ ရောက်သွားပါလိမ့်မယ်။

Link to Another File Type

HTML မှာ link တွေကို ချိတ်တဲ့ အခါမှာ .html file ကို သာမက image file တွေ ဖြစ်တဲ့ jpg , png ဒါ့အပြင် pdf စတာတွေကိုလည်း link ပေးလို့ရပါတယ်။ ဥပမာ ကျွန်တော်တို့တွေ file download အတွက် zip file တစ်ခု ကို download ချခွင့်ပေးချင်တဲ့ အခါမှာ အဲဒီ zip file ရဲ့ လမ်းကြောင်းကို a tag မှာ href နဲ့ ချိတ်ပေးလိုက်ရင်ရပါပြီ။ အောက်က code လေးကို ကြည့်လိုက်ပါ။

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Link</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>One Piece</h1>
    <h2>by Eiichiro Oda</h2>
    <ul class="menu">
        <li><a href="./home.html">Home</a></li>
        <li><a href="./anime.html">Anime</a></li>
        <li><a href="./download.html">Download</a></li>
    </ul>
        <img class='cover' src="onepiece_cover.jpg" title="One Piece Cover" width="150px" height="200px" alt="One Piece cover">
    <p>One Piece is a Japanese <span class='highlight'>shounen manga series</span> written and illustrated by Eiichiro Oda. It has been serialized in Weekly Shōnen Jump since August 4, 1997; the individual chapters are being published in tankōbon volumes by Shueisha, with the first released on December 24, 1997, and the 70th volume released as of March 2013. </p>

<div class="clear"></div>

    <p>One Piece follows the adventures of <a href="#luffy">Monkey D. Luffy</a>, a young boy whose body gains the properties of rubber after unintentionally eating a Devil Fruit, and his diverse crew of pirates, named the Straw Hat Pirates. Luffy explores the ocean in search of the world's ultimate treasure known as One Piece in order to become the next Pirate King.</p>
    
    <p><a href="./download/trailer.zip">Download</a> Trailer</a></p>


<h3 id="luffy">Monkey D. Luffy</h3>
<p>Monkey D. Luffy,[1] also known as "Straw Hat Luffy" and commonly as "Straw Hat",[4] is a pirate and the main protagonist of the anime and manga, One Piece. He is the son of the Revolutionary Army's commander, Monkey D. Dragon,[12] the grandson of the famed Marine, Monkey D. Garp,[13] the foster son of a mountain bandit, Curly Dadan, and the adopted brother of the late "Fire Fist" Portgas D. Ace and the revolutionary Sabo. His life long dream is to become the Pirate King by finding the legendary treasure left behind by the previous Pirate King, Gol D. Roger.[14] He believes that being Pirate King means one has the most freedom in the world. He has eaten the Gomu Gomu no Mi. As the founder and captain of the Straw Hat Pirates, he is the first member who makes up the crew, as well as one of its top three fighters. </p>
            
</body>
</html>

အထက်ပါ code မှာ 

<p><a href="./download/trailer.zip">Download</a> Trailer</a></p>

ဆိုတာ တွေ့ပါလိမ့်မယ်။ Download ဆိုတဲ့ link လေးကို နှိပ်လိုက်ရင် trailer.zip file လေး download ကျလာပါလိမ့်မယ်။

zip file အစား ကျွန်တော်တို့ တွေ pdf , mp3 စတဲ့ file link တွေကို ပေးထားနိုင်ပါတယ်။

Link to an E-Mail Address

ကျွန်တော်တို့တွေ အနေနဲ့ link ကို webpage , file တွေသာမက email နဲ့ လည်း link ချိတ်နိုင်ပါတယ်။ email ပေးထားပြီး email ကို နှိပ်လိုက်တဲ့ အခါမှာ email ရေးဖို့ အတွက် outlook ဒါမှမဟုတ် လက်ရှိ computer မှာ သုံးနေတဲ့ email client တက်လာပြီး စာပို့လို့ ရအောင် ဖန်တီးလို့ရပါတယ်။

<html>
<head>
    <title>Email</title>
</head>
<body>
    If you have a question , send email to <a href="mailto:me@saturngod.net">me@saturngod.net</a>.
</body>
</html>

အထက်ပါ code ကို browser မှာဆိုရင်အောက်ကိုလို ပေါ်ပါမယ်။

Figure 6-7

Figure 6-7.

email link ကို နှိပ်လိုက်ရင် သင့် email client နဲ့ တက်လာပါလိမ့်မယ်။

Figure 6-8

Figure 6-8.

Email link ကို ထည့်တဲ့ အခါမှာ မသက်ဆိုင်တဲ့ email တွေ spam တွေ ရောက်လာနိုင်ပါတယ်။ ဒါကိုတော့ သတိထားဖို့ လိုအပ်ပါတယ်။ ဒါကြောင့် ကိုယ့် ကိုယ်ပိုင် email link ကို မထည့်သင့်ပါဘူး။

Change Link Colors

Link ဟာ ပုံမှန် အပြာရောက် အနေနဲ့ ဖော်ပြထားပါတယ်။ link ကို သွားပြီးသွားရင် နီညိုရောင် ပြောင်းသွားပါတယ်။ ကျွန်တော်တို့ တွေ CSS ကို အသုံးပြုပြီးတော့ စိတ်ကြိုက် အရောင်ကို ပုံစံ တို့ကို ပြောင်းလဲ နိုင်ပါတယ်။

<a href="./home.html">Home</a>
<a href="./anime.html">Anime</a>
<a href="./download.html">Download</a>

Figure 6-9

Figure 6-9.

ပုံမှန် link အရ ဆိုရင်တော့ အပြာရောင် ဖြစ်ပါတယ်။ အရောင်ပြောင်းဖို့အတွက် css မှာ

a{
    padding: 10px;
}
a:link{
    text-decoration:none;
    color: red;
}
a:visited {
    color:green;
}
a:active {
    color: purple;
}

Figure 6-10

Figure 6-10.

အဲဒါဆိုရင် link အရောင်ပြောင်းသွားတာကို တွေ့ရပါလိမ့်မယ်။

a:link ဆိုတာကတော့ normal link အတွက်ပါ။
a:visited ဆိုတာကတော့ visited link အတွက်ပါ။
a:active ဆိုတာကတော့ selected link အတွက်ပါ။

Change Link Hover Effects

ကျွန်တော်တို့တွေ အနေနဲ့ link အပေါ်မှာ mouse တင်လိုက်တာနဲ့ အရောင်ပြောင်းစေချင်ရင်တော့ a:hover ကို အသုံးပြုရပါတယ်။ ပြီးခဲ့တဲ့ code မှာ hover ထပ်ဖြည့်ပါမယ်။

a{
    padding: 10px;
}
a:link{
    text-decoration:none;
    color: red;
}
a:visited {
    color:green;
}
a:active {
    color: purple;
}
a:hover {
    text-decoration:underline;
}

အဲဒါဆိုရင် link ပေါ်မှာ mouse တင်လိုက်တာနဲ့ underline ဖြစ်နေတာကို တွေ့ရပါလိမ့်မယ်။

Figure 6-11

Figure 6-11.

Define Link Relationships

<a> tag link တွေ ကြားက ဆက်နွယ်မှုတွေကို rel attribute သုံးပြီးတော့ ဖော်ပြနိုင်ပါတယ်။ ဒီ link ဟာ author link လား prev , next စတဲ့ link လား။ help လား စသည်ဖြင့် သတ်မှတ်နိုင်ပါတယ်။ Search engine အနေနဲ့ outgoing link ကို analyze လုပ်တဲ့ အခါမှာ အမျိုးအစား ခွဲပြီး သတ်မှတ်ဖို့ အတွက် အသုံးဝင်ပါတယ်။

<html>
<head>
    <title>Link</title>
</head>
<body>
<p>This page authored by <a rel="author" href="http://www.saturngod.net">Saturngod</a></p>
<p>Test out the <a rel="external nofollow" href="http://beta.newdesign.com">beta version of the site</a>
</body>
</html>

အဲဒီ code မှာ <a rel="author" href="http://www.saturngod.net">Saturngod</a> ဆိုတဲ့ နေရာမှာ rel ကို author လို့ ပေးထားတာ တွေ့ပါလိမ့်မယ်။ link က author နဲ့ သက်ဆိုင်တယ်လို့ ဆိုထားပါတယ်။ နောက်ပြီးတော့ multiple realation အတွက် space ထားပြီး အသုံးပြုနိုင်ပါတယ်။ link relationship type တွေကိုတော့ အောက်က table မှာ ကြည့်နိုင်ပါတယ်။

Name Description
alternate ယခု စာမျက်နှာ ရဲ့ အခြား ပုံစံ တစ်ခု
author ယခု စာမျက်နှာရဲ့ စာရေးသူ
external site ရဲ့ အပြင်ဘက် link
first , prev , next , last စာမျက်နှာများ အတွက် link
help အကူအညီ စာမျက်နှာကို ချိတ်ဆက်ထားခြင်း
licence copyright လိုင်စင်နှင့် သက်ဆိုင်သော
nofollow search engine အနေနဲ့ လက်ရှိ link ဟာ လက်ရှိ document နှင့် သက်ဆိုင် မှု မရှိခြင်း။ ဒါကြောင့် page ranking အတွက် အသုံးမပြုရန်
noreferrer browser အနေနဲ့ referrer information ကို click လုပ်လျှင် မပို့ရန်
search search page ကို သွားမည့် link
tag tag သို့မဟုတ် keyword ဖော်ပြထားသည့် link