Introduction of HTML Image tag in Hindi
web page को सुंदर और आकर्षक बनाने के लिए HTML मे Image tag का इस्तेमाल होता है। Image tag से Web page मे images को add किया जाता है। इस लेख मे हम image tag के बारे मे जानेंगे।और image tag के साथ कौन कौन से attributes का इस्तेमाल होता है। इन सभी के बारे मे detail मे जानेंगे।
HTML Image Tag
Image tag को add करने के लिए <img> tag का इस्तेमाल होता है।
Image tag empty tag है। इसमे closing tag </img> का इस्तेमाल नहीं होता है।
image tag को <img> से define किया जाता है।
<img> tag के साथ src attribute का इस्तेमाल होता है।
src attribute की value मे URL या image के path को add करते है।
उदाहरण
<img src=”image path with extension or URL”,..>
alt attribute
alt attribute image के alternative text को दर्शाता है। जब कोई reason से image वेब पेज पर दिखता नहीं तब उसकी जगह alternative text show होता है।
उदाहरण
<!DOCTYPE html>
<html>
<body>
<h2>HTML Image tag in Hindi</h2>
<p>Image Insert</p>
<img src = "https://compressjpeg.com/images/compressjpeg/icon.png" alt = "Megatechbook" >
</body>
</html>
यहा image के complete path को लिखना होगा। image के अलग अलग formats होते है जैसे की JPEG, PNG, gif (animated image) या SVG इसलिए image का extension को जरूर लिखे।
अगर आप image को अन्य website या webserver से insert कराना चाहते हो तो आपको उसका complete url लिखना पड़ेगा।
यहा image का file name case sensitive है। यहा image.png और Image.png ये दोनों अलग अलग file है।
Image Size – Width and Height
image को specific width और height देने के लिए Width and Height attribute का इस्तेमाल होता है।
उदाहरण
<!DOCTYPE html>
<html>
<body>
<h2>HTML Image tag in Hindi</h2>
<p>Image Insert</p>
<img src = "https://compressjpeg.com/images/compressjpeg/icon.png" alt = "Megatechbook" height="60px" width="180px">
</body>
</html>
हमारा यह suggestion है की आप Width and Height attribute की जगह style attribute का इस्तेमाल करे।
<!DOCTYPE html>
<html>
<body>
<h2>HTML Image tag in Hindi</h2>
<p>Image Insert</p>
<img src = "https://compressjpeg.com/images/compressjpeg/icon.png" alt = "Megatechbook" style="width:180px;height:60px;">
</body>
</html>
हमने यहा width and height को pixel के द्वारा define किया है। यहा आप pixel की जगह percentage(%), point(pt) और कई सारे अन्य units का इस्तेमाल कर सकते है।
Image Alignment
Image alignment को align attribute के द्वारा define करते है। By default image हमे left side दिखाई देती है। लेकिन हम align attribute का use करके image को center या right side set कर सकते है।
उदाहरण
<!DOCTYPE html>
<html>
<body>
<h2>HTML Image tag in Hindi</h2>
<p>Image Insert</p>
<img src = "https://compressjpeg.com/images/compressjpeg/icon.png" alt = "Megatechbook" align="left" height="60px" width="180px">
</body>
</html>
HTML Floating Images:
यह property style attributes के साथ use होती है। इससे इमेज को left, right, top, bottom या middle side float करा सकते है। इस property को हम Alignment के बदले use करते है।
उदाहरण
<!DOCTYPE html>
<html>
<body>
<h2>HTML Image tag in Hindi</h2>
<p>Image Insert</p>
<img src = "https://compressjpeg.com/images/compressjpeg/icon.png" alt = "Megatechbook" style="float:left;width:180px;height:60px;">
</body>
</html>
Image Border
image को border देने के लिए border attribute का इस्तेमाल करते है।
उदाहरण
<!DOCTYPE html>
<html>
<body>
<h2>HTML Image tag in Hindi</h2>
<p>Image Insert</p>
<img src = "https://compressjpeg.com/images/compressjpeg/icon.png" alt = "Megatechbook" border="2px">
</body>
</html>
Images HTML Links
image को as a link इस्तेमाल करने के लिए <a> tag का इस्तेमाल होता है। हम <a> tag के बारे मे अगले lesson मे detail मे बात करेंगे।
अगर आप image पर click करेंगे तो आपने जो link add किया है वो open होगा।
उदाहरण
<!DOCTYPE html> <html> <body> <p>The image is a link. You can click on it.</p> <a href="https://megatechbook.com/"> <img src = "https://compressjpeg.com/images/compressjpeg/icon.png" alt = "Megatechbook" > </a> </body> </html>
अगर आप image पर क्लिक करेंगे तो https://megatechbook.com/ website open होगी।
अगर आपके मन मे अभी भी कोई सवाल है तो आप हमे नीचे comment box मे बता सकते है।