Skip to main content

কিভাবে এইচটিএমএল হোয়াইটস্পেস তৈরি করতে

HTML এ হোয়াইটস্পেস (জুন 2025)

HTML এ হোয়াইটস্পেস (জুন 2025)
Anonim

HTML এ উপাদানগুলির স্থান এবং শারীরিক বিচ্ছেদ তৈরি করা শুরুতে ওয়েব ডিজাইনারের জন্য বোঝা কঠিন হতে পারে। এটি হ'ল এইচটিএমএল একটি সম্পত্তি "হোয়াইটস্পেস পতন" হিসাবে পরিচিত কারণ আছে। আপনি যদি আপনার এইচটিএমএল কোডে 1 টি স্পেস বা 100 টি টাইপ করেন তবে ওয়েব ব্রাউজারটি স্বয়ংক্রিয়ভাবে সেই স্থানগুলিকে কেবল একটি একক স্পেসে ভেঙ্গে ফেলে। এটি মাইক্রোসফ্ট ওয়ার্ডের মতো একটি প্রোগ্রাম থেকে আলাদা, যা দস্তাবেজ নির্মাতাদের আলাদা শব্দ এবং সেই নথির অন্যান্য উপাদানগুলিতে একাধিক স্পেস যোগ করার অনুমতি দেয়। ওয়েবসাইট ডিজাইন স্পেসিং কিভাবে কাজ করে না।

সুতরাং, আপনি ওয়েব পেজে দেখানো HTML এ হোয়াইটস্পেসগুলি কীভাবে জুড়বেন? এই নিবন্ধটি বিভিন্ন উপায়ে কিছু পরীক্ষা করে।

সিএসএস সহ এইচটিএমএল স্পেস

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

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

এখানে আপনার সমস্ত অনুচ্ছেদের সামনে স্থান যোগ করার জন্য কীভাবে সিএসএস ব্যবহার করবেন তা একটি উদাহরণ। আপনার বহিরাগত বা অভ্যন্তরীণ স্টাইল শীট নিম্নলিখিত সিএসএস যোগ করুন:

পি {টেক্সট ইন্ডেন্ট: 3 এম;}

এইচটিএমএল স্পেসস: আপনার টেক্সট ভিতরে

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

পাঠ্যের একটি লাইনের ভিতরে পাঁচটি স্পেস কীভাবে যোগ করা যায় তা এখানে দেওয়া হল:

এই টেক্সটটি ভিতরে পাঁচটি অতিরিক্ত স্পেস আছে

এইচটিএমএল ব্যবহার করে:

এই টেক্সটটি ভিতরে পাঁচটি অতিরিক্ত স্পেস আছে

আপনি ব্যবহার করতে পারেন
অতিরিক্ত লাইন বিরতি যোগ করার জন্য ট্যাগ।

এই বাক্যটির শেষে পাঁচটি লাইন বিরতি রয়েছে


এইচটিএমএল মধ্যে স্থান কেন একটি খারাপ আইডিয়া

এই বিকল্পগুলি উভয়ই কাজ করে - অ-ভাঙা স্থানগুলি উপাদানটি আপনার পাঠ্যকে স্পেস যুক্ত করে এবং লাইন বিরতিগুলি উপরে বর্ণিত অনুচ্ছেদের নিচে ব্যবধান যোগ করবে - এটি আপনার ওয়েবপৃষ্ঠাতে ফাঁক তৈরি করার সেরা উপায় নয়। আপনার HTML এ এই উপাদানগুলিকে যুক্ত করার পদ্ধতিটি দৃশ্যমান শৈলী (CSS) থেকে একটি পৃষ্ঠার (HTML) কাঠামো পৃথক করার পরিবর্তে কোডটিতে চাক্ষুষ তথ্য যোগ করে। সর্বোত্তম অনুশীলনগুলি হ'ল ভবিষ্যতে এবং সামগ্রিক ফাইলের আকার এবং পৃষ্ঠার পারফরম্যান্সের আপডেটের স্বচ্ছন্দ সহ বেশ কয়েকটি কারণে পৃথক হওয়া উচিত।

আপনি যদি আপনার সমস্ত স্টাইল এবং ফাঁকা স্থান নির্দেশ করার জন্য বহিরাগত স্টাইল শীট ব্যবহার করেন তবে সমগ্র সাইটগুলির জন্য সেই শৈলীগুলি পরিবর্তন করা সহজ, কারণ আপনাকে কেবল সেই স্টাইল শীটটি আপডেট করতে হবে।

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

আপনার কোডে এই স্থানান্তরণ উপাদান যোগ করার পরিবর্তে, CSS ব্যবহার করুন।

পি {প্যাডিং-নীচে: 20px;}

সিএসএসের এক লাইন আপনার পৃষ্ঠার অনুচ্ছেদের অধীনে ব্যবধান যুক্ত করবে। আপনি যদি ভবিষ্যতে যে স্থানটি পরিবর্তন করতে চান তবে এই লাইনটি সম্পাদনা করুন (আপনার সমগ্র সাইটের কোড পরিবর্তে) এবং আপনি যেতে ভাল!

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