අපි කලින් පාඩමෙන් කතා කලේ html කියන්නේ මොකද්ද? එකෙන් වෙන්නේ මොනවද කියලා... ඊට පස්සේ html elements කියන්නේ මොනවද ? tagsකියන්නේ මොනවද කියල. එක බැලුවේ නැත්නම් එක බලල එන්න මේක ඔබලා.
අපි අද බලමු මේ tags කියන්නෙයි elements කියනෙයි මොනවද කියලා....
අපි කලින් පාඩමේදී බැලුව tag එකක් කියන්නේ මොනවගේ එකක් ද කියල, එ වගේ open tag එකකිනුයි close tag එකකිනුයි ඉවර වෙන එකට තමයි අපි elements ekak කිවුවේ.
අපි අද බලමු අපිට html වෙබ් පිටුවක් හදද්දී මුලිකවම අවශ්‍ය වන tags ටිකක්... html tags ගොඩක් තියෙනවා මේකෙදි මම කියන්නේ මුලිකවම අවශ්‍ය වෙන ටික විතරයි. ඉස්සරහ පාඩම් වලදී අපි අනික් ඒවා ගැන කතා කරනවා.
how to creat html document...?
මුලින්ම මම කියල දෙන්නම් html document එකක් හදන විදිය. මේකට ඔයාල ඔයාලගේ note pad එක open කරගන්න. එක වින්ඩෝස් සෙවන් වල start----all programmes----Accessories----note pad මගින් open කරගන්න පුළුවන්... ඊට පස්සේ එක ඔයාල save කරගන්න ඕනි. එකට ඔයාලට පුළුවන් key board එකේ Ctrl + S එකවර press කරලා save කරගන්න. එහෙම නැත්නම් menu bar එකේ file මෙනු එකේ save කියන එකෙනුත් පුළුවන්. කොයි විදියට හරි කලාම save window එක open වෙයි...එකේ ඔයාල මේ file එක save කරන්න කැමති තැනක් තෝරලා....
ඊළගට තමයි වැදගත්ම කොටස තියෙන්නේ. මේ window එකේ file name කියන කොටසට ඔයාලට කැමති නමක් ට්ය්පේ කරලා ඉස්සරහින් .html කියල type කරන්න. (උදාහරණ ලෙස - first.html ලෙස). ඊට පස්සේ යට file type එකට all files කියල තෝරලා save බොත්තම ඔබන්න.
එය්ජකොට අපි එක save කරපු තැනට ගිහින් බලද්දී මෙන්න මේ වගේ අපි save කරපු එක ඔයාල save කරපු නමින් ඔයාලගේ default web browser එකේ icon එකෙන් පෙන්වයි මේ වගේ...
දැන් මේක තමයි ඔයාලගේ html file එක...ඕක double click කරාමඔයාලට ඔයාලගේ පිටුව බලන්න පුළුවන්. දැනට මොකිත් අපි කරලා නැති නිසා හිස් පිටුවක් පෙනෙයි. ඔයාලට ඕනිම වෙලාවක ඕක edit කරන්න පුළුවන් ඕක උඩ right click කරලා edit මගින්...හරි එහෙනම් දැන් save කරගත්තනෙ අපි දැන් යමු අද පාඩමට...
html document එකක සාමාන්‍ය ආකෘතිය මෙන්න මේ වගේ
<!DOCTYPE html>
<head>
<title>....</title>
</head>
<body>
<h1>....</h1>
<p>......</p>
</body>
</html>
අපි බලමු මේවා මොනවද කියලා-
- ඉස්සෙල්ලම තියෙනවා <!DOCTYPE html> කියල ekak. මේකේ තේරුම මේකෙන් තමයි අපි මේක html 5 document එකක් කියල අපේ browser එකට කියන්නේ.
- ඊට පස්සේ <html>කියල tag එකක් තියෙනවා. මේකෙන් තමයි අපි html කෝඩ් එකක් පටන් ගන්නේ...<html> සහ අන්තිමට </html> කියල තියෙන tag 2 අතර තියෙන කෝඩ් ටික තමයි මේ html කෝඩ් එකට අයිති වෙන්නේ. මේක හරියට අපේ සිමාව වගේ...
- ඊට පස්සේ තියෙනවා <head> කියල tag එකකුයි </head> එකකුයි. මේක මේකේ ඇතුලේ තමයි අපි meta data තැම්පත් කරන්නේ. මේක ඇතුලේ තියෙන ඒවත්ඔ අපිට අපේ web page එකේ දකින්න බැ...ඔයාලට පේනවා ඇති එක ඇතුලේ තව tag එකක් තියෙනවා <title><?title> කියලා. එකෙන් තමයි අපි අපේ page එකට title එකක් දෙන්නේ ... මේක පෙන්නේ අපේ පිටුවේ නෙමෙයි මේක පෙන්නේ අපේ browser එකේ tab එකේ ...
- ඊට අමතරව අපි අපේ html page එකට link කරන external css sheet එහෙම link කරන්නෙත් මේ <head> tag එක ඇතුලේ.
- ඊළගට අපිට පේනවා <body> </body> කියල tag එකක් එකේ ඈතුලේ තමයි අපි අපේ වෙබ් page එකේ content එක හදන්නේ. එ කියන්නේ අපිට වෙබ් පිටුවකට ගියාම පෙන්නේ මෙන්න මේ <body> </body> tag එක ඇතුලේ තියෙන දේවල් තමයි.
ඊළගට අපි බලමු මේ වගේ වැදගත් වන tag කීපයක්...
- <html> මේක තමයි html code එකක අරම්බක tag එක.
- <head> මේක තමයි අපේ meta data තියෙන කොටස
- <title> මේක ටමයි පිටුවේ meta title එක.
- <body> මේක තමයි අපේ content එක...(පිටුවේ පෙනෙන ටික)
- <h1> මේක තමයි ප්‍රදාන මාතෘකා වලට යොදන්නේ.
- <p> මේක තමයි අපි paragraph ලියන්න පාවිච්චි කරන්නේ.
<h1> එනම් heading වර්ග 5ක් තියෙනවා.
- <h1>
- <h2>
- <h3>
- <h4>
- <h5>
- <h6>
ලෙසයි...
දැන් අපි බලමු අපේ පලවෙනි html code එක ලියන්නේ කොමද කියල දැන් ඔයාල අර හදාගත්තු document එකේ මේ විදියට type කරන්න ...
<!DOCTYPE html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
මේක type කරලා save කරලා එක browser එකෙන් ඕපන් කරලා බලන්න කොහොමද පෙන්නේ කියල...
ඔයාලට පෙනෙයි. <title> කොටස ඇතුලේ තියෙන එක ඔයාලගේ වෙබ් browser එකේ tab name එක විදියට තියෙනවා.
ඊළගට <body> එක ඇතුලේ තියෙන <h1> සහ <p> කියන tag ඇතුලේ තියෙන ඒවා කොහොමද ඔයාලගේ වෙබ් page එකේ තියෙන්නේ කියල...
හරි එහෙනම් දැන් ඔයාලට අදහසක් ඇති html කියන්නේ මොනවගේ බශාවක්ද කියලා. හොදට මතක තියාගන්න <tagname> මේ විදියට tag එකක් open කලාම එක අනිවාර්යෙන්ම </tagname> විදියට වහන්නම ඕනි එහෙම නැත්නම් අපේ code එක හරියට වැඩ කරන්නේ නෑ..
එහෙනම් ඊලග පාඩමෙන් හමුවෙමු. ප්‍රශ්න තියෙනවා නම් අහන්...කමන්ට් එකක් දල යන්න අදහස් ඔයාලගේ...තව ඔයාල මේ ගැන දන්නා දේවල් තියෙනවා නම් පහල කමන්ට් කරන්න අනික් අයටත් දැනගන්න. ඔය අයිනේ like box එකෙන් page එකටත් like එකක් ගෙන යන්න. එහෙනම් ඊලග පාඩමෙන් හමුවෙමු සුබ දවසක්.
Hello, my name is Shashika Prabath. I'm a Founder at wikunum.com.
නියමයි සහෝදරයා ගොඩක් වටින දැනුමක් ගත්ත දිගටම කරගෙන යන්න සුබ පතනව..
ReplyDeleteNIYAMAY
ReplyDeleteHTML 3 KO
ReplyDeleteThank you for this description
ReplyDeleteniyami niyami..
ReplyDeleteanith tike link piliwelata danna ko pls
ReplyDeleteGOOD JOB
ReplyDeleteMalika Please post the rest of the lessons, very simple and clear. Thank you very much. I am very happy
ReplyDelete