පළමු වෙන්ම සමා වෙන්න ටික දවසක් ප්‍රමාද වුනාට, පින් අතේ වැඩ කටයුතු කිහිපයකටම සහභාගි වෙන්න අවස්ථාව ලැබුන නිසයි ලියන්න බැරිවුනේ. එහෙනම් අද HTML වලට මුළ පුරමු නේද?
එහෙම කිව්වට එකපාරට ආරම්භ කරන්න වෙන්නේ නැහැ. හැබැයි අදම ආරම්භ කරනවා. මේකයි අපි පළමු හා දෙවන පෝස්ටු දෙකේදී Web Design කියන්නේ මොකද්ද? මේකට මොනාද ඕනි Tools කියලා එහෙම කථා කළා. කියවපු නැති අය මේටික බලලම එන්නකෝ. එහෙනම් ඔයාලට පුලුවන් දැන් කැමති ටූල් එකක් තෝරා ගන්න. මම නම් මෙතනදි භාවිතා කරන්නේ Notepad කියන සරල Software එක. මීට අමතරව Adobe Dreamweaver වගේ එකක් වුනත් භාවිතා කරන්න පුළුවන් ඒකේ ගැටළුවක් නැහැ. හැබැයි මුල් අවස්ථා වේදී Notepad එකක් වගේ දෙයක් භාවිතා කරනවානම් හොදයි යන්න මගේ පෞද්ගලික අදහසයි. මම හිතනවා ඔයාලත් මුල් අවස්ථාවේ (මේ අවස්ථාවේ සිට මා කියන තුරු) Notepad එක භාවිතා කරයි කියලා. අපි ඉදිරියේදී Adobe Dreamweaver ගැනත් කථා කරමු.එහෙම හොදයිනේ...?
HTML (Hyper Text Markup Language) යනු වෙබ් අඩවි නිර්මාණයේදී භාවිතා වන මූලිකම භාෂාව කියලා අපි කථා කලානේ... ඒ වගේම HTML කිවන්නේ ප්‍රෝග්‍රෑම් භාෂාවක් (Programming language) නොවන බවත්, HTML යනු දත්ත සකසුරුවම් කිරීමට යොදාගන්නා එක්තරා සරල භාෂාවක් (Markup Language) කියලත් කිව්වා. එහෙනම් ඇත්තටම HTML වලින් කරන්නේ Text , Video , Image, Audio player යනාදිය (Content) අපට අවශ්‍ය ස්තාන වල පිළිවලකට පිහිටුවන්න උපකාරී කරන එකයි. එතකොට වෙබ් බ්‍රව්සර් එකකින් සිද්ද වෙන්නනේ HTML මගින් ස්ථාන ගතකල දේවල් පාඨකයා ඉදිරියේ දැක්වීමයි. එතකොට අපි Web Design කරනවා කියලා කරන වැඩේ පැහැදිලියි නේද?
එහෙනම් එහෙම HTML මගින් විවිධ Content අපට අවශ්‍ය ස්තාන වල පිළිවලකට පිහිටුවන්න උපකාරී කරන්නේ HTML Tags. එහෙනම් අපි ඉගන ගතයුතු වන්නේ මේ HTML Tags ගැන තමයි. මොනාද මේ HTML Tags කියන්නේ, කොහොමද අපි මේ HTML Tags පාවිච්චි කරන්නේ කියලා අපි ඉගන ගමු. අපි ප්‍රායෝගික වන තරමට හොද නිසා අපි Tags මගින් විවිධ කටයුතු කරමින්ම ඉගනගමු.
***Tags භාවිතා කිරීමේදී මෙම Tag < > තුළ සදහන් කිරීම සිදු කළ යුතුයි (උදා: <html>) ඒවාගේම බොහෝ Tag වගට Open tag (E.g. <html>) හා close tag (E.g.: </html>) කියලා කොටස් දෙකක් තියනවා. ඒ වුනාට එහෙම නැති කිහිපයකුත් තියනවා ඒ මෙනවාද කියලා අපි Tag එකින් එක සාකච්චා කරන අවස්ථාවේ කථා කරමු.
ඒ වගේම මතක තියාගතයුතු දෙයක් තියනවා. වෙබ් පිටුවක් නිර්මාණයේදී Tags භාවිතාකරන නිශ්චිත සැකැස්මක් තියනවා. පහතින් දක්වලා තියෙන්නේ ඒදේ තමා.
<html>
<head>
<title> වෙබ් පිටුවේ මාතෘකාව</title>
</head>
<body>
// වෙබ් පිටුවේ පාඨකයාට පෙනෙන තොරතුරු
</body>
</html>
මෙහෙම කිව්වට තේරෙන්නේ නැති අයත් ඇතිනේ. එයාලාට මං මෙහෙම කියලා දෙන්නම්.
<html> (1)
<head> (2)
<title> (3) වෙබ් පිටුවේ මාතෘකාව</title>
</head>
<body> (4)
// වෙබ් පිටුවේ පාඨකයාට පෙනෙන තොරතුරු
</body>
</html>
(1) HTML වලදි භාවිතා කරන ප්‍රධාන Tag එක තමයි <html> කියන්නේ. ඉතින් ඒ Tag එක අපි පළමු වෙන්ම භාවිතා කරනවා මෙහි <html> </html> යන Tags
මගින් මෙම වෙබ් පිටුවේ ඇත්තේ HTML මගින් කේතනය කරන ලද ගොනු ලෙස හදුනා ගනී.
(2) <head> ---- </head> යන Tag මධ්‍යයේ වෙබ් පිටුව ලෝඩ් වන විට පළමුවෙන්ම ලෝඩ් නොවිය යුතු දත්ත ඇතුළත් කරයි.
(3) <title> -- </title> යන කොටසද එලෙස පළමුව ලෝඩ් කරගතයුතු අංගයකි, ඔබ වෙබ් අඩවියකට පිවිසි විට වෙබ් බ්‍රව්සරයේ Title Bar එක තුළ දිස් වන Text
තොරතුරු ඇතුළත්වන්නේ මෙම <title> --- </title> යන Tag දෙක අතරේය.
(4) <body> -- </body> යන Tag දෙක අතරට අපගේ අඩවිය තුළ පෙන්විය යුතු තොරතුරු ඇතුළත් කෙරේ. Java Script වැනි දෑ භාවිතා කිරීමේදී පිටුව ලෝඩ්වන අවස්ථාවේදීම ලෝඩ් වියයුතු Script මෙම කොටස ඇතුළය ලබාදේ.
*** HTML මගින් වෙබ් පිටුවක් නිර්මාණයේදී කේතනය කිරීම <html> Tag එකක් මගින් ආරම්භ විය යුතු අතර ,වෙබ් පිටුව </html> Tag එකක් මගින් අවසන් විය යුතුය.
එනම් HTML වෙබ් පිටුවක පළමු Tag එක <html> විය යුතු අතර අවසාන Tag එක </html> (<html> හී Close Tag එක) විය යුතුය.
***HTML Tags Type කිරීමේදී Simple letters පමණක් භාවිතා කරන්න.
තේරුණාද? නොතේරුම් සහිත තැන් ගැන අහන්න, හැකි උපරිමයෙන් කියලා දෙන්නම්.
Tricks - 001 HTML Tags Typing Tricks
බොහෝ දෙනෙක් අතින් සිදුවන වරදක් තමයි Open tag යෙදීමෙන් පසුව close Tag භාවිතා කිරීමට අමතක වීම. මෙම තත්වය නිවැරදි කරගැනීමට Tag , type කරන විට පලමුව Open Tag විවෘත කර(type කර) එම මොහොතේම Close Tag එක යොදා එය වසන්න. අනතුරුව Cursor Point එක අදාල Tag දෙක අතරට ගෙනගොස් Enter ඔබා නව රූලකට ගොස් අවශ්‍ය Tags හෝ වෙනයම් තොරතුරක් ඇතුළත් කරන්න.
මෙම විඩියෝව බලන්න
හරි, අපි දැන් පුංචි වෙබ් පිටුවක් හදලා ඉමු.
මේ සදහා Notepad කියන සරල Software එක භාවිතා කරන්න.
01- පළමු වෙන්ම <html> ටැග් එක මගින් වෙබ් පිටුව ආරම්භ කරන්න. (ඉහත කියලා දුන්නු Tricks එකත් මේමොහොතේ ඉදන්ම භාවිතා කරන්න පුරුදු වෙන්න.)
02- දැන් අලුත් රූලකට ගිහින් <head> Tag එක යොදා <head> Tag එක අවසන් කර ඒ අතරට <title>Tag එක යොදා Title එක ලෙස "My 1st Web Page" කියලා දෙන්න.
03- <head> Tag එකෙහි Close Tag එක ට පසුව නැවත අළුත් රූලකට ගොස් <body> Tag එක මගින් වෙබ් පිටු වෙහි පාඨකයන් උදෙසා දිස්වන කොටස නිර්මාණය කරගන්න.
04- එම <body> හි ආරම්භ හා අවසාන ටැගයන් දෙකට මැදින් "Helo World ...!!! This is My First Web Page." කියා ලබා දෙන්න.
බලන්න ඔයාල Type කරපු එකත් මේ වාගේද ආවේ කියලා.. මේකයි, මේවිදිහට මේවිදිහට කරන්න කියලා ඔයාලට කිවුවේ එතකොට තමයි ඔයාලාට තනියම කරන්න පුළුවන් විදිහේ දැනුමක් ඔයාලගේ මොලේට වැටෙන්නේ කියලා මට හිතුනා..( ගුණ දොස් කියන්න...“ මේ විදිහට එපා මේවිදිහට අපිට කියලා දෙන්න“ වගේ.. )
හොදයි එහෙනම් බලන්න ඔයාලට මට ආවා වගේ කෝඩ් ටික්ද ආවේ කියලා.
<head>
<title> My 1st Web Page </title>
</head>
<body>Helo World ...!!! This is My First Web Page.</body>
</html>
මේ විදිහට Type කළානම් ඔයා සාර්ථකයි... බය වෙන්න එපා වැරදුනත් තාම පටන්ගත්තා විතරනේ..
***අලුත් රූලකට යෑම අත්‍යාවශ්‍යම නැහැ. හැබැයි තාම ඉගනගන්න නිසා පැහැදිලි ව පෙනෙන විදිහට ටැග්ස් ටික ලියන්න .
Save Web Page
අපි මේ වෙබ් පිටුව නිර්මාණය කරගත්තේ Notepad කියන Software එක භාවිතා කරලනේ ඉතින් අපිට දැන් මේ හදපු පිටුව වෙබ් බ්‍රව්සරයකින් බලන්න ඔනි.. ඒසදහා අපි මේ විස්තර ටික වෙබ් අඩවියක් ආකාරයෙන් සේව් කරගතයුතුයි. ඒ සදහා දැන් Notepad එකේ File -> Save as යන්න. File Name ලෙස ඔබ කැමති නමක් දී අවසානයට .html ලෙස ලබා දෙන්න.
***මෙය ඉතා වැදගත් දෙයක් අපි යම් ගොනුවක් විවත කිරීමේදී ඒ ගොනුව විවත විය යුත්තේ කුමය මෘදුකාජගයෙන්ද යනවට මෙහෙයුම්පද්ධතිය දැනගන්නේ මෙලෙස "." ලකුණෙන් පසු යොදන අකුරු මගිනි. මෙය ගැනද පළමුව පහදා දී ඇත.
Save as type තියන තැනට All Filles ලෙස ලබා දෙන්න. Encording යන්න දැනට එතරම් වැදගත් නොවේ, නමුත් ඔබ සිංහල මාධ්‍යෙයන් වේබ් අඩවිය නිර්මාණය කරන්නේ නම් Encording : Unicode ලෙස ලබා දෙන්න.
දැන් Save මත click කර ගොනුව Save කරගන්න.
Open කරලා බලන්න ඔයාලට මේ විදිහට ආවද කියලා..
(1) ලෙස දක්වා ඇත්තේ අපි වෙබ් අඩවියට යෙදූ මාතෘකාවයි.
(2) ලෙස දක්වා ඇත්තේ අපි <body> -- </body> අතර යෙදූ කොටසයි.මේ කොටසට තමයි පාඨකයින් හට දිස්විය යුතු දේවල් ඇතුලත් කරන්නේ.
එහෙනම් මතු වුණ ගැටළු එහෙම තියනවානම් අහන්න. අදට මෙතනින් නවත්තනවා.
පාඩම් මාලාව ගැන ගොඩාක් උනන්දුවෙන්.. අද පාඩම නම් පොඩු දෙයක් උනත් හොදින් තේරුම් ගත්තා... දිගටම ලියන්න
ReplyDelete@දේවා: බොහෝම ස්තූතියි. උපරිම විදිහට පැහැදිලි කරන්න තමයි උත්සහා කරන්නේ.. අපැහැදිලි තැන් තියනවානම් කවුරැළුුනත් කමක් නැහැ අහන්න...
ReplyDelete