HTML के पहले कदम - पाठ 6 - चित्र

10/10/2025, by Ivan

किसी वेबसाइट पर चित्र (images) एक बहुत ही महत्वपूर्ण तत्व होते हैं। उनके बिना वेबसाइट फीकी और नीरस लगती है। चित्रों का उपयोग वेबसाइट की सजावट, फोटो गैलरी, या सामान्य रूप से सामग्री को सुंदर बनाने के लिए किया जाता है।

चित्र जोड़ने के लिए IMG टैग का उपयोग किया जाता है (ध्यान दें, हम “image” पूरा शब्द नहीं लिखते, केवल img लिखते हैं)। IMG टैग एकल (single) टैग है — यानी यह जोड़े में नहीं आता: <img />.

IMG टैग का मुख्य गुण src है। यह उसी तरह कार्य करता है जैसे href गुण लिंक (a) टैग में करता है। src में हमें चित्र की फ़ाइल का पथ (path) निर्दिष्ट करना होता है। यह पथ सापेक्ष (relative) या पूर्ण (absolute) दोनों प्रकार का हो सकता है।

यह हमारे index.html का कोड है:

<html>
  <head>
    <title>मेरा पहला HTML दस्तावेज़</title>
  </head>
  <body>  
    <h1>मेरा पहला HTML दस्तावेज़</h1>
    <p>
      <a href="files/file.html">दूसरे दस्तावेज़ का लिंक</a>
    </p>
  </body>
</html>

अब हम इस फ़ाइल के पास ही एक images नाम का फ़ोल्डर बनाएँगे और उसमें एक चित्र फ़ाइल कॉपी करेंगे। मान लीजिए कि चित्र का नाम image.jpg है। अब इस चित्र को अपने index.html में जोड़ते हैं:

<html>
  <head>
    <title>मेरा पहला HTML दस्तावेज़</title>
  </head>
  <body>  
    <h1>मेरा पहला HTML दस्तावेज़</h1>
    <p>
      <img />
    </p>
    <p>
      <a href="files/file.html">दूसरे दस्तावेज़ का लिंक</a>
    </p>
  </body>
</html>

अब हमें चित्र का पथ निर्दिष्ट करना होगा। हम सापेक्ष (relative) पथ लिखेंगे, और उसे ./ से शुरू करेंगे:

./

अब हम उस फ़ोल्डर का नाम जोड़ते हैं जिसमें चित्र रखा गया है:

./images/

और फिर चित्र फ़ाइल का नाम लिखते हैं:

./images/image.jpg

अब इस पथ को IMG टैग के src गुण में डालते हैं:

<html>
  <head>
    <title>मेरा पहला HTML दस्तावेज़</title>
  </head>
  <body>  
    <h1>मेरा पहला HTML दस्तावेज़</h1>
    <p>
      <img src="./images/image.jpg" />
    </p>
    <p>
      <a href="files/file.html">दूसरे दस्तावेज़ का लिंक</a>
    </p>
  </body>
</html>

इस समय चित्र अपनी मूल (original) साइज़ में दिखाई देगा। लेकिन हम उसकी ऊँचाई (height) और चौड़ाई (width) को बदल सकते हैं।

IMG टैग में चौड़ाई का गुण width और ऊँचाई का गुण height कहलाता है। हम केवल चौड़ाई, केवल ऊँचाई, या दोनों एक साथ निर्दिष्ट कर सकते हैं। उदाहरण के लिए:

<html>
  <head>
    <title>मेरा पहला HTML दस्तावेज़</title>
  </head>
  <body>  
    <h1>मेरा पहला HTML दस्तावेज़</h1>
    <p>
      <img src="./images/image.jpg" width="200" />
    </p>
    <p>
      <a href="files/file.html">दूसरे दस्तावेज़ का लिंक</a>
    </p>
  </body>
</html>

या केवल ऊँचाई निर्धारित करने के लिए:

<html>
  <head>
    <title>मेरा पहला HTML दस्तावेज़</title>
  </head>
  <body>  
    <h1>मेरा पहला HTML दस्तावेज़</h1>
    <p>
      <img src="./images/image.jpg" height="400" />
    </p>
    <p>
      <a href="files/file.html">दूसरे दस्तावेज़ का लिंक</a>
    </p>
  </body>
</html>

यदि आप एक साथ दोनों — ऊँचाई और चौड़ाई — निर्दिष्ट करते हैं, तो ध्यान रखें कि वे चित्र के मूल अनुपात (aspect ratio) के अनुरूप हों। अन्यथा आपकी वेबसाइट पर चित्र विकृत (distorted) दिखाई देगा:

<html>
  <head>
    <title>मेरा पहला HTML दस्तावेज़</title>
  </head>
  <body>  
    <h1>मेरा पहला HTML दस्तावेज़</h1>
    <p>
      <img src="./images/image.jpg" height="400" width="100" />
    </p>
    <p>
      <a href="files/file.html">दूसरे दस्तावेज़ का लिंक</a>
    </p>
  </body>
</html>

एक्स्ट्रा ब्लॉक टाइप्स (EBT) - नया लेआउट बिल्डर अनुभव❗

❗एक्स्ट्रा पैराग्राफ टाइप्स (EPT) - नया पैराग्राफ्स अनुभव

GLightbox is a pure javascript lightbox (Colorbox alternative without jQuery)❗

HTML के पहले कदम - पाठ 6 - चित्र