টেক্সটকে একটি ইমেজের চারপাশে র্যাপ করার কোড দরকার? সাধারণত যখন আপনি একটি HTML পেজ তৈরি করেন, সব কিছু লিনিয়ারলি ফ্লো করে, অর্থাৎ এক ব্লক সরাসরি অন্যের পরে। আমার সব আগের পোস্টগুলো এর উদাহরণ, অর্থাৎ টেক্সট, তারপর ছবি, তারপর টেক্সট, ইত্যাদি।
কখনো কখনো আপনি একটি ইমেজের পাশে টেক্সট রাখতে চান নিচে না। এটিকে টেক্সটকে ইমেজের চারপাশে র্যাপ করা বলা হয়। HTML ব্যবহার করে টেক্সট র্যাপ করা আসলে কাফি সহজ। লক্ষ্য করুন যে আপনাকে এই কাজের জন্য CSS ব্যবহার করতে হয় না।
তবে, আজকাল W3C এই ধরনের কাজের জন্য HTML-এর বদলে CSS ব্যবহার করার পরামর্শ দেয়। আমি দুটো পদ্ধতি নিচে উল্লেখ করব, কিন্তু আপনি যদি পারেন, তবে CSS ব্যবহার করা ভালো কারণ এটি রেসপন্সিভ ওয়েবসাইট ডিজাইন জন্য আরও উপযোগী।
HTML ব্যবহার করে টেক্সটকে ইমেজের চারপাশে র্যাপ করুন
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis adipiscing tincidunt sagittis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam a felis vitae augue lobortis dictum. Curabitur molestie posuere laoreet. Ut pellentesque nunc in lorem egestas non imperdiet enim congue.
টেক্সটকে ইমেজের ডান পাশে র্যাপ করার জন্য, আপনাকে ছবিটি বামে অ্যালাইন করতে হবে:
<img src="IMAGE URL" align="left" /><p>Your text goes here.</p>
আপনি যদি টেক্সট বামে এবং ছবিটি দুর ডানে দেখাতে চান, তবে align প্যারামিটারটিকে "right"に変更 করুন।
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis adipiscing tincidunt sagittis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam a felis vitae augue lobortis dictum. Curabitur molestie posuere laoreet. Ut pellentesque nunc in lorem egestas non imperdiet enim congue.
<img src="IMAGE URL" align="right" /><p>Your text goes here.</p>
এটেই শেষ! খুব সহজ ঠিক? একমাত্র সময় আপনি CSS ব্যবহার করতে চাবেন যখন আপনি ছবিতে মার্জিন যোগ করতে চাবেন, যাতে টেক্সট এবং ইমেজের মাঝে কিছু স্পেস থাকে।
আপনি নিচের CSS স্টাইলিং কোড ব্যবহার করে ছবিতে মার্জিন যোগ করতে পারেন:
<img src=”IMAGE URL” align=”left” style=”margin: 0px 10px 0px 0px;” /><p>Your text goes here.</p>
উপরের কোড MARGIN CSS এলিমেন্ট ব্যবহার করে ইমেজের ডান পাশে ১০ পিক্সেল হোয়াইটস্পেস যোগ করে। যেহেতু আমরা ইমেজকে বামে অ্যালাইন করেছি, আমরা হোয়াইটস্পেস ডান পাশে যোগ করতে চাই।
বেসিক্যালি, চারটি নম্বরTOP RIGHT BOTTOM LEFT উপস্থাপন করে। তাই আপনি যদি ডান-অ্যালাইন করা ইমেজে হোয়াইটস্পেস যোগ করতে চান, তবে আপনি এইরকম করবেন:
<img src=”IMAGE URL” align=”right” style=”margin: 0px 0px 0px 10px;” /><p>Your text goes here.</p>
তাই HTML ব্যবহার করে এই টাস্কটি করা কাফি সহজ, কিন্তু একবার আবার, এটি রেসপন্সিভ সাইটের জন্য ভালো কাজ নাও করতে পারে।
CSS ব্যবহার করে টেক্সটকে ইমেজের চারপাশে র্যাপ করুন
টেক্সটকে ইমেজের চারপাশে র্যাপ করার ভালো উপায় হলো CSS ব্যবহার করা। এটি এলিমেন্টগুলো পজিশন করার ওপর আরও ফাইন গ্রেইন কন্ট্রোল দেয় এবং আধুনিক কোডিং স্ট্যান্ডার্ডের সাথে ভালো কাজ করে।
<img src="IMAGE URL" alt="A photo" class="left" />
যদিও আমি HTML উদাহরণে ইমেজ ট্যাগে সরাসরি CSS অন্তর্ভুক্ত করেছিলাম, আপনাকে এখন আর এটা করা উচিত না। বরং, আপনার একটি আলাদা ফাইল থাকা উচিত যাকে স্টাইলশীট বলা হয় যা আপনার সব CSS কোড ধারণ করে।
IMG ট্যাগে, আপনি সিম্পলি ট্যাগটিকে একটি ক্লাস অ্যাসাইন করুন এবং একটা নাম দিন। আমার উদাহরণে, আমি ক্লাসকে নাম দিয়েছি left। আমার স্টাইলশীতে, আমাকে শুধু নিচের কোড যোগ করতে হবে:
.left { float: left; padding: 0 10px 0 0;}
আপনি দেখতে পাচ্ছেন, আমি বাম-অ্যালাইন করা ইমেজের ডান পাশে ১০px প্যাডিং যোগ করেছি। আমি float প্রপার্টি ব্যবহার করেছি ডকুমেন্টের সাধারণ ফ্লো থেকে ইমেজকে বের করে পেরেন্ট কন্টেইনারের বাম পাশে রাখতে।
আপনি দেখতে পাচ্ছেন, এটি IMG ট্যাগে সেটা সारा কোড যোগ করার চেয়ে অনেক ক্লিন। এটি পরিচালনাও সহজ এবং আপনি আপনার ওয়েবপেজের লুক কাস্টোমাইজ করতে আরও অনেক CSS প্রপার্টি ব্যবহার করতে পারেন। আপনার কোনো প্রশ্ন থাকলে, বেঝিঝক কমেন্ট করুন। উপভোগ করুন!
