এইচ টি এম এল লিঙ্ক
স্বর্ণা আখতার
সম্পাদনাঃ মোঃ রফিকুল ইসলাম
প্রায় সকল ওয়েবপেজ এ লিঙ্ক রয়েছে। লিঙ্ক এ ক্লিক করার মাধ্যমে ব্যবহারকারী এক পেজ থেকে অন্য পেজে যেতে পারে।
এইচটিএমএল লিঙ্ক - হাইপারলিঙ্ক
হাইপারলিঙ্ক হচ্ছে একটি Text, বা ছবি যার উপর ক্লিক করার মাধ্যমে আপনি অন্য আরেকটি ওয়েবপেজে/ডকুমেন্ড এ চলে যেতে পারে।
এইচটিএমএল লিঙ্ক - সিনট্যাক্স
এইচ টি এম এল এ লিঙ্ক সিনট্যাক্সগুলো কিভাবে গঠিত হয় নিচে তাঁর উদাহরন তুলে ধরা হল, <a> ট্যাগ দ্বারা লিঙ্ককে সঙ্গায়িত করা হয়।
লিঙ্ক সিনট্যাক্স
<a href="url">link text</a>
উদাহরনঃ
<a href="http://bangla.salearningschool.com/html/">Visit our HTML tutorial</a>
ফলাফলঃ
এখানে href অ্যাট্রিবিউট ওয়েব পেজ এর গন্তব্যকে নির্দেশ করে করে যেমন, http://bangla.salearningschool.com/html/
আর link text (Visit our HTML tutorial) হল প্রদর্শিত অংশ যার উপর ক্লিক করলে আপনি একটি নির্দিষ্ট ওয়েব পেজ এ স্থানান্তিরিত হবেন।
নেটঃ link text সবসময়ই টেক্স হতে হবে এমন কোন কথা নেই, এটি ছবি বা এইচটিএমএল এর যেকোন উপাদান হতে পারে।
লোকাল লিঙ্ক
উপরের উদাহরণে একটি সংয়সম্পূর্ণ ওয়েব এড্রেস (URL) ব্যবহার করা হয়েছে।
একটি লোকাল লিঙ্ক (একই ওয়েব সাইটের লিঙ্ক) নির্দিষ্ট করা হয় আপেক্ষিক URL এর সাহায্যে (http://www.... ব্যতীত)
যেমনঃ
<a href="html_images.asp">HTML Images</a>
এইচটিএমএল লিঙ্ক - কালার এবং আইকন
আপনি যখন কোন লিঙ্ক এর উপর নিয়ে যান তখন সাধারণত দুপ্রকার ঘটনা ঘটতে পারেঃ
১. মাউস এর তীর টিহ্নটি একটা ছোট হাতের রুপ নিতে পারে।
২. লিঙ্ক এর বিষয়বস্তু যেমন লিঙ্ক টেক্সট ইত্যাদির কালার পরিবর্তন হয়ে থাকে।
সাধারনত লিঙ্কগুলো যে কোন ব্রাউজার এ নিম্নোক্তভাবে দেখা যায়
১. অদেখা লিঙ্কগুলোর নিচে আন্ডার লাইন এবং এদের কালার নীল হয়।
২. দেখা লিঙ্কগুলোর নিচেও আন্ডার লাইন থাকে কিন্তু এদের কালার সাধারনত রক্তবর্ণ হয়।
৩. একটা সচল লিঙ্কএর নিচেও একইভাবে আন্ডার লাইন কিন্তু লাল কালারের হয়ে থাকে।
আপনি style ব্যবহার করে ডিফল্ট কালার ও আন্ডারলাইন পরিবর্তন করতে পারেন।
উদাহরণঃ
a:link {color:#000000; background-color:transparent; text-decoration:none}
a:visited {color:#000000; background-color:transparent; text-decoration:none}
a:hover {color:#ff0000; background-color:transparent; text-decoration:underline}
a:active {color:#ff0000; background-color:transparent; text-decoration:underline}
</style>
এইচটিএমএল লিঙ্ক - টার্গেট অ্যাট্রিবিউট
target অ্যাট্রিবউট নির্দারণ করে ডকুমেন্টটি কোথায় খুলবে।
উদাহরণস্বরূপ ডকুমেন্টটি একই উইন্ডোতে খুলতে পারে বা নতুন ট্যাব এও খুলতে পারেঃ
<a href="http://bangla.salearningschool.com/html/" target="_blank">Visit our HTML tutorial</a>
ফলাফল
| Target Value | বিবরণ |
|---|---|
| _blank | লিঙ্ককৃত ডকুমেন্টটি নতুন একটি উইন্ডো বা ট্যাব এ খোলে |
| _self | লিঙ্ককৃত ডকুমেন্টটি যে ফ্রেমে ক্লিক করেছেন সেই একই ফ্রেমে খুলবে (এটিই ডিফল্ট হিসেবে থাকে) |
| _parent | লিঙ্ককৃত ডকুমেন্টটি মুল ফ্রেমে খোলে |
| _top | লিঙ্ককৃতডকুমেন্টটি সম্পূর্ণ উইন্ডো জুড়ে খোলে |
| framename | লিঙ্ককৃত ডকুমেন্টটি নির্দিষ্ট নামের ফ্রেমে খোলে |
আপনার ওয়েব পেজটি যদি একটি ফ্রেম লক করা থাকে, তাহলে target="_top" ব্যহার করে লক ভেঙ্গে ফেলতে পারেন।
উদাহরণঃ
<a href="http://bangla.salearningschool.com/html/" target="_top">Visit our HTML tutorial</a>
ফলাফলঃ
এইচটিএমএল লিঙ্ক - ইমেজ/ছবি লিঙ্ক হিসেবে ব্যবহার
ইমেজকে লিঙ্ক হিসেবে ব্যবহার করা খুবই সাধারণ
উদাহরণঃ
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0">
</a>
ফলাফলঃ
এইচটিএমএল লিঙ্ক - id অ্যাট্রিবিউট
<a> এলিমেন্ট এর সাথে একটি id অ্যাট্রিবউট যোগ করুন
<a id="tips">Useful Tips Section</a>
<a> এলিমেন্ট এ একটি লিঙ্ক সংযুক্তকরণ
<a href="#tips">Visit the Useful Tips Section</a>
<a> এলিমেন্ট এ অন্য পেজ এর একটি লিঙ্ক যুক্তকরণ
<a href="http://bangla.salearningschool.com/html_links.htm#tips">Visit the Useful Tips Section</a>
সারসংক্ষেপ
• এইচটিএমএল <a> এলিমেন্ট এর ব্যবহার লিঙ্ককে সঙ্গালিত করে
• এইচটিএমএল href অ্যাট্রিবউট এর ব্যবহার লিঙ্ক এর এড্রেসকে সঙ্গায়িত করে
• এইচটিএমএল target অ্যাট্রিবউট এর ব্যবহার লিঙ্কটি কোথায় খুলবে তা বোঝায়
• এইচটিএমএল <img> এলিমেন্ট এর ব্যবহার ইমেজ/ছবিকে লিঙ্ক সিহেবে ব্যবহার করে
• এইচটিএমএল id অ্যাট্রিবউট (id="value") এর ব্যবহার বুকমার্ক ডিফাইন করার জন্য ব্যবহৃত হয়
• এইচটিএমএল href অ্যাট্রিবউট (href="#value") এর ব্যবহার বুকমার্ক এ ঠিকানা বুঝায়
