একটি ইমেজ চারপাশে টেক্সট মোড কোড প্রয়োজন? সাধারনত আপনি যখন একটি HTML পৃষ্ঠা তৈরি করেন, তখন সবকিছুই রৈখিকভাবে প্রবাহিত হয়, অর্থাত্ একটি ব্লক অন্য আরেকটি পরে সরাসরি। আমার পূর্ববর্তী পোস্টগুলি এইর একটি উদাহরণ, যেমন টেক্সট, তারপর ছবি, তারপর পাঠ্য ইত্যাদি।
মাঝে মাঝে আপনি নীচের পরিবর্তে একটি চিত্রের পাশে পাঠ্য অন্তর্ভুক্ত করতে চাইতে পারেন। এই ইমেজ চারপাশে টেক্সট মোড়কে বলা হয়। এইচটিএমএল এর সাহায্যে লেখাটি সহজভাবে সহজে লেখা যায় উল্লেখ্য, পাঠ্য মোছার জন্য আপনাকে CSS ব্যবহার করতে হবে না।
যাইহোক, এই দিন W3C এইচটিএমএল এর পরিবর্তে CSS ব্যবহার করার পরামর্শ দেয়। এই ধরনের কাজের জন্য
এইচটিএমএল ব্যবহার করে ছবির চারপাশে টেক্সট মোড়ন
আপনি যদি এটিকে ব্যবহার করতে চান তবে আপনি CSS ব্যবহার করতে পারেন। 1
আমাদের ওয়েবসাইটের সাথে যোগাযোগ করুন। তিনি বলেন, যে জন্য চূড়ান্ত মাপকাঠি, উচ্চতর সীমাবদ্ধতা আছে। দম্পতিরা সহকর্মী এবং জাঁকজমকপূর্ণ মাতৃভূমির সঙ্গে একটি বৃহত্তর মাতৃভূমির সঙ্গে, নিছক তিক্ততা। একটি স্বতন্ত্র বাণী কয়টি ব্যাগ ছবির ডান দিকে বরাবর টেক্সট মোড়ানো আছে যাতে, আপনি বামে ছবিটি সারিবদ্ধ করতে হবে:
<2>
/ s>
আমাদের ওয়েবসাইটের সাথে যোগাযোগ করুন। তিনি বলেন, যে জন্য চূড়ান্ত মাপকাঠি, উচ্চতর সীমাবদ্ধতা আছে। দম্পতিরা সহকর্মী এবং জাঁকজমকপূর্ণ মাতৃভূমির সঙ্গে একটি বৃহত্তর মাতৃভূমির সঙ্গে, নিছক তিক্ততা। একটি স্বতন্ত্র বাণী কয়টি ব্যাগ এটি আপনার জন্য এখনই প্রযোজ্য নয়।
<img itemprop="image" data-original="IMAGE URL" align="right" /><p>Your text goes here.</p>
এটা ঠিক! খুব সহজ অধিকার? আপনি সিএসএস ব্যবহার করতে চাইলে শুধুমাত্র একবার যদি আপনি ছবিগুলিতে মার্জিন যোগ করতে চান, যাতে টেক্সট এবং ইমেজ এর মধ্যে কিছু স্থান থাকে।
আপনি ছবিটি ব্যবহার করে একটি ছবিতে মার্জিন যোগ করতে পারেন নিম্নলিখিত সিএসএস স্টাইলিং কোড:
<img itemprop="image" data-original=”IMAGE URL” align=”left” style=”margin: 0px 10px 0px 0px;” /><p>Your text goes here.</p>
উপরের কোডটি ইমেজটির ডান দিকে 10 পিক্সেলের হোয়াইটস্পেস যোগ করার জন্য MARGIN CSS উপাদান ব্যবহার করে। যেহেতু আমরা চিত্রটি বামে রেখে দিয়েছি, তাই আমরা ডানদিকে সাদা জায়গা যোগ করতে চাই।
মূলত, চারটি নম্বরগুলি উপরের ডান বোতামের উপরে প্রতিনিধিত্ব করে। তাই আপনি যদি ডান-ডান প্রান্তের ছবিতে সাদা স্থান যোগ করতে চান, তাহলে আপনি এটি করতে পারবেন:
<img itemprop="image" data-original=”IMAGE URL” align=”right” style=”margin: 0px 0px 0px 10px;” /><p>Your text goes here.</p>
সুতরাং এই টাস্কটি সম্পাদন করতে HTML ব্যবহার করা মোটামুটি সহজ, কিন্তু একবার আবার, এটি প্রতিক্রিয়াশীল সাইটগুলির জন্য ভাল কাজ করে না।
CSS ব্যবহার করে ছবির চারপাশে টেক্সট মোড়ানো
একটি চিত্রের চারপাশে টেক্সট মোড করার সর্বোত্তম উপায় হল CSS ব্যবহার করা। এটি আপনাকে উপাদানগুলির অবস্থানের উপর আরও সূক্ষ্ম শস্য নিয়ন্ত্রণ প্রদান করে এবং আধুনিক কোডিং মানগুলির সাথে ভাল কাজ করে।
<img itemprop="image" data-original="IMAGE URL" alt="A photo" class="lazy left" />
যদিও আমি এইচটিএমএল উদাহরণে সরাসরি ইমেজ ট্যাগে সিএসএস অন্তর্ভুক্ত করেছি , সত্যিই আপনি আর যে আর কখনও করা উচিত পরিবর্তে, আপনার একটি স্টাইলশীট নামে একটি পৃথক ফাইল থাকা উচিত যা আপনার সমস্ত CSS কোড ধারণ করে।
আইএমজি ট্যাগে, আপনি কেবল ট্যাগের জন্য একটি শ্রেণী নির্ধারণ করুন এবং এটি একটি নাম দিন। আমার উদাহরণে, আমি বামেক্লাসটি নামিয়েছি। আমার স্টাইলশীটে, আমি যা করতে চাই তা হল নিম্নোক্ত কোডটি যোগ করা:
.left {
float: left;
padding: 0 10px 0 0;}
আপনি দেখতে পাচ্ছেন, আমি বাম বাম পাশের চিত্রের ডান দিকে 10px প্যাডিং যোগ করেছি । আমিও ফ্ল্যাটের সম্পত্তি ব্যবহার করে ছবিটির ডকুমেন্টের স্বাভাবিক প্রবাহটি সরানোর জন্য এবং প্যারেন্ট কন্টেইনারের বাম পাশে রাখলাম।
আপনি দেখতে পাচ্ছেন যে, এটি সব কোড যোগ করার চেয়েও অনেক ক্লিনার আইএমজি ট্যাগ নিজেই কাছে। এটি পরিচালনা করা আরও সহজ এবং আপনি আপনার ওয়েবপৃষ্ঠা চেহারা কাস্টমাইজ করার জন্য অনেক অনেক CSS বৈশিষ্ট্য ব্যবহার করতে পারেন। যদি আপনার কোনও প্রশ্ন থাকে, তাহলে মন্তব্য করতে দ্বিধা করবেন না। উপভোগ করুন!?