এইচটিএমএল লিংক (HTML Link)
এক নজরে এইচটিএমএল লিংক ট্যাগ
| ট্যাগ | বিবরণ |
|---|---|
| <a> | হাইপারলিংক(hyperlink) তৈরি করার জন্য <a> ট্যাগ ব্যবহার হয়। |
প্রায় সকল ওয়েব পেজেই লিংক থাকে। লিংক ব্যবহারকারীকে এক পেজ থেকে অন্য পেজে যাওয়ার সুযোগ তৈরি করে দেয়।
এইচটিএমএল Hyperlink তৈরি
এইচটিএমএলে লিংক হলো হাইপারলিংক (Hyperlink)।
লিংকের মধ্যে ক্লিক করে আপনি খুব সহজেই অন্য ডকুমেন্টে চলে যেতে পারেন। লিংক একটি ডকুমেন্টের সাথে অন্য আরেকটি ডকুমেন্টের সম্পর্ক তৈরি করে।
নোটঃ একটি লিংক যে শুধুমাত্র টেক্সট বা লেখাই হবে তা কিন্তু না। এটি ইমেজ বা অন্য যেকোন এইচটিএমএল এলিমেন্টও হতে পারে। লিংক হিসেবে ইমেজ বা অন্য যেকোন এইচটিএমএল এলিমেন্ট ব্যবহার করলেও এটি লিংকের ডিফল্ট আচরণই অনুসরণ করবে।
সিন্টেক্স
<a href="url">Link</a>
href এট্রিবিউটে URL এর মাধ্যমে লিংকের অ্যাড্রেস নির্ধারণ করা হয়। যেমনঃ https://www.sattacademy.com
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>এইচটিএমএল লিংক</title>
</head>
<body>
<p><a href="https://www.sattacademy.com">স্যাট একাডেমী</a></p>
</body>
</html>
ফলাফল
উপরের উদাহরণে আমরা দেখতে পাচ্ছি যে, শুধুমাত্র <a> এবং </a> এর মাঝের টেক্সটগুলো(স্যাট একাডেমী) ব্রাউজারের মধ্যে লিংক হিসেবে প্রদর্শিত হয়েছে।
লিংক হিসেবে যেই লেখাটি প্রদর্শিত হবে সেটির উপর ক্লিক করলে আপনাকে লিংকের নির্দিষ্ট অ্যাড্রেস/গন্তব্যে নিয়ে যাবে।
লোকাল লিংক
উপরের উদাহরণে আমরা যে URL টি ব্যবহার করেছি সেটি একটি সম্পূর্ণ URL । অর্থাৎ এটি ছিল একটি ওয়েব সাইটের সম্পূর্ণ অ্যাড্রেস।
লোকাল লিংক বলতে একই ওয়েবসাইটে অবস্থিত যেকোন লিংককে বুঝায়। লোকাল লিংক তৈরি করার ক্ষেত্রে http://www..... ব্যবহার করতে হয় না। শুধুমাত্র লিংক ফাইলের নাম এবং ডিরেক্টরি নির্ধারণ করে দিলেই হয়।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>এইচটিএমএল উদাহরণ</title>
</head>
<body>
<p><a href="../html-image-tag.php">এইচটিএমএল ইমেজ</a> পেজে যেতে এখানে ক্লিক করুন।</p>
</body>
</html>
ফলাফল
এইচটিএমএল লিংক - ইমেজ লিংক
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>এইচটিএমএল উদাহরণ</title>
</head>
<body>
<a href="../index.php">
<img src="../satt.png" alt="HTML tutorial" style="width:142px;height:142px;border:0">
</a>
</body>
</html>
ফলাফল
এইচটিএমএল লিংক - বুকমার্ক(Bookmark) তৈরি
একটি ওয়েব পেজের নির্দিষ্ট অংশে যাওয়ার জন্য এইচটিএমএল বুকমার্ক(Bookmark) ব্যবহার করা হয়।
আপনাকে প্রথমে বুকমার্কটি তৈরি করতে হবে, তারপর তাতে লিংক যোগ করতে হবে।
যখন লিংকে ক্লিক করা হবে, তখন পেজটি স্ক্রল হয়ে বুকমার্কে চলে যাবে।
উদাহরণ
<h4 id="chap4">অধ্যায় ৪</h4>
<a href="#chap4">অধ্যায় ৪ এ যেতে ক্লিক করুন</a>
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>এইচটিএমএল উদাহরণ</title>
</head>
<body>
<p><a href="#chap4">অধ্যায় ৪ এ যেতে ক্লিক করুন</a></p>
<h4>অধ্যায় ১</h4>
<p>আশা করি এইচটিএমএল বুকমার্ক বিষয়টি ভালো ভাবে বুঝতে পেরেছেন।</p>
<h4>অধ্যায় ২</h4>
<p>আশা করি এইচটিএমএল বুকমার্ক বিষয়টি ভালো ভাবে বুঝতে পেরেছেন</p>
<h4>অধ্যায় ৩</h4>
<p>আশা করি এইচটিএমএল বুকমার্ক বিষয়টি ভালো ভাবে বুঝতে পেরেছেন।</p>
<h4 id="chap4">অধ্যায় ৪</h4>
<p>আশা করি এইচটিএমএল বুকমার্ক বিষয়টি ভালো ভাবে বুঝতে পেরেছেন।</p>
<h4>অধ্যায় ৫</h4>
<p>আশা করি এইচটিএমএল বুকমার্ক বিষয়টি ভালো ভাবে বুঝতে পেরেছেন।</p>
<h4>অধ্যায় ৬</h4>
<p>আশা করি এইচটিএমএল বুকমার্ক বিষয়টি ভালো ভাবে বুঝতে পেরেছেন।</p>
</body>
</html>
ফলাফল
অধ্যায় সারাংশ
- লিংক তৈরি করার জন্য
<a>ট্যাগ ব্যবহার করুন - লিংকের অ্যাড্রেসকে নির্দিষ্ট করার জন্য
hrefএট্রিবিউট ব্যবহার করুন - লিংককৃত ডকুমেন্টটি কোথায় ওপেন হবে তা নির্দিষ্ট করার জন্য
targetএট্রিবিউট ব্যবহার করুন - ইমেজকে লিংক হিসেবে ব্যবহার করার জন্য
<img>এলিমেন্ট (<a>ট্যাগের ভিতর) ব্যবহার করুন - পেজে বুকমার্ক তৈরি করার জন্য
idএট্রিবিউট ব্যবহার করুন (id="value") - বুকমার্কে লিংক দেওয়ার জন্য
hrefএট্রিবিউট (href="#value") ব্যবহার করুন