HTML Images -
වෙබ් පිටුවල අනිවාර්යෙන්ම ඇති දෙයක් නෙ පින්තූර. ඉතින් දැන් අපි බලමු කොහොමද වෙබ් පිටුවකට රූපයක් ඇතුලත් කරන්නේ කියල. මේ සඳහා භාවිතා කරන tag එක වන්නේ <img>. මේ <img> කියන්නේ empty element එකක්. එනම් මෙහි විවෘත tag එක පමණක් තිබෙන අතර අවසාන tag, </img> එකක් නැහැ. අපි දන්නවා රූපයක් කියන්නේ සම්පතක්.ඒ කියන්නේ resource එකක් කියන එක. ඉතින් එහෙම resource එකක් යොදනවිට එය තිබෙන ස්ථානය සඳහන් කරලා අදාළ path එක, එහෙමත් නැති නම් url එක යොදන්න ඕන. මෙහිදී src කියන attribute එක භාවිතා කරනවා.
<html>
<head>
<title>Using Image in Webpage</title>
</head>
<body>
<p>Simple Image Insert</p>
<img src="/html/images/test.png" alt="Test Image" />
</body>
</html>
එමෙන්ම යොදන රූපය වෙබ් පිටුවේ කුමන ස්ථානයේද තිබෙන්න ඕන කියන එකත් සඳහන් කරන්න පුළුවන්. ඒ කියන්නේ align වෙන්න ඕන කොහොමද කියන එක. මේ සඳහා අපි align කියන attribute එක යොදාගෙන values ලෙස right,left,center ආදී ලෙස යොදාගන්නවා.
<html>
<head>
<title>Set Image Alignment</title>
</head>
<body>
<p>Setting image Alignment</p>
<img src="/html/images/test.png" align="right"/>
</body>
</html>
ඒ වගේම තමයි යොදන පින්තුරයේ ප්‍රමාණය අපිට අවශ්‍ය පරිදි සකස් කරගන්නත් පුළුවන්. එහිදී පින්තූරයේ උස සහ පළල කියන අගයන් දෙක වෙනස් කරගනු ලබනවා. පළල width ලෙසත් උස height ලෙස ගන්නවා. ඉන් පසු යොදන අගයන් අපිට pixel වලින් හෝ ප්‍රතිශතයක් විදියට හෝ සඳහන් කරන්න පුළුවන්.
<html>
<head>
<title>Set Image Width and Height</title>
</head>
<body>
<p>Setting image width and height</p>
<img src="/html/images/test.png" alt="Test Image" width="150" height="100"/>
<img src="/html/images/test.png" alt="Test Image" width="50%" height="60%"/>
</body>
</html>
