How to setup a Paragraph in HTML mode

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

जैसा कि नाम से जाहिर है | जी हाँ ! यदि आप कोई भी पोस्ट लिखते है, और वो पोस्ट एक से ज्यादा पैरा में लिखी जाती है तो क्या आप उस पोस्ट एक सुन्दर ढंग से सजाना भी चाहेंगे | मेरी तो यही कोशिश होती है | आप भी ऐसी कोशिश करना चाहते हैं यदि हाँ ! तो आप निम्न कोड को ध्यान से देखें | आप यदि ये पोस्ट मोज़िला फायरफोक्स में देखे तो ज्यादा बढ़िया रहेगा | इस पैराग्राफ पर मैंने इसी कोड का इस्तेमाल किया है, और इसी कोड को आपके साहमने विस्तार से उजागर करने की कोशिश की जायेगी |


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

---

<p style="font-size:16px;color:blue;line-height:27px;text-align:justify;border:2px solid #f40;padding:10px;border-radius:5px;">जैसा कि नाम से जाहिर है | जी हाँ ! कि यदि आप कोई भी <strong style="color:#f40;">पोस्ट लिखते है,</strong> और वो पोस्ट एक से ज्यादा पैरा में लिखी जाती है तो क्या आप उस पोस्ट एक सुन्दर ढंग से सजाना भी चाहेंगे | मेरी तो यही कोशिश होती है | आप भी ऐसी कोशिश करना चाहते हैं यदि हाँ ! तो आप निम्न कोड को ध्यान से देखें | आप यदि ये पोस्ट <strong style="color:#f40;"> मोज़िला फायरफोक्स में देखे तो ज्यादा बढ़िया रहेगा |</strong> इस पैराग्राफ पर मैंने इसी कोड का इस्तेमाल किया है, और इसी कोड को आपके साहमने विस्तार से उजागर करने की कोशिश की जायेगी |
</p>

---

अ ब उपरोक्त कोड को समझने का प्रयास करते हैं |

<p></p>

उपरोक्त कोड किसी पैराग्राफ का HTML टैग है | इसी टैग की मध्य में पैराग्राफ लिखा जाता है | अब इसी पैराग्राफ को अपने ढंग से कैसे सजाया जाये, विस्तार से बताने की कोशिश की जायेगी | आप आपनी पोस्ट में भी अपनी पोस्ट के कुछ अंशो को बोल्ड बटन पर कलिक करके या टेक्स्ट के रंग को बदलने के लिए उस रंग पर कलिक करके ऐसा करते हैं | लेकिन ये सब होता कैसे है | ये सब संभव होता है उस CSS कोड से जो उन बटन पर कमांड के रूप पहले से स्थापित कर दिए जाते हैं व आप उनका इस्तेमाल ग्राफिक मोड में करते हैं |

<p style="font-size:16px;"></p>

आप उपरोक्त कोड को ध्यान से देखें मैंने पैराग्राफ टैग में शुरुआत में <p के बाद style="font-size:16px;" कोड का इस्तेमाल किया है | इसका मतलब है कि इस पैराग्राफ में फांट का साईज 16px है | इसे आप अपनी मन-माफिक बढा सकते हैं या कम कर सकते हैं |
मैंने इस पैराग्राफ में 16px फांट-साईज का इस्तेमाल किया है |

<p style="font-size:16px;color:blue;"></p>

फांट साईज के बाद बारी आती है कि आपके पैराग्राफ में प्रयुक्त टेक्स्ट का रंग कौन सा हो ? तो इसके लिए फाँट-साईज के बाद टेक्स्ट के रंग के लिए इस कोड color:blue; का इस्तेमाल किया जाता है | कलर कोड को आप हेक्स मोड में color:#f40; भी प्रयोग कर सकते हैं | कहने का अभिप्राय ये है कि जिस रंग का चुनाव आप चाहें कर सकते हैं | कलर कोड को अपने मन मुताबिक चुनने के लिए फोटोशाप के EyeDropper Tool की सहायता ले सकते हैं | इसका एक उदाहरण आप निम्न देख सकते हैं :-

कोड	कोड प्रयुक्त करने के बाद पैरागाफ़
<p style="font-size:16px;">आपका टेक्स्ट यहाँ पर होगा </p>	यहाँ पर फॉण्ट का साईज 16px प्रयुक्त किया गया है |
<p style="font-size:16px;color:red;">आपका टेक्स्ट यहाँ पर होगा</p>	यहाँ पर फॉण्ट का साईज 16px के साथ ही रंग रेड प्रयुक्त किया गया है |
<p style="font-size:16px;color:#343434;">आपका टेक्स्ट यहाँ पर होगा</p>	यहाँ पर फॉण्ट का साईज 16px के साथ ही रंग को हेक्स मोड में #343434 कोड प्रयुक्त किया गया है |

<p style="font-size:16px;color:blue;line-height:25px;"></p>

इसके बाद बारी आती है दो लाइन के मध्य के स्पेस यानी की दूरी कि वो कितनी हो | जिन्होंने Microfost Office के एक भाग MS Word का इस्तेमाल किया है वो जानते हैं कि सिंगल स्पेस, डबल स्पेस आदि क्या होता हैं ? बस मैं उसी स्पेस की बात कर रहा हूँ | इस स्पेस के लिए line-height:25px; इस कोड का इस्तेमाल किया जाता है | इसे आप निम्न उदाहरण में देख सकते हैं |

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

<p style="font-size:16px;color:blue;line-height:25px;text-align:justify;"></p>

इसके बाद बारी आती है कि इस पैराग्राफ को अलाइन कैसे किया जाये ? जिन्होंने Microfost Office के एक भाग MS Word का इस्तेमाल किया है वो जानते हैं कि Left Align, Right Align, Center Align व Justify क्या होता हैं ? बस मैं उसी text align की बात कर रहा हूँ | इस प्रकार के text align के लिए text-align:left; इस कोड का इस्तेमाल किया जाता है | इसे आप निम्न उदाहरण में देख सकते हैं |

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

शेष अगली पोस्ट में >>>

क्या आपको ये आई-मैजिक अंदाज़ पसंद आया ? यदि हां !!! तो अपने विचारों से अवगत कराएं |

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