webdevlinux - logo Web Dev Linux

ප්‍රමිතීන් හා රීති

HTML භාෂාව පිළිබද ප්‍රමිතීන් සකස් කරනු ලබන්නේ Worldwide Web Consortium නම් ආයතනයකිනි. එය කෙටියෙන් W3C ලෙසද හදුන්වයි.

Web browsers වල නිවැරදිව වෙබ් අඩවියක් දර්ශනය කර ගැනීමට නම්, code කිරීමේදී W3C රීති අනුගමනය කිරීම ඉතාමත් වැදගත්. Firefox, Chrome වැනි web browser නිර්මාණය කර ඇත්තේ W3C ප්‍රමිතීන්ට අනුවයි.

HTML Standards syntax HTML Standards Terms

HTML පද-ගැලපුම (Syntax)

HTML වල මූලික යෙදුම් කිහිපයකි.

  • The Doctype
  • Character encoding declaration
  • HTML Elements
  • HTML Tags
  • Attributes
  • Contents
  • Comments

Doctype

මෙය HTML ගොනුවක තිබිය යුතු අත්‍යවශ්‍ය සාධකයකි. මෙය මගින්, ගොනුව ලියැවී ඇති HTML සංස්කරණය (version එක) නිරූපණයවේ. HTML5 සදහා Doctype එක පහත පරිදි වේ.

<!DOCTYPE html>

Character Encoding Declaration

මෙයින් නිරූපණය වන්නේ HTML ගොනුව ලිවීමට භාවිතා කරනලද character encoding type එකයි. සාමාන්‍යයෙන් අපි භාවිතා කරනු ලබන්නේ UTF-8 type එකයි.

<meta charset="utf-8">

HTML ගොනුවක් මෙය සඳහන් කල හැකි තවත් ක්‍රමද ඇත. ඒව පසුව ඉගෙනගනිමු.

HTML Elements

සරලව, HTML ගොනුවක කුඩා එක් කොටසක් ලෙස HTML Element එකක් හැදින්විය හැකිය.

<a href="http://www.webdevlinux.com">Visit WDL</a>
<input>
<hr>
<option>Male</option>

void elements, normal elements, raw text elements, escapable raw text elements & Foreign elements. ලෙස HTML Elements වර්ග කිහිපයකි. මේවා පිළිබදව වැඩිදුර පසුව ඉගෙනගනිමු.

HTML Element එකක් තුල HTML Tags, Attributes & Contents අඩංගු විය හැක.

HTML Tags

HTML Element එකක ආරම්භය සහ අවසානය දැක්වෙන්නේ HTML Tags වලිනි. සමහර Elements සදහා ආරම්භක Tag එක හා අවසාන Tag එක ලෙස Tags යුගලක් පවතින අතර සමහර Elements සදහා ඇත්තේ ආරම්භක Tag එක පමණි.

Example :
Start Tag : <option>
End Tag : </option>
Start Tag : <a>
End Tag : </a>

ආරම්භක Tag එක පමණක් ඇති HTML Elements කිහිපයක් පහත උදාහරණයේ දැක්වේ. මේවා Void Elements ලෙස හදුන්වයි.

Example :
<hr>
<input type="color">

Void elements නිරූපණය කිරීමට, අවසාන වරහනට පෙර / ලකුණක් යෙදිය හැකිය. මෙය අත්‍යවශ්‍ය නොවේ.

Example :
<hr/>
<meta charset="utf-8" />

Attributes

ආරම්භක Tag එකක් තුල Attributes පැවතිය හැකිය. Attribute සදහා උදාහරණ පහතින් දක්වා ඇත.

href="http://www.webdevlinux.com"
type="color"

Contents

HTML Element එකක ආරම්භක හා අවසාන Tag දෙක තුල ඇති අන්තර්ගතය content ලෙස හදුන්වයි. Void Elements තුල contents නොමැත.

Examples :
<a href="http://www.webdevlinux.com" target="_blank">Visit WDL</a>
Content of this element is : Visit WDL

<input type="color">  
There is no contents

<p>My Name is <input></p>
Content of this p element is : My Name is <input>

HTML Comments

Comment එකක් යනු HTML ගොනුව code කරන්නා විසින් ලියන ලද සටහනකි. Comment එකක් වෙබ් බ්‍රවුසර් එකකින් නොපෙන්වයි. HTML ගොනුවක Tag එකක් තුල හැර අනෙකුත් ඕනෑම තැනක මෙවැනි සටහන් යෙදිය හැකිය.

Example :
<!-- Coded by WDL on 20161220 -->  This is a valid comment
<p <!-- Paragraph -->>I am free on</p>   This is a invalid comment

HTML Element එකක් තුල තවත් Element එකක් භාවිතා කිරීමේ ප්‍රමිතීන්

HTML Element එකක ආරම්භක හා අවසාන Tags යුගලක් පවතින විට, එම Element එකෙහි content එක අවසානයේ එහි අවසාන Tag එක යෙදිය යුතුය. එනම්, යම් element එකක Tag එකක් එම element එකින් පිටත පැවතිය නොහැක.

නිවැරදි ආකාරය.

<p>1<sup>st</sup></p>

වැරදි ආකාරය.

<p>1<sup>st</p></sup>

HTML ප්‍රමිතීන් එක් එක් සංස්කරණයන්ට අනුව වෙනස් විය හැක. අප භාවිතා කරන සංස්කරණය පිළිබඳ යාවත්කාලීන (update) වී සිටීම ප්‍රමාණවත් වේ. හැමවිටම HTML ප්‍රමිතීන් අනුගමනය කිරීමෙන් විශිෂ්ඨ වෙබ් අඩවි නිර්මාණ ශිල්පියෙකු විය හැකිය.