ওয়েবসাইট তাদের আগে আসা যে কোন যোগাযোগ মাধ্যমের অসদৃশ। আগের প্রধান মাধ্যম ফরম্যাটের মত ওয়েবসাইটগুলি যেমন, মুদ্রণ, রেডিও এবং এমনকি টেলিভিশন ছাড়াও ওয়েবসাইটগুলি সেট করা একটি প্রধান বিষয় হল " হাইপারলিঙ্ক " এর ধারণা।
হাইপারলিঙ্কগুলি, সাধারণত "লিংকস" হিসাবেও পরিচিত, ওয়েব কি তাই গতিশীল। অন্য প্রবন্ধ বা অন্য রিসোর্সের রেফারেন্স দিতে পারে এমন একটি মুদ্রণ প্রকাশনা থেকে ভিন্ন, ওয়েবসাইটগুলি এই লিঙ্কগুলিকে প্রকৃতপক্ষে অন্যান্য পৃষ্ঠা এবং সংস্থার দর্শক পাঠাতে ব্যবহার করতে পারে। অন্য কোনও প্রচার মাধ্যম এই কাজ করতে পারে না। আপনি রেডিওতে একটি বিজ্ঞাপন শুনতে বা টিভিতে দেখতে পারেন, কিন্তু এমন কোন হাইপারলিঙ্ক নেই যা আপনাকে সেই বিজ্ঞাপনগুলিতে কোম্পানিতে নিয়ে যেতে পারে যা ওয়েবসাইটটি সহজেই করতে পারে। লিংক সত্যিই একটি আশ্চর্যজনক যোগাযোগ এবং মিথষ্ক্রিয়া টুল হয়!
বেশিরভাগ সময়, একটি ওয়েবসাইটে পাওয়া লিঙ্কগুলি পাঠ্য সামগ্রী যা দর্শকদেরকে সেই একই সাইটের অন্যান্য পৃষ্ঠাগুলিতে নির্দেশ করে। একটি ওয়েবসাইট এর ন্যাভিগেশন অনুশীলনের মধ্যে টেক্সট লিঙ্ক একটি উদাহরণ কিন্তু লিঙ্ক টেক্সট ভিত্তিক করা প্রয়োজন হয় না। আপনি সহজেই আপনার ওয়েবসাইট ইমেজ লিঙ্ক করতে পারেন। আসুন দেখি কিভাবে এই কাজ করা হয়, কিছু দৃষ্টান্ত অনুসরণ করে যেখানে আপনি ইমেজ ভিত্তিক হাইপারলিঙ্ক ব্যবহার করতে চান।
একটি চিত্র লিঙ্ক কিভাবে
প্রথমে আপনার HTML ইমেজে ইমেজটি স্থাপন করতে হবে। চিত্র-ভিত্তিক লিঙ্কের একটি সাধারণ ব্যবহার হল সাইটের লোগো গ্রাফিক, যা তারপর সাইটের হোমপেজে লিঙ্ক করা হয়। আমাদের উদাহরণ কোড নীচে, আমরা ব্যবহার করা হয় ফাইলটি আমাদের লোগো জন্য একটি SVG । এটি একটি ভাল পছন্দ যেহেতু এটি আমাদের ইমেজকে বিভিন্ন রেজুলেশনের জন্য স্কেল করবে, সব সময় ছবির মান বজায় রাখা এবং একটি ছোট সামগ্রিক ফাইলের আকার।
এখানে কীভাবে আপনি আপনার ইমেজ HTML ডকুমেন্টে রাখবেন:
ইমেজ ট্যাগের চারপাশে, আপনি এখন নোঙ্গর লিংকটি যুক্ত করবেন, ছবিটির আগে নোঙ্গর উপাদানটি খোলার জন্য এবং চিত্রটির পরে নোঙ্গর বন্ধ করে দিবেন। এটি আপনি টেক্সট লিঙ্ক করবে কিভাবে অনুরূপ, শুধুমাত্র আপনি নোঙ্গর ট্যাগের সাথে একটি লিঙ্ক হতে চান শব্দ আবৃত করার পরিবর্তে, আপনি ইমেজ মোড়ানো। নীচের আমাদের উদাহরণে, আমরা আমাদের সাইটের হোমপেজে ফিরে যাচ্ছি, যা "index.html"।
আপনার পৃষ্ঠায় এই এইচটিএমএল যোগ করার সময়, নোঙ্গর ট্যাগ এবং ইমেজ ট্যাগ মধ্যে কোন স্পেস স্থাপন করবেন না। যদি আপনি করেন তবে কিছু ব্রাউজার ছবিটির পাশে একটু টিক্স যোগ করবে, যা অদ্ভুত দেখাবে।
লোগো ইমেজটি এখন একটি হোমপেজ বোতাম হিসেবে কাজ করবে, যা এই দিনগুলির একটি সুন্দর মান। লক্ষ্য করুন যে আমরা আমাদের ভিউয়ার প্রস্থ এবং উচ্চতা, যেমন কোন ভিউলেস স্টাইলগুলি অন্তর্ভুক্ত করি না, আমাদের HTML মার্কআপে। আমরা এই চাক্ষুষ শৈলীগুলিকে CSS এ ছেড়ে চলে যাব এবং এইচটিএমএল স্ট্রাকচার এবং সিএসএস স্টাইলের একটি পরিষ্কার বিচ্ছেদ বজায় রাখব।
একবার আপনি সিএসএস পেতে গেলে, এই লোগোটি গ্রাফিকে লক্ষ্য করার জন্য আপনি যে স্টাইলগুলি লিখেছেন তার মধ্যে ইমেজটি পাল্টাতে পারে, মাল্টি-ডিভাইস বন্ধুসুলভ ইমেজগুলির জন্য প্রতিক্রিয়াশীল শৈলী সহ ইমেজ / লিঙ্কে যেমন বা সীমানা বা CSS যুক্ত করতে চান এমন কোন ভিউগুলিও অন্তর্ভুক্ত থাকতে পারে। ছায়াছবি ড্রপ আপনি যদি আপনার সিএসএস স্টাইলের সাথে অতিরিক্ত "হুক" ব্যবহার করতে চান তবে আপনি আপনার ইমেজটি দিতে পারেন অথবা একটি ক্লাস অ্যাট্রিবিউট লিঙ্ক করতে পারেন।
চিত্র লিংকগুলির ক্ষেত্রে ব্যবহার করুন
তাই একটি ইমেজ লিঙ্ক যোগ করা বেশ সহজ। আমরা যেমন দেখেছি ঠিক তেমনি, আপনাকে অবশ্যই প্রয়োজনীয় নোঙ্গর ট্যাগগুলির সাথে ছবিটি মোড়ানো হবে। আপনার পরবর্তী প্রশ্ন হতে পারে "আপনি আসলে পূর্বের লোগো / হোমপৃষ্ঠা লিংকের পাশাপাশি অনুশীলনে কখন এটি করবেন?"
এখানে কিছু চিন্তা আছে:
- একটি গ্যালারিতে থাম্বনেল চিত্রগুলি যা ঐসব চিত্রের বড় সংস্করণগুলির সাথে যুক্ত।
- চিত্রগুলি যেগুলি ই-কমার্স ওয়েবসাইটের জন্য পণ্যের ছবিগুলির মতো বিষয়বস্তু প্রতিনিধিত্ব করে।
- টিজার ইমেজ এমন একটি ব্লগ আর্টিকেল বা প্রেস রিলিজের মতো অন্যান্য সামগ্রীগুলির অংশ, যা লোকেদের লক্ষ্য করে দেখায় যে সামগ্রী তাদের সম্পূর্ণ টপিকটি পড়ার জন্য ট্যাপ বা ক্লিক করার জন্য একটি টার্গেট এলাকা দেয়।
- আইকন ইমেজ যা নির্দিষ্ট কার্যকারিতা বা সাইটের মধ্যে পৃষ্ঠাগুলি সংযুক্ত করার জন্য বোতাম হিসাবে ব্যবহৃত হয়।
- সোশ্যাল মিডিয়া লিংকগুলি বিভিন্ন সোশ্যাল মিডিয়া সাইটগুলির স্বীকৃত লোগো ব্যবহার করে যা সেই সাইট বা কোম্পানির জন্য গুরুত্বপূর্ণ।
- ছবিগুলি নির্দিষ্ট কার্যকারিতাগুলির জন্য বোতাম হিসাবে ব্যবহৃত হয়, যেমন ফর্ম জমাগুলি (সেরা অনুশীলন নোট - ওয়েবসাইটের পারফরম্যান্সের দৃষ্টিকোণ থেকে, সিএসএস এর সাথে স্টাইল করা বাটনগুলি ইমেজ বাটনগুলির চেয়ে ভালো পছন্দ)।
চিত্র ব্যবহার করার সময় একটি অনুস্মারক
ছবিগুলি ওয়েবসাইটের সাফল্যের একটি গুরুত্বপূর্ণ ভূমিকা পালন করতে পারে। উপরে উল্লিখিত একটি উদাহরণ অন্যান্য সামগ্রী পাশাপাশি ইমেজ ব্যবহার করে যে বিষয়বস্তু মনোযোগ আঁকা এবং মানুষ এটি পড়তে পেতে।
চিত্রগুলি ব্যবহার করার সময় , আপনার প্রয়োজনের জন্য সঠিক চিত্রটি নির্বাচন করার বিষয়ে আপনার মনে রাখা উচিত, এতে সঠিক চিত্র বিষয়, ফর্ম্যাট এবং এটিও নিশ্চিত করা যায় যে আপনি যে ওয়েবসাইটগুলি ব্যবহার করছেন সেগুলি ওয়েবসাইটের বিতরণের জন্য সঠিকভাবে অপ্টিমাইজ করা আছে । এই ইমেজ যোগ করার জন্য এটি অনেক কাজ মত মনে হতে পারে, কিন্তু আয় এটি মূল্য! ছবি সত্যিই একটি সাইটের সাফল্যের জন্য এত যোগ করতে পারেন।
আপনার সাইটের যথাযথ চিত্রগুলি ব্যবহার করতে দ্বিধা করবেন না, এবং আপনার ইমেজগুলি কিছু বিষয়বস্তুকে আপনার বিষয়বস্তুতে যুক্ত করতে হলে সেই ইমেজগুলিকে লিঙ্ক করুন, তবে এই চিত্রটি সর্বোত্তম পদ্ধতিগুলি সম্পর্কেও সচেতন থাকুন এবং আপনার ওয়েব ডিজাইন কাজের মধ্যে এই গ্রাফিক্স / লিঙ্কটি সঠিকভাবে এবং দায়িত্বপূর্ণভাবে ব্যবহার করুন।