छवियां आपके वेब पृष्ठों में जीवन जोड़ती हैं और दर्शकों का ध्यान आकर्षित करती हैं। कैप्शन आपकी वेब छवियों के बारे में अतिरिक्त जानकारी प्रदान करते हैं, लेकिन उन्नत HTML और CSS कौशल के बिना वेब पृष्ठों में उन्हें जोड़ना मुश्किल हो सकता है। यहां एक छवि के साथ एक सरल, अभी तक आकर्षक, कैप्शन जोड़ने के लिए एक विश्वसनीय विधि है जो छवि के साथ रहता है जहां भी आप इसे वेबपृष्ठ पर ले जाते हैं।
एक HTML छवि कैप्शन के लिए कदम
-
अपने वेबपृष्ठ में एक छवि जोड़ें।
-
अपने वेबपृष्ठ के लिए एचटीएमएल में, छवि के चारों ओर एक div टैग रखें:
-
Div टैग में एक शैली विशेषता जोड़ें:
शैली = ""> -
चौड़ाई शैली की संपत्ति के साथ, छवि की तरह चौड़ाई की चौड़ाई को चौड़ाई पर सेट करें:
-
कैप्शन के लिए जो आस-पास के पाठ से थोड़ा छोटे होते हैं, div शैली में फ़ॉन्ट-आकार की संपत्ति जोड़ें:
-
यदि वे छवि के नीचे केंद्रित हैं तो कैप्शन सर्वोत्तम दिखते हैं, इसलिए स्टाइल विशेषता में टेक्स्ट-एलाइन गुण जोड़ें:
-
आखिरकार, छवि और कैप्शन के बीच एक अतिरिक्त अतिरिक्त स्थान जोड़ें, जिसमें पैडिंग-डाउन स्टाइल प्रॉपर्टी के साथ छवि में शैली विशेषता जोड़कर:
शैली = "पैडिंग-तल: 0.5em;" />
-
फिर छवि के नीचे सीधे टेक्स्ट कैप्शन जोड़ें:
अपने सर्वर पर वेबपृष्ठ अपलोड करें और ब्राउज़र में इसका परीक्षण करें।
कैप्शनिंग टिप्स
- सीएसएस आयाम कई अलग-अलग मापों में हो सकते हैं, इसलिए आपको आमतौर पर माप प्रकार शामिल करना होगा। उदाहरण के लिए:
चौड़ाई: 100पिक्सल; हालांकि, एचटीएमएल छवि आयाम हमेशा पिक्सेल में होते हैं, इसलिए आप माप को छोड़ देते हैं।
चौड़ाई = "100"
- यदि आप छवि चौड़ाई की तुलना में div की चौड़ाई को चौड़ा बनाते हैं, तो कैप्शन छवि के बगल में दिखाई दे सकता है। यदि आप यही चाहते हैं, तो एक जोड़ें
कैप्शन से पहले और छवि टैग के बाद सीधे टैग करें।
