අලුතින් HTML Lesson 05 [ For O/L,A/L ] :)

       උසස්පෙළ තොරතුරැ හා සන්නිවේදන තාක්ෂණෂය විෂයට අදාල HTML පාඩම් මාලාවේ 05 වෙනි පාඩමයි මේ අපි ඉදිරිපත් කරන්නේ. 

මෙම් පාඩමෙන් අපි බලමු කොහොමද වෙබ් පිටුවකට ලැයිස්තුවක් එකතු කර ගන්නේ කියලා. 

මෙහි දී ලැයිස්තු වරිග කිහිපයක්ම භාවිතා වෙනවා.

1. අනුක්‍රමික ලැයිස්තුව
2. අනුක්‍රමික නොවන ලැයිස්තුව
3. අර්ථ දැක්වීමේ ලැයිස්තුව

මුලින්ම අපි බලමු කොහොමද අනුක්‍රමික ලැයිස්තුවක් වෙබ් පිටුවකට එකතු කරගන්නේ කියලා.

අපි මෙය උදාහරණයක් ආශිතයෙන් ඉගෙනගමු.

<ol>

      <li> aluthin.com-softwares</li>

      <li> aluthin.com-games</li>

      <li> aluthin.com-education</li>

</ol>

මෙහි රතුපාටින් OL ටැග් එකෙහි ආරම්භය හා අවසානය පෙන්වනවා, එමගින් මෙම දනුක්‍රමික ආකාරයෙන් දිස්වීමට ඉඩ සලසනවා. නිල් පාටින් තිබෙන LI ටැග් එක අනුකමික ආකාරයෙන් දිසිවිට යුතු දත්තයන් නිරෑපනය කරනවා.

එනම් මෙම ඉහත HTML කේතයේ ප්‍රතිථලය මෙලෙස වේ.

OUTPUT :

01. aluthin.com-softwares

02. aluthin.com-games

03. aluthin.com-education

උදාහරණය 02 :---------------------

<ol type="i">

      <li> aluthin.com-softwares</li>

      <li> aluthin.com-games</li>

      <li> aluthin.com-education</li>

</ol>

උදාහරණය 01 හා සැසදීමේදී මෙම උදාහරණයේ එක් වෙනස් කමක් සිදු වී ඇත. එනම්, OL ටැග් එකට type="i" ලෙස Attributes එකක් එක් කර තිබේ. 

එමගින් සිදු වන්නේ , ඉහත LI ටැගයේ තිබෙන දත්තයන් , රෝම ඉලක්කම් මගින් අනුක්‍රමිකව වෙබ් පිටුවේ දර්ශණය වීමයි.

එම attributes එකෙහි වෙනත් භාවිත අවස්ථා :

type="i" - 

type="a"

type="A"

එනම් මෙම ඉහත HTML කේතයේ ප්‍රතිථලය මෙලෙස වේ.

OUTPUT :

I. aluthin.com-softwares
II. aluthin.com-games
III. aluthin.com-education

අප අද ඉගෙන ගත් දෑ භාවිතයෙන් පහත දර්ශනය වෙබ් පිටුවේ ලබා ගැනීමට අවශ්‍ය HTML කේතය ලිවීමට උත්සහ ගන්න. 

1. Coffee

     a. Milk Coffee

     b. ICE Coffee

2. Tea

     a. Green Tea

     b. Hot Tea

මේ සදහා අවශ්‍ය HTML කේතය ලියා HTML File එකක් ආකාරයෙන් Save කර , Preview එක බලන්න. ගැටලුවක් වේනම් අප වෙත එය යොමු කරන්න. 

මූලික අවබොධය ලබා ගැනීමට, මේ සම්බන්ධ මුල් HTML පාඩම් බලන්න.

පළමු වන HTML පාඩම -  GO
 දෙවන      HTML පාඩම -  GO
 තුන්වන    HTML පාඩම -  GO
සතර වන HTML පාඩම -  GO

ලිපි වල පූර්ණ අයිතිය අප සතුවේ..

All Right Reserved @ Aluthin.com

- Don't Copy Right -