HTML ගැන දැනගමු

html-image

HTML එහෙමත් නැත්නම් Hyper Text Markup Language යනු web page සැකසීමට භාවිත කරන මූලික භාශාව වේ. මෙමගින් web page එකක් අපගේ web browser එක තුල දිස්විය යුතු ආකාරය web browser එකට පෙන්වා දෙයි. එනිසා මෙය Markup language එකක් ලෙස හැදින්වේ. මේ ගැන වැඩිදුර තොරතුරු සහ භාවිතා කරන ආකාරය සරලව මෙතැන් සිට බලමු. මෙය අවසානය දක්වා කියවමින් සිදු කර බැලීම තුලින් html භාවිතයෙන් වැඩ කටයුතු කරන ආකාරය ගැන මනා අවබෝධයක් ගත හැකි වනු ඇත.

HTML භාවිතයට සැරසෙමු. 

ඔබ විවිධාකාර web page දැක ඇති. බොහෝ විට ඔබ මෙය කියවන්නේද web අඩවියක ඇති web page එකක් තුල සිට විය හැකිය. මෙම web page හි ඔබ text , button , text field , table යනාදී බොහෝ දෑ දැක ඇති. මේ සියල්ල සැකසීමට භාවිත කරන මූලිකම භාශාව වන්නේ HTML වේ. ඔබ වෙසක් කූඩු අනිවාර්යයෙන් දැක ඇති. වෙසක් කූඩුවක් සැකසීමට මුලින්ම එයට ගැලපෙන සැකිල්ලක් සකසා ගත යුතුයි නේද ? ඒ සදහා උණ පතුරු , ප්ලාස්ටික් වැනි විවිධ දෑ භාවිත කරයි. ඒ වගේම web අඩවියක් සැකසීමටත් අපට සැකිල්ලක් අවශ්‍ය වේ. ඒ සදහා අප භාවිත කරන්නේ HTML වේ.

මෙම HTML සමග වැඩ කිරීමට ඔබට HTML කේත ලිවීමට text editor එකක් සහ ඒවා run කර බැලීමට web browser එකක් අවශ්‍ය වේ. ඔබේ පරිඝණකයේ නම් notepad එකෙහි HTML file සකසා ඔබගේ සාමාන්‍ය browser එකෙහි run කරවා බැලිය හැක. දුරකතනයක නම් ඔබට ගැලපෙන text editor එකක් playstore හරහා install කරගෙන වැඩ කල හැකිය. ඔබ සකසන html file එකෙහි නමෙහි file extension එක සදහා .html හෝ .htm ලෙස යෙදිය යුතුය. උදාහරණයක් ලෙස first.html ලෙස සම්පූර්ණ නම යෙදිය හැක. දැන් ඔබ සතුව text editor එකක්  web browser එකක් සහ html file එකක් තිබෙනවා. html file එක text editor එකෙන් open කරගෙන මෙතැන් සිට ඔබට ඒ තුල html code ලිවිය හැකිය.

HTML file එකක මූලික කොටස්. 

HTML සමග වැඩ කිරීමට අප tags භාවිත කරනවා. HTML තුල විවිධාකාරයේ tags පවතී. බොහෝ tags කොටස් දෙකකින් සමන්විත වේ. එනම් opening tag සහ closing tag ලෙසයි. opening tag <> ආකාරයෙන් පවතින අතර closing tag </> ආකාරයෙන් පවතී. උදාහරණයක් ලෙස html හි ප්‍රධානම tag එක වන html tag එකෙහි opening සහ closing tag <html></html> ලෙස පවතී. html භාශාව තුල මෙවැනි tags රාශියක් පවතී. html සමග වැඩ කිරීමට නම් මේවා ඉගෙන ගත යුතු වේ. html file එකක අත්‍යවශ්‍ය tags කිහිපයක් ඊලගට බලමු.

<html>

   <head> </head>

   <body> </body>

</html>

ඉහත දක්වා ඇත්තේ html file එකක අත්‍යවශ්‍ය tags වේ. මුලින්ම ඇති html tag එක මගින් අප html code ආරම්භ කරන බව browser එකට පෙන්වා දෙයි. HTML භාශාවෙහි  අනෙකුත් සියලුම tags මෙලෙස html opening සහ closing tag අතර යොදනු ලැබේ. html file එකක් ප්‍රධාන කොටස් 2කකට බෙදිය හැක. එනම් head සහ body ලෙසයි. ඉහත tags මගින් එය වෙන් කර තිබෙනු ඔබට දැකිය හැකිය. එවායින් body tags අතරට web page එක තුල දිස්විය යුතු සියලුම දෑ ඇතුලත් කරන අතර head කොටසට වෙනත් විශේෂ දෑ ඇතුලත් කරනු ලබයි. උදාහරණ ලෙස web page එකෙහි ඉහලින්ම ඇති title bar එකෙහි දිස් විය යුතු දෑ head tag අතර title tag යොදා ඇතුලත් කරනු ලබයි. මෙවැනි තවත් දෑ html භාශාව ඉගෙන ගැනීමේදී ඔබට දැන ගත හැකි වේ.

<html>

   <head>

        <title>This is Title</title>

   </head>

   <body> </body>

</html>

සරල web page නිර්මාණය 

දැන් මාතෘකාවක්  , ජේදයක් යෙදූ සරල web page එකක් නිර්මාණය කරමු. මේ සදහා අප මාතෘකා යෙදීමට අවශ්‍ය tag , සහ ජේද යෙදීමට අවශ්‍ය tag දැන ගත යුතුයි.

<html>

   <head>

        <title>This is My First Web Page</title>

   </head>

   <body>

         <h1>My first web page</h1>

         <p>This is My First Web Page. I like to learn and create web pages</p>

   </body>

</html>

මෙම HTML කේත එකින් එක විමසා බලමු.

Head tag

Web page එකක මාතෘකා , උප මාතෘකා සහ වෙනත් විශේෂ text අනෙකුත් text වලින් ඉස්මතු කර පෙන්වීමට head tags භාවිත කරයි. head tag එකද opening සහ closing ලෙස කොටස් දෙකකින් සමන්විත වේ. <h1> සිට <h6> දක්වා අංක පිලිවෙලින් වූ header tags පවතී. මේවායෙන් <h1> මගින් ප්‍රමාණයෙන් සහ ඝනකමෙන් වඩාත් විශාල ලෙස අකුරු හැඩ ගන්වයි. <h1> සිට <h6> දක්වා යෑමේදී අකුරුවල ප්‍රමාණය සහ ඝනකම ක්‍රමානුකූලව අඩු වේ. ඉහත අප යොදාගෙන ඇත්තේ <h1> tag එක වේ. ඔබට අනෙකුත් head tag යොදා බැලිය හැකිය.

<h2>My first web page</h2>

<h3>My first web page</h3>

<h4>My first web page</h4>

<h5>My first web page</h5>

<h6>My first web page</h6>

Center tag

ඔබට මාතෘකාව web පිටුවෙහි මැදට ගැනීමට අවශ්‍ය නම් center tag යෙදිය හැකිය. එය මාතෘකාව සදහා පමණක් නොව වෙනත් ඕනෑම අවස්ථාවක යෙදිය හැක. ඔබට මැදට ගැනීමට අවශ්‍ය දෑ center opening සහ closing tag අතරට යෙදිය යුතු වේ.

<center><h1>My first web page</h1></center>

Font Tag

ඔබ web page එක තුල යොදන text වල වර්ණය , ප්‍රමාණය , හැඩය වැනි දෑ වෙනස් කරමින් ආකර්ෂණීය ලෙස සකසා ගැනීමට font tag ප්‍රයෝජනවත් වේ. මේ ගැන බැලීමට ප්‍රථම html tag එකක කොටස් ගැන බැලිය යුතු වේ.

HTML tag එකක් ප්‍රධාන කොටස් 3කින් යුක්ත වේ. 

1. Element

2. Attributes

3. Values

අප මින් පෙර යොදා ගත් සියල්ලෙහිම තිබුනේ Element කොටස පමණි. <html> මෙහි Element එක html වේ. <h1> මෙහි element එක h1 වේ. එලෙස tag එකක මූලිකම කොටස Element එක වේ. <font> මෙහි Element එක font වේ. මෙහි element එකට අමතරව Atributes සහ Values යොදා ගනු ලැබේ.

<font color=”red”>

ඉහත code එක මගින් text වල පැහැය රතු පැහැ වේ. එහි color යනු Attribute එකවන අතර red යනු value එක වේ. මෙලෙස color සදහා විවිධ පැහැයන් භාවිත කල හැකි වේ. එසේම,

<font size=”5″>

යනාදී ලෙස size Attribute එක සදහා ගැලපෙන අගයන් ලබා දෙමින් text size වෙනස් කල හැකි වේ. මෙහිදී ඔබට අවශ්‍ය text, font opening සහ closing tag තුල යෙදිය යුතු වේ.

<h1>

     <font color=”blue” size=”7″>My first web page</font>

</h1>

මෙලෙස html භාශාව තුල විවිධ html tags පවතිනවා මෙන්ම විවිධ html tag තුල විවිධ Atributes සහ ඒවාට විවිධ Values පවතී. විශිෂ්ඨ ලෙස web pages සැකසීමට අප මේවාද ඉගෙන ගත යුතු වේ. දැන් අපි මේ සියල්ල වැඩිදුර තේරුම් ගැනීම සදහා paragraph යොදන අයුරු බලමු.

Paragraph tag

<p> tag එක් උපයෝගී කරගෙන ඔබට paragraph ලිවිය හැකි වේ. එලෙස යොදා ලිවූ විට paragraph එක web page එක තුල වම් පසට වී තිබෙනු දැකිය හැකි වේ. මෙය  මැදට ගතහොත් වඩාත් ආකර්ෂණීය බව ඔබට පෙනෙනු ඇත. ඒ සදහා <center> tag එක මෙන්ම <p> tag එක තුල align නම් Attribute එක යොදා ගත හැකිය. ඒ සදහා ඔබට Values ලෙස left , right , center , justify යන ඒවායින් කැමති එකක් යෙදිය හැක. center යොදා මැදට ගැනීමට හැකි අතර justify යොදා දෙකෙලවරටම සමාන්තර වන සේ paragraph එක සකසා තවත් ආකර්ෂණීය පෙනුමක් ලබා ගත හැකි වේ.

<p align=”justify”>This is My First Web Page. I like to learn and create web pages </p>

එමෙන්ම ඔබට එක් paragraph එකක් අවසන් කර අලුත් එකක් ලිවීමට අවශ්‍ය නම් මුල් paragraph එක අවසානයේ <br> tag එක යෙදිය හැක. <br> tag එක සදහා closing tag එකක් නොයෙදේ. මෙලෙස closing tag නොයෙදෙන tags ද html තුල පවතින අතර වැඩිදුර ඉගෙනීමේදී ඔබට ඒවා දැන ගත හැකි වේ.

<p align=”justify”>This is My First Web Page. I like to learn and create web pages<br>

This is second paragraph.</p>

සාරාංශයක් ලෙස මෙයින් ඔබට html ගැන අවබෝධයක් සහ html හි tags සහ tags තුල ඇති attributes සහ attributes වලට අදාල values ගැන ඉගෙන ගත යුතු බව තේරුම් යන්නට ඇත. web page නිර්මාණයට අවශ්‍ය මූලිකම භාශාව වන HTML, web page නිර්මාණය සදහා ඔබ අනිවාර්යයෙන් ඉගෙන ගත යුතු වේ.

Related Articles

Newsletters

Join to Our Newsletter

E-Learning Studies

ලොකු හීනයක් සැබෑ කරගන්න පුංචි තැනකින් විශිෂ්ටතම ඇරඹුමක් ගන්න.

Open chat
1
Greetings from E-Learning!
How may I assist You?.......