तस्विर वरिपरि पाठ लिपि कसरी गर्ने?

कुनै वेब पेज हेर्नुहोस् र तपाइँ पाठ सामग्री र इमेजरीको संयोजन देख्नुहुनेछ। यी दुवै तत्वहरू वेबसाइटको सफलतामा आवश्यक अवयवहरू छन्। पाठ सामग्री कुन साइट आगन्तुकहरू पढ्ने र कुन खोज ईन्जिनियरिङ्हरू तिनीहरूको रैंकिंग एल्गोरिदमको रूपमा प्रयोग गरिनेछ । छविहरू साइटमा दृश्य रुचि थप्न र पाठ सामग्रीको उच्चारण गर्न मद्दत गर्नेछ।

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

CSS प्रयोग गर्दै

पृष्ठको पाठ र तस्विर लेआउट र ब्राउजरमा कसरी उनीहरूको भिजुअल शैलीहरू देखा पर्ने तरिका परिवर्तन गर्न सही तरिका CSS सँग छ। केवल सम्झनुहोस्, किनकि हामी पृष्ठमा दृश्य परिवर्तनको बारेमा कुरा गर्दैछौं (छविको वरिपरि पाठ प्रवाह बनाउँदछ), यसको अर्थ यो क्यासिंगिङ स्टाइल पानाको डोमेन हो।

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

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

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

HTML को बजाय CSS को प्रयोग गरेर (र किन तपाईं यो गर्नु हुँदैन)

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