html(hyper text markup language) සිංහලෙන් -03 lesson

html(hyper text markup language) සිංහලෙන්

html 02 පාඩම බැලුවේ නැත්තන් මෙතනින් යන්න

අධි සම්බන්දතා-Hyperlink

වෙබ් අඩවියක් නිර්මාණය වන්නේ වෙබ් පිටු රාශියක් එකතු වීමෙනි.එම වෙබ් පිටු එකතු කිරීම සඳහා hyperlinks යොදා ගනී.ඒ අනුව මෙහිදී සිදු වන්නේ එක් පිටුවක් තුල තවත් පිටු වෙත පිවිසුම් සැකසීමයි.එම පිවිසුම මත ක්ලික් කිරීමෙන් ඊට සම්බන්ධිත  පිටු වෙත පිවිසිය හැක.

මේ සඳහා <a> නම් tag එකත් path එක දැක්වීමට href නම් attribute එකත් යොදා ගනු ලැබේ.

අන්තර්ජාලයේ ඇති වෙබ් ලිපිනයකට hyperlink සැකසීම.

<a href=http://www.google.lk>GOOGLE</a>

පින්තුරුයක් සඳහා අධි සම්බන්දයක්(hyperlink)යොදන ආකාරය.

අකුරු සඳහා link ලබා දෙන ආකාරයට සමාන අයුරින් රූප සඳහා ඩ link යෙදිය හැක.වෙබ් පිටු තුල අලංකාර බටන්(button) ආදිය ඇත්තේ රූප ලිංක් ලෙසය.එහිදී ග්‍රැෆික් මෘදුකාංගයක් මඟින් අදාළ බටන් එක නිර්මාණය කර එය ලිංක් එකක් සේ වෙබ් පිටුවේ භාවිතා කරයි.

<a href=”www.facebook.html”><img src=”fb_button.jpg”></a>

Comment

කමෙන්ට් එකක් යනු,වැඩසටහන තුල ඇති නමුත් ක්‍රියාත්මක නොවන අකුරු පේලියකි.එක් එක් කේත පිලිබඳ සටහන් කර තැබීමට මේවා වැඩි වශයෙන් භාවිතා කරයි.තවද අවශ්‍ය විට කේත තාවකාලිකව අක්‍රිය කර තැබීමට ද කමෙන්ට් යොදා ගනී. comment භාවිත කරන ආකාරය පිළිබදව පහත කේත වෙත අවදානය යොමු කරමු.

<!--This is a comment--> 

වෙන් කර ඇති අක්ෂර.

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

<h1>&lt;eranda&gt</h1>

වෙබ් පිටුවේ තිරස් අතට රෙඛාවක් නිර්මාණය කිරීම.

<hr/>

<hr width=”50%” size=”4” color=”blue”>

මෙහිදී මුලිනම් යොදා ඇති <hr/>යන්න මඟින් වෙබ් අතිරික්සුවේ සම්පුර්ණ පළලම භාවිතා කරමින් රේඛාවක් අඳිනු ලැබේ.

ඉහත දෙවැනි කේතයේ ඇති width=”50%”යන attribute එක මඟින් යොදනු ලබන රේඛාවේ පළල තීරණය කරයි.එහිදී පිටුවේ පළලින් 50% ක් ලෙස සකසා  ඇත.  එහි size ලෙස දක්වා ඇත්තේ රේඛාවේ ඝනකමයි.

වෙබ් පිටුව තුල වීඩියෝ(video)ධාවනය කිරීම

<video width=”500” height=”400” controls>

<source src=”video.mp4” type=”video/mp4”>

</video>

වෙබ් පිටුව තුල ඕඩියෝ(audio) ධාවනය කිරීම

<audio controls>

<source src=”song.mp3” type=”audio/mpeg”>

</audio>

video සහ audio tag වල controls නමින් attribute එකක් දමන්නේ web browser  එක තුල video සහ audio පෙන්වන විට පරිශීලකයා හට පාලක බොත්තම් (control buttons)පෙන්වීමටයි.

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

Eranda Dhanushka

Read More

html(hyper text markup language)-02 lesson

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

අකුරු subscript හා superscript කිරීම.

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

Ex:- <p>O₂</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

Read More