HTML For Beginners - Part 5

HTML Attributes, Images සහ Links

            අපි අද පාඩමෙන් කතා කරන්න බලාපොරොත්තු වෙන්නේ HTML Attributes, Images සහ Links ගැනයි. මුලින්ම අපි බලමු  HTML Attributes කියන්නේ මොනවද කියලා.

•               HTML Attributes

HTML Attributes වලින් කරන්නේ element එකක් හරි එහෙමත් නැත්නම් tag එකක් ගැන හරි අමතර තොරතුරක් ලබා දීමයි. ඒ අතරතුර ඒවා modify කිරීමත් මේ  HTML Attributes වලින් කරනවා. ගොඩක් Attributes වලට අගයක් තියෙනවා. ඒ අගයෙන් තමයි Attribute එක modify කරන්නේ.

      අපි උදාහරණයක් බලමු.

        මේ Program එක run කලාම අපිට ලැබෙන output එක පහත විදියට දැකගන්න ලැබෙනවා. ඒකෙදි text එක පිටුවේ මැදට align වෙලා තියෙන විදිය අපිට බලාගන්න පුලුවන්.

අපි මේකෙදි මතක තියාගත යුතු දෙයක් තමයි Attributes හැමතිස්සෙම specify වෙන්නේ ආරම්භක tag එකක් ඇතුලත බව. ඒ වගේම ඒවා දිස් වෙන්නේ name = “ value ” කියන යුගල විදියටයි.

අපිට Attributes වලට measurements දෙන්නත් පුළුවන්. ඒ කොහොමද කියල අපි බලමු තිරස් රේඛාවකට (horizontal line) පළල (width) අගයක් දීලා. අපිට මේ අගය pixels  වලින් වගේම ප්‍රතිශතයක් (percentage) විදියටත් දෙන්න පුළුවන්.

අපි උදාහරණයක් බලමු.

මෙහිදී අපට දැකගන්න ලැබෙන දෙයක් තමයි Pixels වලින් අගය දුන්නම ලැබෙන රේඛාව අපි දෙන pixel ගණනට සමාන දිගකින් ඇඳෙන බව. ඒ වගේම percentage එකක් විදියට දුන්නම ඒ ප්‍රතිශතයට අනුව ඇඳෙන බවත් දකින්න පුළුවන්. <hr noshade> tag එක භාවිතා කලාම ත්‍රිමාණ shading effect එකක් නැතිව රේඛාව දැකගන්න පුළුවනි. ඒක කරලා බලන්න. 

            අපිට පුළුවනි Align Attribute එකට center අගය වගේම right, left අගයන් දීල බලන්න. ඒ විදියේ අගයන් ටිකක් දීලා බලමු දැන්.

           විශේෂ දෙයක් තමයි Align attribute එක HTML 5 වල වැඩ කරන්නේ නැති එක (does not support). ඔයාලට හිතෙන්න පුළුවන් එකම Element එකක් ඇතුලේ එකිනෙකට පරස්පර Attributes දෙකක් දුන්නම මොන වගේ ප්‍රතිඵලයක් ලැබෙනවා ඇතිද කියලා. ඒකට උත්තරය උඩ program එකේම තියෙනවා. <p> element එක ඇතුලෙම තමයි අපි align = “center” සහ align = “right” කියන අගයන් දෙකම දීලා තියෙන්නේ.

•         Images

අපි ඊළඟට බලන්න යන්නේ අපේ HTML file එකට image එකක් එකතු කරගන්නේ කොහොමද කියලා. මේකෙදි භාවිතා වෙන tag එක තමයි <img>. මේ <img> tag එකත් closing tag එකක් යෙදෙන්නේ නැති tag එකක්. අපිට image එකේ URL එක, එහෙම නැතිනම් address එක දෙන්න පුළුවන් src කියන attribute එකට.

HTML වලදී image syntax එක වෙන්නේ < img src = “image.jpg” /> කියන code එක. ඒ වගේම අපි දෙන URL එකේ image එක නැත්නම් හරි image එක display කරන්න බැරි නම් හරි ඒ වෙනුවට විකල්ප text එකක් (alternate text) display කරන්න alt attribute එක යොදාගන්නවා. මෙහිදී අපි ඒක යෙදීම අනිවාර්යයි. නමුත් text එකක් display කරන්න ඕන නැතිනම් quotation marks ඇතුලේ හිස් තැනක් (“ “) තියන්න පුළුවන්.

Image එකේ පිහිටීම (location) එහෙම නැත්නම් කලින් කිව්වා වගේ address එක src attribute එකේ quotation marks ඇතුලේ තමයි අපි දෙන්නේ. HTML file එක තියෙන folder එකේම Barbie.jpg කියලා Image එකක් තියෙනවා නම් අපි code එක ලියන්න ඕන පහත විදියටයි.

දැන් අපිට පුළුවන් අපිට ඕන විදියට මේ Image එකේ ප්‍රමාණය වෙනස් කරගන්න. ඒකට අපිට Width සහ height attributes යොදාගන්න පුළුවන්. අගයන් ලබා දෙන්න කලින් කිව්ව විදියට pixels හෝ percentage යොදාගන්නපුළුවනි. නමුත් Image එකක් load වෙන්න ටිකක් වෙලා යන නිසා විශාල Images ඔයාගේ වෙබ් පිටුව මන්දගාමී (slow down) කරන්න පුළුවනි. ඒ නිසා Images යොදාගද්දී පරිස්සම් විය යුතුයි.

Image එක resize කරගන්න වගේම image එකට border එකක් යොදන්නත් අපිට පුළුවන්. සාමාන්යයෙන් තියෙන්නේ (by default) border එකක් නැතිවයි. Border එකක් යොදාගන්න ඕන නම් අපිට border attribute එක යොදන්න වෙනවා <img> tag එක ඇතුලතින්.

අපි උදාහරණයකින් බලමු Image එකක් resize කරගන්න විදිය සහ border එකක් එකතු කරගන්න විදිය.

       මේ විදියට ඔයාලට පුළුවන් විවිධ වෙනස්කම් කරලා බලන්න. Image වලටත් alignments දෙන්න අපිට පුළුවනි. align = "top", align = "middle" සහ align = "bottom" මගින් මේක කරන්න පුළුවන්.

•           Links

Links කියන්නෙත් ඕනෑම වෙබ් පිටුවක integral part එකක් විදියට සලකන්න පුළුවන්. ඔයාලට පුළුවනි link එකක් එකතු කරලා text එකක් හරි නැතිනම් image එකක් හරි උඩ click කලාම වෙනත් file එකකට හෝ වෙබ් පිටුවකට යොමු වෙන්න.

HTML වලදී links හදාගන්න <a> tag එක තමයි අපි යොදාගන්නේ. hfref attribute එක මගින් තමයි link එකේ destination address එක ලබා දෙන්නේ. Link syntax එක වෙන්නේ,

<a href = “” > </a>

අපි දැන් Link එකක් එකතු කරලා උදාහරණයක් කරමු. මෙතැන් සිට මම text editor එක විදියට Notepad++ තමයි යොදාගන්නේ. ඒකටහේතු ගොඩක් තියෙනවා. විශේෂයෙන්ම මේක භාවිතය පහසුයි. අපිට Notepad++ එකේදී  indentations ගැලපෙන විදියට auto generate වෙනවා. ඒ වගේම ඉහල තියෙන bar එකේ Language එකට HTML select කලාම අපේ code එකේ වැරැද්දක් තියෙනවා නම් text editor එකේ වර්ණ වෙනස් වීමකින් ඒක පෙන්වනවා. ඒ නිසා අපිට වැරදි හඳුනාගන්න ලේසියි.
අලුත් browser එකක website එකකට, email address එකකට වගේම අපේ වෙනත් web page එකකටත් අපිට Link එකක් ලබාදෙන්න පුළුවන්.

මේ Code එකට අනුව link එක වැඩ කරන විදිය අපිට මේ video එකෙන් බලාගන්න පුළුවනි.

අද පාඩමෙන් අපි ඉගෙනගත්තේ HTML attributes, images සහ links ගැන. මේ codes එක එක විදියට වෙනස් කරලා බලන්න. එතකොට තමයි හොඳ පුහුණුවක් වගේම හොඳ අවබෝධයක් ලැබෙන්නේ. එහෙනම් තවත් පාඩමකින් අපි හමුවෙමු.

-- ලක්ෂිකා ස්වර්ණමාලි --