এইচটিএমএল লিঙ্ক কী এবং কীভাবে এইচটিএমএল লিঙ্ক ব্যবহার করবেন

  • by
এইচটিএমএল লিঙ্কের মূল উদ্দেশ্য হচ্ছে এক ওয়েবসাইট থেকে আরেক ওয়েবসাইটে যাওয়া

আজ আমরা এইচটিএমএল লিঙ্ক কি এবং কীভাবে এইচটিএমএল লিঙ্ক ব্যবহার করবেন তা নিয়ে আলোচনা করবো। “Link” শব্দটি সাধারণত কোনও ব্যক্তি, স্থান, ইভেন্ট বা জিনিসের মধ্যে সংযোগ স্থাপন করাকে বুঝায়। ওয়েবের জগত আসলে লিঙ্ক দিয়েই তৈইর। এখানে অনেক লিঙ্ক আছে। এই লিঙ্কগুলো এক ওয়েব পৃষ্ঠা থেকে অন্য পৃষ্ঠায় আপনার সার্ফিং সহজ করে তোলে। এইচটিএমএল লিঙ্ক হচ্ছে অন্য ওয়েবসাইটের উৎস, যা এক ওয়েব পেইজ থেকে অন্য ওয়েব পেইজে নেভিগেশন প্রক্রিয়াকে সহজ ও আরামদায়ক করে। এখানে, আমি উদাহরণ সহ বিভিন্ন ধরণের এইচটিএমএল লিঙ্ক এবং এগুলো তৈরি করার প্রক্রিয়াটি ব্যাখ্যা করতে যাচ্ছি।

এইচটিএমএল লিঙ্ক কি?

লিঙ্ক হচ্ছে হাইপারলিঙ্কের একটি সংক্ষেপ রূপ। একটি হাইপারলিংক সাধারণত এর সাথে সম্পর্কিত পৃষ্ঠা, ফাইল এবং চিত্রের জন্য একটি সহজ পথ তৈরি করতে ওয়েব পৃষ্ঠায় ব্যবহৃত হয়। উইকিপিডিয়ার সংজ্ঞা অনুসারে,

“The hyperlink is a reference to data that the reader can directly follow either by clicking or by hovering.”

-Wikipedia

একটি হাইপারলিঙ্ক সাধারণত কোনও নথির পাথ বা নথির নির্দিষ্ট উপাদানগুলোকে নির্দেশ করতে ব্যবহৃত হয়। প্রতিটি ওয়েব পেইজে ন্যাচারাল নেভিগেশন প্রক্রিয়া তৈরি করতে কমপক্ষে এক বা একাধিক লিঙ্ক থাকে।

একটি ওয়েব পৃষ্ঠাতে বিভিন্ন ধরণের লিঙ্ক থাকতে পারে। এটি একটি সাধারণ লিঙ্ক, সঙ্গীত লিঙ্ক, চিত্রের লিঙ্ক, ভিডিও লিঙ্ক, কোনও ইমেল ঠিকানার লিঙ্ক এবং আরও অনেক কিছুই হতে পারে। লিঙ্কগুলোর বিষয়বস্তু ভিন্ন হতে পারে, তবে প্রাথমিক লিঙ্ক বিল্ডিং প্রক্রিয়া একই।

কিভাবে লিঙ্ক তৈরি করবেন:

একটি লিঙ্ক তৈরি করা খুবই সহজ। এখানে, আমি আপনাকে দেখাবো কিভাবে একটি লিঙ্ক তৈরী করতে হয়। এইচটিএমএল লিঙ্কগুলোতে বিশেষ ট্যাগ ব্যবহার করা হয়, যা পাঠ্যের একটি অংশকে হাইপারলিঙ্কে রূপান্তর করে। এটাকে অ্যাংকর ট্যাগ বলে। এই লিঙ্ক ট্যাগগুলো দেখতে নীচের সিনট্যাক্সের মতো দেখায়:

<a href="location">Text</a>

এইচটিএমএল হাইপারলিঙ্কের সূচনা <a> ট্যাগের মাধ্যমে হয় এবং </a> ক্লোজিং ট্যাগের মাধ্যমে শেষ হয় । এই শুরুর এবং সমাপনী (<a> </a>) ট্যাগের মধ্যে বিভিন্ন ধরণের পাঠ্য এবং চিত্র থাকে। যখন কোনও ব্যবহারকারী কোনও লিঙ্কে ক্লিক করেন, তারা এর মাধ্যমে একটি আলাদা পৃষ্ঠা বা উৎস খুলে থাকেন। “hrefs” এর অর্থ হল “হাইপারটেক্সট রেফারেন্স”। এটা কোনও নতুন অবস্থান বা নতুন পৃষ্ঠায় ইঙ্গিত করছে, যেখানে আপনি আপনার ওয়েবসাইট দর্শকদের প্রেরণ করতে চান। নীচে হাইপারলিংকের ব্যবহারিক উদাহরণ দেখুন:

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

যদি আমরা উপরের উদাহরণের দিকে তাকাই তবে আমরা দেখবো যে, আমাদের ওয়েবসাইটের একটি লিঙ্ক এখানে দেয়া আছে। আপনি যখন এইচটিএমএল ডকুমেন্টে এই কোডটি স্থাপন করবেন, তখন “vawebseo.com” লেখাটি একটি হাইপারলিঙ্কে রূপান্তরিত হবে। সুতরাং, যখন কোনও ব্যবহারকারী এই ওয়েবসাইটের লিঙ্কে ক্লিক করবে, তখন তারা ব্রাউজারকে এই ওয়েবসাইটের হোমপেজে যাওয়ার জন্য অনুরোধ করবে। ব্রাউজার নির্দিষ্ট পেইজটি লোড করলে ব্রাউজারের URL ক্ষেত্রটিতে লক্ষ্য করলে দেখবেন যে আমাদের হোমপেজের ঠিকানাটি ইউআরএল ফিল্ডে দেখা যাচ্ছে।

আমরা যখন কোনও লিঙ্কে ক্লিক করি, তখন হয়তো লক্ষ্য করবেন যে কিছু কিছু লিঙ্ক একটি নতুন ট্যাবে খোলা হয়েছে। এগুলোর কোনো কোনোটি একই ট্যাবে খুলে আর কোনও কোনোটি নতুন ব্রাউজার উইন্ডোতেও খোলা হয়।

এটা কেন ঘটে? এর মূল কারণ হ’ল লিংক টার্গেট অ্যাট্রিবিউট। এখানে আমরা লিঙ্ক টার্গেট অ্যাট্রিবিউট এর বেশ কিছু উদাহরণ ব্যাখ্যা করতে যাচ্ছি।

বেশ কিছু জনপ্রিয় লিঙ্ক টার্গেট হচ্ছে:

  • _blank: _blank লিঙ্ক টার্গেট একই ব্রাউজার উইন্ডোর নতুন ট্যাবে কোনও পেইজ খুলে থাকে।
  • _self: _self লিঙ্ক টার্গেট বর্তমান ব্রাউজার উইন্ডোতেই একটি পেইজ খোলে। এবং এটা একটি ডিফল্ট অ্যাট্রিবিউট। মানে হচ্ছে, আপনি এটি ব্যবহার করুন বা না করুন, একটি লিঙ্ক সর্বদা একই ব্রাউজার ট্যাবে খুলে থাকে।
  • _parent: এই লিঙ্ক টার্গেটটি একটি নতুন আইফ্রেমে কোনও ওয়েব পেইজ খুলে থাকে।
  • _top: এই লিঙ্ক টার্গেট কোনও ব্রাউজার উইন্ডোর পুরো অংশ জুড়ে কোনও ওয়েব পৃষ্ঠা খুলবে।

আসুন, পরীক্ষা করে দেখি, কিভাবে আমরা এইচটিএমএল লিঙ্ক টার্গেট সংজ্ঞায়িত করতে পারি:

  • <a href=”http://www.google.com” target=”_parent”>Home</a>
  • <a href=”#” target=”_self”>Web Development</a>
  • <a href=”#” target=”_blank”>Programming</a>
  • <a href=”http://www.google.com” target=”_top”>Networking</a>

ট্যাক্সট লিঙ্কের মতই, আমরা ইমেজ লিঙ্কও তৈরি করতে পারি। পুরো প্রক্রিয়াটি একইরকম, তবে আমরা এখানে নিয়মিত টেক্সটের পরিবর্তে img ট্যাগটি রাখছি। আরও পরিষ্কার ধারণা পাওয়ার জন্য নীচের উদাহরণটি দেখুন:

<a href="#"><img src="image.jpg" alt="alternate text" /></a>

এখানে আমি হাইপারটেক্সট রেফারেন্স ট্যাগের পরিবর্তে কেবল ইমেজ ট্যাগটি রেখেছি। “#” এর জায়গায় আপনি আপনার ইমেজটি যেখানে লিঙ্ক করতে চান তা প্রতিস্থাপন করতে পারেন।

ওয়েব ডেভেলপমেন্টের সংজ্ঞা অনুযায়ী, এইচটিএমএল লিঙ্ক সাধারণত দুটি ধরণের হয়। এইগুলো হচ্ছে:

  • External link
  • Internal link

সহজ কথায়, External link বা বাহ্যিক লিঙ্ক হচ্ছে সেই লিঙ্ক যা অন্য কোনও ওয়েবসাইট ঠিকানা বা ডোমেইনকে নির্দেশ করে। তবে, অভ্যন্তরীণ লিঙ্ক বা Internal link একই ডোমেনের এক পৃষ্ঠা থেকে অন্য পৃষ্ঠায় নির্দেশ করা হয়ে থাকে।

১। External বা বাহ্যিক লিঙ্ক:

বাহ্যিক লিঙ্ক বা External লিঙ্কগুলো সাধারণত কোনও আলাদা ওয়েবসাইট বা ডোমেন নির্দেশ করে। এই ধরণের লিঙ্কগুলির দুটি বৈচিত্র রয়েছে:

  • ডুফলো লিংক: ডুফলো লিংক হচ্ছে একটি ওয়েব পৃষ্ঠা থেকে অন্য ওয়েব পৃষ্ঠায় সরাসরি লিঙ্ক করা। সার্চ ইঞ্জিন রোবট এই লিঙ্কগুলো অনুসরণ করে এবং র‌্যাঙ্ক সিগন্যাল পাঠায়। এই লিঙ্কগুলো কোনও ওয়েবসাইটের জন্য মূল্যবান এবং কোনও ওয়েবসাইটের কর্তৃত্ব এবং বিশ্বস্ততার নির্দেশক।
  • নোফলো লিংক: এই জাতীয় লিঙ্কগুলো rel = “nofollow” বৈশিষ্ট্য দ্বারা নির্দেশিত। এগুলো সার্চ ইঞ্জিন রোবট দ্বারা অনুসরণ করা হয় না এবং এ ধরণের লিঙ্ক সার্চ ইঞ্জিনে কোনও র‌্যাঙ্ক সংকেত পাঠায় না।

২। Internal বা অভ্যন্তরীণ লিঙ্ক:

বাহ্যিক লিঙ্কের মতো অভ্যন্তরীণ লিঙ্কেরও দুই ধরণের সংজ্ঞা আছে। একটি হচ্ছে একই ওয়েবসাইটের অন্য পৃষ্ঠায় লিঙ্ক করা এবং একটি পৃষ্ঠার বিভিন্ন বিভাগে লিঙ্ক করা। সাধারণত, সম্পর্কিত URL স্থানীয় পৃষ্ঠায় ব্যবহার করা হয়, যেমন নীচের উদাহরণটির মতো:

<a href="about-us.html">About Us</a>

কোনও পৃষ্ঠার একটি নির্দিষ্ট এইচটিএমএল সেকশন লিঙ্ক করতে, আমরা নির্দিষ্ট সেকশন নির্দেশ করতে <div> ট্যাগ ব্যবহার করতে পারি। এইচটিএমএল ডিভিশনের মাধ্যমে লিঙ্ক তৈরির একটি উদাহরণ এখানে দেওয়া হয়েছে:

<a href="#main-content">Skip to main content</a>
<div id="main-content"> Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. 
</div>

যখন কোনও ব্যবহারকারী এই লিঙ্কটিতে ক্লিক করেন, তখন সেই বিভাগটিতে স্ক্রোল করা হয়, যেখানে নির্দিষ্ট <div> টি অবস্থান করছে।

উপসংহার: 

আশা করি, আমি এখানে একটি এইচটিএমএল লিঙ্কের সমস্ত প্রয়োজনীয় বিষয়গুলো তুলে ধরেছি এবং এর মাধ্যমে আপনাকে এইচটিএমএল লিঙ্কের একটি সম্পূর্ণ ব্যবহার দেখাতে পেরেছি। আমার পরবর্তী টিউটোরিয়ালে, আমি আপনাকে সিএসএস ব্যবহার করে হাইপারলিঙ্ক কীভাবে স্টাইল করতে হবে তা দেখাবো। আজ আর নয়। নতুন আপডেটের জন্য সাথেই থাকুন। নিচের সাবস্ক্রিপশন ফরম ব্যবহার করে আমাদের সাপ্তাহিক নিউজলেটারে সাবস্ক্রাইব করতে পারেন।

ইমেইলে সাবস্ক্রাইব করতে ইমেইল ঠিকানা প্রদান করুনঃ

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.