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