HTML Images

Introduction to HTML & Images

Images से एक web page attractive और beautiful लगता है। HTML के द्वारा web page में आप कोई image add कर सकते है। इसके लिए आप <img> tag यूज़ करते है। <img> tag बहुत से attributes provide करता है जिनसे आप image की presen tationको 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 करने के लिए आप tag का इस्तेमाल करते है। tag के साथ src attribute यूज़ करना necessary होता है। बाकि सभी attributes optional होते है। इसका उदाहरण नीचे दिया जा रहा है।

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

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

</html>

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

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="BHT-logo.jpg" alt="Best Hindi Tutorials Logo">

</body>

</html>

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

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 करेगी।

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="BHT-logo.jpg" border="5" >

</body>

</html>

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

Making Image a Link

आप चाहे तो image को एक link भी बना सकते है। ऐसा करने से जब भी कोई image पर click करेगा तो एक नया web page open होगा। इसके लिए आप tag को tag में लिखते है। Anchor tag में text की जगह आप 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 होता है।