webdevlinux - logo Web Dev Linux

HTML සමග පින්තූර භාවිතය

HTML ගොනුවක් තුල පින්තූර භාවිතා කල හැකි ආකාර පිළිබදව මෙහිදී සලකා බැලේ.

HTML Images Img element

පහත උදාහරණය අත්හදා බලන්න.

FILE : images.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Images with HTML</title>
</head>
<body>
<img src="http://www.webdevlinux.com/img/sky.jpg" alt="Sky">
<img src="http://www.webdevlinux.com/img/sky.jpg" alt="Sky" width="200">
<img src="http://www.webdevlinux.com/img/sky.jpg" alt="Sky" height="200">
<img src="http://www.webdevlinux.com/img/sky.jpg" alt="Sky" height="200" width="200">
</body>
</html>

පැහැදිලිකිරීම

ඉහත උදාහරණයේ සඳහන් elements හා attributes ගැන පැහැදිලි කිරීම පහත දක්වා ඇත.

<img>
HTML වලදී පින්තූරයක් නිරූපණය කිරීමට මෙය යොදාගනී.
src="http://www.webdevlinux.com/img/sky.jpg"
මෙයින් කියැවෙන්නේ පින්තූරය ඇති ස්ථානයයි. sky.jpg පින්තූරය download කර images.html ගොනුව අසලම පිහිටුවා ඇත්නම්, src attribute එක මේ ආකාරයට දැක්විය හැකිය.<img src="sky.jpg" alt="Sky">
alt="Sky"
පින්තූරය පිළිබදව ඉතා කෙටි හැදින්වීමක් මෙයින් දැක්වේ. අදාලා ස්ථානයේ පින්තූරය නොමැති විට හා පින්තූරය load වී නොමැති විට, පින්තූරය වෙනුවට මෙහි ඇති වචන දර්ශණය වේ. W3C ප්‍රමිතීන්ට අනුව පින්තූරයක මෙය අනිවාර්යයෙන් සදහන් කල යුතුය.
width="200"
මෙමගින් පින්තූරයේ දර්ශණය විය යුතු පළල pixel වලින් නිරූපණය කෙරේ.
height="200"
මෙමගින් පින්තූරයේ දර්ශණය විය යුතු උස pixel වලින් නිරූපණය කෙරේ.