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



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


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

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


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

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

অ্যাংকর ট্যাগের সাথে href এট্রিবিউট ব্যবহার করে,
ডকুমেন্টের ভেতর বুকমার্ক তৈরি করে।


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

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

সিনট্যাক্স

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


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

উদাহরণ দেখুন

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


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


লোকাল লিংক

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

উদাহরণ

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




লিংকের রঙ

স্বয়ংক্রিয়ভাবে একটি লিংকের বিভিন্ন অবস্থায় বিভিন্ন রঙ হয়, তা সকল ব্রাউজারেই। যথা -
একটি unvisited লিংকের নিম্নরেখাঙ্কিত এবং নীল রঙের হয়,
একটি পরিদর্শিত লিংকের রঙ হয় বেগুনি,
একটি সক্রিয় লিংকের রঙ নিম্নরেখাঙ্কিত এবং লাল হয়,

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 এট্রিবিউট ব্যবহার

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

সিনট্যাক্স

target="valu"


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

_blank - ডকুমেন্টটি একটি নতুন উইন্ডো বা ট্যাব খুলবে,
_self - ডকুমেন্টটি একই উইন্ডো বা ট্যাবে খুলবে এবং এটা স্বয়ংক্রিয় মান,
_parent - ডকুমেন্টটি parent ফ্রেমে খুলবে,
_top - ডকুমেন্টটি একটি পুরো উইন্ডো জুরে খুলবে,
_framename - ডকুমেন্টটি নির্দিষ্ট কোন নামের ফ্রেমে খুলবে।

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

উদাহরণ দেখুন

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


নোট - target এট্রিবিউটের ডিফল্ট মান হিসেবে blank নির্ধারণ করা থাকে ।


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.w3schools.com/html/" title="Go to WebSschool HTML tutorials">Visit our HTML Tutorials</a>>



Bookmark তৈরি

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

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

<h2 id="C4">Chapter 5</h2>


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

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


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

<a href="html_demo.html#C4">Jump to Chapter 5</a>




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

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







এই ওয়েব সাইট এর সমস্ত টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদি খুব সহজ ও সাধারণ ভাবে তৈরি করা হয়েছে। টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদির ভুল পরিহার করার জন্য বার বার যাচাই করা হয়েছে, কিন্তু আমরা এর পূর্ণ নিশ্চয়তা ও দায়ভার বহন করি না। যখন আপনি এই সাইটটি ব্যবহার করেন, আমরা ধরে নেই যে আপনি পড়েছেন এবং সম্মত আছেন আমাদের টার্মস অফ ইউস (Terms of use) এবং প্রাইভেসি পলিসি( Privacy policy) সম্পর্কে।

Report or suggest about this page

Copyright 2016-2018 by websschool.com, All Rights Reserved.