Best Hindi Tutorials

Computer Science and IT tutorials in Hindi

Best Hindi Tutorials > Courses
Textual description of firstImageUrl

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>
           
ऊपर दी गयी script निचे दिया गया web page generate करेगी।

HTML-image-example-output



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="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 में देते है। 

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

<body>

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

</body>

</html> 

ऊपर दी गयी script निचे दिया web page generate करेगी।

HTML-Image-height-width-example-output



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> 

ऊपर गई गयी script निचे दिया गया web page generate करेगी।

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 करते है। इसका उदाहरण नीचे दिया जा रहा है। 

<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 होता है।   

      DMCA.com Protection Status

9  Replies so far - Add your comment