අද මම කියලා දෙන්න යන්න්නේ ගෑන.මේක හුගක් අය දන්නවා ඈති කමක් නෑ නොදන්න කස්ටියට කියලා දෙන්නේ.
HTML යනු?
HTML යනු Web අඩවි සකසන මූලිකම භාෂාව වේ. නම සෑදී ඇත්තෙ Hyper Text Markup Language යන වචන වල මුල් අකුරු එකතු වීමෙනි. මෙය හුදෙක් programming language එකක් නොවන අතර markup language එකක් වේ. markup language සමන්විත වන්නේ markup tags වලිනි. HTML විසින් වෙබ් අඩවි නිර්මාණයෙදී මෙම markup tags භාවිතා කරනු ලබයි.
HTML Tags
HTML markup Tags, HTML Tags ලෙසද හදුන්වයි. HTML Tags <html> වශයෙන් කෝණ වරහන් තුළ සටහන් කරයි. HTML Tags සාමාන්‍යයෙන් <b> සහ </b> ආදී වශයෙන් යුගලයන් වශයෙන් පවතී. එයින් පළමු වැන්න start tag හෝ opening tag ලෙසත්, දෙවැන්න end tag හෝ closing tag ලෙසත් හදුන්වනු ලැබේ.
HTML ලේඛණ හෙවත් වෙබ් පිටු
HTML ලේඛණ වෙබ් පිටු ලෙසද හදුන්වයි. HTML ලේඛණ HTML tags වලින් සහ අකුරු වලින් සමන්විත වේ.
Sample Code :
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph</p>
</body>
</html>
<html> සහ </html> අතර වෙබ් පිටුව විස්තර කෙරේ
<body> සහ </body> අතර වෙබ් පිටුවෙහි පරිශීලකයාට දර්ශනය වන කොටස
<h1> සහ </h1> අතර මාතෘකා ආදිය දර්ශනය කරවයි
<p> සහ </p> අතර ඡෙද ආදිය දර්ශනය කරවයි
</html>
<html> සහ </html> අතර වෙබ් පිටුව විස්තර කෙරේ
<body> සහ </body> අතර වෙබ් පිටුවෙහි පරිශීලකයාට දර්ශනය වන කොටස
<h1> සහ </h1> අතර මාතෘකා ආදිය දර්ශනය කරවයි
<p> සහ </p> අතර ඡෙද ආදිය දර්ශනය කරවයි
HTML
Dreamweaver සහ Front Page වැනි වු මෘදුකාංග මගින් HTML ලිවීම සහ සංශෝධනය කළ හැකිවේ.
HTML Headings
HTML headings <h1> සිට <h6> දක්වා tags වලින් විග්‍රහ කෙරේ.
<h1>This is a headline</h1>
<h2>This is a headline</h2>
<h3>This is a headline</h3>
HTML Paragraphs
HTML paragraphs <p> tag එකෙන් විග්‍රහ කරයි.
<p>This is a paragraph</p>
<p>This is another paragraph</p>
HTML Links
HTML links <a> tag වලින් විග්‍රහ කෙරෙයි.
<a href="http://www.facebook.com/">This is a link</a>
HTML Images
HTML images <img> tag වලින් විග්‍රහ කෙරෙයි.
<img src="yourimage.jpg" width="104" height="142" />
<h1>This is a headline</h1>
<h2>This is a headline</h2>
<h3>This is a headline</h3>
HTML Paragraphs
HTML paragraphs <p> tag එකෙන් විග්‍රහ කරයි.
<p>This is a paragraph</p>
<p>This is another paragraph</p>
HTML Links
HTML links <a> tag වලින් විග්‍රහ කෙරෙයි.
<a href="http://www.facebook.com/">This is a link</a>
HTML Images
HTML images <img> tag වලින් විග්‍රහ කෙරෙයි.
<img src="yourimage.jpg" width="104" height="142" />
HTML Elements
HTML elements ආරම්භක සහ අවසාන tags වලින් සමන්විත වේ. Elements අන්තර්ගතයන් සැම විටම ආරම්භක සහ අවසාන tags අතර දක්නට ලැබේ. සමහර HTML elements හිස්ව පවතී. එවැනි හිස්ව පවතින elements ආරම්භක tags වසාලනු ලැබේ. HTML elements සතුව attributes පවතී.
<p>
This is a paragraph
</p>
<a href="default.htm">
This is a link
</a>
<br />
ඊට උදාහරණ වේ.
<br />
ඊට උදාහරණ වේ.
HTML Tip
HTML tags අක්ෂර සංවේදීතාවයෙන් (case sensitive) තොර වේ : <P> tag එකෙන් හැගවෙන අර්ථයමයි <p> tag එකෙනුත් හැගවෙන්නෙ. සමහර වෙබ් අඩවි කැපිටල් අකුරින් HTML tags ලියනු ලබයි.
HTML Attributes
HTML elemets සතුව attributes පවතී. Attributes, elements පිළිබදව තවත් තොරතුරු පෙන්නුම් කරයි. මේවා සැම විටම ආරම්භක tag තුල විශේෂයෙන් සටහන් කරයි. Attributes සතුව name="value" මෙවැනි නමක් සහ අගයක් දක්නට ලැබේ.
Example :
<a href="http://www.facebook.com/">This is a link</a>
<img src="yourimage.jpg">
<p id="italicsparagraph">Paragraph type 1 Italics</p>
<input type="text" name="TextField" />
Example :
<a href="http://www.facebook.com/">This is a link</a>
<img src="yourimage.jpg">
<p id="italicsparagraph">Paragraph type 1 Italics</p>
<input type="text" name="TextField" />
HTML Lists
මේවා තුන් ආකාරයකට දැක ගත හැකි වේ. ඒවා නම්,
<ul> - unordered list; මෙහිදී යම් යම් සළකුණු මගින් ලැයිස්තු සාදා පෙන්වයි.
<ol> - odered list; මෙහිදී අංක මගින් ලැයිස්තු සාදා පෙන්වයි.
<dl> - definition list; මෙහිදී ශබ්ධකෝෂයක් ආකාරයට ලැයිස්තු සාදා පෙන්වයි.
මෙහිදී <li> යනු List Item හෙවත් ලැයිස්තු අංගයන්ය.
Unorded List
<ul>
<li>Milk</li>
<li>Tea</li>
<li>Car</li>
<li>Bread</li>
</ul>
Unorded List වර්ග තුන් ආකාර වේ. ඒවානම්,
Circle; මැද හිස්වු වෘත්ත
Disc; මැද පිරවු වෘත්ත
Square; මැද පිරවු චතුරශ්‍ර
Circle
<ul type="circle">
<li>Milk</li>
<li>Tea</li>
<li>Car</li>
<li>Bread</li>
</ul>
Disc
<ul type="disc">
<li>Milk</li>
<li>Tea</li>
<li>Car</li>
<li>Bread</li>
</ul>
Square
<ul type="square">
<li>Milk</li>
<li>Tea</li>
<li>Car</li>
<li>Bread</li>
</ul>
Ordered Lists
<ol>
<li>HTML</li>
<li>CSS</li>
<li>Java Script</li>
</ol>
Orded List වර්ග සිවු ආකාර වේ. ඒවානම්,
<ol type="a"> සිම්පල් අකුරු පදනම් කරගනිමින් ලැයිස්තු සාදයි
<ol type="A"> කැපිටල් අකුරු පදනම් කරගනිමින් ලැයිස්තු සාදයි
<ol type="i"> සිම්පල් අංක පදනම් කරගනිමින් ලැයිස්තු සාදයි
<ol type="I"> කැපිටල් අංක පදනම් කරගනිමින් ලැයිස්තු සාදයි
Definition වර්ගයේ Lists වලදී tags වර්ග තුනක් දැක ගත හැකි වේ.
<dl> ලැයිස්තුවේ ආරම්භය සටහන් කරයි.
<dt> විස්තර කල යුතු වචනය මෙහි සටහන් කරයි.
<dd> වචනයට අදාල විස්තරය සටහන් කරයි.
<dl>
<dt>HTML</dt>
<dd>Hyper Text Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>
<li>Milk</li>
<li>Tea</li>
<li>Car</li>
<li>Bread</li>
</ul>
Unorded List වර්ග තුන් ආකාර වේ. ඒවානම්,
Circle; මැද හිස්වු වෘත්ත
Disc; මැද පිරවු වෘත්ත
Square; මැද පිරවු චතුරශ්‍ර
Circle
<ul type="circle">
<li>Milk</li>
<li>Tea</li>
<li>Car</li>
<li>Bread</li>
</ul>
Disc
<ul type="disc">
<li>Milk</li>
<li>Tea</li>
<li>Car</li>
<li>Bread</li>
</ul>
Square
<ul type="square">
<li>Milk</li>
<li>Tea</li>
<li>Car</li>
<li>Bread</li>
</ul>
Ordered Lists
<ol>
<li>HTML</li>
<li>CSS</li>
<li>Java Script</li>
</ol>
Orded List වර්ග සිවු ආකාර වේ. ඒවානම්,
<ol type="a"> සිම්පල් අකුරු පදනම් කරගනිමින් ලැයිස්තු සාදයි
<ol type="A"> කැපිටල් අකුරු පදනම් කරගනිමින් ලැයිස්තු සාදයි
<ol type="i"> සිම්පල් අංක පදනම් කරගනිමින් ලැයිස්තු සාදයි
<ol type="I"> කැපිටල් අංක පදනම් කරගනිමින් ලැයිස්තු සාදයි
Definition වර්ගයේ Lists වලදී tags වර්ග තුනක් දැක ගත හැකි වේ.
<dl> ලැයිස්තුවේ ආරම්භය සටහන් කරයි.
<dt> විස්තර කල යුතු වචනය මෙහි සටහන් කරයි.
<dd> වචනයට අදාල විස්තරය සටහන් කරයි.
<dl>
<dt>HTML</dt>
<dd>Hyper Text Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>
HTML Forms සහ Input
HTML forms භාවිතා කරනුයේ වෙබ් අඩවියට ඇතුලත් කරනු ලබන තොරතුරු server එකට pass කිරීමටය. <form> සහ </form> tag තුල සටහන් කරයි. Form එකක් තුල input යන element එක දැකිය හැක.
<form>
First name:
<input type="text" name="firstname" /><br />
Last name:
<input type="text" name="lastname" /><br />
</form>
Input Types
Text - සටහන් කරන දැ වෙබ් පරිශීලකයාට දර්ශනය වේ.
Password - සටහන් කරන දැ වෙබ් පරිශීලකයාට දර්ශනය නොවන අතර ඒ වෙනුවෙන් අදුරු කල රවුම් පෙන්නුම් කරයි.
Submit - මෙය බොත්තමක් ආකාරයෙන් පෙන්නුම් කරන අතර මෙය click කිරීමෙන් සටහන් කල දත්ත server එකට pass කරනු ලබයි.
Button - බොත්තමක් පෙන්නුම් කරයි.
Image - පිංතුර දර්ශනය කරවීමට යොදා ගනී.
Radio - පරිශීලකයාට තේරීමක් කිරීම සදහා යොදයි.
Reset - මෙය බොත්තමක් ආකාරයෙන් පෙන්නුම් කරන අතර මෙය click කිරීමෙන් සටහන් කල දත්ත සියල්ල මැකී යයි.
Checkbox - පරිශීලකයාගෙ බහුවරණයන් සදහා යොදා ගනී.
Hidden - පරිශීලකයාට නොදැනුවත්වම සටහන් කරන දැ ලබා ගැනීමට.
Textarea
<textarea> සහ </textarea> යන tag තුල සටහන් කරනු ලබන අතර පරිෂීලකයගෙන් යම් විස්තරයක් ලබා ගැනීම සදහා යොදා ගනී.
<textarea name="description" cols="50" rows="10"></textarea>
HTML Frames
වෙබ් අඩවිය කොටස් වලට වෙන්කිරීමකට යොදා ගනී.
<html>
<head>
</head>
<frameset cols="30%,*">
<frame src="menu.html">
<frame src="content.html">
</frameset>
</html>
Image - පිංතුර දර්ශනය කරවීමට යොදා ගනී.
Radio - පරිශීලකයාට තේරීමක් කිරීම සදහා යොදයි.
Reset - මෙය බොත්තමක් ආකාරයෙන් පෙන්නුම් කරන අතර මෙය click කිරීමෙන් සටහන් කල දත්ත සියල්ල මැකී යයි.
Checkbox - පරිශීලකයාගෙ බහුවරණයන් සදහා යොදා ගනී.
Hidden - පරිශීලකයාට නොදැනුවත්වම සටහන් කරන දැ ලබා ගැනීමට.
Textarea
<textarea> සහ </textarea> යන tag තුල සටහන් කරනු ලබන අතර පරිෂීලකයගෙන් යම් විස්තරයක් ලබා ගැනීම සදහා යොදා ගනී.
<textarea name="description" cols="50" rows="10"></textarea>
HTML Frames
වෙබ් අඩවිය කොටස් වලට වෙන්කිරීමකට යොදා ගනී.
<html>
<head>
</head>
<frameset cols="30%,*">
<frame src="menu.html">
<frame src="content.html">
</frameset>
</html>
HTML Colors
රතු, කොල සහ නිල් යන වර්ණයන්ගෙ සංකලනයකින් දර්ශනය වේ. HTML colors රතු, කොල සහ නිල් (RGB) යන වර්ණයන්ට අදාල අගයන්ගෙ එකතුවෙන් සැදුනු hexadecimal (HEX) සංඛ්‍යාවකින් සටහන් කරයි.
#000000 - කලු
#ffffff - සුදු
වර්ණ වලට අදාල සම්මත නම් භාවිතා කරද වර්ණ යෙදිය හැක.
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, සහ yellow
ඉන් සමහරකි.
අදට ඈතී.....
No comments:
Post a Comment
හොදයි නම් කොමෙන්ට් කරලා යන්න අමතක කරන්න එපා