চিত্রের চারপাশে পাঠ্য মোড়ানোর জন্য HTML কোড

একটি ছবির চারপাশে পাঠ্য মোড়ানো কোড প্রয়োজন? সাধারণত আপনি যখন একটি HTML পৃষ্ঠা তৈরি করেন, তখন সবকিছু রৈখিকভাবে প্রবাহিত হয়, যার অর্থ একের পর এক ব্লক। আমার আগের সব পোস্টই এর উদাহরণ, যেমন টেক্সট, তারপর ছবি, তারপর টেক্সট ইত্যাদি।

কখনও কখনও আপনি নীচের পরিবর্তে একটি চিত্রের পাশে পাঠ্য অন্তর্ভুক্ত করতে চাইতে পারেন। একে বলা হয় ছবির চারপাশে টেক্সট মোড়ানো। এইচটিএমএল ব্যবহার করে পাঠ্য মোড়ানো আসলে মোটামুটি সহজ। মনে রাখবেন যে টেক্সট মোড়ানোর জন্য আপনাকে CSS ব্যবহার করতে হবে না।

যাইহোক, আজকাল W3C এই ধরনের কাজের জন্য HTML এর পরিবর্তে CSS ব্যবহার করার পরামর্শ দেয়। আমি নীচে উভয় পদ্ধতিই উল্লেখ করব, তবে আপনি যদি পারেন তবে CSS ব্যবহার করা ভাল কারণ এটি প্রতিক্রিয়াশীল ওয়েবসাইট ডিজাইনের সাথে আরও মানিয়ে নিতে পারে।

এইচটিএমএল ব্যবহার করে চিত্রের চারপাশে পাঠ্য মোড়ানো

চিত্রের চারপাশে পাঠ্য মোড়ানোর জন্য HTML কোড

Lorem ipsum dolor sit amet, consectetur adipiscing elit. গ্রাভিডা এনিম ফাউস ডিক্টম, quis ultricies mauris posuere quis. ডুইস অ্যাডিপিসিং টিনসিডেন্ট সাগিটিস। সহ সামাজিক ন্যাটোক পেনাটিবাস এবং ম্যাগনিস ডিস পার্টুরিয়েন্ট মন্টেস, নতুন হাস্যকর মুস। আলিকুম একটি ফেলিস ভাইটা আগু লবোর্টিস ডিক্টাম। ছত্রভঙ্গি করা হয়. Ut pellentesque nunc in lorem egestas non imperdiet enim congue.

ছবির ডান পাশে টেক্সট মোড়ানোর জন্য, আপনাকে ছবিটিকে বাম দিকে সারিবদ্ধ করতে হবে:

<img src="IMAGE URL" align="left" /><p>Your text goes here.</p>

আপনি যদি পাঠ্যটি বাম দিকে এবং চিত্রটি ডানদিকে উপস্থিত হতে চান তবে কেবলমাত্র সারিবদ্ধ প্যারামিটারটিকে "ডানদিকে" পরিবর্তন করুন৷

চিত্রের চারপাশে পাঠ্য মোড়ানোর জন্য HTML কোড

<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>

উপরের কোডটি চিত্রের ডানদিকে 10 পিক্সেল সাদা স্থান যোগ করতে MARGIN CSS উপাদান ব্যবহার করে। যেহেতু আমরা ছবিটি বামে সারিবদ্ধ করেছি, আমরা ডানদিকে সাদা স্থান যোগ করতে চাই।

মূলত, চারটি সংখ্যা উপরের ডান নীচে বাম প্রতিনিধিত্ব করে। তাই আপনি যদি একটি ডান-সারিবদ্ধ ছবিতে সাদা স্থান যোগ করতে চান, তাহলে আপনি এটি করবেন:

<img src=”IMAGE URL” align=”right” style=”margin: 0px 0px 0px 10px;” /><p>Your text goes here.</p>

তাই এই কাজটি সম্পাদন করার জন্য HTML ব্যবহার করা মোটামুটি সহজ, কিন্তু আবারও, এটি প্রতিক্রিয়াশীল সাইটগুলির জন্য ভাল কাজ নাও করতে পারে৷

সিএসএস ব্যবহার করে চিত্রের চারপাশে পাঠ্য মোড়ানো

একটি চিত্রের চারপাশে পাঠ্য মোড়ানোর আরও ভাল উপায় হল CSS ব্যবহার করা। এটি আপনাকে উপাদানগুলির অবস্থানের উপর আরও সূক্ষ্ম শস্য নিয়ন্ত্রণ দেয় এবং আধুনিক কোডিং মানগুলির সাথে আরও ভাল কাজ করে৷

<img src="IMAGE URL" alt="A photo" class="left" />

যদিও আমি এইচটিএমএল উদাহরণে ইমেজ ট্যাগের মধ্যে সরাসরি CSS অন্তর্ভুক্ত করেছি, আপনার সত্যিই এটি আর করা উচিত নয়। পরিবর্তে, আপনার কাছে স্টাইলশীট নামে একটি পৃথক ফাইল থাকা উচিত যাতে আপনার সমস্ত CSS কোড থাকে।

IMG ট্যাগে, আপনি ট্যাগটিতে একটি ক্লাস বরাদ্দ করুন এবং এটির একটি নাম দিন। আমার উদাহরণে, আমি ক্লাসটির নাম বাম করেছি . আমার স্টাইলশীটে, আমাকে যা করতে হবে তা হল নিম্নলিখিত কোড যোগ করুন:

.left {
 float: left;
 padding: 0 10px 0 0;}

আপনি দেখতে পাচ্ছেন, আমি বাম-সারিবদ্ধ চিত্রের ডানদিকে 10px প্যাডিং যোগ করেছি। আমি ফ্লোট প্রপার্টি ব্যবহার করে ইমেজটিকে ডকুমেন্টের স্বাভাবিক প্রবাহের বাইরে নিয়ে গিয়ে প্যারেন্ট কন্টেইনারের বাম দিকে রেখেছি।

আপনি দেখতে পাচ্ছেন, এটি আইএমজি ট্যাগে সমস্ত কোড যুক্ত করার চেয়ে অনেক বেশি পরিষ্কার। এটি পরিচালনা করাও সহজ এবং আপনি আপনার ওয়েবপৃষ্ঠার চেহারা কাস্টমাইজ করতে অনেক বেশি CSS বৈশিষ্ট্য ব্যবহার করতে পারেন। আপনার যদি কোন প্রশ্ন থাকে, মন্তব্য করতে দ্বিধা বোধ করুন. উপভোগ করুন!