Best Hindi Tutorials

HTML in Hindi : Images

HTML images 

  • Introduction to HTML and images in Hindi 
  • Including images in your web page in Hindi 
  • Attributes used with <img> tag in Hindi 
  • Example 


Introduction to HTML and images 

Images से एक web page attractive और beautiful लगता है। HTML के द्वारा web page में आप कोई image add कर सकते है। इसके लिए आप <img> tag यूज़ करते है। <img> tag बहुत से attributes provide करता है जिनसे आप image की representation को control कर सकते है। इन attributes के बारे में नीचे दिया जा रहा है। 

Attributes 
Explanation 
src  
इस attribute के द्वारा जो image आप show करना चाहते है उसका URL दिया जाता है।   
alt  
इस attribute की value text होती है। यदि किसी वजह से आप की image web page पर show नहीं होती है तो उसकी जगह ये text show होता है। एक तरह से ये image का alternative होता है।   
width  
इस attribute के द्वारा आप image की width set करते है। 
height  
इस attribute से आप image की height set करते है।   
style  
इस attribute के द्वारा आप images पर CSS rules apply कर सकते है।   



Including images in web page 

जैसा की मैने उपर बताया किसी भी web page में images include करने के लिए आप <img> tag का इस्तेमाल करते है। <img> tag के साथ src attribute यूज़ करना necessary होता है। बाकि सभी attributes optional होते है। इसका उदाहरण नीचे दिया जा रहा है।

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

<body>

<img src="image-url">

</body>

</html>
           

Setting alternative text with images 

यदि किसी वजह से image show नहीं होती है तो alternative text उस जगह पर show होता है। ये attribute search engines को ये बताने के लिए भी यूज़ किया जाता है की ये image किसके बारे में है। इसका उदाहरण नीचे दिया जा रहा है।

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

<body>

<img src="image-url" alt="Photo of vipin sharma">

</body>

</html> 


Setting height and width of images 

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

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

<body>

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

</body>

</html> 

  

Setting border of images 

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

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

<body>

<img src="image-url" border="5" >

</body>

</html> 


   

Making image a link 

आप चाहे तो image को एक link भी बना सकते है। ऐसा करने से जब भी कोई image पर click करेगा तो एक नया web page open होगा। इसके लिए आप <img> tag को <a> tag में लिखते है। Anchor tag में text की जगह आप <img> tag को define करते है। इसका उदाहरण नीचे दिया जा रहा है। 

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

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

</html> 

      DMCA.com Protection Status

5  Replies so far - Add your comment