HTML #01

HTML යනු,

 

HTML යනු වෙබ් පිටු නිර්මාණය කිරීම සඳහා ඇති භාෂාවකි. HTML යන්නෙන් අර්ථවත් කෙරෙන්නේ Hyper Text Markup Language යන්නයි. එනම් මෙය පරිගණක වැඩසටහන් සම්පාදක භාෂාවක් (Programming Language) නොව Markup Language එකකි. මෙය තහවුරු වන ප්‍රධාන සාධකයක් වන්නේ HTML යොදා ගනිමින් ගණිතමය ප්‍රකාශන සුළු කළ නොහැකි වීමයි.

Markup Language එකක් යනු Markup Tags රාශියක එකතුවකි. මෙම Tags මඟින් HTML ලේඛනයක අන්තර්ගතය පෙන්වා දෙයි. සාමාන්‍ය HTML ලේඛනයක් HTML Tags වලින් සහ සාමාන්‍ය වගන්ති වලින් සමන්විත වේ. ඇතැම් තැනක වෙබ් පිටු ලෙස හැඳින්වෙන්නේ ද HTML ලේඛනයන්මය.


HTML Tags

HTML Markup Tags සාමාන්‍යෙයන් HTML Tags ලෙස හඳුන්වයි. HTML Tags යනු කෝණ වරහන් (”< >”) තුළ දක්වනු ලබන භාෂාවේ මූලික පදයන්ය (Keywords). HTML Tags සාමාන්‍යයෙන් පවතින්නේ යුගල වශයෙනි. (උදා:- <b> and </b>) මෙම යුගලයෙන් පළමු Tag එක Starting Tag හෙවත් Opening Tag ලෙස හඳුන්වන අතර දෙවන Tag එක End Tag හෙවත් Closing Tag ලෙස හඳුන්වයි. මේ දෙක අතර ප්‍රධාන වෙනස්කම වන්නේ Closing Tag එක තුළ අන්තර්ගත වන ඇල ඉර සංකේතයයි (”/”).


Web Browsers

Web Browsers එකක කාර්ය වන්නේ HTML ලේඛන තේරුම් ගෙන ඒවා වෙබ් පිටු ලෙස ඉදිරිපත් කිරීමයි. මෙහිදී Browser එක මඟින් HTML Tags ප්‍රදර්ශනය නොකරන අතර පිටුවේ අන්තර්ගතය තේරුම් ගැනීමට Tags භාවිතා කරයි.


HTML Page Structure

HTML පිටුවක් ආරම්භ වනුයේ <html> Tag එකෙනි. එනම් <html> හා </html> Tags අතර අඩංගු සියල්ල HTML පිටුවක් වේ. HTML පිටුවක ප්‍රධාන වශයෙන් කොටස් දෙකකි. එනම් Head හා Body වශයෙනි. මෙහි Head කොටසේ එනම් <head> හා </head> Tags අතර වෙබ් පිටුව පිළිබඳ තොරතුරු ඇතුළත් වන අතර Body කොටසේ එනම් <body> හා </body> Tags අතර වෙබ් පිටුවේ අන්තර්ගතය අඩංගු වේ.


HTML Versions

වෙබ් තාක්ෂණයේ ආරම්භක අවධියේ සිටම HTML හි Versions කිහිපයක් දක්නට තිබුණි.


HTML HTML + HTML 2.0 HTML 3.2 HTML 4.01 XHTML 1.0 HTML 5 XHTML 5
1991 1993 1995 1997 1999 2000 2012 2013


HTML Editors

HTML යොදා ගනිමින් වෙබ් පිටු නිර්මාණය කිරීම සඳහා Adobe Dreamweaver, Microsoft Expression Web, CoffeeCup HTML Editor වැනි වෘත්තීයමය මෘදුකාංග භාවිතා කළ හැක. නමුත් HTML ඉගෙන ගැනීමේ දී Notepad වැනි සරල වගන්ති සංස්කාරක මෘදුකාංගයක් (Text Editor) භාවිතා කිරීම ඵලදායි ඉගෙනුම් මාර්ගයක් ලෙස නිර්දේශිතය.

මෙහිදී කළ යුත්තේ HTML කේතය (Code එක) Notepad එක තුළ ටයිප් කර .html හෝ .htm යන File Extension දෙකෙන් එකක් ලෙස Save කිරීමයි. ඉන්පසු එය Browser එකක් යොදා ගනිමින් විවෘත කළ විට Tags රහිතව අපගේ වෙබ් පිටුව දැක ගත හැක.

 

HTML Elements


HTML Tags සහ HTML Elements යන පද දෙකෙන්ම විස්තර වනුයේ එකම දෙයකි. නමුත් හරියටම විස්තර කරනවා නම් HTML Element එකක් යනු Tags ද ඇතුළුව Starting Tag එක සහ End Tag එක අතර අන්තර්ගත සියල්ලයි. සමහර HTML Elements වල අන්තර්ගතයක් නොමැති අතර ඒවා Starting Tag එක තුළම සංවෘත කරයි. බොහොමයක් HTML Elements ඒවා පිළිබඳ අමතර තොරතුරු ලබා දෙන Attributes දරයි.

 

Nested HTML Elements


බොහොමයක් HTML Elements තුළ තවත් HTML Elements අඩංගු විය හැක. එසේ තවත් HTML Elements අන්තර්ගත වන HTML Elements සඳහා Nested HTML Elements යන ව්‍යාවහාරය යෙදේ.

උදාහරණ -


<html>

 

<body>

<p>This is my first paragraph.</p>

</body>

 

</html>

 

මෙම උදාහරණය සැලකීමේ දී එහි HTML Elements තුනක් අඩංගු වේ. <html>,<body> හා <p> යනු එම තුනයි. ඒවායේ අන්තර්ගතය සලකන විට <body> Element එක තුළ <p> Element එකද <html> Element එක තුළ <body> හා <p> Elements ද අඩංගු වේ. එනම් මෙහි <p> සාමාන්‍ය HTML Element එකක් වන අතර <html> හා <body> යන දෙකම Nested HTML Elements වේ.

 

Empty HTML Elements


අන්තර්ගතයක් රහිත HTML Elements සඳහා Empty HTML Elements යන ව්‍යාවහාරය යෙදේ. වෙබ් පිටුවට අළුත් පේලියක් ඇතුළු කරන <br> Tag එක මේ සඳහා උදාහරණයකි. මේවා Starting Tag එක තුළම ඇළ ඉරක් යෙදීමෙන් සංවෘත කරනු ලැබේ.

උදාහරණ -


<br/>

 


වැදගත් කරුණූ


1. End Tag එක අමතක නොකරන්න.

End Tag එක අනිවාර්ය ලෙස නොසලකන බැවින් බොහොමයක් Browsers මඟින් End Tag එක රහිතව වූවද HTML Elements හරියාකාරව ප්‍රදර්ශනය කරනු ඇත. නමුත් මේ පිළිබඳව නිතරම විශ්වාසය තැබීමෙන් වළකින්න. සමහර HTML Elements මඟින් End Tag එක අමතක වූ විට නොසිතූ ප්‍රතිඵල ලබාදිය හැක.

2. Lowercase Tags භාවිතා කරන්න.

HTML Tags සඳහා Capitol සහ Simple භේදයක් නොමැත. <P> හා <p> යන දෙකම HTML හිදී එක හා සමානය. නමුත් World Wide Web Consortium (W3C) මඟින් HTML 4 සඳහා නිර්දේශ කර ඇත්තේ Lowercase Tags ය.

 


HTML Attributes


HTML Elements වලට Attributes දැරිය හැක. Attributes මඟින් Element එක පිළිබඳ අමතර තොරතුරු ඉදිරිපත් කරයි. Attributes සෑම විටම Starting Tag එක තුළ නිරූපණය කරයි. Attributes ඉදිරිපත් කරනුයේ name=”value” ආකාරයට නම හා අගය දැක්වෙන යුගල වශයෙනි. මෙහිදී values සෑම විටම උද්‍රත පාඨ ලෙස දැක්විය යුතුය.

උදාහරණ -


<a href="http://www.google.com">Google</a>

 

මෙම උදාහරණයෙන් ඉදිරිපත් කර ඇත්තේ වෙබ් පිටුවට Link එකක් ඇතුළු කරන <a> Element එකයි. මෙහි href යනු Attribute එකක් වන අතර http://www.google.com යනු එහි value එකයි.

 

වැදගත් කරුණූ


1. Lowercase Attributes භාවිතා කරන්න.

Attributes සඳහා ද Capitol සහ Simple භේදයක් නොමැත. නමුත් World Wide Web Consortium (W3C) මඟින් HTML 4 සඳහා නිර්දේශ කර ඇත්තේ Lowercase Attributes ය.

Attributes අතර සමහර Attributes බොහොමයක් Elements වලට පොදු වන අතර ඒ ඒ Elements සඳහා විශේෂිත වූ Attributes ද දක්නට ඇත. ඒවා පිළිබඳව පසුව තේරුම් ගැනීමට හැකිවනු ඇත.

 

එහෙනම් අපි ඊලඟ ලිපියෙන් හම්බවෙමු.සුබ දවසක්!