একটি নতুন ট্যাবে একটি লিঙ্ক খুলতে কিভাবে HTML ব্যবহার করবেন

ট্যাবগুলি দুর্দান্ত, তাই না? তারা আমাদের সকলের মাল্টিটাস্কারকে একই সময়ে একগুচ্ছ অনলাইন কাজ করতে দেয়।

ট্যাবগুলি এখন এতটাই সাধারণ যে, আপনি যখন কোনও লিঙ্কে ক্লিক করেন, সম্ভবত এটি একটি নতুন ট্যাবে খুলবে৷

আপনি যদি কখনও ভেবে থাকেন যে আপনার নিজের লিঙ্কগুলি দিয়ে কীভাবে এটি করবেন, আপনি সঠিক জায়গায় এসেছেন৷

অ্যাঙ্কর এলিমেন্ট

একটি ওয়েব পৃষ্ঠায় একটি লিঙ্ক তৈরি করতে, আপনাকে একটি অ্যাঙ্করে (<a>) একটি উপাদান (টেক্সট, একটি ছবি এবং আরও) মোড়ানো প্রয়োজন ) উপাদান এবং তার href সেট করুন আপনি যে URLটিতে লিঙ্ক করতে চান তার বৈশিষ্ট্য।

<p>Check out <a href="https://www.freecodecamp.org/">freeCodeCamp</a>.</p>

ফ্রিকোডক্যাম্প দেখুন৷

আপনি উপরের লিঙ্কে ক্লিক করলে, ব্রাউজার বর্তমান উইন্ডো বা ট্যাবে লিঙ্কটি খুলবে। এটি প্রতিটি ব্রাউজারে ডিফল্ট আচরণ৷

একটি নতুন ট্যাবে একটি লিঙ্ক খুলতে, আমাদের অ্যাঙ্কর উপাদানের অন্যান্য বৈশিষ্ট্যগুলির অন্যান্য বৈশিষ্ট্যগুলির কিছু দেখতে হবে৷

লক্ষ্য বৈশিষ্ট্য

এই বৈশিষ্ট্যটি ব্রাউজারকে বলে যে কীভাবে লিঙ্কটি খুলতে হয়।

একটি নতুন ট্যাবে একটি লিঙ্ক খুলতে, শুধু target সেট করুন৷ _blank-এর বৈশিষ্ট্য :

<p>Check out <a href="https://www.freecodecamp.org/" target="_blank">freeCodeCamp</a>.</p>

এখন যখন কেউ লিঙ্কটিতে ক্লিক করে, এটি একটি নতুন ট্যাবে বা সম্ভবত ব্যক্তির ব্রাউজার সেটিংসের উপর নির্ভর করে একটি নতুন উইন্ডো খুলবে৷

target="_blank" এর সাথে নিরাপত্তা সংক্রান্ত উদ্বেগ

আমি দৃঢ়ভাবে সুপারিশ করি যে আপনি সর্বদা rel="noreferrer noopener" যোগ করুন যখনই আপনি target ব্যবহার করেন তখন অ্যাঙ্কর এলিমেন্টে বৈশিষ্ট্য:

<p>Check out <a href="https://www.freecodecamp.org/" target="_blank" rel="noopener noreferrer">freeCodeCamp</a>.</p>

এর ফলে নিম্নলিখিত আউটপুট হয়:

ফ্রিকোডক্যাম্প দেখুন৷

rel বৈশিষ্ট্য আপনার পৃষ্ঠা এবং লিঙ্ক করা URL এর মধ্যে সম্পর্ক সেট করে। এটি noopener noreferrer এ সেট করা হচ্ছে ট্যাবনাবিং নামে পরিচিত এক ধরনের ফিশিং প্রতিরোধ করা।

ট্যাবনাবিং কি?

ট্যাবনাবিং, কখনও কখনও বিপরীত ট্যাবনাবিং বলা হয়, এটি একটি শোষণ যা ব্রাউজারের ডিফল্ট আচরণ target="_blank" ব্যবহার করে window.object এর মাধ্যমে আপনার পৃষ্ঠায় আংশিক অ্যাক্সেস পেতে API।

ট্যাবনাবিংয়ের মাধ্যমে, আপনি যে পৃষ্ঠায় লিঙ্ক করেন আপনার পৃষ্ঠাটিকে একটি নকল লগইন পৃষ্ঠায় পুনঃনির্দেশিত করতে পারে। বেশিরভাগ ব্যবহারকারীর জন্য এটি লক্ষ্য করা কঠিন হবে কারণ এইমাত্র খোলা ট্যাবটিতে ফোকাস থাকবে - আপনার পৃষ্ঠার সাথে আসল ট্যাব নয়৷

তারপর যখন একজন ব্যক্তি আপনার পৃষ্ঠার সাথে ট্যাবে ফিরে যান, তখন তারা পরিবর্তে নকল লগইন পৃষ্ঠাটি দেখতে পাবে এবং তাদের লগইন বিশদ লিখতে পারে৷

ট্যাবনাবিং কীভাবে কাজ করে এবং খারাপ অভিনেতারা শোষণের সাথে কী করতে পারে সে সম্পর্কে আপনি যদি আরও জানতে আগ্রহী হন, তাহলে অ্যালেক্স ইউমাশেভের নিবন্ধ এবং OWASP-এর এই নিবন্ধটি দেখুন।

আপনি যদি একটি নিরাপদ দেখতে চান কাজের উদাহরণ, শোষণ এবং rel সম্পর্কে আরও তথ্যের জন্য এই পৃষ্ঠাটি এবং এর GitHub রেপো দেখুন বৈশিষ্ট্য।

সারাংশে

একটি নতুন ট্যাবে একটি লিঙ্ক খুলতে HTML ব্যবহার করা সহজ৷ আপনার শুধু একটি অ্যাঙ্কর দরকার (<a> ) তিনটি গুরুত্বপূর্ণ বৈশিষ্ট্য সহ উপাদান:

1. href আপনি যে পৃষ্ঠার সাথে লিঙ্ক করতে চান তার URL-এ অ্যাট্রিবিউট সেট করুন
2. target বৈশিষ্ট্য _blank এ সেট করা হয়েছে , যা ব্রাউজারকে ব্রাউজারের সেটিংসের উপর নির্ভর করে একটি নতুন ট্যাব/উইন্ডোতে লিঙ্কটি খুলতে বলে
3. rel বৈশিষ্ট্য noreferrer noopener এ সেট করা হয়েছে আপনার লিঙ্ক করা পৃষ্ঠাগুলি থেকে সম্ভাব্য দূষিত আক্রমণ প্রতিরোধ করতে

আবার, এখানে একটি সম্পূর্ণ কার্যকরী উদাহরণ:

<p>Check out <a href="https://www.freecodecamp.org/" target="_blank" rel="noopener noreferrer">freeCodeCamp</a>.</p>

যার ফলে ব্রাউজারে নিম্নলিখিত আউটপুট পাওয়া যায়:

ফ্রিকোডক্যাম্প দেখুন।

পড়ার জন্য আবার ধন্যবাদ. শুভ কোডিং।