Image in html in Hindi-image क्या होता है?

हेल्लो दोस्तों आज इस पोस्ट में आपको Image in html in Hindi के बारे में बताया जा रहा है की ये क्या होता है कैसे काम करता है और बहुत कुछ तो चलिय शुरू करते है

Introduction to html & image

html image के द्वारा आप webpage को attractive और beautiful बनाया जा सकता है इसके लिए html(Image in html in Hindi)  के द्वारा वेब  पेज में आप कोई image को add करते है तो इसके लिए image tag <img> tag का प्रयोग किया जाता है <img> tag बहुत से attribute provide करता है जिसके द्वारा image की presentation को control करता है

इन attribute के बारे में निचे दिया जा रहा है

attributeExplanation
srcइस attribute के द्वारा आप जो image को show करना चाहते है तो उसका value में उसका url दिया जा रहा है
altइस attribute के द्वारा value text होती है यदि किसी से आप की image webpage पर show नही होती है तो उसकी जगह text या icon show होता है एक तरह से ये image का alternative होता है
widthइस attribute के द्वारा आप image की width set कर सकते है
heightइस attribute के द्वारा आप image की height set कर सकते है
styleइस attribute के द्वारा आप images पर CSS rules apply कर सकते है

 

Including Image in webpage

किसी भी webpage में image include करने के लिए <img> tag का प्रयोग किया जाता है इस tag के साथ src attribute का प्रयोग आवश्यक होता है src attribute के value में image का url दिया जाता है बाकि सभी attribute optional होता है

इसका example निचे दिया जा रहा है

<html>
<head>
<title>webpage image</title>
</head>
<body>
<img src=”image-url.jpg”>
</body>
</html>

OUTPUT

Image in html in Hindi-image क्या होता है?

Alternative text with Image

यदि webpage पर image नही show हो रहा है तो वह पर alternative text या icon उस स्थान पर show होता है ये attribute search इंजन में image किसके बारे में है

इसको हम एक example के द्वारा आसानी से समझ सकते है

<html>
<head>
<title>image with alternative text</title>
</head>
<body>
<img src=”url-image.jpg” alt=”c3school”>
</body>
</html>

OUTPUT

Image in html in Hindi-image क्या होता है?

इसमे आप देख सकते है यदि किसी कारण image show नही होता है तो alternative text show होता है

height and width image

किसी भी image की height और width को  set करने के लिए ये दोनों attribute का प्रयोग किया जाता है तथा आप इन दोनों attribute की value integer में define किया जाता है

<html>
<head>
<title>height and width image</title>
</head>
<body>
<img src=”image-url.jpg” height=”150” width=”180”>
</body>
</html>

border of image

border भी attribute की तरह होता है  जिसमे आप image की border भी set कर सकते है इसके लिए आप border attribute का प्रयोग किया जाता है

इस attribute की value border की size की तरह होती है

<html>
<head>
<title>image with border</title>
</head>
<body>
<img src=”image-url.jpg” border=”5”>
</body>
</html>

 

Image link active

हम image को एक link की तरह भी प्रयोग किया जा सकता है जिससे आप webpage पर image पर click करने पर आप webpage या new window open हो जायेगा

इसके लिए <img> tag को <a> tag (a=anchor) में लिखते है anchor tag में text की जगह आप <img> tag को define करते है

इसका example निचे दिया गया है

<html>
<head>
<title>image link enable</title>
</head>
<body>
<a href=https://www.c3school.in><img src=”image-url”></a>
</body>
</html>

reference-https://www.tutorialspoint.com/html/html_images.htm

निवेदन:-आप सभी छात्र –छात्रों से निवेदन है की अगर आपको ये Topic अच्छा लगा हो तो कृपया आप इस वेबसाइट के बारे में अपने दोस्तों को जरुर बताये अगर कोई topic से संबधित प्रश्न हो तो कमेंट्स(comments) आपके लिए ही बना है और किसी Subject के लेकर भी कोई प्रश्न हो तो कमेंट करे

Leave a Comment