HTML TUTORIAL: IMAGE TAG

HTML TUTORIAL IN HINDI


HTML TUTORIAL: IMAGE TAG

  • Introduction to HTML Image
  • Syntax of HTML Image
  • Attribute of Image
  • Inserting image in HTML page

INTRODUCTION TO HTML IMAGE

Image kisi bhi webpage ko attractive banate hai. agar do site par ek hi topic par post likha hai, ek me only text lekha and dusre me text aur image dono. Jab bhi user dono site par visit karega to text ki bajay jispar image laga hoga ussi par visit kar ke jyada der tak rahega Q ki ek text ke mukable ek image bhut kuch batata hai.

HTML page ko attractive aur beautiful banane ke liye koi bhi image add kar sakte hai. iske liye aapko <img> tag ki madat leni hogi. <img> tag ek empty taghota hai jiske sath koi closing tag nahi hota hai.

HTML document me image insert karte samay koi bhi format le sakte hai. jaise: png,jpeg, gifs etc. image jis format me hai ussi format me batana hoga.
Image kis format me hai janne ke liye image par mouse ki right click karke property par click kare uske badh aapko image ki location, format, size etc mil jayega.

SYNTAX OF IMAGE TAG

HTML document me image insert karne ke liye syntax niche diya jar aha hai.
<img scr= “logo.png”>


Syntax me <img> image ko define karta hai aur src uski location ko.
Src attribute important hone ke sath isme use hone wali image URL ko “” Double Quotation Mark ke vitar likha jata hai.

Webpage par image add karte samay image ki name jaisi hai “yfttechhindi- logo.png वा yfttechhndi.png” waise hai src attribute me likhna hoga.

ATTRIBUTE OF IMAGE TAG

Image tag ke sath bhut sara attribute hota hai. uski list niche diya jaa raha hai.
  • Src: Is attribute ki madat se image ki source or URL ko define kar sakte hai.
  • Alt: Is attribute ki madat se image ke bare me bata sakte hai.
  • Style: Is attribute ko image par css rules ko apply karne ke liye kiya jaata hai.
  • Width & Height: Yeh dono attribute alag hai aur iske dwara image width aur height ko define kar sakte hai.
  • Title: Yeh attribute ki title datsata hai.
  • Border: Image ki border kitni ho wo is attribute ki madat se kar sakte hai.
  • Aligh: is attribute ki madat se image alignment ko define kar sakte hai.

INSERTING IMAGE IN HTML PAGE

Image insert karne ke liye aapko <img> tag ko use karna hoga. <img> tag ke sath aapko src attribute ko bhi lagana hoga.

Src attribute chodkar baki sabhi attribute optional me use kar sakte hai. Iske related example niche diya jata hai,
<!DOCTYPE html>
<html>
<head>
<title>Inserting image</title>
</head>
<body>
<img src= "yfttechhindi logo.png">
</body>
</html>


Result:
HTML tutorial in hindi, image tags tutorial

Aapne dekha ki ek image insert ke liye <img> tag aur uski src attribute ko use kiya, result me image insert ho gaya.

ALTERNATIVE TEXT WITH IMAGE

Apne page par image use karte hai to thick hai magar kuch karan se kabhi wo image show nahi huwa, uske liye alternative text ko use kar sakte hai ta ki image show na hone par text show ho.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Inserting image</title>
</head>
<body>
<img src= "yfttechhindi logi.png" alt= "HTML Tutorial In Hindi">
</body>
</html>

Result:
HTML tutorial in hindi, image tags tutorial

Result me aap dekh sakte hai ki image show na hone par text show hogi.

MAKING IMAGE A LINK

Website aur website ka page ka ek link hota hai, waise hi image ka bhi ek link hota hai. Image ka link banane ke badh jabbhi koi uspar click karega to ek naya page open hoga. Iske liye aap <img> tag ko <a> tag me likhna hoga. <a> tag anchor tag hota hai, jisme aap <img> tag ko define karte hai
Example:
<!DOCTYPE html>
<html>
<head>
<title>Inserting image</title>
</head>
<body>
<a href= "www.yfttechhindi.com">
<img src= "logo.png"> </a>
</body>
</html>
Result:
HTML tutorial in hindi, image tags tutorial

WIDTH & HEIGHT OF IMAGE

Image ki width aur height set karne ke liye aapko width and height attribute ko use karna hoga.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Inserting image</title>
</head>
<body>
<a href= "www.yfttechhindi.com">
<img src= "logo.png" width= "300" height= "300"> </a>
</body>
</html>
Result:
HTML tutorial in hindi, image tags tutorial

BORDER OG IMAGE

Image ki border set karne ke liye border attribute use kar sakte hai. iski value size hoti hai.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Inserting image</title>
</head>
<body>
<a href= "www.yfttechhindi.com">
<img src= "logo.png" border= "8"> </a>
</body>
</html>

Result:

HTML tutorial in hindi, image tags tutorial
previous: Comment Tags
Next: Table Tags

HTML TUTORIAL: IMAGE TAG HTML TUTORIAL: IMAGE TAG Reviewed by Phaguni Mandal on December 03, 2018 Rating: 5

No comments:

'; (function() { var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true; dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js'; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); })();
Powered by Blogger.