एका प्रतिमेच्या आसपास मजकूर ओघ कसा करावा?

कोणत्याही वेब पृष्ठ पहा आणि आपण मजकूर सामग्री आणि प्रतिमा संयोजन दिसेल. हे दोन्ही घटक एखाद्या वेबसाइटच्या यशात आवश्यक घटक आहेत. मजकूर सामग्री ही साइट अभ्यागतांना वाचेल आणि आपल्या क्रमवारीतील अल्गोरिदमच्या रूपात शोध इंजिन्स कशा वापरेल ते आहे. प्रतिमा साइटवर दृष्य व्याखया जोडेल आणि मजकूर सामग्रीवर प्रकाश टाकण्यास मदत करतील

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

सीएसएस वापरणे

पृष्ठाच्या मजकूर आणि प्रतिमा मांडणी आणि ब्राउझरमध्ये त्यांची दृश्ये शैली कशी दिसतात हे बदलण्याचा योग्य मार्ग CSS आहे फक्त लक्षात ठेवा, कारण आपण पृष्ठावर व्हिज्युअल बदल (एका प्रतिमेचा मजकूर प्रवाह बनविण्याविषयी) बोलत आहात, याचा अर्थ कॅस्केडिंग स्टाइल शीटचे हे डोमेन आहे.

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

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

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

CSS ऐवजी HTML वापरणे (आणि आपण हे का करू नये?)

एचटीएमएल सारख्या प्रतिमाभोवती मजकूर लपविणे शक्य असले तरी, वेब मानके सांगतात की सीएसएस (आणि उपरोक्त चरण) हा मार्ग आहे ज्यामुळे आम्ही संरचना (HTML) आणि शैली (सीएसएस) वेगळे करणे देखरेख करू शकू. हे विशेषतः तेव्हा महत्वाचे आहे जेव्हा आपण विचार करता की, काही डिव्हाइसेस आणि लेआउटसाठी, त्या मजकूराला प्रतिमाभोवती प्रवाह करण्याची आवश्यकता नसते लहान स्क्रीनसाठी, प्रतिसादात्मक वेबसाइटच्या लेआउटमध्ये मजकूर खरोखरच इमेज खाली संरेखित करेल आणि प्रतिमा स्क्रीनच्या पूर्ण रूंदी विस्तृत करेल. जर तुमची शैली आपल्या HTML मार्कअपपासून वेगळी असेल तर हे सहजपणे मीडिया क्वेरींसह केले जाते. आजच्या मल्टि-डिव्हाइस जगातील, विविध अभ्यागतांसाठी आणि विविध स्क्रीनवर प्रतिमा आणि मजकूर वेगळ्या दिसेल तिथे, वेब पृष्ठाच्या दीर्घकालीन यश आणि व्यवस्थापनासाठी हे वेगळे करणे आवश्यक आहे.