Click the bellow acordian    

සාමාන්‍ය පෙළ (Ordinary Level)

උසස් පෙළ (Advanced Level)


Paper And Special Note

All Right reseaved© Web Development By Namal Priyadarshana.

HTML මුල සිට සරලව ඉගෙනිමු

හතරවන පාඩම 04

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

19.පිටුවක පසු බිමට (background) පින්තූරයක් යෙදීම

පහත අයුරින් කේත ලිවිය හැක.
<body background="H:\sumana\image\2.jpg"></body>

Result:

මෙහිදී image එක තිබෙන ස්ථානය(path) නිවරදිව ලබා දිය යුතුයි.

20.වෙබ් පිටුවකට oudio සහ vedio එක් කරන ආකාරය

වෙබ් පිටුවකට වීඩියෝ දර්ශන ඇතුලත් කල හැකි ආ කාර 02කි. වෙබ් අඩවිය තුලම නැරබිය හැකි සේ අභ්‍යන්තර නැරබුම් සේ වීඩියෝ එක් කිරීම හා වෙනත් පිටුවකදී බැලිය හැකි වන සේ අධිසම්බන්ධක (hyper links) ලබා දෙමින් වීඩියෝ එකතු කිරීමයි. කියන ක්‍රම දෙකයි. පහත දක්වා ඇත්තේ අභ්‍යන්තර නැරබුම් සේ වීඩියෝ එකතු කල හැකි ආකාරයයි.

audio

<audio controls>
<source src="oudio/123.mp3" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
</audio>

Result:

Note: The audio tag is not supported in Internet Explorer 8 and earlier versions.

vedio

<video width="320" height="240" controls>
<source src="vedio/1.mp4" type="video/mp4">
<source src="1.ogg" type="video/ogg">
</video>

Result:

Note: The video tag is not supported in Internet Explorer 8 and earlier versions.

21.වෙබ් පිටුවක ලයිස්තූවක්(list) සකස් කිරීම

list වර්ග දෙකක් තියෙනවා
  1. unorder list
  2. order list
<ul>කියන්නෙ unorder list කියන වචබ දෙකේ මුල් අකුරු දෙකනෙ <ol> කියන්නෙ order list කියන වචන දෙකේ මුල් අකුරුනෙ. එතකොට ඔය ටැග් වර්ග දෙකේම ඇතුලෙ තියෙන <li> කියන්නෙ list item කියන වචන දෙකේ මුල් අකුරුනෙ. දැන් ඔය list වර්ග දෙක ගැන හොදට තේරෙන්න ඇති නේද?.
<ul type="circle">
<li>Mango</li>
<li>Banana</li>
<li>Pinaple</li>
<li>Avacado</li>
</ul>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol></ol>

Result:

unorded list

  • Mango
  • Banana
  • Pinaple
  • Avacado

orded list

  1. Coffee
  2. Tea
  3. Milk
unorder list වලදී මුලින් ඇති කේතය වෙනස් කිරීමට <ul type=""> හි type තුල අවශ්‍ය කේත සලකුනට අදාල වචනය යොදන්න. අදාල කේත පහත දැක්වේ.

<ul type=disc>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>

<ul type=circle>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>

<ul type=square>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>

<ul type=decimal>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>

<ul type=decimal-leading-zero>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>

<ul type=lower-roman>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>

<ul type=upper-roman>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>

<ul type=lower-greek>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>

<ul type=lower-latin>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>

<ul type=upper-latin>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>

<ul type=armenian>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>

<ul type=square>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>

<ul type=georgian>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>

<ul type=lower-alpha>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>

<ul type=upper-alpha>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item

22.HTML පිටුවක වචන චලනය කිරීම

මේ සදහා <marquee> ටැග් එක භාව්තා කරනු ලබයි.
<marquee behavior="scroll" direction="left" scrollamount="10">namal priyadarshana</marquee>
<marquee behavior="scroll" direction="left" scrollamount="20">namal priyadarshana</marquee>
<marquee behavior="scroll" direction="left" scrollamount="30">namal priyadarshana</marquee>
uee>

Result:

namal priyadarshana namal priyadarshana namal priyadarshana
scrollamount කියන වචනෙ අගය වැඩ් වන ව්ට වචන චගනය වන වේගය වැඩ් වන බව ඔබට පෙනෙනවා ඇති. රූපයක් චලනය කිරීමත් පහත අයුරින් සිදු කල හැක. direction එක right,top,bottom ලෙස දුන් විට අදාල දිශාවට චලනය වේ.
<marquee behavior="scroll" direction="left" scrollamount="10"><img src="image/1.jpg"></marquee>

23. සම්බන්දක යෙදීම(hyper links)

වෙබ් අඩව්යක් තවත් වෙබ් අඩව්යකට සව්බන්ධ කරන්නේ hyper links යෙදීමෙනි. මෙම සම්බන්ධක ප්‍රධාන වශයෙන් කොටස් තුනකට බෙදිය හැක.
  1. External links
  2. internal links
  3. Email links
මෙම බාහිර සම්බන්ධක යෙදීමට භාව්තා කරන්නේ Anchor නම් tag එකයි. මේ ආකාරයේ ලින්ක් එකක් මතට මවුස් එක ගෙන ගිය ව්ට mouse pointer එකෙහි හැඩය වෙනස් වේ. නැවත පෙර පිටුවට ඒම සදහා ස්ටෑන්ඩ්ඩට් ටූල් බාර් එකෙහි ඇති back button එක ක්ලික් කල යුතූය.
<a href="https://www.w3schools.com">w3 school</a>

Result:

w3 school

Recommended:


HTML basic

HTML for beginers

HTML developers

Full Web Design Course

අද අපි HTML ටැග් ගොඩක් දේවල් ඉගෙන ගත්තා දැන් ඕගොල්ලන්ට HTML ගැන සාමාන්‍ය දැනීමක් ඇති. HTML වල ඉගෙන ගන්න තව. ගොඩක් දේවල් තියෙනවා අපි තවත් පාඩමකින් හමු වෙමු. අපගේ මීලග පාඩම නැරබීමට මෙතනින් යන්න.

- Namal Priyadarshana.

All Right reseaved© Web Development By Namal Priyadarshana.
↑