X

X

X

HTML এ লিংকের ব্যবহার


প্রায় সবপেজে লিংক ব্যবহার করা হয়। এক পেজ থেকে আরেক পেজে কিংবা একই পেজের অন্য অংশে নেভিগেট করার জন্য লিংকসমূহকে ব্যবহার করা হয়।


HTML লিংক- Hyperlinks

HTML link সমূহকে হাইপার লিংক বলা হয়।

এই লিংক গুলোতে ক্লিক করে এক পেজ থেকে আরেক পেজে যাওয়া যায়। এছাড়াও জাভাস্ক্রিপ্ট ব্যবহার করে লিংক দিয়ে আরও অনেক কিছু করা যায়। এই বিষয়টি নিয়ে বিস্তারিত জাভাস্কিপ্ট অধ্যায়ে আলোচনা করা হবে।

কিভাবে চিনবেন কোনটি লিংক! যখন আপনি মাউস কার্সরটিকে কোনো লিংক এর উপরে নিয়ে যাবেন এটি একটি ছোট হাতে পরিণত হবে।

Note: শুধুুুমাত্র টেক্সট দিয়েই নয়, বরং ছবি, ভিডিও বা অন্যান্য যেকোনো ইলামেন্ট দিয়ে লিংক তৈরি করা যায়।

HTML Link – তৈরির নিয়ম

HTML -এ link সমূহকে  <a> tag দিয়ে ডিফাইন বা বর্ণনা সহজ কথায় তৈরি করা যায়।

<a href=”url“>link text</a>

HTML Links

<p><a href="https://www.seicoder.com/tut_cats/html/">Visit our HTML tutorial</a></p>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


লিংক ইলামেন্টের href attribute এর মাধ্যমে কাংখিত পেজের ঠিকানা যেমন, (https://www.seicoder.com/tut_cats/html/) দেওয়া হয়।

link text অংশটুকু দেখা যায়, কিন্তু লিংক এর ঠিকানা দেখা যায় না।

এখন লিংক এর টেক্সট এ ক্লিক করার সাথে সাথে href attribute -এ বর্ণিত ঠিকানায় ব্রাউজার আপনাকে নেভিগেট করবে।

বি: দ্র: সাবফোল্ডার বিশিষ্ট লিংক এর ক্ষেত্রে যদি ফরওয়ার্ড স্ল্যাশ ব্যবহার না করেন তবে কাংখিত সার্ভারে দুই ধরণের রিকোয়েস্ট তৈরি হতে পারে। অনেক সার্ভার স্বয়ংক্রিয়ভাবে একটি ফরওয়ার্ড স্ল্যাশ যুক্ত করতে পারে এবং তারপর আরও একটি নতুন রিকোয়েস্ট তৈরি করবে।

Local লিংকসমূহ

উপরে বর্ণিত উদাহরণে একটি ফুল ওয়েব পেজের লিংক ব্যবহার করা হয়েছে।

লোকাল লিংক বলতে বোঝায় একই ওয়েবসাইটে অবস্থিত কোনো ডকুমেন্টের লোকেশন। অর্থাৎ, একই ওয়েবসাইটে অবস্থিত কোনো পেজের জন্য লোকাল লিংক ব্যবহার করতে হয়। লোকাল লিংকসমূহকে রিলেটিভ URL দিয়ে বর্ণনা করা হয়।

HTML লোকাল লিংক এর ব্যবহার

<p><a href="html_images.asp">HTML Images</a> is a link to a page on this website.</p>

<p><a href="https://www.w3.org/">W3C</a> is a link to a website on the World Wide Web.</p>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


HTML Link এর রং

সাধারণত একটি লিংক সব ব্রাউজারে নিচের বর্ণনা অনুসারে প্রদর্শিত হবে।

  • Unvisited লিংক সাধারণত আন্ডারলাইন্ড এবং নীল রংয়ের হবে।
  • Visited লিংক সাধারণত আন্ডারলাইন্ড এবং বেগুনী রংয়ের হবে।
  • একটি active link আন্ডারলাইন্ড এবং লাল রংয়ের হবে।

CSS style ব্যবহার করে লিংকসমূহের ডিফল্ট রং খুব সহজেই পরিবর্তন করা যায়।

HTML Links Color

<style>
a:link {
    color: green;
    background-color: transparent;
    text-decoration: none;
}
a:visited {
    color: pink;
    background-color: transparent;
    text-decoration: none;
}
a:hover {
    color: red;
    background-color: transparent;
    text-decoration: underline;
}
a:active {
    color: yellow;
    background-color: transparent;
    text-decoration: underline;
}
</style>
</head>
<body>

<p>You can change the default colors of links</p>

<a href="html_images.asp" target="_blank">HTML Images</a> 

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


HTML Link – এর টার্গেট attribute

target attribute এর মাধ্যমে কাংখিত লিংক ডকুমেন্ট কোথায় খোলা হবে সেটি বর্ণনা করা হয়।

target attribute এর জন্য নিচের যেকোনো একটি মান ব্যবহার করতে হবে।

  • _blank – লিংক ডকুমেন্ট একটি নতুন ব্রাউজার উইনডোতে Open করে।
  • _self – যে উইনডো থেকে লিংক ক্লিক করা হয়েছিলো সেই উইনডোতেই লিংক ডকুমেন্ট Open করে।
  • _parent – যদি লিংককে কোনো Child page থেকে ক্লিক করা হয়, তবে সেই পেজের Parent পেজে লিংক ডকুমেন্ট Open করে।
  • _top – লিংক ডকুমেন্টকে পুরো ডকুমেন্টে Open করে।
  • framename – নামভিত্তিক কোনো ফ্রেমে লিংক ডকুমেন্টকে Open করে।

নিচের উদাহরণটি লিংক ডকুমেন্টকে একটি নতুন ব্রাউজার উইনডোতে Open করে।

HTML Links with target attribtue

<a href="https://www.w3schools.com/html/" target="_blank">Visit our HTML tutorial!</a> 

<p>If you set the target attribute to "_blank", the link will open in a new browser window or tab.</p>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

টিপস: যদি আপনার পেজটি অন্য কোনো ফ্রেমের মধ্যে আবদ্ধ থাকে, এবং লিংকটিকে এই পেজের মধ্য থেকে ক্লিক করেন,তবে টার্গেট লিংক ডকুমেন্ট কিন্তু ঐ ফ্রেমে Open হবে। এখন যদি ডকুমেন্টটিকে পুরো উইন্ডোতে Open করার প্রয়োজন হয়, তবে target attribute মান হিসেবে _top ব্যবহার করতে হবে। 

HTML Links open in top window

<a href="https://www.w3schools.com/html/" target="_blank">Visit our HTML tutorial!</a> 

<p>If you set the target attribute to "_blank", the link will open in a new browser window or tab.</p>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


HTML Links – ছবিকে লিংক হিসেবে ব্যবহার

কোনো ছবিকে লিংক হিসেবে ব্যবহার করা খুবই স্বাভাবিক ঘটনা।

HTML images as links

<p>The image is a link. You can click on it.</p>

<a href="default.asp">
  <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0">
</a>

<p>We have added "border:0" to prevent IE9 (and earlier) from displaying a border around the image.</p>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

বি:দ্র: ছবির চারপাশে যাতে কোনো বর্ডার দেখা না যায় এজন border:0; ব্যবহার করা হয়। এটি সাধারণত IE9 ও এর পূরবর্তী ভার্শনের ব্রাউজারের জন্য প্রযোজ্য।


HTML Links – বুকমার্ক তৈরিকরণ

HTML bookmark সমূহ সাধারণত একই পেজের এক অংশ থেকে অন্য অংশে জাম্প করার জন্য ব্যবহৃত হয়। যদি আপনার ওয়েবপেজ খুব দীর্ঘ হয়, তবে সেক্ষেত্রে বুকমার্ক ব্যবহার করা খুবই উত্তম ।

বুকমার্ক ব্যবহার করার জন্য প্রথমে অবশ্যই বুকমার্ক তৈরি করতে হবে, এবং তারপর এটিতে একটি লিংক সেট করতে হবে। যখন লিংকটিতে ক্লিক করা হবে পেজটি স্বয়ংক্রিয়ভাবে বুকমার্ক ঠিনানায় স্ক্রল করবে।

উদাহরণ

প্রথমে id attribute এর মাধ্যমে বুকমার্ক তৈরি করতে হবে।

<h2 id=”C4″>Chapter 4</h2>

তারপর, বুকমার্কে একটি লিংক যুক্ত করতে হবে, একই পেজ থেকে।

<a href=”#C4″>Jump to Chapter 4</a>

অথবা অন্য পেজ থেকে বুকমার্ক ব্যবহার করতে চাইলে নিচের পদ্ধতি অনুসরণ করতে হবে।

HTML Bookmark Links

<p><a href="#C4">Jump to Chapter 4</a></p>

<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>

<h2 id="C4">Chapter 4</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 6</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 7</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 8</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 9</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 10</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 11</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 12</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 13</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 14</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 15</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 16</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 17</h2>
<p>This chapter explains ba bla bla</p>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


বাহ্যিক ওয়েব পেজ লিংক করার নিয়ম

অন্যকোনো ওয়েবসাইটের ওয়েব পেজ কে লিংক করার জন্য পরিপূর্ণ লিংক লোকেশন ব্যবহার করা ভালো।

নিচের উদাহরণে কিভাবে একটি বাহ্যিক ওয়েবসাইটের ওয়েবপেজকে লিংক করতে হয় তা দেখানো হয়েছে।

HTML External Paths

<p><a href="https://www.w3schools.com/html/default.asp">HTML tutorial</a></p>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

নিচের উদাহরণে দেখানো হয়েছে কিভাবে একই ওয়েব সাইটের অন্তর্গত ওয়েবে পেজে লিংক করতে হয়।

HTML Internal Paths

<p><a href="/html/default.asp">HTML tutorial</a></p>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

নিচের উদাহরণে দেখানো হয়েছে যখন লিংকের পেজ এবং রেফারেন্স লিংকের পেজ একই ফোল্ডারে থাকে তখন কিভাবে তাদের লিংকিং করতে হয়।

HTML Links to sibling folder

<p><a href="default.asp">HTML tutorial</a></p>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

ফাইল পথ সম্পর্কে বিস্তারিত আমাদের HTML File Paths চ্যাপ্টারে জানতে পারবেন।


অধ্যায়ের সারাংশ

যা শিখলাম এ অধ্যায়ে-

  • <a> এর মাধ্যমে লিংকের বর্ণনা।
  • href attribute এর মাধ্যমে লিংকের ঠিকানা বর্ণনা।
  • target attribute এর মাধ্যমে লিংকড পেজ খোলার স্থান বর্ণনা।
  • <img> ইলামেন্টের মাধ্যমে (<a> এর ভিতরে) কোনো ছবিকে লিংক হিসেবে ব্যবহার।
  • id attribute (id=”value“) এর মাধ্যমে কোনো পেজে বুকমার্ক তৈরি করা।
  •  href  attribute (href=”#value“) এর মাধ্যমে বুকমার্কে এ লিংক তৈরি করা।

HTML লিংক তৈরিতে ব্যবহৃত ট্যাগ সমূহ

ট্যাগ বর্ণনা
<a> এটি দ্বারা হাইপার লিংক বর্ণনা করা হয়।