সিএসএস এর সাথে এইচটিএমএল-এর মৌলিক উপাদান এবং ফিজিকাল বিভাজক তৈরি করুন
এইচটিএমএল এর উপাদানের এবং ফিজিক্যাল বিভাজাকে তৈরি করা শুরু করা ওয়েব ডিজাইনারের জন্য বোঝা কঠিন হতে পারে। এটি হল কারণ এইচটিএমএল একটি সম্পত্তি হিসাবে পরিচিত "হোয়াইটস্পেস পতন।" আপনি আপনার এইচটিএমএল কোডে 1 টি স্থান বা 100 টাইপ করেন কিনা, ওয়েব ব্রাউজার স্বয়ংক্রিয়ভাবে শুধুমাত্র একটি স্পেসের নিচে অবস্থান করে। এটি মাইক্রোসফ্ট ওয়ার্ডের মত একটি প্রোগ্রাম থেকে আলাদা, যা ডকুমেন্ট সৃষ্টিকর্তাকে একাধিক শূণ্যস্থানগুলিকে শব্দ এবং অন্যান্য নথির আলাদা করার অনুমতি দেয়।
এই ওয়েবসাইট ডিজাইন স্পেসিং কাজ করে না কিভাবে।
তাই, আপনি এইচটিএমএলতে হোয়াইটস্পেস কিভাবে যুক্ত করবেন যে ওয়েব পেজে দেখা যাবে ? এই নিবন্ধটি বিভিন্ন উপায় কিছু পরীক্ষা করে।
সিএসএস এর সাথে এইচটিএমএল স্পেস
আপনার এইচটিএমএল-এ স্পেস যুক্ত করার পছন্দের উপায় হল ক্যাসকেডিং স্টাইল শীটস (CSS) । CSS ওয়েবপৃষ্ঠার কোন দৃশ্যমান দিকগুলি জুড়তে ব্যবহার করা উচিত এবং যেহেতু স্পেসটি একটি পৃষ্ঠার ভিজ্যুয়াল ডিজাইন বৈশিষ্ট্যের অংশ, CSS হল যেখানে আপনি এটি করতে চান।
CSS এ, আপনি উপাদানের চারপাশে স্থান জুড়তে মার্জিন বা প্যাডিংয়ের বৈশিষ্ট্যগুলি ব্যবহার করতে পারেন। উপরন্তু, টেক্সট ইন্ডেন্ট সম্পত্তি টেক্সট সামনে সামনে স্থান দেয়, যেমন অনুচ্ছেদের indenting জন্য হিসাবে
এখানে আপনার অনুচ্ছেদের সামনে স্থান যোগ করার জন্য CSS ব্যবহার করার একটি উদাহরণ। আপনার বহিরাগত বা অভ্যন্তরীণ শৈলী শীট নিম্নলিখিত CSS যুক্ত করুন:
পি {
পাঠ্য ইন্ডেন্ট: 3ম;
}
এইচটিএমএল এর স্পেসগুলি: আপনার পাঠের ভিতরে
আপনি যদি আপনার পাঠ্যে অতিরিক্ত স্থান বা দুটি যোগ করতে চান, তবে আপনি অ-ব্রেকিং স্থান ব্যবহার করতে পারেন।
এই অক্ষর একটি মান স্পেস অক্ষরের মতো কাজ করে, কেবল এটি ব্রাউজারের ভিতরে ঢুকতে পারে না।
এখানে পাঠ্যের একটি রেখার ভিতরে পাঁচটি স্থান যুক্ত করার একটি উদাহরণ এখানে রয়েছে:
এই টেক্সট এর ভিতরে পাঁচটি অতিরিক্ত স্থান আছে
এইচটিএমএল ব্যবহার করে:
এই পাঠ্যাংশটি & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; এটি ভিতরে পাঁচটি অতিরিক্ত স্থান
আপনি অতিরিক্ত লাইন বিরতি যোগ করতে
ট্যাগ ব্যবহার করতে পারেন।
এই বাক্যটির শেষে পাঁচটি লাইন বিভাজক রয়েছে
কেন এইচটিএমএল এ স্পেসিং একটি খারাপ আইডিয়া
এই বিকল্পগুলি উভয়ই কাজ করে - অ-ব্রেকিং স্পেস উপাদান প্রকৃতপক্ষে আপনার পাঠ্যে স্পেস যোগ করবে এবং লাইন বিরতি উপরে দেখানো অনুচ্ছেদের নীচে স্পেস যোগ করবে - এটি আপনার ওয়েবপৃষ্ঠাতে ফাঁকিং তৈরির সেরা উপায় নয়। আপনার HTML এ এই উপাদানগুলি যোগ করার ফলে ভিজুয়াল স্টাইল (CSS) থেকে একটি পৃষ্ঠা (এইচটিএমএল) এর গঠনকে পৃথক করার পরিবর্তে কোডে দৃশ্যমান তথ্য যোগ করা হয়। সেরা অভ্যাসগুলি নির্দেশ করে যে ভবিষ্যতে এবং সামগ্রিক ফাইলের আকার এবং পৃষ্ঠার পারফরম্যান্স আপডেট করার সুবিধার্থে এইগুলি বেশ কয়েকটি কারণের জন্য আলাদা হওয়া উচিত।
যদি আপনি একটি বহিরাগত স্টাইল শীট ব্যবহার করে আপনার সব শৈলী এবং স্পেসিং নির্দেশ করে, তাহলে সম্পূর্ণ সাইট জন্য যারা শৈলী পরিবর্তন করা সহজ, আপনি কেবল যে এক শৈলী শীট আপডেট করতে হবে
এটি শেষে শেষে পাঁচটি ট্যাগ সঙ্গে বাক্য উপরে উদাহরণ বিবেচনা করুন। যদি আপনি চান যে প্রতিটি অনুচ্ছেদের নীচের অংশে থাকা স্পেসিংয়ের পরিমাণ, তাহলে আপনাকে আপনার সমগ্র সাইটের প্রতিটি অনুচ্ছেদে এই HTML কোডটি যোগ করতে হবে। এটি অতিরিক্ত মার্কআপের একটি ন্যায্য পরিমাণ যা আপনার পৃষ্ঠাগুলিকে ফুঁড়ে দেবে।
উপরন্তু, যদি আপনি রাস্তাটি নির্ধারণ করেন যে এই স্থানটি খুব বেশী বা খুব কম, এবং আপনি এটি একটু পরিবর্তন করতে চান, তাহলে আপনাকে আপনার সম্পূর্ণ ওয়েবসাইটে প্রতিটি একক অনুচ্ছেদটি সম্পাদনা করতে হবে। না, ধন্যবাদ!
আপনার ফোস্কাগুলিকে আপনার কোডে যোগ করার পরিবর্তে, CSS ব্যবহার করুন।
পি {
প্যাডিং-নীচে: 20px;
}
যে CSS এর একটি লাইন আপনার পৃষ্ঠার অনুচ্ছেদের অধীনে স্পেস যোগ করবে। যদি আপনি ভবিষ্যতে যে স্পেসিং পরিবর্তন করতে চান, এই এক লাইনটি সম্পাদনা করুন (পরিবর্তে আপনার পুরো সাইটের কোড) এবং আপনি যেতে ভাল!
এখন, যদি আপনি আপনার ওয়েবসাইটের এক অংশে একটি
ট্যাগ বা একক অ ভেঙে যাওয়া জায়গা ব্যবহার করে একটি একক স্পেস যুক্ত করতে চান তবে বিশ্বের শেষ নয়, তবে আপনাকে সতর্কতা অবলম্বন করতে হবে।
এই ইনলাইন এইচটিএমএল স্পেসিং বিকল্পগুলি ব্যবহার করে একটি পিচ্ছিল ঢাল হতে পারে। যদিও এক বা দুইটি আপনার সাইটের ক্ষতি করতে পারে না, যদি আপনি সেই পথটি অব্যাহত রাখেন, তবে আপনি আপনার পৃষ্ঠাগুলিতে সমস্যাগুলির সূচনা করবেন। শেষ পর্যন্ত, আপনি এইচটিএমএল স্পেসিং এর জন্য সিএসএস এর দিকে চেয়ে ভাল এবং অন্য সব ওয়েব পেজ ভিজুয়ালের প্রয়োজনগুলি