Web Development tutorial in bangla part-9 :)-

 

শেষ টিউটোরিয়ালে, আমরা ফর্ম এবং ইনপুট ট্যাগগুলি নিয়ে আলোচনা করেছি। এখানে, আমরা ইনলাইন এবং ব্লক উপাদানগুলি কী তা বুঝতে যাচ্ছি। Tut9.html হিসাবে একটি নতুন ফাইল তৈরি করে এবং এইচটিএমএলের বেসিক বয়লারপ্লেট যুক্ত করে এই টিউটোরিয়ালটি শুরু করি। তারপরে <শিরোনাম> ট্যাগটিতে "ইনলাইন এবং ব্লক উপাদানসমূহ" হিসাবে শিরোনামটি রাখুন।

ইনলাইন উপাদানগুলি হ'ল উপাদানগুলি যা উপাদানগুলির প্রবাহ ভঙ্গ করার পরিবর্তে কেবলমাত্র উপাদান সংজ্ঞাযুক্ত ট্যাগগুলির দ্বারা সীমাবদ্ধ স্থান দখল করে। অন্যদিকে, ব্লক-স্তরের উপাদানগুলি তার মূল উপাদানটির পুরো স্থান গ্রহণ করে। আসুন এটি একটি উদাহরণ দিয়ে বুঝতে পারি-

 

আমরা যদি অনুচ্ছেদে ট্যাগটিতে কোনও পাঠ্য লিখি-

<p> এটি একটি অনুচ্ছেদ </ p>

<p> এটি একটি অনুচ্ছেদ </ p>

বা

<p> এটি একটি অনুচ্ছেদ </ p> <p> এটি একটি অনুচ্ছেদ </ p>

উপরের দুটি উদাহরণে, আমরা একই লাইনে নয় দুটি ভিন্ন লাইনে আউটপুট দেখতে পাব। আমরা উভয় পাঠ্যকে একই লাইনে চাই তবে তা হয় না। ভাবতে পারেন কেন?

কারণ অনুচ্ছেদ ট্যাগ একটি ব্লক উপাদান। ব্লক উপাদানটির অর্থ এটি একটি একক লাইনের সম্পূর্ণ প্রস্থ নেবে এবং অন্য কোনও সামগ্রী এতে ফিট করতে দেয় না। তবে, যদি আমরা <span> ট্যাগের মধ্যে উভয় পাঠ্য লিখি-

<স্প্যান> এটি একটি অনুচ্ছেদ </ span> <span> এটি একটি অনুচ্ছেদ </ span>

তারপরে আমরা দেখতে পাই যে উভয় পাঠ্যই একই লাইনে উপস্থিত হবে। কারণ <span> ট্যাগটি একটি ইনলাইন উপাদান। এটি একই লাইনের সমস্ত উপাদানকে অনুমতি দেয়।

এটি আরও বুঝতে, আমরা সীমানা প্রয়োগ করে সিএসএসের সাহায্য নিতে পারি। তবে, সীমান্তটি নিয়ে আপনার চিন্তার দরকার নেই কারণ এটি সিএসএসের একটি অংশ। আমি এটি কেবল উদাহরণের ক্ষেত্রে ব্যবহার করছি।

<p শৈলী = "সীমানা: 2px শক্ত, লাল;"> এটি একটি অনুচ্ছেদ </ p> <p শৈলী = "সীমানা: 2ox নীল নীল;"> এটি একটি অনুচ্ছেদ </ p>

<স্প্যান শৈলী = "সীমানা: 2px শক্ত লাল;"> এটি একটি স্প্যান </ span> <স্প্যান শৈলী = "সীমানা: 2px কঠিন লাল;"> এটি একটি স্প্যান </ span>

লাইভ সার্ভারে উপরের কোডটি পরীক্ষা করার পরে, আপনি ইনলাইন এবং ব্লক উপাদানগুলির মধ্যে প্রধান পার্থক্যটি জানতে পারবেন।

উপরের উদাহরণটি দেখায় যে কীভাবে ইনলাইন উপাদানগুলি কেবলমাত্র তার অংশের অংশ নেবে যখন ব্লক উপাদানটি লাইনের পুরো প্রস্থ গ্রহণ করবে। সিএসএসের মাধ্যমে বিভিন্ন রঙের সহায়তায় আপনি এটি আরও বুঝতে পারবেন। অ্যাঙ্কর <a> ট্যাগগুলিও একটি ইনলাইন উপাদানটির মতো আচরণ করে।

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

সুতরাং, আমি এখনও অবধি বিশ্বাস করি আপনি অবশ্যই ইনলাইন এবং ব্লক উপাদানগুলির মধ্যে প্রধান পার্থক্য বুঝতে পেরেছেন। এই সম্পূর্ণ ওয়েব ডেভেলপমেন্ট বুটক্যাম্পে আরও কিছু শিখতে কোর্সের সাথে থাকুন।