Web developer කෙනෙක් වෙන්න කලින් ඔබ දැනගෙන සිටියම යුතු HTML ගැන දන්න සිංහලෙන් සරලව​

HTML එහෙමත් නැත්තම් HyperText Markup Language කියන්නෙ Web Usersලට Tags, Elements සහ Attributes භාවිත කරලා කොටස්, ඡේද, වගු වගේ දේවල් නිර්මාණය කරන්න භාවිතා කරන Markup Language එකක්. HTML මුලින්ම Release වෙන්නෙ 1993දි Tags 18ක් එක්ක. ඊටපස්සෙ ආපු Versions හැම එකකටම අළුතෙන් Tags, Attributes ඇතුළත් වෙලා තමයි අවසාන වශයෙන් දැනට තියෙන HTML5 කියන Version එක 2014දි Release වෙන්නෙ. HTML වලට Dynamic Functionalities නැති නිසා මේක Programming Language ගණයට අයත් වෙන්නෙ නෑ.

HTML ප්‍රධාන වශයෙන් පාවිච්චි වෙන්නෙ

  1. Web Development
  2. Internet Navigation
  3. Web Documentation

කියන දේවල් වලට.

ඉතිං අද මේ Article එකෙන් ඔයාලට කියලා දෙන්න හදන්නෙ HTML කොහොමද වැඩකරන්නෙ කියන එක සහ ප්‍රධාන Tags කීපයක් ගැන. මේක කියවන ඔයා Web Development වලට අළුත් ඒත් ඉගෙනගන්න කැමති කෙනෙක් නම් මං හිතනවා මේ Article එකෙන් ඔයාට HTML ගැන දළ අදහසක් ගන්න පුළුවන් වෙයි කියලා.

මං මුලින්ම කිව්වනේ මේ HTML වැඩකරන්නෙ Tags, Elements, Attributes එක්ක. HTML Elements කියන්නෙ හරියට Web Page එකක Building Blocks වගේ. Tag එකකින් Web Browser එකට Element එකක් පටංගන්න සහ ඉවරවෙන ස්ථානය කියනවා වගේම Attribute වලින් Element වල ලක්ෂණ විස්තර කරනවා.

Element එකක ප්‍රධාන කොටස් තුනයි.

ඒවා තමයි,

  1. Opening Tag - Element එකක් ක්‍රියාත්මක වෙන්න පටන් ගන්න ස්ථානය ප්‍රකාශ කරන්න පාවිච්චි වෙනවා. උදාහරණයක් විදියට ඡේදයක් ආරම්භ කරන්න පාවිච්චි කරන Tag එක <p> විදියට තමයි දැක්වෙන්නෙ.
  2. Content - මේක තමයි Usersලට පේන Output එක.
  3. Closing Tag - මේකත් Opening Tag එක වගේමයි නමුත් Element name එකට ඉස්සරහින් Forward slash එකක් පාවිච්චි වෙනවා. උදාහරණයක් විදියට ඡේදයක් අවසාන කරන්න පාවිච්චි කරන Tag එක </p> විදියට තමයි දැක්වෙන්නෙ.

මේ කොටස් තුන එකතු වුණාම තමයි HTML Element එකක් හැදෙන්නෙ.

<p>This is how you add a paragraph in HTML.</p>

දැනට විවිධ Elements නිර්මාණය පුළුවන් HTML Tags 142ක් විතර තියෙනවා. ඒවගෙන් සමහර Tags අළුත් Web Browsers වලට Support කරන්නෙ නැතිවුණත් හැම එකම වගේ ඉගෙනගන්න එක අපිට ප්‍රයෝජනවත් වෙනවා.

ඊළඟට අපි කතාකරමු දැනට වැඩිපුරම භාවිතා කරන HTML Tags සහ ප්‍රධාන Elements දෙකක් වෙන Block Level Elements ගැනයි Inline Elements ගැනයි.

Block-Line Elements (Structural Elements)

Block-Line Element එකක් හැමවෙලාවකම Page එකේ සම්පූර්ණ පළල ගන්නවා. ඡේද හෝ පිටු බෙදීම් වැනි දේවල් වගේ විශාල අන්තර්ගත කොටස් නිර්මාණය කරනවා. ගොඩක් HTML Elements මේ Block-Line Elements ගොඩට තමයි වැටෙන්නෙ.

හැම HTML Page එකක්ම මේ Tags තුන භාවිතා කරනවා.

  1. <html> - මේ Tag එකෙන් තමයි සම්පූර්ණ HTML Document එකම define කරන මූලිකම Element එක.
  2. <head> - මේ Tag එක Page එකේ මාතෘකාව, Title එක වගේ Meta Informations දරනවා.
  3. <body> - මේ Tag එක Page එකේ තියෙන Contents පෙන්නනවා.

මීට අමතරව තවත් block-level tags තියෙනවා. ඒවානම්,

  1. Heading tags - <h1> ඉඳන් <h6> කියන range එකේ tags මේකට අයිති වෙනවා. <h1> කියන එක ලොකුම එක සහ <h6> කියන එක පොඩිම විදියට තමයි තියෙන්නෙ.
  2. Paragraph tags - <p> කියන tag එකෙන් තමයි ඕනෑම ඡේදයක් පටංගන්නෙ.
  3. List tags - මේකේ වෙනස්කම් තියෙනවා. Ordered list වලට <ol> tag එකත්, Unordered list වලට <ul> tag එකත් වගේම <li> tag එක list එකක item එකක් represent කරන්න පාවිච්චි කරනවා.

Inline Elements

Inline Elements කියන්නෙ Content එකේ ප්‍රවාහය බිඳීම වෙනුවට Element නිර්වචනය කරන Tag වලින් සීමා වූ ඉඩ පමණක් හිමි ඒවා වෙනවා. Inline Elements අළුත් රේඛාවකින් ආරම්භ නොවන අතර අවශ්‍ය තරම් පළල පමණක් ගන්නවා.‌‌‌‌

<a href="https://androidwedakarayo.com/">Click me!</a>‌‌‌‌

ඔන්න ඕකයි සරළමවම HTML කියන්නෙ, මං හිතනවා ඔයාලා දළ අදහසක් ගන්න ඇති කියලා මේ Article එක කියවලා, මේක ඉගෙනගන්න මහ ලොකු දේවල් ඕනේ වෙන්නෙ නෑ. PC එකයි Notepad එකයි තිබ්බම හොඳටම ඇති, ගොඩක් සරළ Language එකක්. හොඳ දැනුමක් ලැබුණම Visual Studio Code වගේ Softwares පාවිච්චි කරලා ලේසියෙන්ම තමන්ගේ HTML Code එක ලියාගන්න පුළුවන්. W3Schools වගේ Sites වලින් ඔයාට ඕනේ තරම් දේවල් ඉගෙනගන්න පුළුවන් Tutorials තියෙනවා. ඒ නිසා ඔයා Web Development කරන්න හිතාගෙන ඉන්න කෙනෙක්නම් මුලින්ම HTML වලින් පටංගන්න. මේ විදිය තවත් Article එකකින් නැවතත් අපි හමුවෙමු.