HTML

වෙබ් අඩවි සැකසීම සඳහා HTML භාවිතා කරනු ලැබේ. මුලින්ම අප වෙබ් අඩවියක් පිළිබඳව අවබෝධය ලබා ගනිමු.

වෙබ් අඩවියක් යනු කුමක්ද? - What is a Web Site

විශ්ව විසිරි වියමනෙහි (WWW) පිහිටි එක් ස්ථානයක් (Location) ලෙස වෙබ් අඩවියක් (Web Site) හදුනාදීමට හැකිය. වෙබ් අඩවියක් වෙබ් පිටු (Web Page) එකකින් හෝ රාශියකින් සමන්විත වේ. 

වෙබ් පිටුවක් යනු කුමක්ද? -What is a Web Page

විශ්ව විසිරි වියමනෙහි  ඇති වෙබ් අඩවි (Web Sites) ගොඩනැගී ඇත්තේ වෙබ් පිටු මගිනි. මෙම වෙබ් පිටු එසේ නොමැතිනම් වෙබ් ලේඛන (Web documents ) ලියනු ලබන්නේ Hyper Text Markup Language (HTML) ඇසුරෙනි. HTML ඇසුරෙන් වෙබ් පිටු නිර්මාණය සඳහා HTML Editors භාවිතා කරනු ලැබේ.

What is HTML

වෙබ් පිටු සැකසීම සඳහා HTML භාවිතා කරනු ලැබේ. 1989 දී බ්‍රිතාන්‍ය ජාතික ටිම් බර්නර්ස් ලී (Tim Berners-Lee) විසින් HTML (Hyper Text Markup Language) ලොවට හඳුන්වාදුන් අතර එමගින් වෙබ් පිටුවක සැකැස්ම කෙලෙසද යන්න වෙබ් බ්‍රවුසරයට හැඳින ගැනීම සඳහා අදාල වූ කරුණු සපුරාදෙනු ලබයි. HTML හි විකාශනය පහත අයුරින් වේ.

Version	Year		What is HTML Editors වෙබ් පිටු සැකසීම සඳහා Hyper Text Markup Language හැසිරවීම සඳහා භාවිතා කරනු ලබන මෘදුකාංග HTML Editors ලෙස හඳුනා දිය හැකිය. HTML Editors, HTML සමග පමණක් ම නොව වෙබ් පිටු නිර්මාණයට අදාල XML, CSS සහ JavaScript වැනි තාක්ෂණ ක්‍රම සමග ද බැඳී ඇත. මෙහිදී භාවිතා කරනු ලබන ක්‍රමෝපාය අනුව HTML Editors වර්ග තුනකට වෙන් කර දැක්විය හැකිය.
HTML	1989
HTML 2.0	1995
HTML 3.2	1997
HTML 4.0	1998
HTML 4.01	1999
HTML 5.0	2008

1.                     සරල පාඨක සංස්කරණ යෙදුම් (Text Editors )

2.                  විෂයානුබද්ධ කේත භාවිතා කරනු ලබන යෙදුම් (Object Editors )

3.                  වෙබ් අඩවි නිර්මාණ යෙදුම් (WYSIWIG Editors )

සරල පාඨක සංස්කරණ යෙදුම් (Text Editors )

සරල පාඨක සංස්කරණ යෙදුම් භාවිතයේදී HTML කේත පිළිබඳව සහ කේත හැසිරවීම පිළිබඳව මනා දැනුමක් පරිශීලකයාට තිබිය යුතුය. එනම් එම කේත යෙදිය යුතු අන්දම පිළිබඳව ඉඟි පලකිරීම අදාල මෘදුකාංගය මගින් සිදුනොකරන බැවිනි. සරල පාඨක සංස්කරණ යෙදුම් කිහිපයක් පහත දැක්වේ.

Notepad	මයික්‍රො සොෆ්ට් ආයතනය මගින් මුල්ම වින්ඩෝස් සංස්කරණයේ සිට නොමිලයේ බෙදා හරිනු ලබන මාදුකාංගයකි.
GEdit	යුනිකේත ක්‍රමය භාවිතා කල හැකි පරිදි සකසනු ලැබූ මෘදුකාංගයකි.
TextEdit	මැකින්ටොෂ් මෙහෙයුම් පද්ධතිය සමග නොමිලයේ බෙදා හරිනු ලබන මෘදුකාංගයකි.
Ted Notpad	Joraj Similovic විසින් සංවර්ධනය කරන ලද වින්ඩෝස් මෙහෙයුම් පද්ධතිය සමග භාවිතා කල හැකි මෘදුකාංගයකි.

විෂයානුබද්ධ කේත භාවිතා කරනු ලබන යෙදුම් (Object Editors )

විෂයානුබද්ධ කේත භාවිතා කරනු ලබන යෙදුම් භාවිතයේදී HTML කේත හැසිරවීම පිළිබඳව මනා දැනුමක් පරිශීලකයාට නොතිබුණද අදාල කේත භාවිතයේදී එම කේත පිළිබඳව කලින් සකස් කරනු ලැබූ සැලසුම් අච්චු භාවිතා කල හැකි අතර විශේෂයෙන්ම උපදේශ සහ අනුඋපදේශ කේත පහසුවෙන් හඳුනා ගත හැකි පරිදි විවිධ වර්ණයන්ගෙන් දක්වා ඇත.මෙම වර්ගයේ දක්නට ඇති තවත් විශේෂ ලක්ෂණයක් වනුයේ පරිශීලකයා විසින් භාවිතා කරනු ලබන සංස්කරණය කරනු ලබන පරිගණක භාෂාව අනුව යෙදුමේ අතුරුමුහුණත වෙනස් වීම දැක්විය හැකිය. මෙම වර්ගයේ කේත සංස්කරණ යෙදුම් කිහිපයක් පහත දැක්වේ.

Edit Plus	Es - Computing ආයතනය වෙනුවෙන් Sangil Kim විසින් වින්ඩෝස් මෙහෙයුම් පද්ධතිය සඳහා නිර්මාණය කරන ලද්දකි.
Homesite	Adobe සමාගම මගින් සකස් කරනු ලැබූ Homesite කේත සංස්කරණ යෙදුම වින්ඩෝස් මෙහෙයුම් පද්ධතිය සඳහා භාවිතාවේ.
Note Pad ++	Don Ho විසින් නිපදවූ මෙම යෙදුම මේ වනවිට වැඩිම පිරිසක් භාවිත කරනු ලබන යෙදුම බවට පත් වී ඇත. මෙම යෙදුම වින්ඩෝස්, ලිනකස් සහ මැකින්ටොෂ් යන මෙහෙයුම් පද්ධති සමග ක්‍රියාත්මක කල හැකි අතර විවිධ පරිගණක භාෂා සංස්කරණය සඳහා භාවිතා කරනු ලබන අතර HTML භාෂාව සංස්කරණය සඳහා බහුලව භාවිතාවේ. මෙය නොමිලයේ භාගත කර ගත හැකි මෘදුකාංගයකි.

වෙබ් අඩවි නිර්මාණ යෙදුම් (WYSIWIG Editors )

කේත පිළිබඳ වැඩි දැනුමක් නොමැති ආධුනික වෙබ් අඩවි නිර්මාණය කරුවන්ට ඉතා පහසුවෙන් සරල වෙබ් අඩවි නිර්මාණය කර ගැනීම සඳහා භාවිතා කල හැකි මෘදුකාංග මෙලෙස හඳුන්වාදිය හැකිය. පහත දැක්වෙන්නේ එවැනි වෙබ් අඩවි නිර්මාණ යෙදුම් කිහිපයකි.

Software Name	Operating System	Type	Company
Dreamweaver	Windows /Mac	Commercial	Adobe
ColdFusion	Windows /Mac	Commercial	Adobe
Expression Web	Windows	Commercial	Microsoft
ShavePoint Designer	Windows	Commercial	Microsoft
Visual Studio	Windows	Commercial	Microsoft
Kompozer	Windows/Linux	Open Source	-

වෙබ් අඩවි නිර්මාණය

වෙබ් පිටු සකස් කිරීමේදී ඒ සඳහා අදාල වන Text, Image සහ  Video වැනි අංග අදාල පිටුවට ඇතුලත්  කිරීම සහ එම පිටු නිසි පරිදි දැක්වීම සඳහා HTML භාවිතා කෙරේ.

HTML භාවිතයෙන් සරල වෙබ් පිටුවක් නිර්මාණය

What is a Element?

වෙබ් පිටුව තුල අඩංගු විය යුතු පාඨ (Text), රූප (Image) සහ විවිධ ආකෘති දර්ශනය විය යුතු ආකාරය කෙලෙසද යන්න Browser එකට හැඳින ගැනීම සඳහා HTML හිදී elements භාවිතා කෙරේ. Elements භාවිතා කිරීමේදී ප්‍රධානම අංගය වනුයේ Tag ය. Element එකක් තුල සාමාන්‍යයෙන් Opening Tag එකක්, Attribute එකක් හෝ කිහිපයක් (Attribute නැතිවද තිබිය හැකිය), Content  එකක් සහ  Closing Tag එකක් ඇත.

            <font color = "red"> This is Title </font>

What is a Tag?

වෙබ් පිටුව තුල දර්ශනය විය යුතු දේ, දර්ශනය විය යුතු ආකාරයට අදාල Tag එක තුල ලිවිය යුතුය. එනම් දර්ශණය විය යුතු ආකාරයට අදාල Tag එකකින් ආරම්භ කර (Opening Tag) එම Tag එකකින්ම අවසන් (Closing Tag) කල යුතුය (අඩුම වශයෙන් දර්ශනය වන ආකාරයට අදාල Tag එකකින් ආරම්භ කල යුතුය). Tag එකක් ලිවිමේදී ‘<’ (Open Braces) සලකුණින් ආරම්භ කල යුතු අතර ‘>’ (Close Braces) සලකුණින් අවසන් කල යුතුය. අදාල element එකහි අවසානය දැක්වීම සඳහා ද Tag එක භාවිතා කරන අතර එහිදී මුලින් සදහන් කල සලකුණු වලට අමතරව ‘/’ සලකුණද භාවිතා කරනු ලැබේ.

                        Opening Tag   <h2>                                  Closing Tag    </h2>

What is a Attribute?

වෙබ් පිටුව තුල ඇති අන්තර්ගතය දර්ශනය විය යුතු ආකාරය Tag එක මගින් වෙබ් බ්‍රවුසරය වෙත දැනුම් දෙනු ලබන අතර එසේ දර්ශනය විය යුතු අයුරු වඩා විස්තරාමත්මකව දැනුම් දීම සඳහා Attribute භාවිතා කරනු ලබයි. සෑම විටම Attribute ආරම්භක Tag එක තුල ඇතුලත් කරනු ලබන අතර අදාල Attribute විධානයට පසු විධානයේ විස්තරය දැක්වීමට පෙර ‘=’ සලකුණ භාවිතා කෙරේ. එමෙන්ම Attribute එක අනිවාර්යයෙන්ම පෙරලී කොමා ( “ ” ) යටතේ දැක්විය යුතුය. තවද Attribute එක අවසානයේ සෙමි කෝලන් එක (;) දැක්විම මගින් Attribute එකකින් තවත් Attribute එකක් වෙන් කර දැක්වීමද සිදුකර ගත හැකිය.  

Syntax of Basic HTML web page

Document declaration tag	<!DOCTYPE html>
<html>	<html>
<head>	<head>
Document header related tags	<title> HTML Tutorial</title>
</head>	</head>
<body>	<body>
Document body related tags	<p>This is my first web site</p>
</body>	</body>
</html>	</html>

How to save a HTML document?

පළමුව Text Editor මෘදුකාංගයක් විවෘත කර ගැනීමෙන් පසු එහි නව Text Document එකක් ආරම්භ කර  වෙබ් පිටුවක මූලික Tag පිහිටුවීමෙන් පසුව .html හෝ .htm යන Extension යටතේ Save කල යුතුය.  

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

<html>
<head>
<title>WEB</title>
</head>
<body> වෙබ් පිටුවක ආරම්භය </body>
</html>

පහත දැක්වෙනුයේ වෙබ් පිටුවක මාතෘකාවක් දැක්වීමට භාවිතා වන උපදේශ කේතයයි.

වෙබ් පිටුවක මාතෘකා දැක්වීම සඳහා h1 - h6 උපදේශ  කේත (Tags) භාවිතා කරනු ලැබේ.
<h1>H1 පළමු මාතෘකාව</h1>
<h2>H2 දෙවන මාතෘකාව</h2>
<h3>H3 තෙවන මාතෘකාව</h3>
<h4>H4 සිව්වන මාතෘකාව</h4>
<h5>H5 පස්වන මාතෘකාව</h5>
<h6>H6 සයවන මාතෘකාව</h6>

මාතෘකා පිටුව තුල එක් එක් පැතිවලට අනුකූලව පිහිටුවීමට align අනුඋපදේශ  කේත (Attributes) භාවිතා කරනු ලැබේ.
<h1 align ="left">පිටුවේ වමට</h1>
<h1 align ="center">පිටුවේ මධ්‍යයට</h1>
<h1 align ="right">පිටුවේ දකුණට</h1>