एक छवि के आसपास पाठ कैसे लपेटें

किसी भी वेब पेज को देखें और आप टेक्स्ट सामग्री और इमेजरी का संयोजन देखेंगे। इन दोनों तत्वों की वेबसाइट की सफलता में आवश्यक तत्व हैं। पाठ सामग्री साइट आगंतुकों को कौन सा पढ़ा जाएगा और उनके रैंकिंग एल्गोरिदम के हिस्से के रूप में कौन से खोज इंजन उपयोग करेंगे। छवियां साइट पर दृश्य रुचि जोड़ती हैं और टेक्स्ट सामग्री को बढ़ाने में सहायता करती हैं।

वेबसाइटों पर पाठ और छवियां जोड़ना आसान है। मानक HTML टैग्स जैसे पैराग्राफ, शीर्षलेख और सूचियों के साथ पाठ जोड़ा जाता है, जबकि छवियों को तत्व वाले पृष्ठ पर रखा जाता है। एक बार जब आप अपने वेब पेज पर कोई छवि जोड़ लेते हैं, तो हो सकता है कि आप नीचे दिए गए संरेखित करने के बजाय छवि के बगल में टेक्स्ट प्रवाह चाहते हों (जो डिफ़ॉल्ट रूप से ब्राउज़र में एचटीएमएल कोड में जोड़ा गया एक डिफ़ॉल्ट तरीका है)। तकनीकी रूप से, सीएसएस (अनुशंसित) का उपयोग करके या सीधे HTML में दृश्य निर्देश जोड़कर, इस दृश्य को प्राप्त करने के दो तरीके हैं (अनुशंसित नहीं है, क्योंकि आप अपनी वेबसाइट के लिए शैली और संरचना को अलग करना चाहते हैं)।

सीएसएस का उपयोग करना

किसी पृष्ठ के टेक्स्ट और छवियों के लेआउट के तरीके को बदलने का तरीका और ब्राउजर में उनकी विज़ुअल शैलियों को कैसा लगता है। बस याद रखें, क्योंकि हम पृष्ठ पर एक दृश्य परिवर्तन (छवि के चारों ओर पाठ प्रवाह बनाने) के बारे में बात कर रहे हैं, इसका मतलब है कि यह कैस्केडिंग स्टाइल शीट का डोमेन है।

1. सबसे पहले, अपनी छवि को अपने वेब पेज पर जोड़ें। उस HTML से किसी भी दृश्य विशेषताओं (जैसे चौड़ाई और ऊंचाई मान) को बाहर करना याद रखें। यह महत्वपूर्ण है, खासकर एक उत्तरदायी वेबसाइट के लिए जहां छवि आकार ब्राउज़र के आधार पर अलग-अलग होगा। कुछ सॉफ्टवेयर, जैसे एडोब ड्रीमवेवर, उस टूल के साथ डाली गई छवियों की चौड़ाई और ऊंचाई जानकारी जोड़ देंगे, इसलिए इस जानकारी को HTML कोड से निकालना सुनिश्चित करें! हालांकि, सुनिश्चित करें कि उपयुक्त alt टेक्स्ट शामिल करें । यहां एक उदाहरण दिया गया है कि आपका HTML कोड कैसा दिख सकता है:
2. स्टाइल उद्देश्यों के लिए, आप एक छवि में एक वर्ग भी जोड़ सकते हैं। यह वर्ग मूल्य वह है जिसे हम अपनी सीएसएस फ़ाइल में उपयोग करेंगे। ध्यान दें कि हम जिस मान का उपयोग करते हैं वह मनमाने ढंग से है, हालांकि, इस विशेष शैली के लिए, हम अपनी छवि को संरेखित करने के तरीके के आधार पर "बाएं" या "दाएं" के मानों का उपयोग करते हैं। हम उस सरल वाक्यविन्यास को अच्छी तरह से काम करने के लिए पाते हैं और उन लोगों के लिए आसान हो सकते हैं जिन्हें भविष्य में किसी साइट को समझने के लिए प्रबंधन करना पड़ सकता है, लेकिन आप इसे किसी भी वर्ग मूल्य को दे सकते हैं।
   2. अपने आप से, यह वर्ग मूल्य कुछ भी नहीं करेगा। छवि को पाठ के बाईं ओर स्वचालित रूप से गठबंधन नहीं किया जाएगा। इसके लिए, अब हमें हमारी सीएसएस फ़ाइल में बदलना होगा।

1. अपनी स्टाइलशीट में, अब आप निम्न शैली जोड़ सकते हैं:
   1. ।बाएं {
   2. बाईंओर तैरना;
   3. पैडिंग: 0 20 पीएक्स 20 पीएक्स 0;
   4. }
   5. आपने यहां क्या किया है, सीएसएस "फ्लोट" प्रॉपर्टी का उपयोग करें, जो छवि को सामान्य दस्तावेज़ प्रवाह से खींचती है (जिस तरह से छवि सामान्य रूप से प्रदर्शित होती है, उसके नीचे गठित पाठ के साथ) और यह इसे अपने कंटेनर के बाईं ओर संरेखित करेगी । एचटीएमएल मार्कअप में इसके बाद जो पाठ आता है उसके साथ अब लपेटें। हमने कुछ पैडिंग मान भी जोड़े ताकि यह टेक्स्ट सीधे छवि के खिलाफ नहीं होगा। इसके बजाए, इसमें कुछ अच्छा अंतर होगा जो पेज के डिज़ाइन में दृष्टि से आकर्षक होगा। पैडिंग के लिए सीएसएस शॉर्टैंड में, हमने छवि के शीर्ष और बाईं तरफ 0 मान और 0 पिक्सल को बाएं और नीचे तक जोड़ा। याद रखें, आपको बाएं गठबंधन छवि के दाईं ओर कुछ पैडिंग जोड़ने की आवश्यकता है। एक सही गठबंधन छवि (जिसे हम एक पल में देखेंगे) पैडिंग को बाईं तरफ लागू किया जाएगा।
2. यदि आप ब्राउज़र में अपना वेबपृष्ठ देखते हैं, तो आपको अब देखना चाहिए कि आपकी छवि पृष्ठ के बाईं ओर गठबंधन है और पाठ अच्छी तरह से इसके चारों ओर लपेटता है। यह कहने का एक और तरीका यह है कि छवि "बाईं ओर तैरती है"।

1. अगर आप इस छवि को दाईं ओर गठबंधन करना चाहते हैं (जैसे इस आलेख के साथ फोटो उदाहरण में), यह आसान होगा। सबसे पहले, आपको यह सुनिश्चित करना होगा कि, स्टाइल के अलावा हमने "सीएसएस" के वर्ग मूल्य के लिए हमारे सीएसएस में जोड़ा है, हमारे पास दाएं संरेखण के लिए भी एक है। यह इस तरह दिखेगा:
   1. ।सही {
   2. सही नाव;
   3. पैडिंग: 0 0 20 पीएक्स 20 पीएक्स;
   4. }
   5. आप देख सकते हैं कि यह हमारे द्वारा लिखे गए पहले सीएसएस के लगभग समान है। एकमात्र अंतर वह मान है जिसका उपयोग हम "फ्लोट" संपत्ति और पैडिंग मानों के लिए करते हैं जो हम उपयोग करते हैं (दाईं ओर की बजाय हमारी छवि के बाईं ओर कुछ जोड़ना)।
2. अंत में, आप छवि के वर्ग के मान को अपने बाएं से "बाएं" से "दाएं" में बदल देंगे:
3. अब ब्राउज़र में अपने पेज को देखें और आपकी छवि को दाईं ओर लपेटने वाले पाठ के साथ दाईं ओर गठबंधन किया जाना चाहिए। हम इन दोनों शैलियों को "बाएं" और "दाएं" को हमारे सभी स्टाइलशीट में जोड़ते हैं ताकि जब हम वेब पेज बना रहे हों तो हम इन दृश्य शैलियों का उपयोग कर सकते हैं। ये दो शैलियों अच्छी, पुन: प्रयोज्य विशेषताएं बन जाती हैं जिन्हें हम तब भी बदल सकते हैं जब हमें छवियों को उनके चारों ओर टेक्स्ट रैपिंग के साथ स्टाइल करने की आवश्यकता होती है।

सीएसएस के बजाय एचटीएमएल का उपयोग करना (और आपको यह क्यों नहीं करना चाहिए)

भले ही एचटीएमएल के साथ एक छवि के चारों ओर पाठ लपेटना संभव हो, वेब मानकों को निर्देश दिया गया है कि सीएसएस (और ऊपर दिए गए कदम) जाने का तरीका है ताकि हम संरचना (एचटीएमएल) और शैली (सीएसएस) को अलग कर सकें। यह विशेष रूप से महत्वपूर्ण है जब आप मानते हैं कि, कुछ उपकरणों और लेआउट के लिए, उस पाठ को छवि के चारों ओर बहने की आवश्यकता नहीं हो सकती है । छोटी स्क्रीन के लिए, एक उत्तरदायी वेबसाइट के लेआउट की आवश्यकता हो सकती है कि पाठ वास्तव में छवि के नीचे संरेखित हो और छवि स्क्रीन की पूरी चौड़ाई को फैलाती है। यदि आपकी शैलियों को आपके HTML मार्कअप से अलग किया गया है तो यह आसानी से मीडिया प्रश्नों के साथ किया जाता है। आज की बहु-डिवाइस दुनिया में, जहां विभिन्न आगंतुकों और विभिन्न स्क्रीनों पर छवियों और पाठ अलग-अलग दिखाई देंगे, यह अलगाव वेब पेज की लंबी अवधि की सफलता और प्रबंधन के लिए आवश्यक है।