හරි..එහෙනම් අපි අද පාඩම පටන් ගමු...මම අද කියලා දෙන්නේ HTML වලින් වගුවක් නැත්නම් table එකක් හදා ගන්න විදිය..මටත් ඉස්සෙල්ල තේරුනේ නෑ මොන කෙහෙල්මලටද වගු ගහන්නේ කියලා..පස්සේ තමා වැඩේ කිල්ක් උනේ.අපිට ඕන් සයිට් එකේ බේසික් ශේප් එක ගන්න පුලුවන් මේකෙන්..ඒ කියන්නේ අපි හදන්න යන සයිට් එක කොටස් වලට බෙදාගන්න පුලුවන්..පින්තූර එන්නේ කොතන්ටද...මාතෘකාව කොතනඩ...විස්තර කොහෙද..අදී විදියට ඒ ඒ ඒවා සැලසුම් කරගන්න පුලුවන්..ඔතකොට ලේසියි..
හිතන්න ඔයාලට හිස් කඩදාසියක් දුන්න කියලා..එකේ ඔයගොල්ලෝ බෙදා ගන්නවා කෑලි 4කට.නැමුවා කියලා හිතමුකෝ..නමලා දිග ඇරියම ඒ දාර පෙනවනේ...ඔතකොට කොටස් 4ක් පේනවා අපිට...ඒ ඒ කොටසේ අපිට ඕන විජ්ජුම්බරයක් කරන්න පුලුවන්..ඒ වගේ තමා මේකත්.ඒ ඒ කොටස තුල අපිට කැමති වැඩ කෑලි දාන්න පුලුවන්...
ඒ හැදින්වීම ඇතිවෙයි කියලා හිතනවා..දැන් බලමු කොහොමද table එකක් ඇද ගන්නේ කියලා..මතක ඇතිනේ HTML ෆයිල් සේව් කරන විදිය.ඉස්සෙල්ලම ඒ විදියට ෆයිල් එකක් හදාගෙන ඉන්න..නෝට් පෑඩ් එකයි බ්‍රව්සර් එකයි දෙකම open කරලා තියාගත්තොත් වැඩේ ලේසියි..පටන් ගන්න කලින් මම ටැග් ටික කියලා ඉන්නම්කෝ..තවත් ලේසි වෙයි..
වගුවක් ගත්තම ඕකේ තීරු පේලි අරවා මෙව්වා තියනවනේ..මේකත් ඒ වගේ තමා..අපි හැම තිස්සෙම පටන් ගන්න ඕනේ row එකකින්..ඒකට අදාල ටැග් එක තමයි <tr>
ඊට පස්සේ ඒකේ ඇතුලත් වෙන තීරු..නැත්නම් කොලම්ස්..ඔතකොට අපිට අවශ්‍ය එක කොලම් ඇතුලේ ලියන්න අපි මෙන්න මේ ටැග් එක පාවිච්චි කරන්න ඕනේ.. <td>
මතක තියාගන්න කොලම් එකක් ඉවර කරන්නේ ඒක ඇතුලේ තියෙන්න ඕනේ සේරම දේවල් ඇතුලත් කරාට පස්සේ..
table head නැත්නම් වගුව උඩම පේලියේ මාතෘකා දාගන්නේ මෙහෙමයි..වැඩි දෙයක් නෑ..ටිකක් bold වෙලා එනවා විතරයි.. <th>
මේ උඩ පින්තූරේ තියන table එකක් වගේ හදා ගන්න අමාරුම නම් පල්ලෙහා තියන code ටික copy කරගෙන බලන්න..
<html>
<head>
</head>
<body>
<tr>
<th>NAME</th>
<th>marks</th>
</tr>
<tr>
<td>ravindu</td>
<td>00</td>
</tr>
<tr>
<td>ranga</td>
<td>01</td>
</tr>
<tr>
<td>kamal</td>
<td>02</td>
</tr>
</table>
</body>
</html>
දැන් පොඩි table එකක් කරගන්න පුලුවන්නේ..හැබැයි එකේ උස මදි වගේ නේද??ඒකට මෙන්න මේ විදියේ ටැග් එකක් කරන්න..
<table height="100%">
ඒ වගේම එකේ දාර පෙන්නන්න ඕනේනම් මේ ටැග් එක
<table width="100%">
මේකේ ප්‍රතිශත වලින් කියන්නේ මුලු සයිට් එක පෙන්නන වින්ඩෝ එකෙන් කොච්චර ප්‍රමානයක්ද කියන එක..ප්‍රතිශත නැතුව නිකන් දැම්මොත් එක පික්සල් වලින් තමයි ගනන් ගන්නේ..
තව දෙයක් තියනවා..අපි හිතමුකෝ අපිට එක රෝ එකක තියන කොලම් දෙකක් එක් කරන්න ඕනේ කියලා..එහෙනම් මෙන්න මේ ටැග් එක use කරන්න වෙනවා..
<tr colspan="2">
එකතු කරගන්න ඕනේ කොලම් ගාන තමා වරහන් ඇතුලේ දාන්නේ..
හරි..අපිට දැන් පුලුවන් අපි කැමති විඩියට මේ වගුව ඇතුලට කැමති ඉමේජස් ටෙක්ස්ට් දාලා හදා ගන්න..මතක ඇතිනේ මම ගිය සතියේ එවා ඉගැන්නුවා..
මේ පල්ලෙහා තියෙන්නේ කරපු table එකක්..
මේ තියෙන්නේ උඩ එකට අදාල code ටික
<html>
<head>
<h1>How to draw a HTML table</h1>
</head>
<body>
<table width="100%" height="100%" border="2">
<tr>
<td colspan="2">
<img src="C:\Users\Ravindu\Desktop\images\a.jpg" width="100%" height=40%>
</td>
</tr>
<tr>
<td><h3><a href="">home</a></h3></td>
<td>About us</td>
</tr>
<tr>
<td height="500" width="50%">learn something and join us </td>
<td><img src="C:\Users\Ravindu\Desktop\web\email\day3\b.jpg" width="100%"></td>
</tr>
</table>
</body>
</html>
තව ඉතින් ඔයගොල්ලෝ කැමති විදියට නිර්මාණශීලී ආකාරයකට හදා ගන්න පුලුවන්..තමන් ඉස්සෙල්ලා කොලයක් අරන් ඇඳලා බලන්න..ඊට පස්සේ ටික ලියන්න පටන් ගන්න..එහෙම කරාම ලස්සන එකක් ගන්න පුලුවන්..
හරි අදට ක්ලාස් එක ඉවරයි..ගුරුතුමාට දොයි මතයි අද..යන්න කලින් තව පොඩි ටැග් ටිකකුත් කියලම යන්නම්කෝ ඉතින්..
අපිට text එකක් හරි image එකක් හරි page එකේ මැද්දට,වමට,දකුනට ගන්න ඕනේ නම් මේ ටැග් එක use කරන්න..
<td align="center">
මැද්දට center
වමට left
දකුණට right
ආදී වශයෙන්
අපි හිතමු අපේ පේජ් එක ගොඩක් පල්ලෙහාට තියනවා කියලා..එහෙනම් ටක්ගාලා උඩට එන්න මේ ටැග් එක පාවිච්චි කරන්න..හරි..තව මතක් උනොත් පස්සේ දාන්නම්කෝ..එහෙනම් ඊළග ක්ලාස් එකේදි හමුවෙමු..එතකන් මම ගියා..
එළ බං දිගටම ලියපං,
ReplyDeleteමේ නිල් පාටින් කෝඩ් දාන්න එපා බං,ඇහැට අමාරුයි.
අනිත් සීන් එක බං තව අකුරු ටිකක් ලොකුවට දාපං බං,හොඳ එකානෙ....
එළ බං දිගටම ලියපං,
ReplyDeleteමේ නිල් පාටින් කෝඩ් දාන්න එපා බං,ඇහැට අමාරුයි.
අනිත් සීන් එක බං තව අකුරු ටිකක් ලොකුවට දාපං බං,හොඳ එකානෙ....
නිකන් ආසික් 02 වගේ ඈ. එලටම එල. දිගටම යමු.
ReplyDelete