लाल किताब

recent

रविवार, अक्तूबर 14, 2012

Home » , » How to setup a Paragraph in HTML mode

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; कोड को प्रयुक्त किया गया है |

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

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

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

Share this post :

8 टिप्‍पणियां:

  1. उम्दा उपयोगी जानकारी,,,,आभार

    बहुत सुंदर अभिव्यक्ति ,,,,,,

    MY RECENT POST: माँ,,,

    जवाब देंहटाएं
  2. एक ब्लॉग सबका की इस ख़ास प्रस्तुती पर आपका स्वागत है.

    ब्लॉग का प्रचार कैसे करें?

    जवाब देंहटाएं
  3. सरल रूप से समझाया गया है पर थोडा कठिन प्रतित लगता है कोशिश जारी है

    जवाब देंहटाएं
  4. बहुत ही काम की पोस्‍ट थोडी कठिन प्रतित लगता है यह कार्य क्‍यो की नये ब्‍लागर तो आनलाईन ही पोस्‍ट लिखते है

    जवाब देंहटाएं
    उत्तर
    1. आप अगली पोस्ट का इन्तजार करे | अगली पोस्ट में ये बताने की कोशिश की जाएगी की इतने कोड को छोटे रूप में कैसे प्रयोग किया जाये | मैं भी मानता हूँ की इतने बड़े कोड को हर बार प्रयोग करना मुस्किल है | लेकिन यदि इस सारे कोड को एक कमांड में बाँध दिया जाये तो एक कमांड का प्रयोग करने हर नये ब्लॉगर के लिए आसान होगा | तो इन्तजार कीजिये अगली पोस्ट का |

      हटाएं
  5. विनित जी बहुत ही शानदार जानकारी है ! आपसे प्रार्थना है कि मुझ जैसे कम तकनीकी जानकारी रखने वालो के लिये कोई अच्छा से टेंम्पलेट उपलब्ध कराये, जो ब्लाग प्रोफ़ेशनली लुक पा सके.......धन्यवाद

    जवाब देंहटाएं

आपकी टिप्पणी मेरे लिए मेरे लिए "अमोल" होंगी | आपके नकारत्मक व सकारत्मक विचारों का स्वागत किया जायेगा | अभद्र व बिना नाम वाली टिप्पणी को प्रकाशित नहीं किया जायेगा | इसके साथ ही किसी भी पोस्ट को बहस का विषय न बनाएं | बहस के लिए प्राप्त टिप्पणियाँ हटा दी जाएँगी |

Twitter Delicious Facebook Digg Stumbleupon Favorites More