HTML में रिक्त स्थान बनाना और तत्वों का भौतिक पृथक्करण शुरुआत वेब डिज़ाइनर के लिए समझना मुश्किल हो सकता है। यह है क्योंकि एचटीएमएल एक संपत्ति है जिसे "व्हाट्सएप पतन" कहा जाता है। चाहे आप अपने HTML कोड में 1 स्पेस टाइप करें या 100, वेब ब्राउज़र स्वचालित रूप से उन स्पेस को केवल एक सिंगल स्पेस में छोटा कर देता है। यह एक प्रोग्राम से अलग है जैसे माइक्रोसॉफ्ट वर्ड, जो दस्तावेज़ निर्माताओं को उस दस्तावेज़ के शब्दों और अन्य तत्वों को अलग करने के लिए कई स्थान जोड़ने की अनुमति देता है। ऐसा नहीं है कि वेबसाइट डिज़ाइन रिक्ति कैसे काम करती है।
तो, आप HTML में व्हाइटस्पेस कैसे जोड़ते हैं जो इस पर दिखाई देता है show आपके द्वारा बनाया गया वेब पेज? यह लेख कुछ अलग तरीकों की जांच करता है।
CSS के साथ HTML में स्पेस
अपने HTML में रिक्त स्थान जोड़ने का पसंदीदा तरीका है कैस्केडिंग स्टाइल शीट्स (सीएसएस). CSS का उपयोग वेबपेज के किसी भी दृश्य पहलू को जोड़ने के लिए किया जाना चाहिए, और चूंकि रिक्ति एक पृष्ठ की दृश्य डिजाइन विशेषताओं का हिस्सा है, CSS वह जगह है जहाँ आप इसे करना चाहते हैं।
CSS में, आप तत्वों के चारों ओर स्थान जोड़ने के लिए या तो मार्जिन या पैडिंग गुणों का उपयोग कर सकते हैं। इसके अतिरिक्त, टेक्स्ट-इंडेंट प्रॉपर्टी टेक्स्ट के सामने स्पेस जोड़ती है, जैसे इंडेंटिंग पैराग्राफ के लिए।
अपने सभी अनुच्छेदों के सामने स्थान जोड़ने के लिए सीएसएस का उपयोग करने का एक उदाहरण यहां दिया गया है। निम्नलिखित सीएसएस को अपने में जोड़ें बाहरी या अंदर का शैली पत्रक:
पी {
टेक्स्ट इंडेंट: 3em;
}
आपके टेक्स्ट के अंदर HTML में रिक्तियाँ
यदि आप अपने टेक्स्ट में केवल एक या दो अतिरिक्त स्थान जोड़ना चाहते हैं, तो आप नॉन-ब्रेकिंग स्पेस का उपयोग कर सकते हैं। यह कैरेक्टर एक मानक स्पेस कैरेक्टर की तरह ही काम करता है, केवल यह ब्राउजर के अंदर नहीं गिरता।
टेक्स्ट की एक पंक्ति के अंदर पांच रिक्त स्थान जोड़ने का एक उदाहरण यहां दिया गया है:
इस पाठ में इसके अंदर पाँच अतिरिक्त स्थान हैं
एचटीएमएल का उपयोग करता है:
इस पाठ में इसके अंदर पाँच अतिरिक्त स्थान हैं
आप use का भी उपयोग कर सकते हैं
अतिरिक्त लाइन ब्रेक जोड़ने के लिए टैग।
इस वाक्य के अंत में पाँच पंक्ति विराम हैं
HTML में रिक्ति क्यों एक बुरा विचार है
हालांकि ये विकल्प दोनों काम करते हैं - गैर-ब्रेकिंग स्पेस तत्व वास्तव में आपके टेक्स्ट और लाइन में स्पेसिंग जोड़ देगा ब्रेक ऊपर दिखाए गए पैराग्राफ के नीचे रिक्ति जोड़ देगा - यह आपके में रिक्ति बनाने का सबसे अच्छा तरीका नहीं है वेब पृष्ठ। इन तत्वों को अपने HTML में जोड़ने से पृष्ठ की संरचना (HTML) को दृश्य शैलियों (CSS) से अलग करने के बजाय कोड में दृश्य जानकारी जुड़ जाती है। सर्वोत्तम अभ्यास यह निर्देश देते हैं कि ये कई कारणों से अलग होने चाहिए, जिसमें भविष्य में अद्यतन करने में आसानी और समग्र फ़ाइल आकार और पृष्ठ प्रदर्शन.
यदि आप अपनी सभी शैलियों और रिक्ति को निर्धारित करने के लिए बाहरी स्टाइल शीट का उपयोग करते हैं, तो पूरी साइट के लिए उन शैलियों को बदलना आसान है, क्योंकि आपको बस उस एक स्टाइल शीट को अपडेट करना होगा।
पाँच के साथ वाक्य के ऊपर के उदाहरण पर विचार करें
इसके अंत में टैग। यदि आप चाहते हैं कि प्रत्येक अनुच्छेद के निचले भाग में इतनी रिक्ति हो, तो आपको अपनी संपूर्ण साइट के प्रत्येक अनुच्छेद में उस HTML कोड को जोड़ना होगा। यह एक उचित मात्रा में अतिरिक्त मार्कअप है जो आपके पृष्ठों को फूला देगा। इसके अतिरिक्त, यदि आप यह तय करते हैं कि यह अंतर बहुत अधिक या बहुत कम है, और आप इसे थोड़ा बदलना चाहते हैं, तो आपको अपनी पूरी वेबसाइट के प्रत्येक अनुच्छेद को संपादित करना होगा। नहीं धन्यवाद!
इन रिक्ति तत्वों को अपने कोड में जोड़ने के बजाय, CSS का उपयोग करें।
पी {
पैडिंग-बॉटम: 20px;
}
CSS की वह एक लाइन आपके पेज के पैराग्राफ के नीचे स्पेसिंग जोड़ देगी। यदि आप भविष्य में उस रिक्ति को बदलना चाहते हैं, तो इस एक पंक्ति को संपादित करें (अपनी पूरी साइट के कोड के बजाय) और आप जाने के लिए तैयार हैं!
अब, यदि आपको a. का उपयोग करके अपनी वेबसाइट के एक भाग में एक स्थान जोड़ने की आवश्यकता है
टैग या एक भी नॉन-ब्रेकिंग स्पेस दुनिया का अंत नहीं है, लेकिन आपको सावधान रहने की जरूरत है। इन इनलाइन एचटीएमएल स्पेसिंग विकल्पों का उपयोग करना एक फिसलन ढलान हो सकता है। जबकि एक या दो आपकी साइट को नुकसान नहीं पहुंचा सकते हैं, अगर आप उस रास्ते को जारी रखते हैं, तो आप अपने पृष्ठों में समस्याएं पेश करेंगे। अंत में, आप HTML स्पेसिंग और अन्य सभी वेबपेज विज़ुअल आवश्यकताओं के लिए CSS की ओर रुख करना बेहतर समझते हैं।