কিভাবে HTML ইমেজ লিংক তৈরি করবেন

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

একটি div উপাদান তৈরি করুন। এটি আমাদের ইমেজ উপাদান, আমাদের অ্যাঙ্কর ট্যাগ এবং লিঙ্কটি বর্ণনা করতে আমরা ব্যবহার করতে চাই এমন অন্য কিছু ধরে রাখবে।
এরপর, একটি অ্যাঙ্কর ট্যাগ তৈরি করুন। ট্যাগগুলিতে হাইপারটেক্সট রেফারেন্স (href's) থাকে যা অন্য পৃষ্ঠায় একটি লিঙ্ক নির্দেশ করে। আপনি যে সাইট বা ফাইলে আপনার লিঙ্কটি যেতে চান তাতে href সেট করুন।

ওপেনিং এবং ক্লোজিং ট্যাগের মাঝখানে, আসুন একটি ট্যাগ তৈরি করি। মনে রাখবেন যে ছবি ট্যাগ স্ব-বন্ধ হয়. src নামে একটি বৈশিষ্ট্য যোগ করুন আপনি আপনার লিঙ্কের জন্য যে চিত্রটি ব্যবহার করছেন তার url বা পথ নির্দেশ করবে।

এমন কিছু তৈরি করুন যা চিত্রটিকে বর্ণনা করবে যাতে ব্যবহারকারী জানতে পারে এটি ক্লিকযোগ্য। এটি হতে পারে একটি <ক্যাপশন> ট্যাগ, একটি

ট্যাগ, একটি

উপাদান, একটি
ট্যাগ – আপনি যা চান তা হতে পারে।

একটি কার্যকরী নমুনা নীচের কোড সম্পাদকে রয়েছে। এটির সাথে খেলার জন্য অবশ্যই কিছু সময় নিন!

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Image Link</title>
   <style>
       div {
           width: 500px;
           display: flex;
           flex-flow: column wrap;
       }
       img {
           width: 100%;
       }
       caption {
           width: 100%;
           height: 50px;
       }
   </style>
</head>
<body>
   <div>
       <a href="https://www.goldengate.org/" target="_blank" referrerpolicy="no-referrer">
           <img src="https://images.unsplash.com/photo-1449034446853-66c86144b0ad?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80" alt="Golden Gate Bridge"  refer/>
       </a>
       <caption>
           An icon in the San Francisco skyline, the Golden Gate bridge shines in the twilight night sky. Click the image to learn more information about the Golden Gate bridge.
       </caption>
 
   </div>
</body>
</html>

একটি চূড়ান্ত নোট:এটি একটি <a> লাগাতে লোভনীয় শুধুমাত্র ক্যাপশনের চারপাশে - যেহেতু লিঙ্কটি উল্লেখ করছে। ব্যবহারকারীরা আশা করেছেন যে তারা যদি একটি ছবিতে ক্লিক করেন, লিঙ্কের গন্তব্যের সাথে একটি নতুন ট্যাব খুলবে (এটি টার্গেট=”_blank” সিনট্যাক্স করছে)। সুতরাং, <a> রাখুন লিঙ্কের চারপাশে ট্যাগ করুন এবং ছবি বর্ণনা করার জন্য পাঠ্যটি ছেড়ে দিন - অথবা <a> রাখুন টেক্সট এবং <img> উভয়ের চারপাশে ট্যাগ করুন . উভয় উপায়ই কার্যকর বিকল্প।

কিভাবে HTML ইমেজ লিংক তৈরি করবেন

উপাদান, একটি ট্যাগ – আপনি যা চান তা হতে পারে।

উপাদান, একটি
ট্যাগ – আপনি যা চান তা হতে পারে।