एचटीएमएल में सफेद स्पेस को ब्राउज़र द्वारा कैसा व्यवहार किया जाता है, इस पर एक नज़र डालें
यदि आप एक शुरुआती वेब डिज़ाइनर हैं, तो आपको कई चीजों में से एक को समझना होगा कि साइट के कोड में श्वेत स्थान वेब ब्राउज़र द्वारा प्रबंधित किया जाता है।
दुर्भाग्यवश, जिस तरह से ब्राउज़र ने सफेद स्थान को संभाला है, वह पहले बहुत सहज नहीं है, खासकर अगर आप एचटीएमएल में आते हैं और इसकी तुलना इसकी तुलना करते हैं कि वर्ड प्रोसेसिंग प्रोग्राम्स में श्वेत स्थान कैसे संभाला जाता है, जिसे आप अधिक परिचित कर सकते हैं।
वर्ड प्रोसेसिंग सॉफ़्टवेयर में, आप दस्तावेज़ में बहुत से अंतर या टैब जोड़ सकते हैं और यह अंतर दस्तावेज़ की सामग्री के प्रदर्शन में दिखाई देगा। एचटीएमएल या वेब पृष्ठों के साथ यह मामला नहीं है। इस प्रकार, सीखना कि कैसे सफेद जगह है, वास्तव में, वेब ब्राउज़र द्वारा संभाला जाता है बहुत महत्वपूर्ण है।
प्रिंट में अंतर
वर्ड प्रोसेसिंग सॉफ़्टवेयर में, तीन प्राथमिक सफेद स्पेस वर्ण अंतरिक्ष, टैब और कैरिज रिटर्न होते हैं। इनमें से प्रत्येक कार्य एक अलग तरीके से है, लेकिन एचटीएमएल में, ब्राउज़र उन्हें सभी को अनिवार्य रूप से प्रस्तुत करते हैं। चाहे आप अपने एचटीएमएल मार्कअप में एक स्पेस या 100 रिक्त स्थान रखें, या अपने स्पेसिंग को टैब और कैरिज रिटर्न के साथ मिलाएं, इन सभी को ब्राउजर द्वारा पृष्ठ प्रदान किए जाने पर एक स्थान पर संकुचित किया जाएगा। वेब डिज़ाइन शब्दावली में, इसे सफेद अंतरिक्ष पतन के रूप में जाना जाता है। आप वेब पेज में व्हाइटस्पेस जोड़ने के लिए इन विशिष्ट स्पेसिंग कुंजियों का उपयोग नहीं कर सकते हैं क्योंकि ब्राउजर में ब्राउज़र में रेंडर किए जाने पर ब्राउज़र केवल एक ही स्थान पर कई रिक्त स्थान को ध्वस्त कर देता है,
कोई टैब का उपयोग क्यों करता है?
आम तौर पर, जब लोग किसी टेक्स्ट दस्तावेज़ में टैब का उपयोग करते हैं, तो वे लेआउट कारणों से या पाठ को किसी निश्चित स्थान पर जाने या किसी अन्य तत्व से निश्चित दूरी तक पहुंचने के लिए उपयोग कर रहे हैं। वेब डिज़ाइन में, आप उन दृश्य शैलियों या लेआउट आवश्यकताओं को प्राप्त करने के लिए उन उपरोक्त अंतरिक्ष वर्णों का उपयोग नहीं कर सकते हैं।
वेब डिज़ाइन में, कोड में अतिरिक्त रिक्ति वर्णों का उपयोग पूरी तरह से उस कोड को पढ़ने में आसानी के लिए होगा। वेब डिज़ाइनर और डेवलपर्स अक्सर इंडेंट कोड में टैब का उपयोग करते हैं ताकि वे देख सकें कि कौन से तत्व अन्य तत्वों के बच्चे हैं - लेकिन वे इंडेंट पृष्ठ के दृश्य लेआउट को प्रभावित नहीं करते हैं। उन आवश्यक दृश्य लेआउट परिवर्तनों के लिए, आपको सीएसएस (कैस्केडिंग स्टाइल शीट) पर जाना होगा।
एचटीएमएल टैब और स्पेसिंग बनाने के लिए सीएसएस का उपयोग करना
वेबसाइट आज संरचना और शैली को अलग करने के साथ बनाई गई हैं। एक पृष्ठ की संरचना एचटीएमएल द्वारा संभाली जाती है जबकि शैली सीएसएस द्वारा निर्धारित होती है। इसका मतलब है कि रिक्ति बनाने या एक निश्चित लेआउट प्राप्त करने के लिए, आपको सीएसएस में बदलना चाहिए और एचटीएमएल कोड में बस स्पेसिंग वर्ण जोड़ने की कोशिश नहीं करना चाहिए।
यदि आप पाठ के कॉलम बनाने के लिए टैब का उपयोग करने का प्रयास कर रहे हैं, तो आप उस कॉलम लेआउट को प्राप्त करने के लिए
यदि आप जो डेटा डाल रहे हैं वह टैब्यूलर डेटा है, तो आप उस डेटा को संरेखित करने के लिए टेबल का उपयोग कर सकते हैं जैसा आप चाहें। टेबल्स को अक्सर वेब डिज़ाइन में खराब रैप मिलता है क्योंकि उन्हें इतने सालों तक शुद्ध लेआउट टूल के रूप में दुरुपयोग किया जाता था, लेकिन यदि आपकी सामग्री में उपर्युक्त टैब्यूलर डेटा शामिल है तो टेबल अभी भी पूरी तरह मान्य हैं।
मार्जिन, पैडिंग, और टेक्स्ट इंडेंट
सीएसएस के साथ रिक्ति बनाने के सबसे आम तरीके निम्न सीएसएस शैलियों में से एक का उपयोग कर है:
- हाशिया
- गद्दी
- पाठ इंडेंट
उदाहरण के लिए, आप निम्न सीएसएस वाले टैब जैसे अनुच्छेद की पहली पंक्ति को इंडेंट कर सकते हैं (ध्यान दें कि यह मानता है कि आपके पैराग्राफ में "पहले" से जुड़ी कक्षा विशेषता है):
पी। फर्स्ट {
टेक्स्ट इंडेंट: 5em;
}
यह पैराग्राफ अब लगभग 5 वर्णों का इंडेंट होगा।
आप तत्व के शीर्ष, नीचे, बाएं, या दाएं (या उन तरफ के संयोजन) में अंतर जोड़ने के लिए सीएसएस में मार्जिन या पैडिंग गुणों का भी उपयोग कर सकते हैं। आखिरकार, आप सीएसएस में बदलकर किसी भी प्रकार की रिक्ति को प्राप्त कर सकते हैं।
सीएसएस के बिना एक से अधिक जगह पाठ स्थानांतरित करना
यदि आप चाहते हैं कि आपके पाठ को पिछले आइटम से एक से अधिक स्थानों पर स्थानांतरित किया जाए, तो आप गैर-ब्रेकिंग स्पेस का उपयोग कर सकते हैं।
गैर-ब्रेकिंग स्पेस का उपयोग करने के लिए, आप बस & nbsp; जोड़ते हैं जितनी बार आपको अपने HTML मार्कअप में इसकी आवश्यकता होती है।
उदाहरण के लिए, यदि आप अपने शब्द को पांच रिक्त स्थान पर ले जाना चाहते हैं, तो आप शब्द से पहले निम्नलिखित जोड़ सकते हैं।
& Nbsp; & nbsp; & nbsp; & nbsp; & nbsp;एचटीएमएल इनका सम्मान करता है और उन्हें एक ही स्थान पर नहीं गिर जाएगा। हालांकि, इसे बहुत खराब अभ्यास माना जाता है क्योंकि यह केवल लेआउट आवश्यकताओं को प्राप्त करने के लिए दस्तावेज़ में अतिरिक्त HTML मार्कअप जोड़ रहा है। संरचना और शैली के उस अलगाव को वापस संदर्भित करते हुए, आपको वांछित लेआउट प्रभाव प्राप्त करने के लिए बस गैर-ब्रेकिंग रिक्त स्थान जोड़ने से बचना चाहिए और इसके बजाय सीएसएस मार्जिन और पैडिंग का उपयोग करना चाहिए।