Img tag क्या होता है इसे कैसे उपयोग करते है !
Img tag in html
img tag आपके web
-page पर image को add करते है , इसे हम उपयोग करके web-page attractive , beautiful & effectiveबना सकते है ।
इस tag को हम 'src' attribute का उपयोग करना जरुरी (necessary) होता है।
इस tag को बंद नहीं करना होता है।
इस tag को लिखने का तरीका (simple syntax) निचे बताया गया है ।
इस tag को लिखने का तरीका (simple syntax) निचे बताया गया है ।
<img src ="imag url....">
'src':-
इस "src " attribute के द्वारा जो image आप show करना चाहते है उसका URL दिया जाता है। आसान शब्दों में src image की locationरखता है !
E.g. :-
<img src ="img/w4.jpg">
आसान सा structure निचे बताये गए है कुछ !
<html >
<head>
<title>img tag</title>
</head>
<body>
<h2>easy Ex. of image tag</h2>
<hr>
<img src="img/w4.jpg">
<h4>make an effective web page</h4>
</body>
</html>
ऊपर दिखाए गए E.g. का output
Attributes of image tag
Image के लिए Alternative Text लिखना :-
Alternative Text के लिए alt Attribute का उपयोग किया जाता है.किसी कारणवश Image Display नही होती है. तब यह Alternative Text ही User को दिखाई देता है. इसके अलावा Screen Readers, Search Engines आदि के लिए भी Alternative Text लिखना जरूरी है. क्योकि यह Image को देख नही सकते है. यह तो सिर्फ पढ सकते है.
<img src =" img.jpg" alt="W4 learn alt tag" >
Image की Width और Height Set करना :-
img की width और height set करके हम image को अच्छे से adjust कर सकते है, हम width और height को हम css और Attributes दोनों की मदद से सेट कर सकते है पर हम यह Attributes की मदद से ही करेंगे!
यह img की width और height px (pixels) और % (percentage) में दोनों में दे सकते है
यह img की width और height px (pixels) और % (percentage) में दोनों में दे सकते है
img की border को set करना :-
ऐसे भी हम PX(pixels) या फिर %(percentage) में defind कर सकते है!
Image Alignment को set करना :-
image की alignment को सेट करने के लिए हम align tag का उपयोग करते है , by defult align (left) रहती है , आपकी image बाई तरफ दिखाई देगी !align attribute का उपयोग करके आप image की position अपने अनुसार left , right और center में कर सकते है !
सभी Attributes का E.g. देखते है
<html >
<head>
<title>img tag</title>
</head>
<body>
<h2 align="center">easy Ex. of image tag mack a effective wabpage</h2>
<hr>
<img src="img/logo.png" height="150px" >
<br>
<img src="img/logo w4.png" height="150px" align="right" border="5px" >
</body>
</html>
<head>
<title>img tag</title>
</head>
<body>
<h2 align="center">easy Ex. of image tag mack a effective wabpage</h2>
<hr>
<img src="img/logo.png" height="150px" >
<br>
<img src="img/logo w4.png" height="150px" align="right" border="5px" >
</body>
</html>
output
Comments