ট্যাব এবং ফাঁকা স্থান তৈরি করতে HTML এবং CSS ব্যবহার করুন

ব্রাউজার দ্বারা এইচটিএমএলে সাদা স্থান কিভাবে ব্যবহার করা হয় তা দেখুন

যদি আপনি একটি শুরু ওয়েব ডিজাইনার হন, তবে আপনি যে বিষয়গুলি প্রথম দিকে বুঝতে হবে সেগুলির মধ্যে একটি হল ওয়েব ওয়েবসাইজর দ্বারা একটি ওয়েবসাইটের হোয়াইট স্পেস ব্যবহার করা হয়।

দুর্ভাগ্যবশত, যেভাবে ব্রাউজারটি সাদা স্থান পরিচালনা করে, তা প্রথম দিকে খুব স্বজ্ঞাত নয়, বিশেষ করে যদি আপনি এইচটিএমএল এ আসেন এবং এটি শব্দ প্রসেসিং প্রোগ্রামে কিভাবে সাদা স্থান পরিচালনা করেন তা তুলনা করুন, যা আপনার সাথে আরও পরিচিত হতে পারে।

ওয়ার্ড প্রসেসিং সফটওয়্যারে, আপনি দস্তাবেজে প্রচুর পরিমাণে স্পেসিং বা ট্যাব যুক্ত করতে পারেন এবং এই ফাঁকটি নথির সামগ্রীর প্রদর্শনীতে প্রতিফলিত হবে। এই এইচটিএমএল বা ওয়েব পেজ সঙ্গে ক্ষেত্রে নয়। এইভাবে, কিভাবে সাদা স্থান, প্রকৃতপক্ষে, ওয়েব ব্রাউজার দ্বারা পরিচালিত হয় তা শিখতে খুবই গুরুত্বপূর্ণ।

প্রিন্ট ইন স্পেসিং

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

কেউ ট্যাব ব্যবহার করে কেন?

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

ওয়েব ডিজাইনে, কোডের অতিরিক্ত ফাঁকা অক্ষরের ব্যবহারটি কেবল সেই কোডটি পড়া সহজতর হবে। ওয়েব ডিজাইনার এবং ডেভেলপাররা প্রায়ই ট্যাবগুলি ইন্ডেন্ট কোডে ব্যবহার করে যাতে তারা দেখতে পারে যে কোন উপাদানের অন্যান্য উপাদানের শিশুরা - কিন্তু সেই ইন্ডেন্টগুলি পৃষ্ঠার ভিজ্যুয়াল লেআউটকে প্রভাবিত করে না। প্রয়োজনীয় ভিজ্যুয়াল লেআউট পরিবর্তনগুলির জন্য আপনাকে CSS (ক্যাসকেডিং স্টাইল শীট) চালু করতে হবে।

সিএসএস ব্যবহার করে এইচটিএমএল ট্যাব এবং স্পেসিং তৈরি করুন

আজকের ওয়েবসাইট গঠন এবং শৈলী একটি বিচ্ছেদ সঙ্গে নির্মিত হয়। একটি পৃষ্ঠার গঠন HTML দ্বারা পরিচালিত হয় যখন শৈলী CSS দ্বারা নির্দেশিত হয়। এর মানে হল যে স্পেসিং তৈরি করা বা একটি নির্দিষ্ট লেআউট অর্জন করার জন্য, আপনাকে CSS এ পরিবর্তন করা উচিত এবং HTML কোডে কেবল ফাঁকা অক্ষর যোগ করার চেষ্টা করা উচিত নয়।

আপনি টেক্সট কলাম তৈরি করতে ট্যাব ব্যবহার করার চেষ্টা করছেন, আপনি পরিবর্তে যে কলাম বিন্যাস পেতে সিএসএস সঙ্গে স্থাপিত হয়

উপাদান ব্যবহার করতে পারেন এই পজিশনটি CSS floats, পরম এবং আপেক্ষিক পজিশনিং, অথবা Flexbox বা CSS Grid এর মতো নতুন CSS বিন্যাস কৌশলগুলির মাধ্যমে করা যেতে পারে।

আপনি যদি ডেটা আউট করা হয় তাহলে ট্যাবুলার ডেটা ব্যবহার করা হয়, তবে আপনি যে ডাটা চান তা সারণিতে ব্যবহার করতে পারেন। টেবিলগুলি প্রায়ই ওয়েব ডিজাইনে খারাপ ধাঁধা পায় কারণ তারা অনেক বছর ধরে বিশুদ্ধ লেআউট সরঞ্জামগুলির মতো অপব্যবহার করেছিল, তবে আপনার সামগ্রীটিতে পূর্বে উল্লিখিত ট্যাবুলার ডেটা থাকলে টেবিলের সম্পূর্ণরূপে বৈধতা রয়েছে।

মার্জিন, প্যাডিং, এবং টেক্সট ইনডেন্ট

সিএসএস এর সাথে ব্যবধান তৈরির সবচেয়ে সাধারণ উপায় হল নিম্নলিখিত CSS স্টাইলগুলির মধ্যে একটি ব্যবহার:

উদাহরণস্বরূপ, আপনি নিম্নলিখিত CSS এর সাথে একটি ট্যাবের মতো অনুচ্ছেদের প্রথম রেখাটি ইন্ডেন্ট করতে পারেন (উল্লেখ্য যে আপনার অনুচ্ছেদে এটি "প্রথম" সংযুক্ত একটি ক্লাসের বৈশিষ্ট্য আছে):

পি। ফার্স্ট {
পাঠ্য ইন্ডেন্ট: 5 ইএম;
}

এই অনুচ্ছেদটি এখন প্রায় 5 টি অক্ষর নিয়ে ইন্ডেন্ট করা হবে।

আপনি একটি উপাদান এর উপরের, নীচে, বাম, বা ডান (বা ঐ দিকে সমন্বয়) ফাঁকাকরণ যোগ করতে CSS এ মার্জিন বা প্যাডিং বৈশিষ্ট্য ব্যবহার করতে পারেন। পরিশেষে, আপনি CSS এ বাঁক দ্বারা প্রয়োজনীয় কোনও ফাঁকা স্থান অর্জন করতে পারেন।

সিএসএস ব্যতীত একাধিক স্পেস পাঠানো মুভিং

আপনি যদি চান তবে আপনার পাঠ্যটি পূর্ববর্তী আইটেম থেকে একাধিক স্থান দূরে সরানোর জন্য, আপনি অ-ভাঙ্গা স্থান ব্যবহার করতে পারেন।

অ ভাঙা স্থান ব্যবহার করতে, আপনি কেবল & nbsp; যোগ করুন যতবার আপনার এইচটিএমএল মার্কআপে এটি প্রয়োজন

উদাহরণস্বরূপ, যদি আপনি আপনার শব্দটি পাঁচটি স্থান পরিবর্তন করতে চান, তবে আপনি শব্দটির আগে নিম্নলিখিতগুলি যোগ করতে পারেন।

আরও & nbsp; করুন & nbsp; & nbsp; & nbsp; & nbsp; করুন

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