ইমেজ যেকোনো ওয়েব পেজের কমন কম্পোনেন্ট। সেগুলো একটি অন্য পেজে লিংক তৈরি করার একটি চমৎকার উপায়ও। অ্যাঙ্কর ট্যাগকে href অ্যাট্রিবিউটের সাথে এবং ইমেজ ট্যাগকে কম্বাইন করে, আমরা একটি ইমেজ তৈরি করতে পারি যা দুটি পেজের মাঝপথে একটি লিংক হিসেবে কাজ করে। আপনি নিচের ধাপগুলো ফলো করে এটি সম্পন্ন করতে পারেন:
- একটি div এলিমেন্ট তৈরি করুন। এটি আমাদের ইমেজ এলিমেন্ট, আমাদের অ্যাঙ্কর ট্যাগ এবং যা ভাবemos সেটি ব্যবহার করে লিংক বর্ণনা করতে পারি ধারণ করবে।
- পরবর্তী, একটি অ্যাঙ্কর ট্যাগ তৈরি করুন।
<a>ট্যাগের হাইপারটেক্সট রেফারেন্স (href’s) থাকে যা একটি লিংককে অন্য পেজে পয়েন্ট করে। href কে সেট করুন যেই সাইট বা ফাইল আপনি আপনার লিংককে পাঠাতে চান। - ওপেনিং এবং ক্লোজিং
<a>ট্যাগের মাঝপথে, চলুন একটি<img>ট্যাগ তৈরি করি। মনে রাখবেন যে ইমেজ ট্যাগ সেলফ-ক্লোজিং। একটি অ্যাট্রিবিউট যাকে src বলা হয় যোগ করুন যেটি আপনি আপনার লিংকের জন্য ব্যবহার করছেন সেই ইমেজের url বা পাথকে পয়েন্ট করবে। - কিছু তৈরি করুন যা ইমেজকে বর্ণনা করবে যাতে ইউজার বুঝতে পারে সেটি ক্লিকযোগ্য। এটি হতে পারে
<caption>ট্যাগ,<div>ট্যাগ,<h2>এলিমেন্ট,<p>ট্যাগ—যे কনো কিছু।
নিচের কোড এডিটরে একটি ওয়ার্কিং স্যাম্পল আছে। নিশ্চিত করে সেটির সাথে কিছুক্ষণ খেলুন!
<!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> রাখা চাইতে লাগে—কারণ সেটি সেটি লিংকটি রেফার করছে। ইউজাররা এক্সপেক্ট করছে যে যদি সে একটি পিকচারে ক্লিক করে, তবে একটি নতুন ট্যাব খুলবে লিংক ডেস্টিনেশনের সাথে (এটিই target=”_blank” সিন্ট্যাক্স করছে)। তাই, <a> ট্যাগ লিংককে ঘেরে রাখুন এবং টেক্সটকে ছেড়ে দিন পিকচার বর্ণনা করার জন্য—অথবা <a> ট্যাগ দুটোই (<img> এবং টেক্সট) ঘেরে রাখুন। দুভাবেই viable অপশন।
