HTML කියන්නේ වෙබ් නිර්මාණකරණයට (Web Development) අත්‍යාවශ්‍ය භාෂාවක් (Hyper Text Markup Language = HTML). කොටින්ම පැහැදිලි කලොත් මේ භාෂවෙන් අපි ලියන කේත (Codes) මගින් වෙබ් පිටුවක් නිර්මාණය කරන්න පුළුවන්. මේ පාඩම් මාලාවෙන් මම කියල දෙනවා HTML ගැන. මුලින්ම පොඩි ක්‍රියාකාරකම් ටිකක් කරලා ඉමුකො.
HTML Codes ලියන්න අපට කිසිම Software එකක් වෙනම install කරන්න ඕනේ නැහැ. ඕනෙම computer එකක Text Editor එකක් තියෙනවා. Windows වල නම් Notepad. තව linux, mac වගේ os වලත් Text Editors තියෙනවා. ඒත් ගොඩාක්ම පහසුවෙන් codes වෙන් කරලා හදුනාගන්න පුළුවන් විදිහට පාට කරලා (Syntax Highlighting) පෙන්වන Text Editor එකක්නම් වෙනම ඩවුන්ලෝඩ් කරලා ඉන්ස්ටෝල් කරගන්න පුළුවන්. ඒ වගේ එකක් තමයි Notepad++ තව Sublime Text වගේ ගොඩක් text editors තියෙනවා. හොඳට code ලියල වෙබ් අඩවියක් පටන්ගන්න බලාපොරොත්තුවක් තියෙනවනම් Notepad++ එක ඩවුන්ලෝඩ් කරගන්න ඕනේ. ඊට පස්සේ එක ඉන්ස්ටෝල් කරලා Open කරගන්න.
ඔයාලට HTML ලියන්න ඕනෙනම් Notepad++ එකේ මෙනු එකෙන් Language කොටස හරහා H අකුර යටතේ තියෙන HTML තෝරාගන්න. එතකොට syntax highlighting සිද්ධ වෙන්නේ HTML වලට අනුව. දැන් මේ code එක copy කරලා Notepad++ එකේ Paste කරන්නකෝ.
ඊට පස්සේ Notepad++ එකේනම් කෙලින්ම හොයාගන්න පුළුවන් තැනකට කැමති නමක් දීල save කරන්න. ඔයා Language එක HTML තේරුවනම් අනිවාරෙන් save කරපු එක ඇත්තේ default web browser එකේ icon එකෙන්. ඒ කියන්නේ Chrome/Firefox/Opera/Edge හරි browser එකක icon එකක්. Notepad එකෙන් ලිව්වනම් File > Save As.. ගිහිල්ල Save as : filename.html සහ Save As Type : All Files දීල save කරන්න. (filename කියන එක වෙනස් කරාට කමක් නැහැ හැබැයි අගට ඩොට්එච්ටීඑම්එල් කියල තියෙන්න ඕනේ.) ඉතින් මේක කරදරයක් නැතිව කරගන්න Notepad++ එක දාගන්න පුළුවන්. එතකොට File එක save වෙන්නේ අදාළ language එකේ extension එකෙන්.
හරි, දැන් ඒ save කරපු file එක doubleclick කරාම web browser එක open වෙනවා. එකේ පහල විදිහට වැටෙන්න ඕනේ.
කියල. එතකොට අපි type කරපු අනිත් ඒවා කෝ. ඒවා වෙබ් browser එකෙන් hide කරලයි තියෙන්නේ. එකෙන් පෙන්නනේ values විතරයි. මුලින්ම අපි HTML Code line එකක් ගමුකො.
<font face=”Arial”>Text</font>
මෙතන font කියන්නේ tag එකක්. face කියන්නේ attribute එකක්. Arial කියන්නේ attribute value එකක්. Text කියන්නේ Tag value එක. face වගේ attributes තව ගොඩක් එක tag එකක තියෙන්න පුළුවන්.
ඒවගෙන් කරන වැඩේ කිව්වොත්, tag එකකින් කරන්නේ යම් element එකකට අයිති ප්‍රදේශය පෙන්නුම් කිරීම. ඒ කියන්නේ <tag> එකේ ඉඳල </tag> එක වෙනකන් අයිති එම element එකට කියල පෙන්නන්න. attribute, value එකකින් කරන්නේ element එකේ settings හදන එක. මේ tag එකට අයිති element එක කොච්චර දිගද, පලල්ද, එකේ මුලාශ්‍රය, නම, ID, class වගේ දේවල් attribute එකකින් හා එහි value එකෙන් පෙන්නුම් කරනවා. tag value එකෙන් කරන්නේ value එකක් page එකේ display කිරීම. තේරුනේ නැත්නම් තව code කිහිපයක් අත්හදා බලන්නකෝ.
මේකත් try කරන්න.
දැන් ඔයාගේ machine එකේ තියෙන image එකක් copy කරලා desktop එකේ හරි වෙන ෆෝල්ඩර් එකක හරි paste කරන්න. එකේ නම pic1 කියල rename කරලා එකේ file type එක හොයාගන්න. Right Click කරලා Properties වලට ගියහම Type එක හොයාගන්න පුළුවන්. Image එකක types වෙන්නේ PNG, JPG, BMP, GIF වගේ ඒවා. JPEG කියල තියෙනවනම් එත් JPG තමයි.
දැන් මේ code එක අර image එක තියෙන folder එකේම save කරගන්න. .png කියන එක වෙනුවට අර පින්තූරේ type එක දාන්න. JPEG එකක්නම් මතක ඇතිව jpg දෙන්න.
දැනට ඇති, ඊළඟ එකෙන් තව කියල දෙන්නම්.
If you like this Tutorial, Don't forget to Give Positive Reputation. Also, If you don't have Rep Power Please Add a Comment to this Thread. Next Part is depend on Your Comments! Thank You!
HTML Codes ලියන්න අපට කිසිම Software එකක් වෙනම install කරන්න ඕනේ නැහැ. ඕනෙම computer එකක Text Editor එකක් තියෙනවා. Windows වල නම් Notepad. තව linux, mac වගේ os වලත් Text Editors තියෙනවා. ඒත් ගොඩාක්ම පහසුවෙන් codes වෙන් කරලා හදුනාගන්න පුළුවන් විදිහට පාට කරලා (Syntax Highlighting) පෙන්වන Text Editor එකක්නම් වෙනම ඩවුන්ලෝඩ් කරලා ඉන්ස්ටෝල් කරගන්න පුළුවන්. ඒ වගේ එකක් තමයි Notepad++ තව Sublime Text වගේ ගොඩක් text editors තියෙනවා. හොඳට code ලියල වෙබ් අඩවියක් පටන්ගන්න බලාපොරොත්තුවක් තියෙනවනම් Notepad++ එක ඩවුන්ලෝඩ් කරගන්න ඕනේ. ඊට පස්සේ එක ඉන්ස්ටෝල් කරලා Open කරගන්න.
ඔයාලට HTML ලියන්න ඕනෙනම් Notepad++ එකේ මෙනු එකෙන් Language කොටස හරහා H අකුර යටතේ තියෙන HTML තෝරාගන්න. එතකොට syntax highlighting සිද්ධ වෙන්නේ HTML වලට අනුව. දැන් මේ code එක copy කරලා Notepad++ එකේ Paste කරන්නකෝ.
Code:
<HTML>
<HEAD>
<TITLE>My First Webpage</TITLE>
</HEAD>
<BODY>
<H1>My First Heading</H1>
<P>Hello World!</P>
</BODY>
</HTML>ඊට පස්සේ Notepad++ එකේනම් කෙලින්ම හොයාගන්න පුළුවන් තැනකට කැමති නමක් දීල save කරන්න. ඔයා Language එක HTML තේරුවනම් අනිවාරෙන් save කරපු එක ඇත්තේ default web browser එකේ icon එකෙන්. ඒ කියන්නේ Chrome/Firefox/Opera/Edge හරි browser එකක icon එකක්. Notepad එකෙන් ලිව්වනම් File > Save As.. ගිහිල්ල Save as : filename.html සහ Save As Type : All Files දීල save කරන්න. (filename කියන එක වෙනස් කරාට කමක් නැහැ හැබැයි අගට ඩොට්එච්ටීඑම්එල් කියල තියෙන්න ඕනේ.) ඉතින් මේක කරදරයක් නැතිව කරගන්න Notepad++ එක දාගන්න පුළුවන්. එතකොට File එක save වෙන්නේ අදාළ language එකේ extension එකෙන්.
හරි, දැන් ඒ save කරපු file එක doubleclick කරාම web browser එක open වෙනවා. එකේ පහල විදිහට වැටෙන්න ඕනේ.
කියල. එතකොට අපි type කරපු අනිත් ඒවා කෝ. ඒවා වෙබ් browser එකෙන් hide කරලයි තියෙන්නේ. එකෙන් පෙන්නනේ values විතරයි. මුලින්ම අපි HTML Code line එකක් ගමුකො.
<font face=”Arial”>Text</font>
මෙතන font කියන්නේ tag එකක්. face කියන්නේ attribute එකක්. Arial කියන්නේ attribute value එකක්. Text කියන්නේ Tag value එක. face වගේ attributes තව ගොඩක් එක tag එකක තියෙන්න පුළුවන්.
ඒවගෙන් කරන වැඩේ කිව්වොත්, tag එකකින් කරන්නේ යම් element එකකට අයිති ප්‍රදේශය පෙන්නුම් කිරීම. ඒ කියන්නේ <tag> එකේ ඉඳල </tag> එක වෙනකන් අයිති එම element එකට කියල පෙන්නන්න. attribute, value එකකින් කරන්නේ element එකේ settings හදන එක. මේ tag එකට අයිති element එක කොච්චර දිගද, පලල්ද, එකේ මුලාශ්‍රය, නම, ID, class වගේ දේවල් attribute එකකින් හා එහි value එකෙන් පෙන්නුම් කරනවා. tag value එකෙන් කරන්නේ value එකක් page එකේ display කිරීම. තේරුනේ නැත්නම් තව code කිහිපයක් අත්හදා බලන්නකෝ.
Code:
<html>
<head>
<title>Your Web Page</title>
</head>
<h1>This is a Heading.</h1>
<font face=”Comic Sans MS” color=”red” size=”15″>Here is some text.</font>
<a href=”https://example.com”>Example URL</a>
</html>මේකත් try කරන්න.
දැන් ඔයාගේ machine එකේ තියෙන image එකක් copy කරලා desktop එකේ හරි වෙන ෆෝල්ඩර් එකක හරි paste කරන්න. එකේ නම pic1 කියල rename කරලා එකේ file type එක හොයාගන්න. Right Click කරලා Properties වලට ගියහම Type එක හොයාගන්න පුළුවන්. Image එකක types වෙන්නේ PNG, JPG, BMP, GIF වගේ ඒවා. JPEG කියල තියෙනවනම් එත් JPG තමයි.
දැන් මේ code එක අර image එක තියෙන folder එකේම save කරගන්න. .png කියන එක වෙනුවට අර පින්තූරේ type එක දාන්න. JPEG එකක්නම් මතක ඇතිව jpg දෙන්න.
Code:
<html>
<head>
<title>Your Web Page</title>
</head>
<img src=”pic1.png”>
</html>දැනට ඇති, ඊළඟ එකෙන් තව කියල දෙන්නම්.
If you like this Tutorial, Don't forget to Give Positive Reputation. Also, If you don't have Rep Power Please Add a Comment to this Thread. Next Part is depend on Your Comments! Thank You!
PART I of V - Read Other Parts now On Blog.
Last edited:
by ලබ්බා කියලා තියෙන්නද එතකොට ඕනේ.? 
. ත්‍රෙඩ් එකක් දාන එක සාමජිකයෙක්ගේ අයිතියක් 
