• HTML Link
Internet එකේ සැරිසරන ඔයාට ලින්ක් ගැන නම් අමුතුවෙන් විස්තරයක් ඕන නැහැනෙ නේද..
හරි. එක් වෙබ් පිටුවක තියෙන වාක්‍ය ඛණ්ඩයක් හෝ පිංතූරයක් වෙනත් වෙබ් පිටුවකට සම්බන්ධ කරන්න අපි යොදා ගන්නවා මේ ලින්ක්..
ටැග් තමයි.... <a> </a>
ඇට්‍රිබියුට් තමයි... href
(එච් රෙෆ්. ඒ කියන්නෙ Hypertext reference. )
•Hyper Link - අධිසම්බන්ධය
කිසියම් වාක්‍ය ඛණ්ඩයක් හෝ පින්තූරයක් මත click කිරීමෙන් වෙනත් ස්ථානයක් හා සම්බන්ධ වේ නම් එම සම්බන්ධය අධි සම්බන්ධයක් ලෙස හදුන්වනවා..
මේ සම්බන්ධතාවය ගොඩ නැගීමට ක්‍රම තියෙනවා..
දෙකක් මම කියන්නම්...
i. URL link.
ii. Web page link.
හරි අපි එකින් එක තේරුම් ගමු..
i. URL link
මේකෙදි වෙනත් වෙබ් අඩවියකටයි සම්බන්ධ වෙන්නෙ.. අපි හිතමු අපිට ඕනෙ ගූගල් වෙබ් සයිට් එකේ ලින්ක් එක අපේ පේජ් එකේ දාන්න කියලා.. ඉස්සෙල්ලම ඔයා මේ කෝඩින් බලන්න..
<html>
<body>
<p>
<a href = "http://www.google.lk" target = "blank"> Google Website </a>
<p>
</body>
</html>
ඔයා සමහර තැන් වලදි දැකලා ඇති "මෙතැනින් යන්න" කියලා දීපු ලින්ක්. ඒ වචනෙ උඩ ක්ලික් කරපු ගමන් ඒ යන්න ඕන තැනට යැවෙනවා.. ඒ වගේ තමයි මේක. මේකෙදි පේනවා නේද Google Website කියලා.. අන්න ඒක තමයි වෙබ් පේජ් එකේ දි අපිට පෙන්නන්නෙ.. ඒක උඩ click කලාම http://www.google.lk කියන සයිට් එකට යැවෙනවා.. තේරුනා නේද..
ඊලඟට ඔයා දකින්න ඇති මේ කෝඩින් වල අලුත් ඇට්‍රිබියුට් එකක්. target කියලා.
ඔයා ලින්ක් එකක් උඩ ක්ලික් කලාම ඔයාට මතක ඇති ඒ ඕපන් වෙන සයිට් එක හරි පේජ් එක හරි වෙනම ටැබ් එකක ඕපන් වෙනවා.. එහෙම නැත්නම් ඒ ටැබ් එකේම ඕපන් වෙනවා.. අන්න ඒක තමයි මේ ටාගට් කියන එකෙන් පෙන්නන්නෙ.
* වෙනම ටැබ් එකක ඕපන් වෙන්න ඕනෙ නම් "_blank" කියලා දාන්න target කියන එකට..
* ඒ ටැබ් එකේම ඕපන් වෙන්න නම් "_self" කියලා දෙන්න target කියන එකට..
ii. Web page link
ඒ වෙබ් සයිට් එකේම වෙනත් වෙබ් පේජ් එකකට සම්බන්ධ කිරීමක් තමයි මේකෙදි කරන්නෙ..
අපි හිතමු අපිට තව වෙබ් පේජ් එකක් තියෙනවා butterfly.html කියලා..
අපිට දැන් ඒකෙ ලින්ක් එක අපේ මේ පේජ් එකට දෙන්න ඕනෙ කියලා හිතන්න..
බලන්න කෝඩින්.
<html>
<body>
<p>
<a href = "butterfly.html" target = "_self">
Click here.
</a>
</p>
</body>
</html>
Click here කියන තැන click කලාම butterfly.html කියන පේජ් එක ඕපන් වෙන්නයි දීලා තියෙන්නෙ ලින්ක් එක.
•HTML Table
වෙබ් පේජ් එකක් ඇතුලෙ වගු ගොඩනගන හැටියි මේ කියලා දෙන්න යන්නෙ.. ටේබල් එක ඇදෙන්න කෝඩින් කරන්නෙ <Table> </Table> මේ ටැග් දෙක අතරෙයි.
ඒ ටැග් දෙක ඇතුලෙ භාවිතා කරන ටැග් මම පහලින් පෙන්නන්නම්.. ලිස්ට් හැදුවා වගේ තමයි මේකත්..
<tr> </tr> - Table row.
<th> </th> - Table header data.
<td> </td> - Table data.
ඔයා හොදට තේරුම් ගන්න උත්සහ කරන්න. මේක out put එන විදිහ දැකලා තේරුම් ගන්න ලේසි එකක්. ඒත් මට මෙතන ඔයාට ඒක පෙන්නන්න විදිහක් නැහැ මම මේ බ්ලොග් ලිපි ලියන්නෙ html පාවිච්චි නොකර නිසා..
ඒ නිසා ඔයා මේවා කරලා බලන ගමන් තේරුම් ගන්න උත්සහ කරන්න හොදේ..
බලන්නකො මේ කෝඩින් එක කරලා..
<html>
<body>
<table>
<tr>
<th> Name </th>
<th> Age </th>
</tr>
<tr>
<td> Supun </td>
<td> 55 </td>
</tr>
</body>
</html>
ඔන්න මම පිලිවෙලට කියන්නම්.. ඔයා තේරුම් ගන්න..
table ටැග් එක open කලා.. ඒක ඇතුලෙ tr. table row එකක් open කලා.. ඒක ඇතුලෙ table header data එක විදිහට name දැම්මා.
table header ටැග් එක වැහුව නිසා ඊලග කොටුවට ඉබේම යැවෙනවා. ඒ යැවෙන කොටුවෙත් header එකක් ලියන්න ඕනෙ අපිට Age කියලා. ඒ නිසා table header data ටැග් එකක් open කලා.. ඒකෙ දැම්මා Age කියලා.. ඒ row එක ඉවරයි. (ඔයාට තව ඕනෙ නම් තවත් header දාන්න..)
ඒ row එක close කලා.. තවත් row එකක් open කලා.. මේ දැන් ලියන්න යන්නෙ අලුත් row එකක් table එජේ කලින් එකට පහලින්. Table data එකක් ලියන්නයි යන්නෙ. (මේක ලියවෙන්නෙ name කොටුවට පහල කොටුවෙ කියලා තේරෙනවා නේද..)
table data එකක් open කලා.. ඒකෙ supun කියලා දැම්මා.. ඒක close කලා.. ඊලග කොටුවට යැවෙනවා.. ඒකෙ 55 දැම්මා.. row එක වැහුවා.. table එක close කලා.. හරි නේද..
Table ටැග් එකට යොදන උපලක්ශන තමයි දැන් මම කියලා දෙන්නෙ.. බලන්නකො මේක...
<table border = 2 align = "center">
border සහ align දැන් ඔයාලට පුරුදු ඇට්‍රිබියුට්ස් නිසා හදුන්වාදෙන්න ඕන නැහැනෙ නේද..
අපේ ටේබල් එකට topic එකක් දෙන්න ඕන නම් ඒකට ටැග් එකක් තියෙනවා caption කියලා.. අපි හිතමු topic එක Srilanka කියලා.. කෝඩින් මෙහෙමයි...
<caption align =" top" > Srilanka </caption>
ඔයාට මතකයි නේද අපි හෙඩින් ලියපු ටැග්ස්. ඒවා use කරන්නත් පුලුවන් ඕන නම් topic එක ලියන්න..
* Cell padding
ටේබල් එකේ දාරයයි අකුරුයි අතර පරතරය තියන්න අපි මේ ඇට්‍රිබියුට් එක පාවිච්චි කරනවා.. මෙහෙම..
<table border ="1" cellpadding = "10">
*Cell spacing
මේක පාවිච්චි කරන්නෙ ටේබල් එකේ කොටු අතර පරතරයක් තියන්න.. මෙහෙම..
<table border ="1" cellspacing = "10">
ටේබල් එක කොයි තරම් පලල වෙන්න ඕනෙද කියලා අපිට width විදිහට දෙන්න පුලුවන්.. ඒක pixel වලින් දුන්නොත් නියත අගයක්. ප්‍රතිශතයක් විදිහට දුන්නොත් ඔයාගෙ browser එක අනුව වෙනස් වෙනවා.. මේ ක්‍රම දෙකටම පුලුවන්..
<table width = 800 >
<table width = 60% >
*ටේබල් එකක කෝශ කීපයක් එකතු කරලා තනි කෝශයක් තියන්න ඕන වෙන අවස්තාවන් තියෙනවා නේද..
ඒකට rowspan සහ colspan පාවිච්චි කරන්න පුළුවන්..
තිරස් අතට කොටු දෙකක් එකතු කරලා ඒකෙ Country කියලා table header එකක ලියන්න ඕනේ කියමු.
මෙහෙමයි.
<th colspan = "2"> Country </th>
සිරස් අතට කොටු දෙකක් අල්ලලා 456 කියන එක table data එකක් විදිහට ලියන්න ඕනෙ කියමු.
<td rowspan = "2"> 456 </td>
•Table සදහා background colours සහ images ඇතුල් කිරීම..
මෙවා ඇතුල් කරන්නේ table ටැග් එකටමයි.. බලන්න..
<table border = "1" bgcolor = "red">
Background සදහා අපි යොදා ගන්න ඉන්න image එකේ නම rose.jpg කියලා හිතන්න..
<table border = "1" background ="rose.jpg" >
ඔයා කරලා බලන්න එහෙනම්...
• HTML Multimedia.
Multimedia යටතේ පහතින් මම දාලා තියෙන extension සහිත file ඇතුල් කරන්න පුළුවන්..
.swf
.wav
.mp3
.mp4
.mpg
.wmv
.avi
°Audeo ඇතුල් කරන්නෙ මෙහෙමයි..
<html> <body>
<audio controls>
<sourse src = "hithumanaapen.mp3" type = "audio/mpeg" >
</audio>
</body> </html>
°Video ඇතුල් කරන්නෙ මෙහෙමයි..
<html> <body>
<video width = "400" controls >
<sourse src = "littlestar.mp4" type = "video/mp4" >
</video>
</body> </html>
• Link colour
ඔයා ගූගල් සර්ච් කරනකොට දැකල තියෙනවද ඔයා visit කරපු link වෙන පාටකින් පෙන්නනවා.. ඔයා නොබලපුවා නිල් පාටින්.. දැනට click කරපු එක තවත් පාටකින්..
මෙන්න මේක කොහොමද කෝඩින් කරන්නෙ කියලයි මම කියලා දෙන්නම්..
බලන්න මේක..
<body Link = "#33CC00" Vlink = "#CC0099" Alink = "#ffff00">
Link, Vlink, Alink කියවෙන්නේ...
Link - Un visited link.
Vlink - Visited link.
Alink - Activated link.
HTML ඊලඟ පාඩමෙන් ඉවර වෙනවා .
අද පාඩමේ ඔයාට ගැටලු තියෙනවා නම් කමෙන්ට් එකකින් අහන්න..
No comments:
Post a Comment