ইমেজ প্লেসহোল্ডার – ওয়েব ডিজাইন টুল টিউটোরিয়াল – ১ম পর্ব

লিখেছেনঃ WebCode Institute | টি মন্তব্য | বিভাগঃ ওয়েব ডিজাইন

লেভেলঃ মিডিয়াম

পূর্ব ধারনাঃ এইচটিএমএল

টুলঃ প্লেসহোল্ড

ওয়েবসাইট ডিজাইন করার জন্য অনেক ইমেজ ব্যবহার করতে হয়। ওয়েবসাইটের কনটেন্ট অনুযায়ী ইমেজের সাইজ বিভিন্ন রকম হয়। তাই ওয়েবসাইট ডিজাইন করার জন্য আমরা বিভিন্ন সাইজের ইমেজ ব্যবহার করে থাকি। ইমেজ রিসাইজ করার জন্য আমার অনেক টুল ব্যবহার করে থাকি। তার মধ্যে এডবি ফটোশপ অন্যতম। এডবি ফটোশপ সফটওয়্যারটি অনেক ভারি হওয়ায় এটি ব্যবহার করে ইমেজ ক্রপ করা বা রিসাইজ করা অনেক সময়ের ব্যাপার।

এছাড়া আমরা যখন ক্লায়েন্টের জন্য ওয়েবসাইট ডিজাইন করি এবং ক্লায়েন্ট যদি সময় মত তার ওয়েবসাইটের জন্য ইমেজ না দেয় তখন ওয়েব ডিজাইনারকে বিকল্প ইমেজ ব্যবহার করতে হয়। এমন সময় ইমেজের বিকল্প যদি কিছু ব্যবহার করা যায় তাহলে কাজ খুব সহজে হয়ে যাবে।
প্লেসহোল্ড এমন একটি অনলাইন টুল যার মাধ্যমে যেকোন সাইজের ইমেজ আমরা দ্রুত ব্যবহার করতে পারি আমাদের যেকোন প্রোযেক্টে।

কিভাবে ব্যবহার করবেনঃ

প্লেসহোল্ড একটি অনলাইন টুল। তাই সাইটে ইমেজ প্রদর্শন করার জন্য ইন্টারনেটে সংযুক্ত থাকতে হবে।
সাইটে/এইচটিএমএল পেজে ইমেজ ব্যবহার করার জন্য আমরা <img src=””> ট্যাগ ব্যবহার করি এবং সোর্স এট্রিবিউটের (src=””) ভ্যালু হিসাবে ইমেজ পাথ এবং ইমেজ এড করি। যেমন <img src=”images/logo.png”> ।

প্লেসহোল্ড ব্যবহার করার ক্ষেত্রে সোর্সের ভ্যালু হিসাবে লিংক ব্যবহার করতে হবে। যেমনঃ

<img src=”http://placehold.it/350×150″>
এখানে সোর্সে প্রথমে প্লেসহোল্ড সাইটের লিংক দিতে হবে তারপর একটা ব্যাক স্লাশ দিয়ে যে সাইজের ইমেজ আমরা ব্যবহার করব সেই সাইজ দিব। এখানে width=35opx,  height=150px এবং width, height মধ্যে x (এক্স) দিতে হবে । এভাবে যেকোন সাইজের ইমেজ আপনার ওয়েবসাইটে এড করতে পারেন। স্কয়ার ইমেজের জন্য শুধু মাত্র একটা ভ্যালু ব্যবহার করলে হবে। এটি রেসপন্সিভ ওয়েবসাইটেও কাজ করবে।

ওয়েবকোড, webcode, palcehold.it

ইমেজের ভিতর টেক্সট এডঃ

ইমেজের ভিতর টেক্সট এড করার জন্য ইমেজ সাইজের পর & দিয়ে text= টেক্সট দিতে হবে।

যেমনঃ <img src=”http://placehold.it/350×150&text=WebCode Institute”>

ওয়েবকোড, webcode, palcehold.it

Background Color এবং Text Color:

ইমেজের ব্যাকগ্রাইন্ড কালার এড করার জন্য ইমেজ সাইজের পর ব্যাক স্লাশ দিয়ে ব্যাকগ্রাউন্ড কালার দিন এবং তারপর আর একটি স্লাশ দিয়ে টেক্সট কালার দিন।

যেমনঃ <img src=”http://placehold.it/350×200/ff000/ccc”>

ph3

রেসপন্সিভ ইমেজঃ

ইমেজ রেসপন্সিভ করতে হলে সিএসএস থেকে ইমেজের width:100% দিবেন এবং প্যরেন্ট ডিভে <div> max-width নির্দিষ্ট করে দিতে হবে।

এভাবে খুব সহজে ইমেজের বিকল্প হিসাবে প্লেসহোল্ড টুলটি ব্যবহার করতে পারেন।