HTML for Kids · पाठ

चित्र: अपने पेज में तस्वीरें जोड़ना

अपने वेब पेज में चित्र डालें और उनका स्वरूप बदलें

पाठ 4, कुल 4 में से10 चरण

चित्र: अपने पेज में तस्वीरें जोड़ना, CoddyKit पर HTML for Kids का एक निःशुल्क पाठ है। यह 4 में से 4वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह HTML for Kids सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। HTML for Kids पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

चित्र: अपने पेज में तस्वीरें जोड़ना

अगले पाठ में आपका स्वागत है! आज हम अपने वेब पेजों में चित्र जोड़ना सीखेंगे। तस्वीरें आपके पेजों को अधिक आकर्षक और मनोरंजक बनाती हैं!

HTML में चित्र क्या होते हैं?

वेब पेजों में चित्र <img> टैग का उपयोग करके जोड़े जाते हैं। यह स्वयं बंद होने वाला टैग है, यानी इसे </img> जैसे समापन टैग की आवश्यकता नहीं होती।

आइए, इसका उपयोग करना सीखते हैं!

चित्र जोड़ना

चित्र जोड़ने के लिए src एट्रिब्यूट का उपयोग करके चित्र फ़ाइल का स्थान निर्धारित करें।

उदाहरण:

इस उदाहरण में:

src: चित्र फ़ाइल निर्धारित करता है।
alt: चित्र प्रदर्शित न हो पाने पर वैकल्पिक पाठ देता है।

<img src="https://www.w3.org/html/logo/img/html5-display.png" 
alt="A beautiful view" />

वैकल्पिक पाठ (alt एट्रिब्यूट)

alt एट्रिब्यूट चित्र का वर्णन करता है। यह सुगम्यता के लिए महत्वपूर्ण है और खोज इंजनों को आपके चित्र को समझने में मदद करता है।

उदाहरण:

यदि चित्र लोड नहीं होता है, तो उसकी जगह "A beautiful sunset over the ocean" पाठ दिखाई देगा।

<img src="https://www.w3.org/html/logo/img/html5-display.png" alt="A beautiful sunset over the ocean" />

चित्र के आयाम जोड़ना

आप width और height एट्रिब्यूट का उपयोग करके अपने चित्र का आकार नियंत्रित कर सकते हैं।

उदाहरण:

यह उदाहरण चित्र की चौड़ाई 300 पिक्सेल और ऊँचाई 200 पिक्सेल निर्धारित करता है।

<img src="https://www.w3.org/html/logo/img/html5-display.png" alt="A red flower" width="300" height="200" />

चित्रों से लिंक करना

किसी चित्र को <a> टैग के भीतर रखकर आप उसे क्लिक किए जा सकने वाले लिंक में बदल सकते हैं।

उदाहरण:

चित्र पर क्लिक करने पर उपयोगकर्ता https://example.com पर पहुँच जाएगा।

<a href="https://example.com">
  <img src="https://www.w3.org/html/logo/img/html5-display.png" alt="Example Logo" />
</a>

ऑनलाइन चित्रों का उपयोग करना

src एट्रिब्यूट में उनका URL देकर आप ऑनलाइन होस्ट किए गए चित्रों का उपयोग कर सकते हैं।

उदाहरण:

<img src="https://www.w3.org/html/logo/img/html5-display.png" alt="Online Image" />

स्वयं करके देखें

आइए, चित्रों वाला एक सरल वेब पेज बनाते हैं। इसका उदाहरण यहाँ है:

<!DOCTYPE html>
<html>
  <head>
    <title>My Image Page</title>
  </head>
  <body>
    <h1>Welcome to My Gallery</h1>
    <img src="cat.jpg" alt="A cute cat" width="400" />
    <p>This is my adorable cat!</p>
    <img src="https://www.w3.org/html/logo/img/html5-display.png" alt="A playful dog" />
    <p>This is a friendly dog from the internet!</p>
  </body>
</html>

इंटरैक्टिव पाठ में इसका उत्तर दें

बहुत बढ़िया!

बधाई हो! आपने अपने वेब पेजों में चित्र जोड़ना, उनके आयाम निर्धारित करना और उन्हें अन्य पेजों से लिंक करना सीख लिया है। चित्र आपके वेब पेजों को अधिक रोचक और देखने में आकर्षक बनाते हैं। अगले पाठ में हम डेटा व्यवस्थित करने के लिए तालिकाएँ बनाना सीखेंगे। अपने पेजों को और अधिक उपयोगी बनाने के लिए तैयार हो जाइए!

चित्र: अपने पेज में तस्वीरें जोड़ना — चित्र 10

शुरुआत निःशुल्क

एआई शिक्षक के साथ HTML सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 16
पाठ: 35

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “चित्र: अपने पेज में तस्वीरें जोड़ना” पाठ निःशुल्क है?

हाँ—“चित्र: अपने पेज में तस्वीरें जोड़ना” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और HTML for Kids पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। HTML for Kids पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“चित्र: अपने पेज में तस्वीरें जोड़ना” में मैं क्या सीखूँगा?

अपने वेब पेज में चित्र डालें और उनका स्वरूप बदलें आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ HTML for Kids का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या HTML for Kids शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर HTML for Kids शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 4वाँ पाठ है।

“चित्र: अपने पेज में तस्वीरें जोड़ना” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस HTML for Kids पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर HTML for Kids पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← HTML for Kids पर वापस जाएँ