क्या आप जानते हैं कि तस्वीर के नीचे कैप्शन लगाने की साथ-साथ तस्वीर को मनमाफिक ढंग से खूबसूरत ढंग से कैसे पेश किया जा सकता है ?

भाग-एक

     आप बहुत से ब्लॉग पर या बहुत सी प्रोफैशनल साईटस पर देखते होंगे कि उन पर प्रयुक्त तस्वीरों को बड़े ही खूबसूरत ढंग से पेश किया जाता हैं | उन खूबसूरत तस्वीरों को देखकर आप क्या सभी के मन में ये इच्छा जागती है काश !!! हम भी अपने ब्लॉग को इसी प्रकार खूबसूरत ढंग से सजा पाते | बहुत से तकनीक की जानकारी रखने वाले ब्लॉगरस इसे आसानी से अपने ब्लॉग पर इन तस्वीरों को लगा लेते हैं लेकिन ! जो तकनीक की जानकारी नहीं रखते उनके लिए इस प्रकार तस्वीरों को अपने मनमाफिक लगाना लगभग नामुमकिन सा होता है | तो आज के इस लेख का तात्पर्य ये है कि आपके ब्लॉग पर लगाई गई किसी भी तस्वीर के साथ कैप्शन का प्रयोग कैसे किया जाए ? इस के साथ ही इस तस्वीर को खूबसूरत ढंग से पेश कैसे किया जाए ? नीचे इस के बारे में विस्तार से चर्चा की जायेगी | आप अपनी किसी भी पोस्ट पर यदि आप तस्वीर के साथ कैप्शन के साथ प्रयोग करना चाहते हैं तो कम्पोज मोड में न लिखकर "Edit HTML" मोड में लिखें | "Edit HTML" मोड में कैसे लिखा जाए इसके बारे में विस्तार से जानकारी इस लेख पर पढ़ सकते हैं |

     जैसा कि आप दाईं तरफ दिखाई दे रहे "टिप्स हिंदी में" ब्लॉग के लोगो को देख रहे हैं | अब यदि आप इस लोगो को कोई नाम देना चाहें या इस लोगो के नीचे इस के बारे में कोई सन्देश लिखना चाहें या इस लोगो के नीचे "टिप्स हिंदी में" ब्लॉग का नाम लिख कर उस पर लिंक लगाना चाहें तो आप ये सब कर सकते हैं और वो भी बहुत ही आसानी से | बस इसके लिए एक छोटा सा कोड इस्तेमाल करना होगा | क्या कहा ? क्या आप नहीं जानते इस कोड के बारे में ! बहुत से ऐसे ब्लॉग लिखने (खासकर नए ब्लॉग लिखने वाले) वाले होंगे जो इस प्रकार से कैप्शन को लगाना नहीं जानते होंगे | जो नहीं जानते उनको परेशान होने की जरूरत नहीं है | आज की इस पोस्ट का खास मकसद ही यही है के इस विषय पर विस्तार से बताया जाए |

लोगो "टिप्स हिंदी में"      अब आप बाईं तरफ दिखाई दे रही तस्वीर में देख रहे हैं की इस तस्वीर के साथ कैप्शन का प्रयोग किया गया है | लेकिन इसके साथ ही इस लोगो को दाईं तरफ श्रेणीबद्ध किया गया है | कैप्शन को बीच में लिखा गया है | इस के लिए जिस कोड का प्रयोग किया गया है वो निम्नलिखित है :-
<div style="float:right;text-align:center;"> <img src="यहाँ पर आप अपनी तस्वीर का लिंक लिखेंगे"/></div>

1. उदाहरण : आप ने देखा कि Edit HTML मोड में जब उपरोक्त कोड का इस्तेमाल किया गया तो तस्वीर बाईं तरफ दिखाई दे रही है | यदि हम जहाँ पर Right लिखा है यदि वहाँ पर Left लिख दे यही तस्वीर आप के पैराग्राफ में या आपकी पोस्ट में जहाँ पर आप इसका प्रयोग कर रहे हैं वहाँ पर ये तस्वीर दाईं तरफ दिखाई देने लगेगी | आप इस पैराग्राफ में देख रहे हैं कि तस्वीर आपको बाईं तरफ दिखाई दे रही है

2. उदाहरण : आप इस उदाहरण में देख रहे हैं कि उदाहरण नंबर एक वाली वही तस्वीर जहाँ पर float:left; लिखा था वहाँ पर float:right; लिख देने से वही तस्वीर आपके पैराग्राफ में या आपकी पोस्ट में जहाँ पर आप इसका प्रयोग कर रहे वहाँ पर ये तस्वीर अब दाईं तरफ दिखाई देने लगेगी | नीचे देखिए कि इस कोड को कैसे लिखेंगे :-
<div style="float:right;"> <img src="यहाँ पर आप अपनी तस्वीर का लिंक लिखेंगे"/></div>

लोगो "टिप्स हिन्दी में" 3. उदाहरण : आप इस उदाहरण में देख रहे हैं कि उदाहरण नंबर एक वाली वही तस्वीर के नीचे आप उस तस्वीर से सम्बंधित सूचना या उस तस्वीर का नाम लिखना चाहें तो वो भी लिख सकते हैं | बस आपको इसके लिए इसमें और एक छोटा सा कोड इस्तेमाल करना होगा | आप देखिए के मैंने इसमें एक और छोटा सा कोड इस्तेमाल किया है वो है text-color:#FFF; इस कोड को इस्तेमाल करने से जब आप इस तस्वीर के नीचे इस तस्वीर से संबंधित नाम या सूचना लिखेंगे तो वो नाम या सूचना आपको सफेद रंग में दिखाई देगी | यदि आप इस टेक्स्ट को तस्वीर के नीचे दिखाना चाहते हैं तो आप को अपने टेक्स्ट से ठीक पहले <br/> (ब्रेक टैग) का प्रयोग करना होगा | आप इस तस्वीर के नीचे भी देख सकते हैं वही लोगो "टिप्स हिन्दी में" लिखा है | आप चाहें तो इस टेक्स्ट का रंग बदल भी सकते हैं | इसके लिए आप FFF की जगह किसी भी कलर कोड का इस्तेमाल कर सकते हैं | आप नीचे वो कोड देख सकते हैं जिसका प्रयोग आप Edit HTML मोड में करेंगे :-

<div style="float:right; text-color:#fff;"> <img src="यहाँ पर आप अपनी तस्वीर का लिंक लिखेंगे"/><br/>लोगो "टिप्स हिंदी में"</div>

लोगो "टिप्स हिन्दी में" 4. उदाहरण : अब उस तस्वीर के बारे में ! जिस तस्वीर का आप प्रयोग करना चाहते हैं व जिस पैराग्राफ में किसी भी तस्वीर का प्रयोग करना चाहते हैं यदि तो आपका पैराग्राफ छोटा सा है तो आप यही चाहेगे कि वो तस्वीर आप उस पैराग्राफ में छोटे से प्रारूप में लगाएं | इसके लिए यदि तो एडोब फोटोशाप या ऐसे ही किसी और फोटो एडिटर में उस फोटो को छोटा करके इस का प्रयोग कर लेंगे | परन्तु यदि आप नए ब्लॉग लिखने वाले हैं व आप किसी फोटो एडिटर का प्रयोग करना नहीं जानते तो आपके लिए मुश्किल पैदा हो गई कि अब आप क्या करें ? या तो आप छोटे प्रारूप वाली तस्वीर को इन्टरनेट पर सर्च करेंगे या फिर किसी से इस तस्वीर को छोटे रूप में करने के लिए सहायता मांगेगे | लेकिन यदि आप इसी बड़ी फोटो को बिना कांटे छांटे ही छोटे प्रारूप में दिखा पाएं तो आप कैसा महसूस करेंगे | यकीनन आपके मुख से वाह ! निकलेगा | तो आप एक छोटे से कोड की मदद से ऐसा कर सकते हैं | इस कोड की मदद से आप किसी भी तस्वीर की चौड़ाई व ऊंचाई को अपने मनमाफिक कंट्रोल कर सकते हैं | इसके लिए आप इस कोड का प्रयोग करेंगे width="यहाँ पर आप उस तस्वीर की चौड़ाई को तय करेंगे" height="यहाँ पर आप उस तस्वीर की ऊंचाई को तय करेंगे" मैंने जो तस्वीर आपको दाईं तरफ दिखाई दे रही है उसकी width="200" व height="190" तय की है | आप अपनी पोस्ट में इस चौड़ाई व ऊंचाई को कम या ज्यादा कर सकते हैं | अब आप कोड को निम्न ढंग से लिखेंगे :-

<div style="float:right; text-color:#fff;"> <img width="200: height="190" src="यहाँ पर आप अपनी तस्वीर का लिंक लिखेंगे"/><br/>लोगो "टिप्स हिंदी में"</div>
उपरोक्त कोड को Edit HTML मोड में लिख कर Preview पर कलिक करेंगे तो आप को ये तस्वीर ठीक वैसे ही दिखाई देगी जैसे कि मेरी इस पोस्ट पर दिखाई दे रही है (सिर्फ बैकग्राउंड को छोड़कर) |

लोगो "टिप्स हिन्दी में" 5. उदाहरण : अब आप अपने माउस से कर्सर को इस तस्वीर पर लेकर जाएं | जब आप इस तस्वीर पर कर्सर को लेकर जायेंगे तो ये उस तस्वीर से संबंधित जानकारी दिखायेगा | वो जानकारी इस तस्वीर से संबंधित हो सकती है, कहने का मतलब ये है कि आप जो भी चाहें इस तस्वीर का टाइटल रख सकते हैं | इसके लिए आपको एक छोटा सा कोड इस्तेमाल करना होगा | title="तकनीक संबंधी पूरी जानकारी सिर्फ टिप्स हिंदी में ब्लॉग पर" आप इसे निम्न तस्वीर में भी देख सकते हैं :-


अब आप कोड निम्न अनुसार लिखेंगे :-

<div style="float:right; text-color:#fff;"> <img width="200: height="190" src="यहाँ पर आप अपनी तस्वीर का लिंक लिखेंगे" title="यहाँ पर आप इस तस्वीर का टाइटल लिखेंगे"/><br/>लोगो "टिप्स हिंदी में"</div>

दूसरा भाग पढ़ने के लिए यहाँ पर कलिक करें

पहला उदाहरण
रतन सिंह शेखावत जी

बी.एस.पाबला जी
दूसरा उदाहरण

चर्चा मंच
तीसरा उदाहरण

चौथा उदाहरण"

चौथे उदारहण का दूसरा रूप
इसमें तस्वीर की चौड़ाई को बढ़ाया गया है | इस तस्वीर की चौड़ाई "595px" रखी गई है |

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