Tuesday, May 17, 2016

html(hyper text markup language)-02 lesson

html පළමු පාඩමට මෙතනින් යන්න.

අකුරු subscript හා superscript කිරීම.
Subscript-අකුරු කුඩා කර පහලින් පෙන්වයි.

Ex:- <p>O<sub>2</sub></p>

Superscript-අකුරු කුඩා කර ඉහලින් පෙන්වයි.


Ex:- <p>2<sup>5</sub></p>


අකුරු වල ප්‍රමාණය සැකසීම.

<P> <font size=”7”>computer</font></p>


මෙහි size යනු font නම් tag එකෙහි උපලක්ෂණයකි(attribute).එම උපලක්ෂණය සදහා 1,2,3,4,5,6,7,8.. ආදී ලෙස අකුරු වල ප්‍රමාණයන් ලබා දිය හැක.

අකුරු වල එලයිමන්ට්(alignment) එක සෑදීම.

මෙයට align නැමැති attribute එක බාවිතා කරයි.

<p  align="center">This is 21st century</p>

මෙහි align නම් attribute එකෙහි සමාන ලකුණට පසුව center වෙනුවට left ලෙස ලබා දුන් විට ඡේදය වම පසට වෙන්නද,right ලෙස ලෙස ලබා දුන් විට ඡේදය දකුණු පසට වෙන්නද සැකසේ.

වෙබ් පිටුව තුල ලැයිස්තු පෙන්වීම.
  •   අනු පිළිවෙලට අංක යෙදීම (ordered list).

මෙයට <ol> නම් tag එක යටතේ <li> tag එක යොදා ගනී.
Ex:-

<ol>

<li>First ordered list element</li>

<li>Second ordered list element</li>

<li>Third ordered list element</li>


</ol>
  •    බුලට් සහිත පේළි ඇතුලත් කිරීම ( unordered list).

  මේ සදහා <li> tag එක <ul> tag එක යටතේ භාවිත කල යුතුය.

Ex:-

<ul>

<li>First unordered list element</li>

<li>Second unordered list element</li>

<li>Third unordered list element</li>

</ul>

  •       විස්තර සහිත ලැයිස්තුවක් සැකසීම.


ලැයිස්තුවක් සැකසීමේදී එහි ඇති එක් එක් කොටසක් ප්‍රධාන කර,ඒ යටතේ අනෙක් කොටස් දක්වීම සදහා මෙය යොදා ගත හැකිය.
මෙහි ප්‍රධාන tag 4ක් භාවිතා කෙරේ.

1.    <ul>-ලැයිස්තුව ආරම්භ වේ.
2.    <dl>-එය විස්තර සහිත ලැයිස්තුවක් බව දන්වයි.
3.    <dt>මාතෘකා හෙවත් පිටුවේ වම් පසෙන් තිබිය යුතු කරුණු.
4.    <dd>-තරමක් පිටුවේ ඇතුල් පැත්තෙන් තිබිය යුතු කරුණු.

Ex:
<ul>
 <dl>
     <dt>ICT</dt>
          <dd>python</dd>
    <dt>ET</dt>
          <dd>electronic</dd>

 </dl>
</ul>



වෙබ් පිටුවක පසුබිම සහ අකුරු සදහා වර්ණ යොදන අකාරය.

1.   පසුබිම සදහා වර්ණ යොදන අකාරය.

මෙය සදහා body tag එක සමග bgcolor නම් attribute එක  යොදා ගනු ලැබේ.

<body bgcolor="blue">

මෙහි blue  වෙනුවට වෙනත් වර්ණයන්ද යොදා ගත හැකිය.


උදා:- red ,skyblue ,green ,yellow..


1.   අකුරු වල වර්ණය වෙනස් කිරීම.

    මෙහිදී font tag එක සමගින් color නම් attribute එක යොදා ගත යුතුය.

     <p><font color="red">Techplus</font></p>



වෙබ් පිටුව තුල රූප යොදාගන්නා ආකාරය.

වෙබ් පිටුව තුල රූප පෙන්වීම සදහා පහත ආකාර වලින් එකකට වෙබ් පිටුව හා රූපය තිබිය යුතුය.

1.    එකම ගොනුවක(folder) වෙබ් පිටුව හා රූපය තිබීම.
2.    ප්‍රධානගොනුව තුල ඇති උපගොනුවක් තුල (Subfolder) රූපය තිබීම
3.    උපගොනුව තුල වෙබ් පිටුව තිබී ප්‍රධාන ගොනුවේ රූපය තිබීම.

රූපයක් වෙබ් පිටුව තුලට ඇතුලත් කරගැනීමේදී, <img> tag එක සමග src නම් attribute එක යොදාගෙන කේත ලිවිය යුතුය.



1.    එකම ගොනුවක(folder) වෙබ් පිටුව හා රූපය තිබීම.


Ex:- <img src="picture.jpg" alt="picture of srilanka"/


මෙහි alt ඉදිරියෙන් ලබා දෙනුයේ අදාල වෙබ් අතිරික්සුවේ(web browser) රූපය නොපෙනේ නම්,ඒ වෙනුවට පෙන්විය යුතු හැදින්වීමයි.

2.   ප්‍රධානගොනුව තුල ඇති උපගොනුවක් තුල (Subfolder) රූපය තිබීම

Ex:- <img src="image/picture.jpg" alt="picture of srilanka"/>
මෙහිදී රූපය ඇත්තේ image නම් උප ගොනුව(subfolder) තුලය.

3.   උපගොනුව තුල වෙබ් පිටුව තිබී ප්‍රධාන ගොනුවේ රූපය තිබීම.

Ex:- <img src="../picture.jpg" alt="picture of srilanka"/>

මෙහිදී ප්‍රධාන ගොනුව තුල ඇති picture.jpg නම් රූපය ඒ තුල වූ උප ගොනුවක අන්තගත වෙබ් පිටුවක සිට path එක ලබා දී ඇත.

වෙබ් පිටුවක රූප වල දිග හා පළල සැකසීම.

මෙයට  img tag එක තුල width , height නම් උපලක්ෂණ (attributes)යොදාගනී.ඒවා ඉදිරියෙන් ඍජුවම අගයන් ලබා දුන් විට රූපයේ දිග,පළල පික්සල්(px)වලින් පෙන්වයි.10%,20% ආදී ලෙස ප්‍රතිශතයක් ලෙස ලබා දුන් විට වෙබ් අතිරික්සුවේ(web browser)පළලින් හා උසෙන් ප්‍රතිශත ලෙස රූපය පෙන්වයි.

Ex-

<img src="picture.jpg" width="300" height="300" />
<img src="picture.jpg" width="20%" height="30%" />

රූපය වටා බෝඩරයක් (border) යෙදීම.

මෙය සඳහා border නම් attribute එක භාවිතා කරයි.බොඩරයේ ඝණකම pixel වලින් ලබා දිය හැක.


<img src="picture.jpg border=”2”>

රූපය මත මතුවන මාතෘකාවක් ලබාදීම.

මෙය සඳහා title නම් attribute එක භාවිතා කරයි.ඊට ඉදිරියෙන් කැමති වාක්‍යක් ලබා දිය හැක.


<img src="picture.jpg title=”temple of tooth”>



වෙබ් පිටුවේ පසුබිමට රූපයක් යෙදීම.

මෙහිදී සම්පුර්ණ වෙබ් පිටුව සඳහාම දෙන ලබන රූපය ටයිල් ආකාරයට පසුබිම සඳහා යොදා ගත හැක.


<body background="backgroundpic.jpg">



html තුන් වන කොටසින් හමු වෙමු..


Eranda dhanushka

0 comments:

Post a Comment

අපේ බ්ලොගේ එක ගැන අදහස් හා යෝජනා comment කරන්න...