Ticker

6/recent/ticker-posts

Advertisement

How to Apply figure tag & figcaption tag in HTML Web Pages (HTML Web Pages में figure tag & figcaption tag कैसे लगाए ) (Web Designing series Part-24)

  HTML Web Pages में figure tag & figcaption tag कैसे लगाए 




  • ये web designing series का part-24 है आज के इस article में हम पढने वाले है की html web pages में <figure> tag और <figcaption> tag कैसे apply करे इससे पहले हम आपको बता दे की अगर आप हमारे इस article पर पहली बार आये है  तो इस article को समझने से पहले आप web designing series के पिछले सभी part देख ले फिर इस article पर आये पिछले सभी part पढने के लिए आपको हमारी website के menu baar पर web designing series का dropdown देखने को मिलेगा जिसके अन्दर HTML के सभी parts के link आपको मिल जायेगे तो आप वहा जाकर सभी parts को detail में पढ़ सकते है 

 <figure> tag और <figcaption> tag का इस्तेमाल HTML web pages में क्यों किया जाता है

  1. किसी भी वेबसाइट के वेब पेजेज में <figure> tag और <figcaption> tag  का इस्तेमाल किसी भी इमेज को लगाने और उसी इमेज के निचे उसका नाम बताने के लिए किया जाता है 
  2. <figure> tag और <figcaption> tag की कोडिंग html में एक साथ ही <body> tag के अन्दर की जाती है |
  3. <figure> tag और <figcaption> tag का opening और closing tag होता है जिसका हमें विशेष ध्यान देना होगा इसको हम example के साथ समझेगे |
  4. <figcaption> tag की कोडिंग <figure> tag के अन्दर ही करनी होती है और <figure> tag की कोडिंग <body> tag के अन्दर करनी होती है  जिसे हमने आपको ऊपर भी बताया है हम इसे example में निचे समझेगे |
  5. <figure> tag और <figcaption> tag को practically समझने के लिए आपको निचे दिए विडियो को देखना होगा जिसे देखकर आप भी इसका practical करेगे 
  6. <figure> tag और <figcaption> tag  के अन्दर थोड़ी css भी apply करनी होती है जिसे आपको देखकर घबराना नही है सिर्फ जितनी css लगाई है उतनी आप भी लगावोगे और css को हम आगे detail में पढेगे ही |
  7. <figure> tag और <figcaption> tagकी कोडिंग करने पर हमारी इमेज कुछ इस प्रकार दिखेगी जिस प्रकार निचे दी हुयी Lion with girl की इमेज है और उसका नाम भी निचे दिया हुवा है |




  • तो चलिए अब <figure> tag और <figcaption> tag को example की मदद से समझते है 

Example-:

<body>

<figure style="border:2px solid gray; padding:5px; border-radius: 5px;">

<img src="scotland.jpg" style="width:100%;">

<figcaption  style="text-align:center;">  Scotland Image </figcaption>

</figure>

</body>

  • जैसा आपने example में देखा की <figure> tag और <figcaption> tagकी कोडिंग कैसे करनी है और इनके अन्दर css कैसे apply करनी है |
  • अगर आप <figure> tag के अन्दर  border देना चाहे तो दे वरना नही भी दे सकते है और padding , border-radius क्या है इसे लेकर आप Confuse बिल्कुल न हो इन सभी को आगे विस्तार से पढेगे ही |
  • और <figcaption> tag के अन्दर जो css apply की गयी है इसे आप भी जरूर लगाए वरना आप अपनी इमेज का जो भी नाम देगे वो इमेज के निचे center में नही होगा बाए दाए कभी भी हो सकता है इसलिए इतनी css आप जरूर apply करे 
  • निचे दिए विडियो को जरूर देखे जिससे आपको <figure> tag और <figcaption> tag का practical करना अच्छे से समझ आयेगा 
  • अगर आपको कोई भी doubt हो जो भी समझ में न आ रहा हो तो comment box में बताये या फिर वेबसाइट में दिए हुए social icon पर क्लिक कर आप direct मुझसे बात कर सकते है |
  • दिए हुए विडियो को क्लिक करे जिसमे <figure> tag और <figcaption> tagका practically इस्तेमाल करना दिखाया गया है


  •  


अगर आपको ये series पसंद आ रही हो तो इसे अपने दोस्तों तक भी शेयर करे ताकि  वो भी इसे free में पढ़ सके अगर आपने अभी तक हमें फॉलो नहीं किया तो जरूर करे |

Post a Comment

0 Comments