এইচটিএমএল লিংক - HTML Link


সমস্ত ওয়েব সাইটেই লিংক ব্যবহার করা হয়। লিংকের মাধ্যমে ইউজার একটি পেজ থেকে অন্য একটি পেজে যেতে পারে। একটি ওয়েব সাইট থেকে অন্য একটি ওয়েব সাইট এ যাওয়ার জন্যও লিংক ট্যাগ ব্যবহার করা হয়।


এইচটিএমএল হাইপারলিংক

এইচটিএমএল হাইপারলিংক বা লিংক হল একটি শব্দ ( word ) বা কতগুলো শব্দসমষ্টি ( group of word ) বা কোন ছবি ( image ) যাতে ইউজার ক্লিক করার মাধ্যমে অন্য কোন ওয়েব পেজে বা ডকুমেন্টে যেতে পারে।
যখন আপনি কোন ওয়েব পেজের লিংকের ওপর মাউস পয়েন্টার বা কার্সর স্থাপন করেন তখন কার্সরটি একটি হাতে রূপান্তরিত হয় বা অন্য কোন অ্যানিমেশন দেখা যায়।
এইচটিএমএল হাইপারলিংক তৈরি করা হয় অ্যাংকর ট্যাগ ( anchor tag ) ট্যাগ অর্থাৎ <a>...</a> ট্যাগ ব্যবহার করে।


এইচটিএমএল হাইপারলিংক ব্যবহার পদ্ধতি

২ ভাবে এইচটিএমএল এ হাইপারলিংক তৈরি করা যায় -

এইচটিএমএল <a> ট্যাগ সম্পর্কে জানতে W3C এর 4.3.6.1 The a element ওয়েব পেজটি ব্রাউজ করুন।


href এট্রিবিউট ব্যবহার

এইচটিএমএল এ হাইপারলিংক তৈরি করা খুব সহজ । অ্যাংকর ট্যাগের সাথে href এট্রিবিউট ব্যবহার করে হাইপারটেক্সট লিংক তৈরি করার নিয়মটি হল -

সিনট্যাক্স

<a href="url">লিংক টেক্সট</a>
 

নীচে একটি উদাহরন দেখুন -

উদাহরণ


<a href="https://www.websschool.com/">websschool home</a>

কোড এডিটর


নোট - লিংক টেক্সট যে শুধুমাত্র টেক্সটই হতে হবে তা নয়, আপনি চাইলে এখানে ছবি, লেখা বা অন্য কোন এইচটিএমএল এলিমেনট ব্যবহার করতে পারেন।


লোকাল লিংক

উপরে আমরা যে URL টি ব্যবহার করেছি তা হল একটি সম্পূর্ণ URL। অর্থাৎ এটি ছিল একটি ওয়েব সাইটের সম্পূর্ণ ওয়েব অ্যাড্রেস।
কোন ওয়েব সাইটের আভ্যন্তরিন সকল লিংক গুলোই হল লোকাল বা স্থানীয় লিংক। লোকাল লিংক তৈরি করার জন্য "http://www..." ব্যবহার করা হয় না। শুধুমাত্র লিংকে, ফাইলের নাম এবং ডিরেক্টরি নির্দিষ্ট করে দিতে হয়। নিচে এর একটি উদাহরণ দেখুন।

উদাহরণ


<a href="html/local_link.html">HTML Link</a>

কোড এডিটর



লিংকের রঙ

সকল ব্রাউজারেই, পূর্বনির্ধারিত বা default ভাবে কোন লিংকের বিভিন্ন অবস্থায় বিভিন্ন রকম রঙ হয়,। যথা -

CSS ব্যবহার করে স্বয়ংক্রিয়ভাবে প্রদর্শিত রং পরিবর্তন করা যায়। নিচে একটি উদাহরন দেখুন।

উদাহরণ


  <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>

কোড এডিটর



target এট্রিবিউট ব্যবহার

টার্গেট এট্রিবিউট নির্দিষ্ট করে দেয় এইচটিএমএল ডকুমেন্টটি ব্রাউজারে কোথায় কিভাবে প্রদর্শিত বা open হবে। টার্গেট এট্রিবিউট লেখার নিয়ম টি হল -

সিনট্যাক্স

target="value"
 

এখানে target প্রপার্টির যেসকল মান বা value হতে পারে সেগুলো নিম্নরূপ -

নীচের উদাহরনটি দেখুন, এখানে লিংক করা ডকুমেন্টটি ব্রাউজারে একটি নতুন ট্যাব বা উইন্ডো তৈরি করবে।

উদাহরণ


<a href="https://www.websschool.com/" target="_blank">Visit websschool!</a>

কোড এডিটর


নোট - target এট্রিবিউটের পূর্বনির্ধারিত বা default মান হল self, অর্থাৎ target এট্রিবিউট ব্যবহার না করলে তা self মানের মত আচরন করবে।


name এট্রিবিউট

একটি অ্যাংকর ট্যাগের নাম নির্দিষ্ট করতে name এট্রিবিউট ব্যবহার করা হয়। এইচটিএমএল ডকুমেন্টের ভেতর বুকমার্ক তৈরি করতে name এট্রিবিউট ব্যাবহৃত হয়।

এইচটিএমএল ডকুমেন্টের ভেতর name এট্রিবিউট লেখার নিয়ম হল -

সিনট্যাক্স

name="anchor-name"
 

নিচে এর একটি উদাহরণ দেখুন।

উদাহরণ


<a name="list">Useful List</a>

কোড এডিটর


অন্য ওয়েব সাইটের কোন পেজ থেকে লিঙ্ক তৈরি করার জন্য নিচের কোডগুলো ব্যবহার করুন -

উদাহরণ


<a href="https://www.websschool.com/html_home.html#list">
Visit websschool.com
</a>

কোড এডিটর


নোট - একটি নতুন window তে open বা চালু করার জন্য blink এট্রিবিউট ব্যবহার করা যায়।


ছবিকে লিংকরুপে ব্যবহার

কোন ছবিকে লিংকরুপে ব্যবহার করার একটি উদাহরণ নিচে দেখুন।

উদাহরণ


<a href="default.asp">
<img src="smile.png" alt="Tutorial" style="width:40px;height:40px;border:0;">
</a>

কোড এডিটর


নোট - IE9 এবং এর আগের ভার্সনগুলো লিংক করা ছবির চারপাশে একটি বর্ডার প্রদর্শন। border:0; প্রপার্টি ব্যবহার করে এই বর্ডারটা মুছে দেয়া হয়েছে।


title এট্রিবিউট

title এট্রিবিউট কোন লিংক সম্পর্কে ইউজার এবং ব্রাউজারকে অতিরিক্ত তথ্য প্রদান করে। যখন এলিমেন্টের ওপর মাউস পয়েন্টার আসে তখন একটি টুলটিপ টেক্সটে এই তথ্য প্রদর্শিত হয়। নিচে একটি উদাহরণ দেখুন।

উদাহরণ


<a href="https://www.websschool.com/html/" title="Go to webSschool HTML tutorials">Visit our HTML Tutorials</a>>

কোড এডিটর



Bookmark তৈরি

কোন একটি ওয়েব পেজের সুনির্দিষ্ট কোন অংশে লিংকের মাদ্ধমে যাওয়ার জন্য এইচটিএমএল বুকমার্ক বা Bookmark পদ্ধতি ব্যবহার করা হয়। খুব বর কোন ওয়েব পেজের জন্য Bookmark পদ্ধতি বেশ ভাল একটি সুবিধা।

এ জন্য প্রথমে একটি বুকমার্ক তৈরি করতে হবে, তারপর তাতে লিংক যুক্ত করতে হবে। যখন লিংকে মাউস ক্লিক করা হবে, তখন ওয়েব পেজটি স্ক্রল হয়ে লিংক করা কন্টেন্ট অর্থাৎ নির্দিষ্ট অংশ স্ক্রীনে প্রদর্শিত হবে বা সামনে আসবে।

নিচে একটি উদাহরণ দেখুন। প্রথমে আমরা একটি id যুক্ত বুকমার্ক তৈরি করেছি।

উদাহরণ


<h3 id="Chapter5"> Chapter 5 </h3>

তারপর একই পেজে বুকমার্কে "Link of Chapter 5" নামে একটি লিংক যোগ করেছি।

উদাহরণ


<a href="#Chapter5"> Link of Chapter 5. </a>

অথবা অন্য কোন ওয়েব পেজ থেকে "Link of Chapter 5" নামে একটি বুকমার্ক যোগ করা যায়।

উদাহরণ


<a href="Chapter5.html"> Link of Chapter 5 </a>

এইচটিএমএল লিংক ট্যাগ

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