HTML in Hindi – Images

Share on facebook
Share on google
Share on twitter
Share on linkedin
  • Introduction to HTML and images in Hindi 
  • Including images in your web page in Hindi 
  • Attributes used with <img> tag in Hindi

Introduction to HTML Images 

Images से एक web page attractive और beautiful लगता है। HTML के द्वारा web page में आप कोई image add कर सकते है।

इसके लिए आप <img> tag यूज़ करते है। <img> tag बहुत से attributes provide करता है जिनसे आप image की presentation को control कर सकते है।

Attributes 
Explanation 
src  
इस attribute के द्वारा जो image आप show करना चाहते है उसका URL दिया जाता है।   
alt  
इस attribute की value text होती है। यदि किसी वजह से आप की image web page पर show नहीं होती है तो उसकी जगह ये text show होता है।

एक तरह से ये image का alternative होता है।   
width  
इस attribute के द्वारा आप HTML में image की width set करते है। 
height  
इस attribute से आप image की height set करते है।   
style  
इस attribute के द्वारा आप images पर CSS rules apply कर सकते है।   

Including Images in Web Page 

जैसा की मैने उपर बताया किसी भी HTML web page में images include करने के लिए आप <img> tag का इस्तेमाल करते है।

<img> tag के साथ src attribute यूज़ करना necessary होता है। बाकि सभी attributes optional होते है।

Example

<!DOCTYPE html>

<html> 

<head> 
<title>Web page with image</title> 
</head>

<body>

<img src="BHT-logo.jpg"> 
 
</body>

</html>

OUTPUT

HTML-image-example-output

Setting Alternative Text to Images 

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

ये attribute search engines को ये बताने के लिए भी यूज़ किया जाता है की ये image किसके बारे में है।

Example

<!DOCTYPE html>

<html>  

<head> 
<title>Image with alternative text</title> 
</head> 

<body> 

<img src="BHT-logo.jpg" alt="Best Hindi Tutorials Logo"> 
 
</body>
</html> 

यदि किसी reason से picture load नहीं होती है तो उसकी जगह alternate text इस प्रकार show होगा।

HTML-image-alternative-example-output

Setting Height and Width of Images 

Height और width set करने के लिए आप height और width attributes यूज़ करते है। इनकी values आप integers में देते है। 

Example

<!DOCTYPE html>

<html>  

<head> 
<title>Image with alternative text</title> 
</head> 

<body> 

<img src="image-url" height="200" width="200" > 
 
</body>

</html> 

Output

HTML-Image-height-width-example-output

Setting Border of Images 

आप image की border भी set कर सकते है इसके लिए आप border attribute यूज़ करते है। इस attribute की value border की size होती है।

example

<!DOCTYPE html>

<html>

<head> 
<title>Image with alternative text</title> 
</head>

<body> 

<img src="BHT-logo.jpg" border="5" > 
 
</body>

</html> 

Output

HTML-image-border-example-output

Making Image a Link 

आप चाहे तो image को एक link भी बना सकते है। ऐसा करने से जब भी कोई image पर click करेगा तो एक नया web page open होगा।

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

Example

<!DOCTYPE html>

<html> 

<head> 
<title>Image with alternative text</title> 
</head> 

<body> 

<a href="www.besthinditutorials.com"> 
<img src="image-url"></a> 

</body> 

</html> 

ऊपर दिया example एक image show करता है जिसे click करने पर src attribute में दिया गया URL open होता है।

Previous: HTML Tables
Next: HTML Lists