एक वेब कैप्शन जोड़ें जो इसकी छवि के साथ रहता है

9 आसान चरणों में वेब छवियों में एचटीएमएल कैप्शन जोड़ें

छवियां आपके वेबपृष्ठों में जीवन जोड़ती हैं और दर्शकों का ध्यान आकर्षित करती हैं। कैप्शन आपकी वेब छवियों के बारे में अतिरिक्त जानकारी प्रदान करते हैं, लेकिन उन्नत HTML और CSS कौशल के बिना वेबपृष्ठों में उन्हें जोड़ना मुश्किल हो सकता है। यहां एक छवि के साथ एक सरल, अभी तक आकर्षक, कैप्शन जोड़ने के लिए एक विश्वसनीय विधि है जो छवि के साथ रहता है जहां भी आप इसे वेबपृष्ठ पर ले जाते हैं।

एक HTML छवि कैप्शन के लिए 9 कदम

एक छवि में एक कैप्शन जोड़ें और जहां चाहें उन्हें एक साथ ले जाएं:

1. अपने वेबपृष्ठ में एक छवि जोड़ें ।
2. अपने वेबपृष्ठ के लिए एचटीएमएल में, छवि के चारों ओर एक div टैग रखें:
3. Div टैग में एक शैली विशेषता जोड़ें:
   style = "" >
4. चौड़ाई शैली संपत्ति के साथ, छवि के रूप में समान चौड़ाई में div की चौड़ाई सेट करें:
   width: image width px; ">
5. कैप्शन के लिए जो आस-पास के पाठ से थोड़ा छोटे होते हैं , div शैली में फ़ॉन्ट-आकार की संपत्ति जोड़ें:
   फ़ॉन्ट-आकार: 80%; ">
6. यदि वे छवि के नीचे केंद्रित हैं तो कैप्शन सर्वोत्तम दिखते हैं, इसलिए स्टाइल विशेषता में टेक्स्ट-एलाइन गुण जोड़ें:
   टेक्स्ट-एलाइन: सेंटर; "> < img src = "URL" alt = "वैकल्पिक पाठ" चौड़ाई = "चौड़ाई" ऊंचाई = "ऊंचाई" />
7. आखिरकार, छवि और कैप्शन के बीच एक अतिरिक्त अतिरिक्त स्थान जोड़ें, जिसमें पैडिंग-डाउन स्टाइल प्रॉपर्टी के साथ छवि में शैली विशेषता जोड़कर:
   शैली =" पैडिंग-तल: 0.5em; " />

1. फिर छवि के नीचे सीधे टेक्स्ट कैप्शन जोड़ें:
   यह मेरा कैप्शन है

अपने सर्वर पर वेबपृष्ठ अपलोड करें और ब्राउज़र में इसका परीक्षण करें।

कैप्शनिंग टिप्स

• चौड़ाई : सीएसएस आयाम कई अलग-अलग मापों में हो सकते हैं, इसलिए आपको आमतौर पर माप प्रकार शामिल करना होगा। उदाहरण के लिए: चौड़ाई: 100 पीएक्स ; हालांकि, एचटीएमएल छवि आयाम हमेशा पिक्सेल में होते हैं, इसलिए आप माप को छोड़ देते हैं। चौड़ाई = "100"
• यदि आप छवि चौड़ाई की तुलना में div की चौड़ाई को चौड़ा बनाते हैं, तो कैप्शन छवि के बगल में दिखाई दे सकता है। यदि आप यही चाहते हैं, तो कैप्शन से पहले और छवि टैग के बाद सीधे एक
  टैग जोड़ें।