একটি HTML নথিতে একটি ব্লক-স্তর উপাদান (উদাঃ একটি ওয়েবপৃষ্ঠা) ক্রম অনুসারে ক্রমানুসারে প্রদর্শিত হয়। পৃষ্ঠাকে আরও আকর্ষণীয় মনে করার জন্য বা এর কার্যকারিতা উন্নত করার জন্য আপনাকে যাতে পরিবর্তন করা যায় সেগুলি পরিবর্তন করার জন্য আপনাকে চিত্রগুলি সহ ব্লক মোড়ানো দরকার, যাতে পৃষ্ঠার পাঠটি তার চারপাশে প্রবাহিত হয়।
ওয়েব পদে, এই প্রভাবটি "ভাসমান" ছবি হিসাবে পরিচিত। এই স্টাইলটি "ফ্লোট" এর জন্য CSS সম্পত্তির সাথে অর্জন করা হয়। এই সম্পত্তিটি পাঠ্যটিকে তার ডান দিকের বাম-সংলগ্ন চিত্রের চারপাশে প্রবাহিত করতে দেয়। বা তার বাম দিকে একটি ডান-সংলগ্ন ইমেজ কাছাকাছি।
এইচটিএমএল দিয়ে শুরু করুন
আপনাকে যা করতে হবে তা প্রথমটি হ'ল HTML এর সাথে কাজ করতে হবে। আমাদের উদাহরণের জন্য, আমরা পাঠ্যের একটি অনুচ্ছেদ লিখব এবং অনুচ্ছেদের শুরুতে একটি চিত্র যুক্ত করব (পাঠের আগে, কিন্তু খোলার পরে
ট্যাগ)। এখানে যে এইচটিএমএল মার্কআপ মত দেখাচ্ছে:
অনুচ্ছেদের টেক্সট এখানে যায়। এই উদাহরণে, আমাদের একটি হেডশট ছবির একটি চিত্র রয়েছে, তাই এই লেখাটি সম্ভবত সেই ব্যক্তির সম্পর্কে হতে পারে যার জন্য হেডশটটি রয়েছে।
ডিফল্টরূপে, আমাদের ওয়েবপৃষ্ঠাটি পাঠ্যের উপরের চিত্রের সাথে প্রদর্শন করবে, কারণ চিত্র HTML- এ ব্লক-স্তর উপাদানগুলি। এর মানে হল ব্রাউজার পূর্বনির্ধারিতভাবে চিত্র উপাদানটির আগে এবং পরে লাইন বিরতি প্রদর্শন করে। আমরা সিএসএস চালু করে এই ডিফল্ট চেহারা পরিবর্তন করতে হবে। প্রথম, তবে, আমরা আমাদের চিত্র উপাদান একটি বর্গ মান যোগ করা হবে। সেই ক্লাসটি "হুক" হিসাবে কাজ করবে যা আমরা পরে আমাদের CSS এ ব্যবহার করব।
অনুচ্ছেদের টেক্সট এখানে যায়। এই উদাহরণে, আমাদের একটি হেডশট ছবির একটি চিত্র রয়েছে, তাই এই লেখাটি সম্ভবত সেই ব্যক্তির সম্পর্কে হতে পারে যার জন্য হেডশটটি রয়েছে।
মনে রাখবেন যে "বাম" এর এই বর্গটি তার নিজস্ব কিছুই নয়। আমাদের জন্য আমাদের পছন্দসই শৈলী অর্জন করার জন্য, আমাদের পরবর্তী CSS ব্যবহার করতে হবে।
সিএসএস শৈলী
আমাদের এইচটিএমএল জায়গায় (আমাদের বর্গের বৈশিষ্ট্য "বাম" সহ) আমরা এখন সিএসএস চালু করতে পারি। আমরা আমাদের স্টাইলশীটে একটি নিয়ম যুক্ত করব যা সেই চিত্রটি ভাসিয়ে দেবে এবং এর পাশে একটু প্যাডিং যুক্ত করবে যাতে পাঠ্যটি চিত্রটির চারপাশে মোড়ানো হয় যা খুব ঘনিষ্ঠভাবে এটির বিরুদ্ধে ঘৃণা করে না। এখানে আপনি লিখতে পারেন এমন CSS:
বামে { ভাসা: বাম; প্যাডিং: 0 20px 20px 0;}
এই শৈলীটি বামদিকে সেই ছবিটি ভাসিয়ে দেয় এবং চিত্রটির ডান এবং নীচের দিকে একটু প্যাডিং (কিছু CSS শর্ট্যান্ড ব্যবহার করে) যুক্ত করে। যদি আপনি ব্রাউজারে এই HTML ধারণকারী পৃষ্ঠার পর্যালোচনা করেন, তবে চিত্রটি এখন বামে সংলগ্ন করা হবে এবং অনুচ্ছেদটির পাঠ্যটি দুইয়ের মধ্যে যথাযথ পরিমাণের ব্যবধানের সাথে ডানদিকে উপস্থিত হবে। আমরা ব্যবহৃত যে "বাম" ক্লাস মান নোট ইচ্ছাকৃত। আমরা এটি কিছু বলতে পারতাম কারণ "বাম" শব্দটির নিজস্ব কিছুই নেই। আপনি যে কোনও শব্দটি ব্যবহার করেন তা অবশ্যই এইচটিএমএল-এ একটি শ্রেণিবদ্ধ গুণাবলী থাকতে হবে যা প্রকৃত সিএসএস স্টাইলের সাথে কাজ করে যা আপনি দেখতে চান এমন দৃশ্যমান পরিবর্তনগুলিকে নির্দেশ করে। চিত্র উপাদানটি একটি শ্রেণিবদ্ধ বৈশিষ্ট্য প্রদান করার এবং তারপর একটি সাধারণ সিএসএস শৈলী ব্যবহার করে এই উপাদানটিকে ভাসিয়ে দেওয়ার এই পদ্ধতিটি হল "বামে সংলগ্ন চিত্র" চেহারাটি পূরণ করার একমাত্র উপায়। এছাড়াও আপনি চিত্রটির শ্রেণী মূল্যটি বন্ধ করতে এবং এটিতে আরো নির্দিষ্ট নির্বাচক লেখার মাধ্যমে এটি CSS এর সাথে স্টাইল করতে পারেন। উদাহরণস্বরূপ, আসুন একটি উদাহরণ দেখি যেখানে সেই চিত্রটি একটি "প্রধান সামগ্রী" শ্রেণী মানের সাথে একটি বিভাগের ভিতরে রয়েছে। এই ছবিটি স্টাইল করার জন্য, আপনি এই সিএসএস লিখতে পারেন: । মেইন কন্টেন্ট কন্টেন্ট IMG { ভাসা: বাম; প্যাডিং: 0 20px 20px 0;}
এই দৃশ্যকল্পতে, আমাদের চিত্রটিকে বামে সংলগ্ন করা হবে, পাঠ্যটি আগের মতোই ভাসমান হবে, তবে আমাদের মার্কআপে অতিরিক্ত শ্রেণী মান যোগ করার প্রয়োজন নেই। স্কেলে এটি করা একটি ছোট HTML ফাইল তৈরি করতে সহায়তা করতে পারে যা পরিচালনা করা সহজ হবে এবং কর্মক্ষমতা উন্নত করতে সহায়তা করতে পারে। অবশেষে, আপনি শৈলীগুলি সরাসরি আপনার HTML মার্কআপে যুক্ত করতে পারেন, এটির মতো:
এই পদ্ধতিটি "ইনলাইন শৈলী" বলা হয়। এটি যুক্তিযুক্ত নয় কারণ এটি একটি কাঠামোটির স্ট্রাকচারাল মার্কআপের শৈলীকে একত্র করে। ওয়েব সর্বোত্তম অনুশীলনগুলি একটি পৃষ্ঠার শৈলী এবং গঠন পৃথক থাকা উচিত তা নির্দেশ করে। আপনার পৃষ্ঠাটি তার লেআউট পরিবর্তন করতে এবং প্রতিক্রিয়াশীল ওয়েবসাইটের সাথে বিভিন্ন স্ক্রীন মাপ এবং ডিভাইসগুলি সন্ধান করার প্রয়োজন হলে এই বিচ্ছিন্নতা বিশেষত সহায়ক। এইচটিএমএল-এ সংযুক্ত করা পৃষ্ঠাটির স্টাইল থাকার কারণে মিডিয়া লেখকদের লেখার জন্য এটি আরো কঠিন হয়ে উঠবে যা বিভিন্ন স্ক্রীনের জন্য আপনার সাইটের চেহারাটি সামঞ্জস্য করবে। এই শৈলী অর্জন করার বিকল্প উপায়
অনুচ্ছেদের টেক্সট এখানে যায়। এই উদাহরণে, আমাদের একটি হেডশট ছবির একটি চিত্র রয়েছে, তাই এই লেখাটি সম্ভবত সেই ব্যক্তির সম্পর্কে হতে পারে যার জন্য হেডশটটি রয়েছে। ইনলাইন শৈলী এড়িয়ে চলুন
অনুচ্ছেদের টেক্সট এখানে যায়। এই উদাহরণে, আমাদের একটি হেডশট ছবির একটি চিত্র রয়েছে, তাই এই লেখাটি সম্ভবত সেই ব্যক্তির সম্পর্কে হতে পারে যার জন্য হেডশটটি রয়েছে।
