HTML में Image Tag क्या है?(HTML Image टैग)

किसी भी webpage को attractive बनाने के लिए हम image का use कर सकते है। Webpage में image को add करने के लिए <img> tag का use करते है। आइये इसे और अच्छे से समझने की कोशिस करते है।

Table of Contents

HTML Image Tag क्या है ?

Webpage में image को add करने के लिए <img> टैग का use करते है। यह empty tag के अंदर आता है अर्थात इसके लिए किसी closing टैग की जरूरत नहीं होती है। Image को describe करने के लिए <alt> tag का use करते है। Image के source को add करने के लिए “src” attribute का use किया जाता है।

Syntax

<img src=”image path with extension or URL यहां लिखते है। ”>

alt attribute

यह image के alternative text को show करता है। जब कोई image किसी वजह से webpage में show नहीं होती है तो उसके जगह पर यह alternative text दिखाई देता है।

<!DOCTYPE html>
<html>
<body>
      <h2>Logo of Technalay </h2>
      <img src = "https://technalay.in/wp-content/uploads/2023/08/cropped-cropped-2.png" alt = "Technalay Logo " >
</body>
</html>

ध्यान रहे आपके द्वारा दिया गया image path सही हो अन्यथा webpage में image show नहीं होगा।

Image Alignment

Webpage में image को align करने के लिए या किसी जगह में set करने के लिए alignment attribute का उसे किया जाता है। Default mode में image left साइड में रहता है। लेकिन इस attribute का use करके image को right या center कर सकते है।

<!DOCTYPE html>
<html>
<body>
      <h2>Logo of Technalay </h2>
      <img src = "https://technalay.in/wp-content/uploads/2023/08/cropped-cropped-2.png" align="right " alt = "Technalay Logo " >
</body>
</html>

Image Size

किसी भी webpage में image के size को छोटा या बड़ा करने के लिए height और width attribute का use किया जाता है। निचे उदाहरण में आप इसे अच्छे से समझ सकते है।

 <!DOCTYPE html>
<html>
<body>
      <h2>HTML Image tag in Hindi</h2>
      <p>Image Insert</p>
      <img src = "https://technalay.in/wp-content/uploads/2023/08/cropped-cropped-2.png" alt = "Technalay Logo" height="60px" width="180px">
</body>
</html>

HTML Floating Images

Float attribute का use image को right-left , top-bottom में float करने के लिए उसे करते है।

<!DOCTYPE html>
<html>
<body>
      <h2>HTML Image tag in Hindi</h2>
      <p>Image Insert</p>
      <img src = "https://technalay.in/wp-content/uploads/2023/08/cropped-cropped-2.png" alt = "Technalay Logo" style="float:left;width:180px;height:60px;">
</body>
</html>

Images HTML Links

Webpage में किसी image में किसी path को लिंक करने के लिए <a> tag का use करते है। ताकि अगर आप image पर क्लिक करे तो दूसरे site में पहुच जाये।

<!DOCTYPE html>
<html>
<body>
<p>The image is a link. You can click on it.</p>
  <a href="https://technalay.in/">
  <img src = "https://technalay.in/wp-content/uploads/2023/08/cropped-cropped-2.png" alt = "Technalay Logo" >
</a>
</body>
</html>

« Previous Next »