একাধিক নন-ব্রেকিং স্পেস (“ ”) এর পরিবর্তে ট্যাব স্পেস?

Ekadhika Nana Brekim Spesa Nbsp Era Paribarte Tyaba Spesa



ওয়েব ডেভেলপমেন্টে, এইচটিএমএল ডকুমেন্টে স্পেস যোগ করা হয় “   ” সত্তা কোড যা নন-ব্রেকিং স্পেস হিসাবেও উল্লেখ করা হয়। কিছু ক্ষেত্রে, নথিতে একাধিক নন-ব্রেকিং স্পেস যোগ করা, যেমন ট্যাব স্পেস প্রয়োজন। অতএব, একাধিক ' ' সত্তা কোডগুলি নথির কোডের ক্রম এবং পরিচ্ছন্নতাকে প্রভাবিত করতে পারে।

এই সমস্যাগুলি মোকাবেলা করার জন্য, HTML নথিতে একাধিক নন-ব্রেকিং স্পেস অন্তর্ভুক্ত করার আরও কয়েকটি উপায় রয়েছে, যেমন ' <প্রে> ', ' ' উপাদান, CSS ' মার্জিন-বাম ', ' প্যাডিং-বাম ” বৈশিষ্ট্য, এবং আরো অনেক কিছু।

এই গবেষণা আপনাকে শেখাবে:







প্রথমত, আমরা একটি উদাহরণের মধ্য দিয়ে হেঁটে যাবো যা প্রয়োগ করে '   HTML নথিতে স্পেস যোগ করতে। তারপরে, ট্যাব স্পেস যোগ করার জন্য বিভিন্ন পদ্ধতি প্রদর্শনের জন্য ধীরে ধীরে চিত্রগুলি দিয়ে যান।



কিভাবে ' ' ব্যবহার করে স্পেস যোগ করবেন HTML এ সত্তা কোড?

ব্যবহার করে স্পেস যোগ করতে '   HTML পৃষ্ঠায়, প্রদত্ত পদক্ষেপগুলি অনুসরণ করুন:



  • একটি div উপাদান যোগ করুন এবং এটি একটি ক্লাস বরাদ্দ করুন ' নিবন্ধ
  • এর পরে, একটি '

    শিরোনামের জন্য উপাদান।

  • তারপর, যোগ করুন '

    একটি অনুচ্ছেদ যোগ করার জন্য উপাদান। অনুচ্ছেদের শুরুতে, সত্তা কোড নির্দেশ করে স্পেস যোগ করা হয় “   ”:

< div ক্লাস = 'নিবন্ধ' >
< h2 > জ্ঞানই শক্তি < / h2 >
< পি >     জ্ঞানই শক্তি মানে একজন শিক্ষিত মানুষ জ্ঞানের শক্তির মাধ্যমে তার জীবনের উপর সম্পূর্ণ নিয়ন্ত্রণ রাখে। < / পি >
< / div >

এটি দেখা যায় যে অনুচ্ছেদের শুরুতে স্থানগুলি সফলভাবে যোগ করা হয়েছে:





কিভাবে HTML “” এলিমেন্ট ব্যবহার করে ট্যাব স্পেস যোগ করবেন?

এইচটিএমএল ' ” একটি ইনলাইন উপাদান যা একটি নথির একটি অংশ চিহ্নিত করতে ব্যবহৃত হয়। চলমান উদাহরণে, আমরা 'এর সাথে উপাদান যোগ করেছি ট্যাব 'আইডি। এই উপাদানটি স্থান তৈরি করতে CSS এ স্টাইল করা হয়েছে:



< div ক্লাস = 'নিবন্ধ' >
< h2 >জ্ঞানই শক্তি< / h2 >
< পি > < স্প্যান আইডি = 'ট্যাব' < / স্প্যান > জ্ঞানই শক্তি মানে একজন শিক্ষিত মানুষ জ্ঞানের মাধ্যমে তার জীবনের উপর সম্পূর্ণ নিয়ন্ত্রণ রাখে এর শক্তি।


শৈলী 'নিবন্ধ' বিভাগ

প্রবন্ধ {
মার্জিন: স্বয়ংক্রিয়;
প্রস্থ : 400px;
প্যাডিং: 10px;
}

দ্য ' প্রবন্ধ 'এ অ্যাক্সেস করতে ব্যবহৃত হয়'

” ট্যাগ, যা তারপর নিম্নলিখিত বৈশিষ্ট্যগুলির সাথে প্রয়োগ করা হয়:

  • ' প্রস্থ ' সম্পত্তি উপাদানের প্রস্থ নির্ধারণ করে।
  • ' মার্জিন ' সম্পত্তি উপাদানের উচ্চতা নির্ধারণ করে।
  • ' প্যাডিং ” উপাদানের বিষয়বস্তুর চারপাশে স্থান তৈরি করে।

স্টাইল 'ট্যাব' আইডি

#ট্যাব {
প্যাডিং-বাম: 8px;
}

দ্য ' #ট্যাব 'এক্সেস' ট্যাব উপাদানটির আইডি এবং প্রয়োগ করুন ' প্যাডিং-বাম 'এর উপর সম্পত্তি।

আউটপুট

কিভাবে HTML “
” এলিমেন্ট ব্যবহার করে ট্যাব স্পেস যোগ করবেন?

দ্য ' <প্রে> ” উপাদান প্রাক-ফরম্যাট করা পাঠ্যকে সংজ্ঞায়িত করে।

 উপাদানের মধ্যে পাঠ্যটি ওয়েব পৃষ্ঠায় প্রদর্শিত হয় যেমন আছে।

প্রথমে HTML পৃষ্ঠা তৈরি করে উদাহরণটি দেখুন:

  • যুক্ত করুন '

    ডকুমেন্টে লেভেল দুই-এর শিরোনাম সেট করতে উপাদান।

  • তারপর, যোগ করুন ' <প্রে> ট্যাগ করুন, এবং পছন্দসই বিন্যাস সহ বিষয়বস্তু নির্দিষ্ট করুন:
< h2 >এইচটিএমএল প্রি ট্যাগ< / h2 >
< পূর্ব >
ফাংশন পণ্য ফাংশন ( p1, p2 ) {
ফেরত p1 * p2;
}
< / পূর্ব >

আউটপুট

কিভাবে CSS “মার্জিন-বাম” প্রপার্টি ব্যবহার করে ট্যাব স্পেস যোগ করবেন?

CSS ব্যবহার করে ট্যাব স্পেস যোগ করতে “ মার্জিন-বাম 'সম্পত্তি, প্রদত্ত পদ্ধতি অনুসরণ করুন:

  • প্রথমে, নথিতে একটি ডিভ উপাদান অন্তর্ভুক্ত করুন এবং এটিকে একটি ক্লাস বরাদ্দ করুন “ ছবি
  • এই div উপাদানের ভিতরে, ক্লাসের সাথে আরও দুটি div উপাদান যোগ করুন “ img-1 ' এবং ' img-2 'যথাক্রমে।
  • এই দুটি div উপাদানগুলির প্রতিটিতে এমন চিত্র রয়েছে যা ' ব্যবহার করে নির্দিষ্ট করা হয়েছে ট্যাগ
  • এইগুলো ' ' ট্যাগ ' এর সাথে যুক্ত src ' এবং ' প্রস্থ ” গুণাবলী। 'src' অ্যাট্রিবিউটটি ছবির URL নির্দিষ্ট করে এবং 'প্রস্থ' অ্যাট্রিবিউটটি ছবির প্রস্থকে সামঞ্জস্য করে।

এখানে উপরে আলোচিত দৃশ্যের HTML কোড আছে:

< div ক্লাস = 'ছবি' >
< div ক্লাস = 'img-1' >
< img src = '/spring-images/marguerite-flower.jpg' প্রস্থ = '250' >
< / div >
< div ক্লাস = 'img-2' >
< img src = '/spring-images/flower-ga8f105f1d_1920.jpg' প্রস্থ = '250' >
< / div >
< / div >

এইচটিএমএল পেজটি দেখতে এরকম হবে:

'এ একাধিক স্পেস যোগ করতে চলুন CSS বিভাগের দিকে এগিয়ে যাই' img-2 ” একাধিক নন-ব্রেকিং স্পেস ব্যবহার না করে ক্লাস।

শৈলী 'ছবি' ডিভ

.ছবি {
প্রস্থ : 500px;
মার্জিন: স্বয়ংক্রিয়;
}

দ্য ' .ছবি এইচটিএমএল ডিভ অ্যাক্সেস করতে ব্যবহার করা হয় যেটিতে ' ছবি 'শ্রেণী। উপরে বর্ণিত বৈশিষ্ট্যগুলির ব্যাখ্যা নিম্নরূপ:

  • ' প্রস্থ ' সম্পত্তি উপাদানের প্রস্থ নির্ধারণ করে।
  • ' মার্জিন ' সম্পত্তি উপাদানটির চারপাশে স্থান নির্ধারণ করে।

স্টাইল 'img-2' div
ব্যবহার করে div উপাদান অ্যাক্সেস করুন ' .img-2 ”:

.img- 2 {
মার্জিন-বাম: 30px;
}

দ্য ' মার্জিন-বাম 'একটি সহ সম্পত্তি' 30px 'মানটি এইচটিএমএল ডিভ এলিমেন্টে প্রয়োগ করা হয় যার ক্লাস আছে' img-2 ” এই বৈশিষ্ট্যটি উপাদানের বাম দিকে 30px স্থান যোগ করবে।

এখানে, ফলাফল দেখায় যে দ্বিতীয় চিত্রটি শুরুতে কিছু স্থান দিয়ে প্রয়োগ করা হয়েছে:

আমরা একাধিক নন-ব্রেকিং স্পেস ব্যবহার করার পরিবর্তে ট্যাব স্পেস যোগ করার বিষয়ে বিস্তারিত বলেছি “  

উপসংহার

HTML এ, '   ” সত্তা কোডটি সাধারণত নথিতে নন-ব্রেকিং স্পেস যোগ করতে ব্যবহার করা হয়। এই সত্তা কোডটি একাধিকবার ব্যবহার করা এড়াতে, একটি নথিতে ট্যাব স্থান যোগ করার অন্যান্য উপায় রয়েছে৷ এই পদ্ধতিগুলির মধ্যে রয়েছে HTML এর ব্যবহার <প্রে> ', ' 'উপাদান,' মার্জিন-বাম 'সম্পত্তি, এবং আরও অনেক কিছু। এই ব্লগটি একাধিক ' ' যোগ করার পরিবর্তে HTML নথিতে ট্যাব স্পেস যোগ করতে সাহায্য করে এমন কয়েকটি উপায় উল্লেখ করেছে। সত্তা কোড