एचटीएमएल व्हाइटस्पेस कैसे बनाएं

सीएसएस के साथ एचटीएमएल में तत्वों की रिक्त स्थान और भौतिक पृथक्करण बनाएँ

HTML में तत्वों की रिक्त स्थान और भौतिक पृथक्करण बनाना प्रारंभिक वेब डिज़ाइनर के लिए समझना मुश्किल हो सकता है। ऐसा इसलिए है क्योंकि HTML में एक संपत्ति है जिसे "व्हाइटस्पेस पतन" कहा जाता है। चाहे आप अपने एचटीएमएल कोड में 1 स्पेस या 100 टाइप करते हैं, वेब ब्राउज़र स्वचालित रूप से उन रिक्त स्थान को केवल एक ही स्थान पर ढहता है। यह माइक्रोसॉफ़्ट वर्ड जैसे प्रोग्राम से अलग है, जो दस्तावेज़ निर्माता को अलग-अलग शब्दों और उस दस्तावेज़ के अन्य तत्वों को अलग करने के लिए कई रिक्त स्थान जोड़ने की अनुमति देता है।

ऐसा नहीं है कि वेबसाइट डिज़ाइन स्पेसिंग कैसे काम करता है।

तो, आप एचटीएमएल में व्हाइटस्पेस कैसे जोड़ते हैं जो वेब पेज पर दिखाई देता है? यह आलेख कुछ अलग-अलग तरीकों की जांच करता है।

सीएसएस के साथ एचटीएमएल में रिक्त स्थान

अपने एचटीएमएल में रिक्त स्थान जोड़ने का पसंदीदा तरीका कैस्केडिंग स्टाइल शीट्स (सीएसएस) के साथ है । किसी वेबपृष्ठ के किसी भी दृश्य पहलू को जोड़ने के लिए सीएसएस का उपयोग किया जाना चाहिए, और चूंकि रिक्ति एक पृष्ठ की दृश्य डिजाइन विशेषताओं का हिस्सा है, इसलिए सीएसएस वह जगह है जहां आप इसे करना चाहते हैं।

सीएसएस में, आप तत्वों के चारों ओर स्थान जोड़ने के लिए या तो मार्जिन या पैडिंग गुणों का उपयोग कर सकते हैं। इसके अतिरिक्त, टेक्स्ट-इंडेंट प्रॉपर्टी टेक्स्ट के सामने स्थान जोड़ती है, जैसे पैराग्राफ इंडेंट करना।

अपने सभी पैराग्राफ के सामने जगह जोड़ने के लिए सीएसएस का उपयोग कैसे करें इसका एक उदाहरण यहां दिया गया है। निम्नलिखित सीएसएस को अपनी बाहरी या आंतरिक स्टाइल शीट में जोड़ें:

पी {
टेक्स्ट इंडेंट: 3em;
}

एचटीएमएल में रिक्त स्थान: आपके पाठ के अंदर

यदि आप बस अपने टेक्स्ट में एक अतिरिक्त स्थान या दो जोड़ना चाहते हैं, तो आप गैर-ब्रेकिंग स्पेस का उपयोग कर सकते हैं।

यह चरित्र एक मानक अंतरिक्ष चरित्र की तरह कार्य करता है, केवल ब्राउज़र के अंदर नहीं गिरता है।

पाठ की एक पंक्ति के अंदर पांच रिक्त स्थान जोड़ने का एक उदाहरण यहां दिया गया है:

इस पाठ में इसके अंदर पांच अतिरिक्त रिक्त स्थान हैं

एचटीएमएल का उपयोग करता है:

इस पाठ में & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; इसके अंदर पांच अतिरिक्त रिक्त स्थान

अतिरिक्त लाइन ब्रेक जोड़ने के लिए आप टैग का भी उपयोग कर सकते हैं।

इस वाक्य के अंत में पांच लाइन ब्रेक हैं

एचटीएमएल में अंतर क्यों एक बुरा विचार है

हालांकि ये विकल्प दोनों काम करते हैं - गैर-ब्रेकिंग स्पेस तत्व वास्तव में आपके टेक्स्ट में अंतर जोड़ देगा और लाइन ब्रेक ऊपर दिखाए गए अनुच्छेद के नीचे अंतर जोड़ देगा - यह आपके वेबपृष्ठ में अंतर बनाने का सबसे अच्छा तरीका नहीं है। इन तत्वों को अपने एचटीएमएल में जोड़ना दृश्य शैलियों (सीएसएस) से किसी पृष्ठ (एचटीएमएल) की संरचना को अलग करने के बजाय कोड में दृश्य जानकारी जोड़ता है। सर्वोत्तम प्रथाओं का निर्देश है कि इन्हें कई कारणों से अलग होना चाहिए, जिसमें भविष्य में अद्यतन करने और समग्र फ़ाइल आकार और पृष्ठ प्रदर्शन शामिल हैं।

यदि आप अपनी सभी शैलियों और रिक्ति को निर्देशित करने के लिए बाहरी स्टाइल शीट का उपयोग करते हैं, तो पूरी साइट के लिए उन शैलियों को बदलना आसान है, क्योंकि आपको बस उस स्टाइल शीट को अपडेट करना होगा।

वाक्य के ऊपर पांच उदाहरणों के साथ वाक्य के ऊपर उदाहरण पर विचार करें। यदि आप प्रत्येक पैराग्राफ के नीचे रिक्ति की मात्रा चाहते थे, तो आपको अपनी संपूर्ण साइट में प्रत्येक पैराग्राफ में उस HTML कोड को जोड़ना होगा। यह एक अतिरिक्त मार्कअप की उचित मात्रा है जो आपके पृष्ठों को फहराएगी।

इसके अतिरिक्त, यदि आप सड़क का फैसला करते हैं कि यह अंतर बहुत अधिक या बहुत छोटा है, और आप इसे थोड़ा बदलना चाहते हैं, तो आपको अपनी पूरी वेबसाइट में प्रत्येक अनुच्छेद को संपादित करने की आवश्यकता होगी। नहीं धन्यवाद!

इन स्पेसिंग तत्वों को अपने कोड में जोड़ने के बजाय, सीएसएस का उपयोग करें।

पी {
पैडिंग-तल: 20 पीएक्स;
}

सीएसएस की एक पंक्ति आपके पृष्ठ के अनुच्छेदों के तहत अंतर जोड़ देगा। यदि आप भविष्य में उस अंतर को बदलना चाहते हैं, तो इस लाइन को संपादित करें (अपनी पूरी साइट के कोड के बजाय) और आप जाने के लिए अच्छे हैं!

अब, यदि आपको अपनी वेबसाइट के एक हिस्से में एक ही स्थान जोड़ने की आवश्यकता है, तो
टैग या एक गैर-ब्रेकिंग स्पेस का उपयोग करना दुनिया का अंत नहीं है, लेकिन आपको सावधान रहना होगा।

इन इनलाइन एचटीएमएल स्पेसिंग विकल्पों का उपयोग एक फिसलन ढलान हो सकता है। जबकि एक या दो आपकी साइट को चोट नहीं पहुंचा सकते हैं, यदि आप उस पथ को जारी रखते हैं, तो आप अपने पृष्ठों में समस्याएं पेश करेंगे। अंत में, आप एचटीएमएल स्पेसिंग के लिए सीएसएस में बदलना बेहतर कर रहे हैं, और अन्य सभी वेबपेज दृश्य जरूरतों को बेहतर बनाते हैं।