COVID-19 වයිරසයෙන් ආරක්ෂා වීමට ඔබට කලහැක්කේ ඉවසීමෙන් සෞඛ්‍ය උපදෙස් අනුගමනය කරගෙන නිවසටම වී සිටීමයි. ඒ අතර ඔබේ දැනුම වර්දනය කරගැනීමට මෙම වෙබ් අඩවිය පිටිවහලක් කරගන්න. | මෙම වෙබ් අඩවියට අලුතින් එකතු වන සාමාජිකයින්ව Activity Page එක තුලින් Welcome Message එකක් එක් කරමින් පිළිගන්න.

Basic structure of HTML

<! DOCTYPE html>
<html>
<head>
<title>page title </title>
</head>


<body>
<h1>heading </h1>
<p>paragraph </p>
</body>
</html>


ඔය තියෙන්නේ html වල basic කෝඩ් එක.


<! DOCTYPE html>

මේකේ තේරුම මේ කෝඩ් එකෙන් web browser එකට කියනව html එකේ version එක මොකක්ද කියල. දැනට html version දෙකක් තියනව html, html5 කියල. Html5 වලදි තමයි ඔය <! DOCTYPE html> කියන එක යොදා ගන්නේ.


HTML කියන language එක අකුරු මත රදා පවතින දෙයක් නෙවෙයි. ඒ කියන්නේ ඔයා html tags කැපිටල් වලින් ලිව්වත් සිම්පල් වලින් ලිව්වත් කිසිම ප්‍රශ්නයක් නැහැ.


සාමාන්‍යයෙන් html tag ලියන්න අපි භාවිතා කරනව < > ඔය සලකුනු දෙක. ඒ ලිව්ව tag එක close කරන්න </ > ඕක භාවිතා කරනව.


මුලින්ම පටන් ගත්ත tag එක මුලින්ම අවසන් කරන්න ඕන ඒක html වල තියන නීතියක්. ඔයා මුලින්ම පටන් ගත්තේ <html> කියන tag එක නම් අවසානෙට මුලින්ම ඉවර වෙන්න ඕනත් ඒ tag එක තමයි. ඒක ඔයාට ඉස්සරහට යද්දී පැහැදිලි වෙයි.



<html>

ඔයා html වලදි මොන tag එකක් ලිව්වත් අනිවාර්යයෙන්ම ඒ tag එක close කරන්න ඕන ඒත් සමහර tag තියනව close කරන්න ඕන වෙන් නැති ඒවත්. ඔය <html> එකෙන් වෙන්නේ එයා web browser එකට කියනව මේක html document එකක් කියන එක. ඔය tag එක close කරන්නේ </html> ඔය විදිහට.



<head>

ඔය tag එකෙන් වෙන්නේ පොඩී තොරතුරක් දෙනව මොකක්ද මේ file එක නැත්නම් මොකක් දැනද මේකේ තියෙන්නේ කියල උදාහරණයක් වශයෙන් ඔයා folder එකට නමක් දෙනව කියල හිතමූ. ඒ වගේ දෙයක් තමයි ඔතනදි වෙන්නේ. ඔයාට ඒ file එක නැත්නම් folder එකට නමක් දෙන්න ඕන නම් නැත්නම් පිංතූරයක් දාන්න ඕන නම් ඔයා ඒ හැම දෙයක්ම කරන්න ඕන ඔය <head> කියන tag එක ඇතුලේ.


<title>page title </title>

මෙතනදී තමයි මම අර මුලින් කිව්ව folder එක නැත්නම් file එකට නමක් දෙන්නේ. ඔයාට පුළුවන් <title> කියන tag එක ඇතුලේ ඕනම නමක් නැත්නම් කැමති දෙයක් ලියන්න. උදාහරණ විදිහට

<title>my first web page</title>

<title>web page </title>

<title>Google </title>

ඔය වගේ ඕනම දෙයක් ඔයාට දෙන්න පුළුවන්. <title> කියන tag එක close කරන්නේ මේ විදියට, </title>




</head>

මෙතනදී තමයි ඔයා මුලින් පටන් ගත්ත <head> tag එක අවසාන වෙන්නේ. ඒ කියන්නේ ඔයාට මෙතනින් පහලට ඔයාගේ folder එක නැත්නම් file එක ගැන විස්තර කරන්න බැහැ.


<body>

මේ <body> කියන tag එක ඇතුලේ තමයි ඔයාට web page එකේ පේන්න ඕන හැම දෙයක්ම ලියන්න තියෙන්නේ ඔයාට පිංතූරයක් පේන්න දාන්න ඕන නම් ඔයා මේ <body> කියන tag එක ඇතුලේ තමයි කරන්න ඕන. ඔයා ඔය tag එක ඇතුලේ ලියන ඕනම දෙයක් web browser එක මගින් අපිට බලාගන්න පුළුවන්.



<h1>heading </h1>

මේ tag එකෙන් අපිට පුළුවන් මාතෘකාවක් වගේ දෙයක් ඉස්මතු කරල පෙන්නන්න වගේ දෙයක් කරන්න පුළුවන් ඒ කියන්නේ අනිත් අකුරු වලට වඩා ටිකක් ලොකුවට පේන්න හදන්න පුළුවන්. <h1> </h1> ඔය tag දෙක ඇතුලේ ලියන ඕනම දෙයක් ඔයාට ඉස්මතු කරල නැත්නම් කැපිල පේන්න ලියන්න පුලුවන්



<p>paragraph </p>

මේ tag එකෙන් ඔයාට paragraph එකක් නැත්නම් ඡේදයක් ලියන්න යොදා ගන්න පුළුවන්. ඔයා <p> </p> ඔය tag දෙක ඇතුළත ලියන ඕනම දෙයක් ඔයාගේ web browser එකෙන් paragraph එකක් නැත්නම් ඡේදයක් විදිහට බලාගන්න පුළුවන්



</body>

මේ තමයි ඔයාගේ web page එකේ ඔයාට පෙන්නන්න ඕන දේවල් නැත්නම් බලන කෙනාට මෙතනින් එහාට කිසිම දෙයක් නෑ කියල අඟවන tag එක නැත්නම් ඔයාගේ folder එකේ ඇතුලත අවසානය


</html>

මේ tag එකෙන් ඔයාගේ web browser එකට කියනව ඔයාගේ web page එක මෙතනින් අවසානයී කියල.


ඔයාට හොදටම මතක තියාගන්න ඔයාට පුළුවන් මේ ටික කරල බලන්න. ඔයාගේ pc එකේ search bar එකට ගිහින් notepad කියල search කරල මේ code එක type කරන්න



<! DOCTYPE html>
<html>
<head>
<title>page title </title>
</head>
<body>
<h1>heading </h1>
<p>paragraph </p>
</body>
</html>


ඊට පස්සේ කැමති නමක් දීල save කරන්න .html කියන file extension එක යටතේ. උදාහරණයක් විදිහට first.html කියල ගන්න පුළුවන්. ඊට පස්සේ ඔයා ඔයාගේ තියන web browser එකකින් view කරල බලන්න. ඔයා file extension එක .html විදිහට දීල save කරාට පස්සේ ඔයාට පුළුවන් ඒ save කරපු file එක උඩ double click කරල page එක View කරන්න.



ඔයාට ඔයාගේ smart phone එක use කරල උනත් මේ code එක run කරල බලන්න පුළුවන්. Google එකට ගිහින් html online editor එකක් අරගෙන මේ code එක ගහල බලන්න පුළුවන්.

Tagged:
AdminNaveen RanasingheNiroKalana_SathsaraChathu99

Comments

Sign In or Register to comment.