HTML හි මූලික කරුණු

සටහන: මෙම ලිපිය සුරේන් ඩයස්ගේ HTML Basics බ්ලොග් ලිපියෙහි සිංහල පරිවර්තනයකි. මෙමෙ ලිපිය ඔබට HTML පිළිබද මූලික අවබෝධයක් ලබාගැනීම සදහා වන පුළුල් මාර්ගෝපදේශයකි. මෙය HTML හි මූලික කරුණු තේරුම් ගැනීමට උපකාරවත් වන මාර්ගෝපදේශයකි. HTML පසුගිය වසර 25 ක කාලය තුල වෙබ් අඩවි සංවර්දනය සදහා මුලිකාංගයක් විය.මෙය HTML හි මූලික කරුණු තේරුම් ගැනීමට උපකාර වන […]

Written By Avanka IT

On October 10, 2018

1 Comments

සටහන: මෙම ලිපිය සුරේන් ඩයස්ගේ HTML Basics බ්ලොග් ලිපියෙහි සිංහල පරිවර්තනයකි.

මෙමෙ ලිපිය ඔබට HTML පිළිබද මූලික අවබෝධයක් ලබාගැනීම සදහා වන පුළුල් මාර්ගෝපදේශයකි.

මෙය HTML හි මූලික කරුණු තේරුම් ගැනීමට උපකාරවත් වන මාර්ගෝපදේශයකි.

HTML පසුගිය වසර 25 ක කාලය තුල වෙබ් අඩවි සංවර්දනය සදහා මුලිකාංගයක් විය.මෙය HTML හි මූලික කරුණු තේරුම් ගැනීමට උපකාර වන පුළුල් මාර්ගෝපදේශයකි.

HTML හි මුලික ලක්ෂණ

HTML යනු HyperText Markup භාෂාවයි. මෙය වෙබ් අඩවි නිර්මාණයේ කිරීමේ ජාත්‍යන්තර ප්‍රමිතියකි . Hyper Text යනු වෙනත් වෙබ් පිටුවකට සම්බන්ධ වන වෙබ් පිටු පෙළකි. Markup යනු ටැග භාවිතා කිරීම හරහා වෙබ් පිටුවල තොරතුරු ඉදිරිපත් කිරීමයි. එබැවින් HTML යනු වෙබ් පිටු සැකසීම සදහා බාවිත කරන භාෂාවකි.

සටහන: HTML යනු පරිගණක භාෂාව නොවේ. එය ඔබේ පරිගණක තිරයට තොරතුරු ලබා දීම සඳහා උපකාරී වේ. HTML යනු object-oriented පරිගණක භාෂාවක් නොවේ. එය Markup භාෂාවකි.

භාවිත

HTML වෙබ් අඩවි වල ආකෘතිය නිර්මාණය කිරීම සදහා භාවිතා වේ. Web browser වල වෙබ් අඩවි ප්‍රදර්ශනය කිරීමේ ප්‍රධාන ක්‍රමයක් වේ. HTML වෙබ් අඩවි සංවර්දනය කරන්නන් දැනගතයුතු මුලිකම භාෂාවකි.

HTML DOM

HTML සිය Document Object Model (DOM) හරහා තිරය තුල වෙබ් අන්තර්ගත සපයයි. HTML පරිගණකයේ තිරය මත දෘශ්ය තොරතුරු විදහා දැක්වීම සඳහා DOM වල විවිධ ඇමතුම් ලබා දෙයි. පහත දැක්වෙන්නේ HTML DOM හි මූලික ව්යුහය දැක්වෙන පින්තූරයකි

Photo Credit: W3Schools

Tags සහ Elements

Tags ඔබේ වෙබ් තිරයේ තොරතුරු සැකසීමට සහ ඒවායේ තොරතුරු ලබාදීම සිදුකරයි. Tag, HTML තුල රුසියානු බෝනික්කන් ලෙස ක්රියා කරයි. ඉහළම ස්ථරයෙන් තොරතුරු ලබාගෙන වෙන්වූ ස්ථර වලට පරිවර්තනය කළ හැකිය:

බොහෝ tags යුගල වශයෙන් ඇත.

උදාහරණයක් ලෙස <h1> </h1> tag සලකා බලමු.

මෙහි <h1> යනු විවෘත කිරීමේ ටැගය වන අතර </h1> යනු වැසුම් ටැගය වේ .

මෙම tag අතරට ඔබට අවශ්‍ය අන්තර්ගතය ලබාදිය හැක.

බොහෝ විට වැසුම් ටැගය ” / ” සංකේතය සහිතව බවිතාවේ.

විවෘත සහ අවසාන ටැග් එක එකිනෙකට සම්බන්ධ වන විට HTML Elements බවට පත් වේ.

ටැග් ගොඩක් තිබේ,පහත සදහන් tags ඔබට වඩාත් ප්‍රයෝජනවත්වේ.

<! DOCTYPE>

තිරය මත සිදු කරන DOM ආකෘතිය පෙන්නුම් කරයි. මෙය ටැග් එකක් නොවේ. Browser එකෙහි ඔබගේ වෙබ්පිටුව පෙන්වන ලෙස ඔබේ ලේඛනයේ ප්‍රධාන ටැගය ලෙස එය භාවිතා කරන්න. එයට අවසන් කිරීමේ ටැගය නොමැති බව සලකන්න.

<html> </html>

ඔබගේ වෙබ් පිටුවේ පෙන්වීමට අවශ්‍ය සියලුම අන්තර්ගතය මෙමෙ ටැගය තුල ඇතුලත් කලයුතුය.

<h1> <h5>

ඔබගේ header අකුරු වල ප්‍රමාණය H1 සිට H5 දක්වා වෙනස් කල හැක.

(h1 = විශාලතම, h5 = කුඩාම).

<body> </ body>

මෙමෙ tag භාවිතා කර ඔබට විවිධ අකුරු වර්ග ඔබේ වෙබ් පිටුවට ඇතුලත් කර ගත හැක.

<br> <br />

සිරස් අවකාශය සමඟ ඔබේ වෙබ්පිටුවේ විවිධ කොටස් වෙන් කිරීමට අවශ්ය විට මෙය භාවිතා කරන්න.

<div> </ div>

ඔබගේ වෙබ්පිටු ලේඛනයේ බොහෝ වෙනස්කම් කළ හැකි කොටසකි. <Span> ටැගය මෙන් නොව, වෙන් වෙන් රේඛා මත දක්වයි. ඔබගේ වෙබ්පිටුව සඳහා තේමාවන් නිර්මාණය කිරීමට මෙය යොදාගත හැක.

<script> </ script>

මෙමෙ tag තුලින් ඔබේ වෙබ් පිටුවට javascript, css කේත ඇතුලත් කල හැක.

<span> </ span>

මෙමෙ tag භාවිතයෙන් ඔබට ඔබේ වෙබ් පිටුවේ ඇති images ආදී දෑ තිරස් අතට එකිනෙක අසල ප්‍රදර්ශනය කල හැක.

<table> </ table>

මෙය භාවිතයෙන් ඔබට වගු සාදාගත හැකිය.

<aad> </ aad>

වගුවක ශීර්ෂයන් පෙන්වයි.ඔබට වර්ග කරන ලද වගු සාදාගැනීමට මෙය භාවිතා කරන්න. නිදසුනක් ලෙස, වර්ග කරන ලද වගුව නිර්මාණය කරන විට <thead> වෙතින් <tbody> වෙන් කිරීමට සිදුවේ.

<tbody> </ tbody>

මෙය භාවිතයෙන් වගුවෙහි අන්තර්ගතය පෙන්වනු ලැබේ. වගුවක අන්තර්ගතයට CSS යෙදීම සඳහා මෙය භාවිතා කරන්න.

<tr> </ tr>

මෙය බාවිතයෙන් වගුවෙහි පේලි සාදාගත් හැක.

<td> </ td>

වගුවකට දත්ත ඇතුලත් කිරීමට මෙය යොදා ගනී.

ප්‍රොයෝජනවත් tags

<a>

hyperlink පෙන්වීමට භාවිතා කරයි.

<b> </ b>

තද අකුරු.

<em> </ em>

ඇල අකුරු හෝ Emphasized කිරීමට භාවිතා කරයි.

<iframe>

ඔබේ ලේඛනයේ පිටත තෙවන පාර්ශවයක් හෝ සබැඳි සම්බන්ධ වන තොරතුරු එහි අන්තර්ගත වේ. ආරක්ෂක ගැටළු නිසා වෙබ් යෙදුම් තුළ භාවිතා කිරීම නිර්දේශ නොකරයි.

<img>

රූපයක්. පින්තූර ඔබේ වෙබ්පිටුවට සම්බන්ධ කිරීම සඳහා මෙය භාවිතා කරන්න.

<Noscript> </ noscript>

පරිශීලකයෙකු තම වෙබ් බ්රවුසරයේ ජාවාස්ක්රිප්ට් එකක් අක්රීය කළහොත් ක්රියාත්මක වනු ඇත.

CSS සහ Javascript සමඟ HTML භාවිතා කිරීම

HTML, CSS සහ ජාවාස්ක්රිප්ට් එකිනෙකා සමඟ හොඳින් ක්‍රියා කරයි.

HTML

ඔබේ වෙබ් පිටුවෙහි ව්යුහය ඔබට සපයයි.

CSS

ඔබට ඔබේ වෙබ්පිටු විලාසය ලබා දෙයි.

Javascript

ඔබේ වෙබ්පිටුවේ ක්රියාකාරිත්වය ඔබට සපයයි.

XHTML යනු කුමක්ද?

XTHML යනු Extensible Hypertext Markup Language යන්නයි. HTML වෙබ් අඩවි නිර්මාණය කිරීම සඳහා එය ප්රමිතියක්. HTML හි කේතීකරණය කිරීමේදී අපි සාමාන්යයෙන් XHTML මාර්ගෝපදේශ අනුගමනය කරන්නෙමු.

ඕනෑම වෙබ් පිටුවකට HTML කේතය බලන්න.

ඕනෑම වෙබ් පිටුවකට HTML මත බැලීමට ඔබට ඔබගේ බ්රව්සරයේ සංවර්ධක කොන්සෝලය (developer console) වෙත ප්රවේශ විය හැක. බොහෝ නූතන බ්රව්සරයන් මෙය කිරීමට ඔබට ඉඩ සලසයි. පළමුව, ඕනෑම වෙබ් පිටුවක දකුණු ක්ලික් කරන්න. ඉන්පසුව, පහළට එන ලැයිස්තුවෙන් ‘Inspect’ හෝ ‘View Source’ තෝරන්න.

ඉඟිය: ඔබගේ වෙබ්පිටු ආකෘති සකස් කරන ආකාරය හොඳින් තේරුම් ගැනීමට සංවර්ධක කොන්සෝලය ඔබට උපකාර කරයි. එමනිසා ඔබ සංවර්ධන කොන්සෝලය බාවිතයට හුරු වීම ඉතාවැදගත් යැයි අපි නිර්දේශ කරන්නෙමු.

Avanka IT HTML ඉඟි

HTML ව්යුහය ගැන සිතන විට රුසියානු බෝනික්කන් ගැන සිතා බලන්න.
ඔබගේ HTML ටැගයන් නිවැරදි අනුපිළිවෙලෙහි අන්තර්ගත බවට වග බලා ගන්න.
සැමවිටම සෑම ආරම්භක ටැග්මක්ම සමීපතම ටැගය සහිතව යුගල කරගත යුතුය.

සාරාංශය

HTML යනු වෙබ් සහ වෙබ් සංවර්ධනයෙහි ප්රධාන අංගයකි. වෘත්තීය සහ විනෝදාත්මක කටයුතු සඳහා Avanna IT ඉතා ඉහළින් HTML ඉගෙනුම් නිර්දේශ කරයි. වෙබ් අඩවිය විවේචනය කිරීමට ඉගෙන ගැනීම සහ විනෝදය සඳහා වූ භාෂාවකි.

ඉක්මන් ඉල්ලීමක්

මෙම blog post එක ඔබටත් ඔබේ යහලුවන්ටත් ප්‍රයෝජනවත්වේ යැයි සිතනවානම් මෙය සමාජ ජාලයන් ඔස්සේ බෙදා හරින්න.

ඔබ යම් මාතෘකාවක් ගැන ලිවීමට කැමති නම් ඕනෑම අවස්ථාවක අප හා සම්බන්ධ වන්න.

යොමුව