how-to-setup-paragraph-in-html-mode part-2

एक पैराग्राफ में लिखी पोस्ट को अपनी मनमाफिक कैसे सजाएं ? भाग दूसरा >>>

इस पोस्ट को पढ़ने से पहले आपको ये सलाह दी जाती है की आप इसी पोस्ट से संबंधित पिछले लेख को अवश्य पढ़ लें |
पिछले लेख में आपने पढा था कि आपकी पोस्ट में टेक्स्ट कितने साइज का हो ?
दो लाइनों के मध्य की दूरी कितनी हो ?
टेक्स्ट का रंग कौन सा हो ?
टेक्स्ट किस तरफ से अलाइन हो ?
अब जानेगे कि यदि आप अपने पैराग्राफ के इर्द-गिर्द बार्डर लगाना चाहते हैं, तो उस बार्डर कर रंग कैसा हो ? बार्डर कैसा दिखे ? किनारे गोलाई लिए हुए हों या नहीं | तो आप निम्न कोड को ध्यान से देखें :-

---

कोड	कोड प्रयुक्त करने के बाद पैरागाफ़
<p style="font-size:16px;color:#343434;line-height:25px;text-align:justify;border:1px solid #f60;">आपका टेक्स्ट यहाँ पर होगा</p>	यहाँ पर फॉण्ट का साईज 16px के साथ ही रंग को हेक्स मोड में #343434 कोड के साथ line-height:25px; के साथ text-align:justify; कोड को प्रयुक्त किया गया है |
<p style="font-size:16px;color:#343434;line-height:25px;text-align:justify;border:1px dashed #f60;">आपका टेक्स्ट यहाँ पर होगा</p>	यहाँ पर फॉण्ट का साईज 16px के साथ ही रंग को हेक्स मोड में #343434 कोड के साथ line-height:25px; के साथ text-align:justify; कोड को प्रयुक्त किया गया है |
<p style="font-size:16px;color:#343434;line-height:25px;text-align:justify;border:3px dotted #f60;">आपका टेक्स्ट यहाँ पर होगा</p>	यहाँ पर फॉण्ट का साईज 16px के साथ ही रंग को हेक्स मोड में #343434 कोड के साथ line-height:25px; के साथ text-align:justify; कोड को प्रयुक्त किया गया है |

---

आपने उपरोक्त कोड में देखा कि मैंने पैराग्राफ के इर्द-गिर्द बार्डर लगाने का कोड लगाया है व आपको बार्डर लगा दिखाई दे रहा है | इस कोड में border:1px solid #f60; जहां पर 1px लिखा है तो इसका मतलब है पैराग्राफ के इर्द-गिर्द दिखाई देने वाला बार्डर एक पिक्सल का होगा | जहाँ पर solid लिखा है तो इसका मतलब है कि बार्डर सपाट लाइन वाला हो, व जहां पर #f60 लिखा है तो इसका मतलब है कि बार्डर के रंग कैसा हो ?
यहाँ आप बार्डर के स्टाइल को बदल भी सकते हैं | जहाँ पर solid लिखा है वहाँ पर आप dashed या dotted लिखेंगे तो आप को उपरोक्त उदाहरण के अनुसार दूसरी लाइन व तीसरी लाइन के अनुसार बार्डर का स्टाइल बदल जायेगा |

अब इसके बाद बारी आती है कि यदि आपने अपने पैराग्राफ के इर्द-गिर्द बार्डर का प्रयोग कर लिया तो आपका टेक्स्ट उस बार्डर के बिलकुल साथ सटा हुआ दिखाई दे रहा है जो लुकआउट के हिसाब से अच्छा दिखाई नहीं दे रहा, तो आप इसका प्रयोग नहीं करना चाहेंगे, लेकिन यदि आप इसका हल कर लें तो ?
तो इसके लिए padding:5px; इस कोड का इस्तेमाल करेंगे | इस कोड का मतलब है कि चारों तरफ से पांच पिक्सल का स्पेस बन जाये | इसे आप निम्न उदाहरण से समझ सकते हैं |

---

कोड	कोड प्रयुक्त करने के बाद पैरागाफ़
<p style="font-size:16px;color:#343434;line-height:25px;text-align:justify;border:1px solid #f60;padding:5px;">आपका टेक्स्ट यहाँ पर होगा</p>	यहाँ पर फॉण्ट का साईज 16px के साथ ही रंग को हेक्स मोड में #343434 कोड के साथ line-height:25px; के साथ text-align:justify; कोड को प्रयुक्त किया गया है |

---

अब इसके बाद बारी आती है कि यदि आप बार्डर की गोलाई चाहते है तो आपको बार्डर की गोलाई के लिए border-radius:10px; का इस्तेमाल करेंगे | गोलाई कम या ज्यादा करने के लिए आप 10px की जगह अपनी पसंद अनुसार लिख सकते हैं | निम्न उदाहरण में आप इसे देख सकते हैं |

---

कोड	कोड प्रयुक्त करने के बाद पैरागाफ़
<p style="font-size:16px;color:#343434;line-height:25px;text-align:justify;border:1px solid #f60;padding:5px;border-radius:10px;">आपका टेक्स्ट यहाँ पर होगा</p>	यहाँ पर फॉण्ट का साईज 16px के साथ ही रंग को हेक्स मोड में #343434 कोड के साथ line-height:25px; के साथ text-align:justify; कोड को प्रयुक्त किया गया है |

---

अब बारी आती इस पैराग्राफ में पोस्ट से संबंधित टाइटल को हाईलाईट करने की | तो इसके लिए कोड को निम्न उदाहरण से समझने का प्रयास करते हैं | इसके लिए मैं hlight कमांड का प्रयोग करता हूँ | इसमें मन टाइटल के लिए font-size 18px व रंग के लिए red रंग का चुनाव करता हूँ तो ये कोड प्रयुक्त करने के बाद आपका पैराग्राफ कैसा दिखाई देगा, इसे आपन निम्न उदाहरण में देख सकते हैं |

---

कोड	कोड प्रयुक्त करने के बाद पैरागाफ़
<p style="font-size:16px;color:#343434;line-height:25px;text-align:justify;border:1px solid #f60;padding:5px;border-radius:10px;"><hlight style="font-size:18px;color:red;">कोड प्रयुक्त करने के बाद पैरागाफ़ </hlight>आपका टेक्स्ट यहाँ पर होगा</p>	कोड प्रयुक्त करने के बाद पैरागाफ़ यहाँ पर फॉण्ट का साईज 16px के साथ ही रंग को हेक्स मोड में #343434 कोड के साथ line-height:25px; के साथ text-align:justify; कोड को प्रयुक्त किया गया है |

---

अब आप कहेंगे कि इतने बड़े कोड को हर बार हर पैराग्राफ में प्रयोग करना तो मुश्किल है | तो इस मुश्किल को बड़ी आसानी से हल किया जाता है | इसके लिए इस को कोड को एक कमांड से बाँध दिया जाता है व उस कमांड का प्रयोग किया जाता है | आइये देखते हैं कि ऐसा कैसे होता है ?
आप निम्न उदाहरण में देखे कि मैंने इस कोड को एक कमांड में बाँधा है | इसके लिए मैं ptext कमांड का प्रयोग करने जा रहा हूँ व टाईटल हाईलाईट करने के लिए hlight का इस्तेमाल करने जा रहा हूँ :-

<style type="text/css">
.ptext {font-size:16px;color:#343434;line-height:25px;text-align:justify;border:1px solid #f60;padding:5px;border-radius:10px;}
.ptext hlight {font-size:18px;color:red;}
</style>

आप उपरोक्त कोड को अपने ब्लॉग के साइडबार में स्थापित कर लेंगे तो आपको अपने पैराग्राफ में सिर्फ दो कमांड लिखने होगे तो हर बार आपको टेक्स्ट साइज, टेक्स्ट का रंग, अलाइन कैसे हो, दो लाइनों के मध्य की दूरी कितनी हो, बार्डर लगा हो, टेक्स्ट बाईं तरफ से कितना स्पेस लिए हो, दायीं तरफ से कितना, ऊपर से कितना व नीचे से कितना स्पेस लिए हुए हो इसको तय करने की बार-बार जरूरत नहीं पड़ेगी | आप आसानी से अपने पैराग्राफ में अपनी पोस्ट को लिख सकेंगे |

---

कोड	कोड प्रयुक्त करने के बाद पैरागाफ़
<p style="font-size:16px;color:#343434;line-height:25px;text-align:justify;border:1px solid #f60;padding:5px;border-radius:10px;">आपका टेक्स्ट यहाँ पर होगा</p>	यहाँ पर फॉण्ट का साईज 16px के साथ ही रंग को हेक्स मोड में #343434 कोड के साथ line-height:25px; के साथ text-align:justify; कोड को प्रयुक्त किया गया है |
<p class="ptext"><hlight>कोड प्रयुक्त करने के बाद पैरागाफ़</hlight> आपका टेक्स्ट यहाँ पर होगा</p> <style type="text/css"> .ptext {font-size:16px;color:#343434;line-height:25px;text-align:justify;border:1px solid #f60;padding:5px;border-radius:10px;} .ptext hlight{font-size:18px;color:red;} </style>	कोड प्रयुक्त करने के बाद पैरागाफ़ यहाँ पर फॉण्ट का साईज 16px के साथ ही रंग को हेक्स मोड में #343434 कोड के साथ line-height:25px; के साथ text-align:justify; कोड को प्रयुक्त किया गया है |

---

उम्मीद है कि ये पोस्ट आपकी उम्मीद पर खरा उतरी होगी | यदि आपको ये पोस्ट पसंद आई तो टिप्पणी अवश्य दें |

"टिप्स हिन्दी में ब्लॉग" की हर नई जानकारी अपने मेल-बॉक्स में मुफ्त पाएं !